Improved group page design

This commit is contained in:
Eduard Urbach 2018-11-21 18:12:29 +09:00
parent 45661b786c
commit 6eaca92ab8
19 changed files with 135 additions and 87 deletions

View File

@ -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

View File

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

View File

@ -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))
}

View File

@ -9,8 +9,8 @@ import (
"github.com/animenotifier/notify.moe/utils"
)
// Forum ...
func Forum(ctx *aero.Context) string {
// Feed shows the group front page.
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))
}

17
pages/group/feed.pixy Normal file
View File

@ -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)

View File

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

View File

@ -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")

View File

@ -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

View File

@ -9,8 +9,8 @@ import (
"github.com/animenotifier/notify.moe/utils"
)
// Get ...
func Get(ctx *aero.Context) string {
// Info shows the group information page.
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{
Tags: map[string]string{
"og:title": group.Name,
"og:url": "https://" + ctx.App.Config.Domain + group.Link(),
"og:site_name": "notify.moe",
},
var member *arn.GroupMember
if user != nil {
member = group.FindMember(user.ID)
}
return ctx.HTML(components.Group(group, user))
ctx.Data = getOpenGraph(ctx, group)
return ctx.HTML(components.GroupInfo(group, member, user))
}

19
pages/group/info.pixy Normal file
View File

@ -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())

2
pages/group/info.scarlet Normal file
View File

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

30
pages/group/members.go Normal file
View File

@ -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))
}

12
pages/group/members.pixy Normal file
View File

@ -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)

16
pages/group/opengraph.go Normal file
View File

@ -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",
},
}
}

8
pages/group/tabs.pixy Normal file
View File

@ -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")

View File

@ -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)
}

View File

@ -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

View File

@ -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

View File

@ -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