From e033e4cb73466569af471240fe4bad53ab7f12bd Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Tue, 27 Aug 2019 09:39:35 +0900
Subject: [PATCH] New design for the users page

---
 arn/UserHelper.go              |  4 +++-
 mixins/UserCard.pixy           |  7 +++++++
 pages/users/user-cards.scarlet | 38 ++++++++++++++++++++++++++++++++++
 pages/users/users.go           | 24 ++++-----------------
 pages/users/users.pixy         | 10 ++++-----
 5 files changed, 57 insertions(+), 26 deletions(-)
 create mode 100644 mixins/UserCard.pixy
 create mode 100644 pages/users/user-cards.scarlet

diff --git a/arn/UserHelper.go b/arn/UserHelper.go
index 687fcd75..689cf2ed 100644
--- a/arn/UserHelper.go
+++ b/arn/UserHelper.go
@@ -146,7 +146,7 @@ func SortUsersLastSeenLast(users []*User) {
 }
 
 // SortUsersFollowers sorts a list of users by their number of followers.
-func SortUsersFollowers(users []*User) {
+func SortUsersFollowers(users []*User) map[string]int {
 	followCount := UserFollowerCountMap()
 
 	sort.Slice(users, func(i, j int) bool {
@@ -163,4 +163,6 @@ func SortUsersFollowers(users []*User) {
 
 		return followersA > followersB
 	})
+
+	return followCount
 }
diff --git a/mixins/UserCard.pixy b/mixins/UserCard.pixy
new file mode 100644
index 00000000..80353bbd
--- /dev/null
+++ b/mixins/UserCard.pixy
@@ -0,0 +1,7 @@
+component UserCard(user *arn.User, note string)
+	a.user-card(href=user.Link(), data-pro=user.IsPro())
+		.user-card-avatar
+			AvatarNoLink(user)
+		.user-card-info
+			.user-card-nick= user.Nick
+			.user-card-note= note
\ No newline at end of file
diff --git a/pages/users/user-cards.scarlet b/pages/users/user-cards.scarlet
new file mode 100644
index 00000000..6764bde7
--- /dev/null
+++ b/pages/users/user-cards.scarlet
@@ -0,0 +1,38 @@
+const user-card-padding = 1rem
+
+.user-cards
+	horizontal-wrap
+	justify-content center
+
+.user-card
+	horizontal
+	ui-element
+	padding user-card-padding
+	margin 0.4rem
+	width 100%
+	box-shadow shadow-light
+
+	:hover
+		box-shadow shadow-medium
+
+> 800px
+	.user-card
+		max-width 180px
+
+.user-card-avatar
+	.user-image
+		border-radius ui-element-border-radius
+		box-shadow none
+
+.user-card-info
+	vertical
+	margin-left user-card-padding
+	overflow hidden
+
+.user-card-nick
+	clip-long-text
+
+.user-card-note
+	color text-color
+	text-shadow none
+	opacity 0.5
\ No newline at end of file
diff --git a/pages/users/users.go b/pages/users/users.go
index a680a7c5..077c9a70 100644
--- a/pages/users/users.go
+++ b/pages/users/users.go
@@ -16,8 +16,8 @@ func Active(ctx aero.Context) error {
 		return user.HasAvatar() && user.HasNick() && user.IsActive()
 	})
 
-	arn.SortUsersFollowers(users)
-	return ctx.HTML(components.Users(users, ctx.Path()))
+	followerCount := arn.SortUsersFollowers(users)
+	return ctx.HTML(components.Users(users, followerCount, ctx.Path()))
 }
 
 // Pro ...
@@ -82,24 +82,8 @@ func ActiveNoAvatar(ctx aero.Context) error {
 		return user.IsActive() && !user.HasAvatar()
 	})
 
-	followCount := arn.UserFollowerCountMap()
-
-	sort.Slice(users, func(i, j int) bool {
-		if users[i].HasAvatar() != users[j].HasAvatar() {
-			return users[i].HasAvatar()
-		}
-
-		followersA := followCount[users[i].ID]
-		followersB := followCount[users[j].ID]
-
-		if followersA == followersB {
-			return users[i].Nick < users[j].Nick
-		}
-
-		return followersA > followersB
-	})
-
-	return ctx.HTML(components.Users(users, ctx.Path()))
+	followCount := arn.SortUsersFollowers(users)
+	return ctx.HTML(components.Users(users, followCount, ctx.Path()))
 }
 
 // Osu ...
diff --git a/pages/users/users.pixy b/pages/users/users.pixy
index 3a49a931..0f3e9501 100644
--- a/pages/users/users.pixy
+++ b/pages/users/users.pixy
@@ -1,10 +1,10 @@
-component Users(users []*arn.User, url string)
+component Users(users []*arn.User, followerCount map[string]int, url string)
 	h1.page-title Users
 	UsersTabs(url)
 
-	.user-avatars.mountable
+	.user-cards.mountable
 		each user in users
-			Avatar(user)
+			UserCard(user, stringutils.Plural(followerCount[user.ID], "follower"))
 
 component UsersByCountry(users []*arn.User, countryName string)
 	if len(users) == 0
@@ -12,9 +12,9 @@ component UsersByCountry(users []*arn.User, countryName string)
 	else
 		h1= "Users in " + users[0].Location.CountryName
 
-		.user-avatars.mountable
+		.user-cards.mountable
 			each user in users
-				Avatar(user)
+				UserCard(user, "1 follower")
 
 component ProUsers(users []*arn.User, url string)
 	h1.page-title Supporters