Improved group page design

mixins/Comments.pixy

@@ -5,7 +5,7 @@ component Comments(parent arn.PostParent, user *arn.User)
 				if arn.IsLocked(parent)
 					footer.footer.mountable
 						p.text-center= "This " + strings.ToLower(reflect.TypeOf(parent).Elem().Name()) + " is locked."
-				else
+				else if parent.TypeName() != "Group" || parent.(*arn.Group).FindMember(user.ID) != nil
 					NewPostArea(parent, user, "Comment")
 			
 			if user == nil && parent.CountPosts() == 0

pages/activity/activity.scarlet

@@ -12,9 +12,6 @@
 .activity-header
 	horizontal
 
-.activity-user
-	display none
-
 .activity-parent
 	flex 1
 

pages/group/edit.go

@@ -20,6 +20,12 @@ func Edit(ctx *aero.Context) string {
 		return ctx.Error(http.StatusNotFound, "Track not found", err)
 	}
 
+	var member *arn.GroupMember
+
+	if user != nil {
+		member = group.FindMember(user.ID)
+	}
+
 	ctx.Data = &arn.OpenGraph{
 		Tags: map[string]string{
 			"og:title":     group.Name,
@@ -28,5 +34,5 @@ func Edit(ctx *aero.Context) string {
 		},
 	}
 
-	return ctx.HTML(components.GroupTabs(group, user) + editform.Render(group, "Edit group", user))
+	return ctx.HTML(components.GroupTabs(group, member, user) + editform.Render(group, "Edit group", user))
 }

pages/group/feed.go

@@ -9,8 +9,8 @@ import (
 	"github.com/animenotifier/notify.moe/utils"
 )
 
