From 4e8d02616ad33d996c538036d26250753749ff61 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Tue, 13 Mar 2018 23:30:09 +0100
Subject: [PATCH] Started working on company previews

---
 pages/companies/popular.go      |  2 +-
 pages/companies/popular.pixy    | 11 ++++++++---
 pages/companies/popular.scarlet | 31 +++++++++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 pages/companies/popular.scarlet

diff --git a/pages/companies/popular.go b/pages/companies/popular.go
index 34dba397..028c85a0 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 = 50
+const maxPopularCompanies = 60
 
 // Popular renders the best companies.
 func Popular(ctx *aero.Context) string {
diff --git a/pages/companies/popular.pixy b/pages/companies/popular.pixy
index 7ecc1ac1..5aeeeb3f 100644
--- a/pages/companies/popular.pixy
+++ b/pages/companies/popular.pixy
@@ -3,7 +3,7 @@ component PopularCompanies(companies []*arn.Company, nextIndex int, user *arn.Us
 
 	h1.page-title Popular companies
 
-	ol#load-more-target.companies
+	ol#load-more-target.popular-companies
 		PopularCompaniesScrollable(companies, user)
 
 	if nextIndex != -1
@@ -12,6 +12,11 @@ component PopularCompanies(companies []*arn.Company, nextIndex int, user *arn.Us
 
 component PopularCompaniesScrollable(companies []*arn.Company, user *arn.User)
 	each company in companies
-		li.company.mountable
-			a.ajax(href=company.Link())= company.Name.English
+		li.popular-company.mountable
+			a.popular-company-name.ajax(href=company.Link())
+				.popular-company-icon
+					Icon("building")
+				
+				span= company.Name.English
+			
 			//- span= " (" + strconv.Itoa(popularity[company.ID]) + ")"
\ No newline at end of file
diff --git a/pages/companies/popular.scarlet b/pages/companies/popular.scarlet
new file mode 100644
index 00000000..cc5d97d0
--- /dev/null
+++ b/pages/companies/popular.scarlet
@@ -0,0 +1,31 @@
+.popular-companies
+	horizontal-wrap
+	justify-content space-evenly
+
+.popular-company
+	display flex
+	width 100%
+	max-width 500px
+	margin 0
+	margin-bottom calc(content-padding / 4)
+	padding 0.5rem 0.75rem
+	ui-element
+
+.popular-company-icon
+	//
+
+.popular-company-name
+	horizontal
+	align-items center
+	clip-long-text
+
+.popular-company-anime-preview
+	flex 1
+
+> 900px
+	.popular-company
+		height 50px
+		padding 0.75rem 1rem
+
+	.popular-company-name
+		font-size 1.3rem
\ No newline at end of file