Make user lists use the new card design

mixins/UserCard.pixy

@@ -1,5 +1,5 @@
 component UserCard(user *arn.User, note string)
-	a.user-card(href=user.Link(), data-pro=user.IsPro())
+	a.user-card.mountable(href=user.Link(), data-pro=user.IsPro())
 		.user-card-avatar
 			AvatarNoLink(user)
 		.user-card-info

pages/users/editors.pixy

@@ -2,20 +2,9 @@ component EditorRankingList(users []*arn.User, idToScore map[string]int, url str
 	h1.page-title Editor ranking list
 	UsersTabs(url)
 
-	table.ranking-list
+	.user-cards
-		thead
+		each user in users
-			tr.mountable
+			UserCard(user, fmt.Sprintf("%s points", humanize.Comma(int64(idToScore[user.ID]))))
-				th #
-				th User
-				th.ranking-score Score
-		tbody
-			for index, user := range users
-				tr.ranking.mountable
-					td= fmt.Sprint(index + 1) + "."
-					td.ranking-user
-						Avatar(user)
-						a.ranking-user-nick(href=user.Link())= user.Nick
-					td.ranking-score= idToScore[user.ID]
 	
 	.footer.mountable
 		p Score is generated from new data submissions and data fixes.

pages/users/ffxiv.pixy

@@ -2,22 +2,7 @@ component FinalFantasyXIVRankingList(users []*arn.User, url string)
 	h1.page-title Final Fantasy XIV ranking list
 	UsersTabs(url)
 	
-	table.ranking-list
+	.user-cards
-		thead
+		each user in users
-			tr.mountable
+			UserCard(user, fmt.Sprintf("%s (iLvl %d)", user.Accounts.FinalFantasyXIV.Class, user.Accounts.FinalFantasyXIV.ItemLevel))
-				th #
-				th Player
-				th.ranking-class Class
-				th.ranking-level Level
-				th.ranking-score Item Level
-		tbody
-			for index, user := range users
-				tr.ranking.mountable
-					td= fmt.Sprint(index + 1) + "."
-					td.ranking-user
-						Avatar(user)
-						a.ranking-user-nick(href=user.Link())= user.Nick
-					td.ranking-class= user.Accounts.FinalFantasyXIV.Class
-					td.ranking-level= strconv.Itoa(user.Accounts.FinalFantasyXIV.Level)
-					td.ranking-score= strconv.Itoa(user.Accounts.FinalFantasyXIV.ItemLevel)
 				

pages/users/osu.pixy

@@ -2,20 +2,7 @@ component OsuRankingList(users []*arn.User, url string)
 	h1.page-title osu! ranking list
 	UsersTabs(url)
 
-	table.ranking-list
+	.user-cards
-		thead
+		each user in users
-			tr.mountable
+			UserCard(user, fmt.Sprintf("%s pp (%.1f%%)", humanize.Comma(int64(user.Accounts.Osu.PP + 0.5)), user.Accounts.Osu.Accuracy))
-				th #
-				th Player
-				th.ranking-score Performance
-				th.ranking-accuracy Accuracy
-		tbody
-			for index, user := range users
-				tr.ranking.mountable
-					td= fmt.Sprint(index + 1) + "."
-					td.ranking-user
-						Avatar(user)
-						a.ranking-user-nick(href=user.Link())= user.Nick
-					td.ranking-score= fmt.Sprint(int(user.Accounts.Osu.PP + 0.5)) + " pp"
-					td.ranking-accuracy= fmt.Sprintf("%.1f", user.Accounts.Osu.Accuracy) + "%"
 				

pages/users/overwatch.pixy

@@ -2,20 +2,7 @@ component OverwatchRankingList(users []*arn.User, url string)
 	h1.page-title Overwatch ranking list
 	UsersTabs(url)
 	
-	table.ranking-list
+	.user-cards
-		thead
+		each user in users
-			tr.mountable
+			UserCard(user, fmt.Sprintf("%s (%d SR)", strings.Title(user.Accounts.Overwatch.Tier), user.Accounts.Overwatch.SkillRating))
-				th #
-				th Player
-				th.ranking-tier Tier
-				th.ranking-score Rating
-		tbody
-			for index, user := range users
-				tr.ranking.mountable
-					td= fmt.Sprint(index + 1) + "."
-					td.ranking-user
-						Avatar(user)
-						a.ranking-user-nick(href=user.Link())= user.Nick
-					td.ranking-tier= strings.Title(user.Accounts.Overwatch.Tier)
-					td.ranking-score= strconv.Itoa(user.Accounts.Overwatch.SkillRating) + " SR"
 				

pages/users/ranking.scarlet

@@ -1,27 +0,0 @@
-.ranking-list
-	width auto
-
-.ranking
-	width 100%
-
-	td
-		vertical-align middle
-
-.ranking-user
-	horizontal
-	align-items center
-
-	.user-image
-		width calc(avatar-size / 2)
-		height calc(avatar-size / 2)
-
-	.user-pro-icon
-		font-size calc(user-pro-icon-size / 2)
-
-.ranking-user-nick
-	margin-left 0.8rem
-
-.ranking-score,
-.ranking-accuracy,
-.ranking-level
-	text-align right

pages/users/user-cards.scarlet

@@ -10,14 +10,16 @@ const user-card-padding = 1rem
 	padding user-card-padding
 	margin 0.4rem
 	width 100%
-	box-shadow shadow-light
+	height calc(avatar-size + user-card-padding * 2)
 
 	:hover
-		box-shadow shadow-medium
+		border 1px solid input-focus-border-color
+		// TODO: Replace with alpha(main-color, 20%) function
+		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
 
 > 600px
 	.user-card
-		max-width 200px
+		max-width 230px
 
 .user-card-avatar
 	.user-image
@@ -33,6 +35,7 @@ const user-card-padding = 1rem
 	clip-long-text
 
 .user-card-note
+	clip-long-text
 	color text-color
 	text-shadow none
 	opacity 0.5

pages/users/users.go

@@ -97,10 +97,6 @@ func Osu(ctx aero.Context) error {
 		return users[i].Accounts.Osu.PP > users[j].Accounts.Osu.PP
 	})
 
