New style for groups

images/groups/large/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

pages/group/edit.go

@@ -26,7 +26,7 @@ func Edit(ctx *aero.Context) string {
 		member = group.FindMember(user.ID)
 	}
 
-	return ctx.HTML(components.GroupTabs(group, member, user) + editform.Render(group, "Edit group", user))
+	return ctx.HTML(components.GroupHeader(group, member, user) + editform.Render(group, "Edit group", user))
 }
 
 // EditImage renders the form to edit the group images.

pages/group/feed.pixy

@@ -1,16 +1,5 @@
 component GroupFeed(group *arn.Group, member *arn.GroupMember, user *arn.User)
-	GroupTabs(group, member, user)
+	GroupHeader(group, member, user)
-	
-	.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-feed

pages/group/group.scarlet

@@ -7,8 +7,43 @@
 .group-feed
 	flex 1
 
+.group-avatar-container
+	display flex
+	justify-content center
+
+.group-avatar
+	width 280px
+	height 280px
+	border-radius ui-element-border-radius
+	object-fit cover
+
 .group-header
-	margin-bottom content-padding
+	vertical
+	cover-image-container
+	align-items center
+
+.group-header-intro
+	vertical
+	align-self center
+	align-items center
+	margin-top content-padding
+
+> 800px
+	.group-header
+		horizontal
+
+	.group-header-intro
+		margin-top 0
+		margin-left calc(content-padding * 2)
+		align-self flex-start
+		align-items flex-start
+
+	.group-page-name
+		margin-top 0
+
+	.group-page-name,
+	.group-page-tagline
+		text-align left
 
 .group-page-name
 	margin 0
@@ -17,4 +52,4 @@
 	text-align center
 
 	&.mounted
-		opacity 0.6 !important
+		opacity 0.7 !important

pages/group/header.pixy

@@ -0,0 +1,40 @@
+component GroupHeader(group *arn.Group, member *arn.GroupMember, user *arn.User)
+	.group-header
+		img.profile-cover.lazy(data-src="/images/elements/default-group-cover.jpg", data-webp="true", alt="Cover image")
+		
+		.group-avatar-container
+			img.group-avatar.group-image-input-preview.lazy(data-src=group.ImageLink("large"), data-webp="true", data-color=group.AverageColor(), alt=group.Name)
+
+		.group-header-intro
+			if group.Name != ""
+				h1.group-page-name.mountable.never-unmount= group.Name
+			else
+				h1.group-page-name.mountable.never-unmount untitled
+
+			if group.Tagline != ""
+				p.group-page-tagline.mountable.never-unmount= group.Tagline
+			else
+				p.group-page-tagline.mountable.never-unmount no tagline yet
+			
+			.profile-tags-container
+				.profile-tags
+					a.profile-tag.mountable.never-unmount.action(href=group.Link() + "/members", data-action="diff", data-trigger="click")
+						Icon("user")
+						span= stringutils.Plural(len(group.Members), "member")
+					
+					each tag in group.Tags
+						.profile-tag.mountable.never-unmount
+							Icon("tag")
+							span= tag
+		
+		.profile-actions(data-api="/api" + group.Link())
+			if member == nil
+				button.profile-action.action.mountable.never-unmount(data-action="join", data-trigger="click")
+					Icon("user-plus")
+					span Join group
+			else
+				button.profile-action.action.mountable.never-unmount(data-action="leave", data-trigger="click")
+					Icon("user-times")
+					span Leave group
+	
+	GroupTabs(group, member, user)

pages/group/history.go

@@ -17,5 +17,5 @@ func renderHistory(obj interface{}, entries []*arn.EditLogEntry, user *arn.User)
 		member = group.FindMember(user.ID)
 	}
 
-	return components.GroupTabs(group, member, user) + components.EditLog(entries, user)
+	return components.GroupHeader(group, member, user) + components.EditLog(entries, user)
 }

pages/group/image.pixy

@@ -1,5 +1,5 @@
 component EditGroupImage(group *arn.Group, member *arn.GroupMember, user *arn.User)
-	GroupTabs(group, member, user)
+	GroupHeader(group, member, user)
 
 	.widget-form
 		h1.mountable Edit group image

pages/group/info.pixy

@@ -1,5 +1,5 @@
 component GroupInfo(group *arn.Group, member *arn.GroupMember, user *arn.User)
-	GroupTabs(group, member, user)
+	GroupHeader(group, member, user)
 	h1.page-title= fmt.Sprintf("%s - Info", group.Name)
 
 	.group-view
