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