New style for groups

This commit is contained in:
Eduard Urbach 2018-11-22 16:52:29 +09:00
parent e4df90bf17
commit eb38a65f78
20 changed files with 107 additions and 58 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 KiB

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

2
images/groups/large/.gitignore vendored Normal file
View File

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

View File

@ -26,7 +26,7 @@ func Edit(ctx *aero.Context) string {
member = group.FindMember(user.ID) 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. // EditImage renders the form to edit the group images.

View File

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

View File

@ -7,8 +7,43 @@
.group-feed .group-feed
flex 1 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 .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 .group-page-name
margin 0 margin 0
@ -17,4 +52,4 @@
text-align center text-align center
&.mounted &.mounted
opacity 0.6 !important opacity 0.7 !important

40
pages/group/header.pixy Normal file
View File

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

View File

@ -17,5 +17,5 @@ func renderHistory(obj interface{}, entries []*arn.EditLogEntry, user *arn.User)
member = group.FindMember(user.ID) 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)
} }

View File

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

View File

@ -1,5 +1,5 @@
component GroupInfo(group *arn.Group, member *arn.GroupMember, user *arn.User) 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) h1.page-title= fmt.Sprintf("%s - Info", group.Name)
.group-view .group-view
@ -12,14 +12,6 @@ component GroupInfo(group *arn.Group, member *arn.GroupMember, user *arn.User)
.group-info-section .group-info-section
h3.mountable Rules h3.mountable Rules
.group-rules.mountable!= markdown.Render(group.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 .group-info-section
h3.mountable Founder h3.mountable Founder

View File

@ -1,17 +1,7 @@
component GroupMembers(group *arn.Group, member *arn.GroupMember, user *arn.User) 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) h1.page-title= fmt.Sprintf("%s - Members", group.Name)
.user-avatars.group-members.mountable .user-avatars.group-members.mountable
each member in group.Members each member in group.Members
Avatar(member.User()) 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

View File

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

View File

@ -2,22 +2,11 @@ const profile-image-size = 280px
.profile-head .profile-head
vertical vertical
cover-image-container
align-items center 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 // default-transition
// animation appear transition-speed // animation appear transition-speed
overflow hidden
.profile-info .profile-info
vertical vertical
margin-top calc(content-padding * 1.5) margin-top calc(content-padding * 1.5)

View File

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

View File

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

View File

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

View File

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

View File

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