Improved groups display on mobile

layout/sidebar/sidebar.pixy

@@ -43,8 +43,8 @@ component Sidebar(user *arn.User)
 		if user != nil
 			SidebarButton("Support", "/support", "heart")
 		
-		//- if arn.IsDevelopment()
-		//- 	SidebarButton("Groups", "/groups", "users")
+		if arn.IsDevelopment()
+			SidebarButton("Groups", "/groups", "users")
 
 		//- Disabled:
 		//- SidebarButton("Dash", "/dashboard", "tachometer")

pages/group/group.pixy

@@ -1,10 +1,16 @@
 component Group(group *arn.Group, user *arn.User)
 	GroupTabs(group, user)
 	
-	if group.Name != ""
-		h1.mountable= group.Name
-	else
-		h1.mountable untitled
+	.group-header
+		if group.Name != ""
+			h1.group-page-name.mountable= group.Name
+		else
+			h1.group-page-name.mountable untitled
+
+		if group.Tagline != ""
+			p.group-page-tagline.mountable= group.Tagline
+		else
+			p.group-page-tagline.mountable no tagline yet
 
 	.group-view
 		.group-sidebar.mountable

pages/group/group.scarlet

@@ -1,9 +1,8 @@
 .group-view
 	horizontal-wrap
 	width 100%
-	max-width 900px
+	max-width 1000px
 	margin 0 auto
-	border 1px solid red
 
 < 1100px
 	.group-view
@@ -11,10 +10,11 @@
 
 .group-feed
 	flex 1
-	padding 1rem
+	padding 0 1rem
 
 .group-sidebar
 	flex-basis 300px
+	max-width 300px
 
 .group-sidebar-section
 	ui-element
@@ -24,3 +24,15 @@
 .group-members
 	margin-bottom 0.5rem
 	justify-content flex-start
+
+.group-header
+	margin-bottom content-padding
+
+.group-page-name
+	margin 0
+
+.group-page-tagline
+	text-align center
+
+	&.mounted
+		opacity 0.6 !important

pages/groups/groups.scarlet

@@ -2,17 +2,18 @@ const group-padding-y = 0.75rem
 const group-padding-x = 0.75rem
 
 .groups
-	horizontal-wrap
-	justify-content space-around
+	display grid
+	grid-gap calc(content-padding / 2)
+	// grid-template-columns repeat(auto-fill, min(100%, 520px))
+	// justify-content center
 
 .group
 	horizontal
 	ui-element
 	position relative
-	width 100%
-	max-width 520px
+	// width 100%
+	// max-width 520px
 	padding group-padding-y group-padding-x
-	margin calc(content-padding / 2)
 	color text-color
 
 	:hover

styles/mixins/debug.scarlet

@@ -0,0 +1,2 @@
+mixin debug-border
+	border 1px solid red