-	if len(users) > 10 {
-		users = users[:10]
-	}
-
 	return ctx.HTML(components.OsuRankingList(users, ctx.Path()))
 }
 
@@ -115,10 +111,6 @@ func Overwatch(ctx aero.Context) error {
 		return users[i].Accounts.Overwatch.SkillRating > users[j].Accounts.Overwatch.SkillRating
 	})
 
-	if len(users) > 10 {
-		users = users[:10]
-	}
-
 	return ctx.HTML(components.OverwatchRankingList(users, ctx.Path()))
 }
 
@@ -133,10 +125,6 @@ func FFXIV(ctx aero.Context) error {
 		return users[i].Accounts.FinalFantasyXIV.ItemLevel > users[j].Accounts.FinalFantasyXIV.ItemLevel
 	})
 
-	if len(users) > 10 {
-		users = users[:10]
-	}
-
 	return ctx.HTML(components.FinalFantasyXIVRankingList(users, ctx.Path()))
 }
 

pages/users/users.pixy

@@ -2,7 +2,7 @@ component Users(users []*arn.User, followerCount map[string]int, url string)
 	h1.page-title Users
 	UsersTabs(url)
 
-	.user-cards.mountable
+	.user-cards
 		each user in users
 			UserCard(user, stringutils.Plural(followerCount[user.ID], "follower"))
 
@@ -12,7 +12,7 @@ component UsersByCountry(users []*arn.User, followerCount map[string]int, countr
 	else
 		h1= "Users in " + users[0].Location.CountryName
 
-		.user-cards.mountable
+		.user-cards
 			each user in users
 				UserCard(user, stringutils.Plural(followerCount[user.ID], "follower"))
 
@@ -20,12 +20,9 @@ component ProUsers(users []*arn.User, url string)
 	h1.page-title Supporters
 	UsersTabs(url)
 
-	.pro-avatars
+	.user-cards
 		each user in users
-			a.profile-image-container.mountable(href=user.Link())
+			UserCard(user, "until " + user.ProExpires[:10])
-				ProfileImage(user)
-				.image-title
-					.image-title-text= user.Nick
 	
 	.footer.mountable
 		p We are thankful to everyone supporting the site!
@@ -37,10 +34,9 @@ component UserLists(groups []*utils.UserList, url string)
 	each group in groups
 		h3.user-list-name.mountable= group.Name
 
-		.user-avatars
+		.user-cards
 			each user in group.Users
-				.mountable
+				UserCard(user, stringutils.Capitalize(user.Role))
-					Avatar(user)
 
 component StaffRecruitment
 	.footer.mountable

pages/users/users.scarlet

@@ -6,23 +6,6 @@
 	.user
 		margin 0.4rem
 
-.pro-avatars
-	horizontal-wrap
-	justify-content center
-
-	.profile-image-container
-		flex-basis 170px
-		flex-grow 0
-		height 230px
-		margin content-padding-half
-		position relative
-		border ui-border
-		box-shadow shadow-light
-
-		:hover
-			.image-title
-				opacity 1
-
 .user
 	display flex
 	position relative