diff --git a/pages/companies/popular.go b/pages/companies/popular.go index 028c85a0..5ae13aa4 100644 --- a/pages/companies/popular.go +++ b/pages/companies/popular.go @@ -8,7 +8,7 @@ import ( "github.com/animenotifier/notify.moe/utils/infinitescroll" ) -const maxPopularCompanies = 60 +const maxPopularCompanies = 25 // Popular renders the best companies. func Popular(ctx *aero.Context) string { @@ -31,11 +31,14 @@ func Popular(ctx *aero.Context) string { // Next index nextIndex := infinitescroll.NextIndex(ctx, len(allCompanies), maxPopularCompanies, index) + // Get company to anime map + companyToAnime := arn.GetCompanyToAnimeMap() + // In case we're scrolling, send companies only (without the page frame) if index > 0 { - return ctx.HTML(components.PopularCompaniesScrollable(companies, user)) + return ctx.HTML(components.PopularCompaniesScrollable(companies, companyToAnime, user)) } // Otherwise, send the full page - return ctx.HTML(components.PopularCompanies(companies, nextIndex, user)) + return ctx.HTML(components.PopularCompanies(companies, companyToAnime, nextIndex, user)) } diff --git a/pages/companies/popular.pixy b/pages/companies/popular.pixy index 49bd67b6..b7ad695d 100644 --- a/pages/companies/popular.pixy +++ b/pages/companies/popular.pixy @@ -1,25 +1,27 @@ -component PopularCompanies(companies []*arn.Company, nextIndex int, user *arn.User) +component PopularCompanies(companies []*arn.Company, companyToAnime map[string][]*arn.Anime, nextIndex int, user *arn.User) CompaniesTabs(user) h1.page-title Popular companies ol#load-more-target.popular-companies - PopularCompaniesScrollable(companies, user) + PopularCompaniesScrollable(companies, companyToAnime, user) if nextIndex != -1 .buttons LoadMore(nextIndex) -component PopularCompaniesScrollable(companies []*arn.Company, user *arn.User) +component PopularCompaniesScrollable(companies []*arn.Company, companyToAnime map[string][]*arn.Anime, user *arn.User) each company in companies li.popular-company.mountable a.popular-company-header.ajax(href=company.Link()) Icon("building") span.popular-company-name= company.Name.English - p.popular-company-body.popular-company-description= company.Description + p.popular-company-body.popular-company-description(href=company.Link())= company.Description .popular-company-footer - p Test. + .company-anime + each anime in utils.MaxAnime(companyToAnime[company.ID], 13) + CompanyAnime(anime, user) //- span= " (" + strconv.Itoa(popularity[company.ID]) + ")" \ No newline at end of file diff --git a/pages/companies/popular.scarlet b/pages/companies/popular.scarlet index ee7722d9..b40ccf1d 100644 --- a/pages/companies/popular.scarlet +++ b/pages/companies/popular.scarlet @@ -1,3 +1,5 @@ +const popular-company-height = 250px + .popular-companies horizontal-wrap justify-content space-evenly @@ -7,7 +9,7 @@ width 100% max-width 800px margin 0 - margin-bottom calc(content-padding / 4) + margin-bottom calc(content-padding / 2) padding 0.5rem 0.75rem overflow hidden ui-element @@ -21,6 +23,16 @@ .popular-company-footer flex 0.2 + .company-anime + flex-flow row + overflow hidden + + .company-anime-item + opacity 0.75 + + :hover + opacity 1 + .popular-company-description clip-long-text @@ -35,8 +47,8 @@ > 900px .popular-company - height 200px - max-height 200px + height popular-company-height + max-height popular-company-height padding 0.75rem 1rem margin calc(content-padding / 2) diff --git a/pages/company/company.pixy b/pages/company/company.pixy index 5b12847d..49ff9378 100644 --- a/pages/company/company.pixy +++ b/pages/company/company.pixy @@ -8,9 +8,9 @@ component CompanyPage(company *arn.Company, studioAnime, producedAnime, licensed .company-description.mountable div!= markdown.Render(company.Description) - CompanyAnime("Animated:", studioAnime, user) - CompanyAnime("Produced:", producedAnime, user) - CompanyAnime("Licensed:", licensedAnime, user) + CompanyAnimes("Animated:", studioAnime, user) + CompanyAnimes("Produced:", producedAnime, user) + CompanyAnimes("Licensed:", licensedAnime, user) .company-sidebar if company.Location.Latitude != 0 && company.Location.Longitude != 0 @@ -36,14 +36,18 @@ component CompanyPage(company *arn.Company, studioAnime, producedAnime, licensed //- each tag in company.Tags //- li= tag -component CompanyAnime(label string, animes []*arn.Anime, user *arn.User) +component CompanyAnimes(label string, animes []*arn.Anime, user *arn.User) if len(animes) > 0 - h3.mountable= label + if label != "" + h3.mountable= label .company-anime.mountable each anime in animes - a.company-anime-item.ajax(href=anime.Link(), title=anime.Title.ByUser(user)) - img.company-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) + CompanyAnime(anime, user) + +component CompanyAnime(anime *arn.Anime, user *arn.User) + a.company-anime-item.ajax(href=anime.Link(), title=anime.Title.ByUser(user)) + img.company-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user)) component CompanyTabs(company *arn.Company, user *arn.User) .tabs diff --git a/utils/MaxAnime.go b/utils/MaxAnime.go new file mode 100644 index 00000000..d0509f5c --- /dev/null +++ b/utils/MaxAnime.go @@ -0,0 +1,12 @@ +package utils + +import "github.com/animenotifier/arn" + +// MaxAnime limits the number of anime that will maximally be returned. +func MaxAnime(animes []*arn.Anime, maxLength int) []*arn.Anime { + if len(animes) > maxLength { + return animes[:maxLength] + } + + return animes +}