-// Forum ...
+// Feed shows the group front page.
-func Forum(ctx *aero.Context) string {
+func Feed(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
 	id := ctx.Get("id")
 	group, err := arn.GetGroup(id)
@@ -19,5 +19,12 @@ func Forum(ctx *aero.Context) string {
 		return ctx.Error(http.StatusNotFound, "Group not found", err)
 	}
 
-	return ctx.HTML(components.GroupForum(group, user))
+	var member *arn.GroupMember
+
+	if user != nil {
+		member = group.FindMember(user.ID)
+	}
+
+	ctx.Data = getOpenGraph(ctx, group)
+	return ctx.HTML(components.GroupFeed(group, member, user))
 }

pages/group/feed.pixy

@@ -0,0 +1,17 @@
+component GroupFeed(group *arn.Group, member *arn.GroupMember, user *arn.User)
+	GroupTabs(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
+			Comments(group, user)

pages/group/forum.pixy

@@ -1,4 +0,0 @@
-component GroupForum(group *arn.Group, user *arn.User)
-	GroupTabs(group, user)
-	
-	h1 Forum

pages/group/group.pixy

@@ -1,42 +0,0 @@
-component Group(group *arn.Group, user *arn.User)
-	GroupTabs(group, 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-sidebar.mountable
-			if group.Description != ""
-				.group-sidebar-section
-					h3 Description
-					.group-description!= markdown.Render(group.Description)
-
-			if group.Rules != ""
-				.group-sidebar-section
-					h3 Rules
-					.group-rules!= markdown.Render(group.Rules)
-
-			.group-sidebar-section
-				h3 Members
-				.user-avatars.group-members
-					each member in group.Members
-						Avatar(member.User())
-		
-		.group-feed
-			Comments(group, user)
-
-component GroupTabs(group *arn.Group, user *arn.User)
-	.tabs
-		Tab("Group", "users", group.Link())
-		//- Tab("Forum", "comment", group.Link() + "/forum")
-
-		if user != nil && group.FindMember(user.ID) != nil && group.FindMember(user.ID).Role == "founder"
-			Tab("Edit", "pencil", group.Link() + "/edit")

pages/group/group.scarlet

@@ -1,7 +1,7 @@
 .group-view
 	horizontal-wrap
 	width 100%
-	max-width 1000px
+	max-width 900px
 	margin 0 auto
 
 < 1100px
@@ -10,16 +10,6 @@
 
 .group-feed
 	flex 1
-	padding 0 1rem
-
-.group-sidebar
-	flex-basis 300px
-	max-width 300px
-
-.group-sidebar-section
-	ui-element
-	padding 0.5rem 1rem
-	margin-bottom content-padding
 
 .group-members
 	margin-bottom 0.5rem

pages/group/info.go

@@ -9,8 +9,8 @@ import (
 	"github.com/animenotifier/notify.moe/utils"
 )
 
-// Get ...
+// Info shows the group information page.
-func Get(ctx *aero.Context) string {
+func Info(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
 	id := ctx.Get("id")
 	group, err := arn.GetGroup(id)
@@ -19,13 +19,12 @@ func Get(ctx *aero.Context) string {
 		return ctx.Error(http.StatusNotFound, "Group not found", err)
 	}
 
-	ctx.Data = &arn.OpenGraph{
+	var member *arn.GroupMember
-		Tags: map[string]string{
+
-			"og:title":     group.Name,
+	if user != nil {
-			"og:url":       "https://" + ctx.App.Config.Domain + group.Link(),
+		member = group.FindMember(user.ID)
-			"og:site_name": "notify.moe",
-		},
 	}
 
-	return ctx.HTML(components.Group(group, user))
+	ctx.Data = getOpenGraph(ctx, group)
+	return ctx.HTML(components.GroupInfo(group, member, user))
 }

pages/group/info.pixy

@@ -0,0 +1,19 @@
+component GroupInfo(group *arn.Group, member *arn.GroupMember, user *arn.User)
+	GroupTabs(group, member, user)
+	h1.page-title= fmt.Sprintf("%s - Info", group.Name)
+
+	.group-view
+		if group.Description != ""
+			.group-info-section
+				h3.mountable Description
+				.group-description.mountable!= markdown.Render(group.Description)
+
+		if group.Rules != ""
+			.group-info-section
+				h3.mountable Rules
+				.group-rules.mountable!= markdown.Render(group.Rules)
+		
+		.group-info-section
+			h3.mountable Founder
+			.user-avatars.group-founder.mountable
+				Avatar(group.Creator())

pages/group/info.scarlet

@@ -0,0 +1,2 @@
+.group-info-section
+	margin-bottom content-padding

pages/group/members.go

@@ -0,0 +1,30 @@
+package group
+
+import (
+	"net/http"
+
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
+	"github.com/animenotifier/notify.moe/components"
+	"github.com/animenotifier/notify.moe/utils"
+)
+
+// Members shows the group members.
+func Members(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+	id := ctx.Get("id")
+	group, err := arn.GetGroup(id)
+
+	if err != nil {
+		return ctx.Error(http.StatusNotFound, "Group not found", err)
+	}
+
+	var member *arn.GroupMember
+
+	if user != nil {
+		member = group.FindMember(user.ID)
+	}
+
+	ctx.Data = getOpenGraph(ctx, group)
+	return ctx.HTML(components.GroupMembers(group, member, user))
+}

pages/group/members.pixy

@@ -0,0 +1,12 @@
+component GroupMembers(group *arn.Group, member *arn.GroupMember, user *arn.User)
+	GroupTabs(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
+		button.mountable
+			Icon("user-plus")
+			span= fmt.Sprintf("Join %s", group.Name)

pages/group/opengraph.go

@@ -0,0 +1,16 @@
+package group
+
+import (
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/arn"
+)
+
+func getOpenGraph(ctx *aero.Context, group *arn.Group) *arn.OpenGraph {
+	return &arn.OpenGraph{
+		Tags: map[string]string{
+			"og:title":     group.Name,
+			"og:url":       "https://" + ctx.App.Config.Domain + group.Link(),
+			"og:site_name": "notify.moe",
+		},
+	}
+}

pages/group/tabs.pixy

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

pages/index/grouproutes/grouproutes.go

@@ -10,7 +10,8 @@ import (
 func Register(l *layout.Layout) {
 	// Groups
 	l.Page("/groups", groups.Get)
-	l.Page("/group/:id", group.Get)
+	l.Page("/group/:id", group.Feed)
+	l.Page("/group/:id/info", group.Info)
+	l.Page("/group/:id/members", group.Members)
 	l.Page("/group/:id/edit", group.Edit)
-	l.Page("/group/:id/forum", group.Forum)
 }

pages/profile/profile.pixy

@@ -28,9 +28,6 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
 							each character in characters
 								.mountable(data-mountable-type="character")
 									CharacterSmall(character, user)
-								//- a.profile-favorite-character.tip.mountable(href=character.Link(), aria-label=character.Name.ByUser(user), data-mountable-type="favorite-anime")
-								//- 	img.profile-favorite-character-image.lazy(data-src=character.ImageLink("small"), data-webp=true, alt=character.Name.ByUser(user))
-
 			//- Posts
 			.profile-column.profile-activity.mountable(data-mountable-type="column")
 				.profile-section

pages/profile/profile.scarlet

@@ -95,13 +95,6 @@ const profile-image-size = 280px
 	grid-gap 0.5rem
 	justify-content space-evenly
 
-// .profile-favorite-character
-// 	margin 0.25rem
-
-// .profile-favorite-character-image
-
-// 	border-radius ui-element-border-radius
-
 > 740px
 	.profile-head
 		horizontal

pages/users/users.pixy

@@ -8,7 +8,7 @@ component Users(users []*arn.User, url string)
 
 component UsersByCountry(users []*arn.User, countryName string)
 	if len(users) == 0
-		p.no-data.mountable= "Seems like there are no users in " + stringutils.Capitalize(countryName)
+		p.no-data.mountable= "Seems like there are no active users in " + stringutils.Capitalize(countryName)
 	else
 		h1= "Users in " + users[0].Location.CountryName