New design for the users page

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
 }

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

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

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 ...

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