web/notify.moe
Code Issues Pull Requests Activity

New style for groups

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/elements/default-cover.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 158 KiB

After

Width:  |  Height:  |  Size: 97 KiB

BIN
images/elements/default-cover.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
images/elements/default-group-cover.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
images/elements/default-group-cover.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

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

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

2
pages/group/edit.go
View File

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

13
pages/group/feed.pixy
View File

@ -1,16 +1,5 @@
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
GroupHeader(group, member, user)
.group-view
.group-feed

39
pages/group/group.scarlet
View File

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

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)

2
pages/group/history.go
View File

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

2
pages/group/image.pixy
View File

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

10
pages/group/info.pixy
View File

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

12
pages/group/members.pixy
View File

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

4
pages/group/tabs.pixy
View File

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

13
pages/profile/profile.scarlet
View File

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

6
scripts/AnimeNotifier.ts
View File

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

1
styles/content.scarlet
View File

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

2
styles/include/config.scarlet
View File

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

9
styles/mixins/cover-image.scarlet Normal file
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

4
styles/status-message.scarlet
View File

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