New companies page

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))
 }

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]) + ")"

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
+		height popular-company-height
-		max-height 200px
+		max-height popular-company-height
 		padding 0.75rem 1rem
 		margin calc(content-padding / 2)
 

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)
+			CompanyAnimes("Animated:", studioAnime, user)
-			CompanyAnime("Produced:", producedAnime, user)
+			CompanyAnimes("Produced:", producedAnime, user)
-			CompanyAnime("Licensed:", licensedAnime, 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))
+				CompanyAnime(anime, 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 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

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
+}