Improved groups

pages/groups/groups.go

@@ -2,6 +2,7 @@ package groups
 
 import (
 	"net/http"
+	"sort"
 
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/arn"
@@ -9,6 +10,8 @@ import (
 	"github.com/animenotifier/notify.moe/utils"
 )
 
+const groupsPerPage = 12
+
 // Get ...
 func Get(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
@@ -17,9 +20,21 @@ func Get(ctx *aero.Context) string {
 		return !group.IsDraft
 	})
 
+	sort.Slice(groups, func(i, j int) bool {
+		if len(groups[i].Members) == len(groups[j].Members) {
+			return groups[i].Created > groups[j].Created
+		}
+
+		return len(groups[i].Members) > len(groups[j].Members)
+	})
+
+	if len(groups) > groupsPerPage {
+		groups = groups[:groupsPerPage]
+	}
+
 	if err != nil {
 		return ctx.Error(http.StatusInternalServerError, "Error fetching groups", err)
 	}
 
-	return ctx.HTML(components.Groups(groups, user))
+	return ctx.HTML(components.Groups(groups, groupsPerPage, user))
 }

pages/groups/groups.pixy

@@ -1,4 +1,4 @@
-component Groups(groups []*arn.Group, user *arn.User)
+component Groups(groups []*arn.Group, groupsPerPage int, user *arn.User)
 	.tabs
 		Tab("Groups", "users", "/groups")
 
@@ -15,11 +15,17 @@ component Groups(groups []*arn.Group, user *arn.User)
 					Icon("pencil")
 					span Edit draft
 
-	.groups
+	#load-more-target.groups
 		each group in groups
-			.group
-				h3.group-name= group.Name
-				.group-tagline= group.Tagline
-				.group-member-count
-					Icon("user")
-					span= len(group.Members)
+			a.group.mountable.ajax(href=group.Link())
+				img.group-image.lazy(data-src=group.ImageURL(), alt=group.Name)
+				.group-info
+					h3.group-name= group.Name
+					.group-tagline= group.Tagline
+					.group-member-count
+						Icon("user")
+						span= len(group.Members)
+	
+	if len(groups) == groupsPerPage
+		.buttons
+			LoadMore(groupsPerPage)

pages/groups/groups.scarlet

@@ -1,15 +1,32 @@
+group-padding-y = 0.75rem
+group-padding-x = 0.75rem
+
 .groups
 	horizontal-wrap
 	justify-content space-around
 
 .group
-	vertical
+	horizontal
 	ui-element
 	position relative
 	width 100%
-	max-width 500px
-	padding 0.5rem 1rem
+	max-width 520px
+	padding group-padding-y group-padding-x
 	margin calc(content-padding / 2)
+	color text-color
+
+	:hover
+		color white
+		background-color rgb(60, 60, 60)
+
+.group-image
+	width 70px
+	height 70px
+	margin-right 1rem
+	border-radius ui-element-border-radius
+
+.group-info
+	vertical
 
 .group-name
 	horizontal

pages/soundtrack/soundtrack.pixy

@@ -38,7 +38,7 @@ component Track(track *arn.SoundTrack)
 				span Posted 
 				span.utc-date(data-date=track.Created)
 				span  by 
-				span= track.CreatedByUser().Nick
+				span= track.Creator().Nick
 			
 			span .