@@ -13,14 +13,6 @@ component GroupInfo(group *arn.Group, member *arn.GroupMember, user *arn.User)
 				h3.mountable Rules
 				.group-rules.mountable!= markdown.Render(group.Rules)
 		
-		if len(group.Tags) > 0
-			.group-info-section
-				h3.mountable Tags
-
-				.tags.group-tags.mountable
-					each tag in group.Tags
-						.tag= tag
-		
 		.group-info-section
 			h3.mountable Founder
 			.user-avatars.group-founder.mountable

pages/group/members.pixy

@@ -1,17 +1,7 @@
 component GroupMembers(group *arn.Group, member *arn.GroupMember, user *arn.User)
-	GroupTabs(group, member, user)
+	GroupHeader(group, member, user)
 	h1.page-title= fmt.Sprintf("%s - Members", group.Name)
 
 	.user-avatars.group-members.mountable
 		each member in group.Members
 			Avatar(member.User())
-	
-	.buttons(data-api="/api" + group.Link())
-		if member == nil
-			button.mountable.action(data-action="join", data-trigger="click")
-				Icon("user-plus")
-				span Join group
-		else
-			button.mountable.action(data-action="leave", data-trigger="click")
-				Icon("user-times")
-				span Leave group

pages/group/tabs.pixy

@@ -1,8 +1,8 @@
 component GroupTabs(group *arn.Group, member *arn.GroupMember, user *arn.User)
-	.tabs
+	.tabs.mountable.never-unmount
 		Tab("Posts", "comment", group.Link())
 		Tab("Info", "info-circle", group.Link() + "/info")
-		Tab("Members", "globe", group.Link() + "/members")
+		Tab("Members", "user", group.Link() + "/members")
 
 		if member != nil && member.Role == "founder"
 			Tab("Edit", "pencil", group.Link() + "/edit")

pages/profile/profile.scarlet

@@ -2,22 +2,11 @@ const profile-image-size = 280px
 
 .profile-head
 	vertical
+	cover-image-container
 	align-items center
-
-	position relative
-	left calc(content-padding * -1)
-	top calc(content-padding-top * -1)
-	min-width calc(100% + content-padding * 2)
-	padding calc(content-padding * 2)
-
-	color white
-	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
-
 	// default-transition
 	// animation appear transition-speed
 
-	overflow hidden
-
 .profile-info
 	vertical
 	margin-top calc(content-padding * 1.5)

scripts/AnimeNotifier.ts

@@ -1098,16 +1098,16 @@ export default class AnimeNotifier {
 	scrollTo(target: HTMLElement) {
 		const duration = 250.0
 		const fullSin = Math.PI / 2
-		const contentPadding = 24
+		const contentPadding = 23
 
 		let newScroll = 0
-		let finalScroll = Math.max(target.offsetTop - contentPadding, 0)
+		let finalScroll = Math.max(target.getBoundingClientRect().top - contentPadding, 0)
 
 		// Calculating scrollTop will force a layout - careful!
 		let oldScroll = this.app.content.parentElement.scrollTop
 		let scrollDistance = finalScroll - oldScroll
 
-		if(scrollDistance > 0 && scrollDistance < 4) {
+		if(scrollDistance > 0 && scrollDistance < 1) {
 			return
 		}
 

styles/content.scarlet

@@ -1,5 +1,4 @@
 #content
 	vertical
 	padding content-padding
-	padding-top content-padding-top
 	line-height content-line-height

styles/include/config.scarlet

@@ -121,8 +121,8 @@ outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
 
 // Distances
 const content-padding = 1.6rem
-const content-padding-top = 1.6rem
 const content-padding-half = calc(content-padding / 2)
+const content-padding-negative = calc(content-padding * -1)
 const content-line-height = 1.7em
 const typography-margin = 0.4rem
 const media-bottom-margin = 2rem

styles/mixins/cover-image.scarlet

@@ -0,0 +1,9 @@
+mixin cover-image-container
+	position relative
+	left content-padding-negative
+	top content-padding-negative
+	min-width calc(100% + content-padding * 2)
+	padding calc(content-padding * 2)
+	color white
+	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
+	overflow hidden

styles/status-message.scarlet

@@ -4,6 +4,7 @@
 	bottom 0
 	left 0
 	width 100%
+	line-height content-line-height
 	padding content-padding-half content-padding
 	pointer-events none
 	z-index 1000
@@ -18,6 +19,9 @@
 .status-message-action
 	color white !important
 	pointer-events auto !important
+	display flex
+	justify-content center
+	align-items center
 
 .error-message
 	color white