diff --git a/images/elements/default-cover.jpg b/images/elements/default-cover.jpg index fce67547..6f77328f 100644 Binary files a/images/elements/default-cover.jpg and b/images/elements/default-cover.jpg differ diff --git a/images/elements/default-cover.webp b/images/elements/default-cover.webp index c48356a8..42adee5c 100644 Binary files a/images/elements/default-cover.webp and b/images/elements/default-cover.webp differ diff --git a/images/elements/default-group-cover.jpg b/images/elements/default-group-cover.jpg new file mode 100644 index 00000000..06d99379 Binary files /dev/null and b/images/elements/default-group-cover.jpg differ diff --git a/images/elements/default-group-cover.webp b/images/elements/default-group-cover.webp new file mode 100644 index 00000000..0b306b1d Binary files /dev/null and b/images/elements/default-group-cover.webp differ diff --git a/images/groups/large/.gitignore b/images/groups/large/.gitignore new file mode 100644 index 00000000..c96a04f0 --- /dev/null +++ b/images/groups/large/.gitignore @@ -0,0 +1,2 @@ +* +!.gitignore \ No newline at end of file diff --git a/pages/group/edit.go b/pages/group/edit.go index ee81aa57..e203897e 100644 --- a/pages/group/edit.go +++ b/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. diff --git a/pages/group/feed.pixy b/pages/group/feed.pixy index e134b72d..5348d76a 100644 --- a/pages/group/feed.pixy +++ b/pages/group/feed.pixy @@ -1,17 +1,6 @@ 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 - Comments(group, user) + Comments(group, user) \ No newline at end of file diff --git a/pages/group/group.scarlet b/pages/group/group.scarlet index 81e25fc1..073f7425 100644 --- a/pages/group/group.scarlet +++ b/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 \ No newline at end of file + opacity 0.7 !important \ No newline at end of file diff --git a/pages/group/header.pixy b/pages/group/header.pixy new file mode 100644 index 00000000..474fa215 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/pages/group/history.go b/pages/group/history.go index 592a070e..cb5d6c1a 100644 --- a/pages/group/history.go +++ b/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) } diff --git a/pages/group/image.pixy b/pages/group/image.pixy index c79da890..afdd8082 100644 --- a/pages/group/image.pixy +++ b/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 diff --git a/pages/group/info.pixy b/pages/group/info.pixy index 4a6a0618..12f8877f 100644 --- a/pages/group/info.pixy +++ b/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 @@ -12,14 +12,6 @@ component GroupInfo(group *arn.Group, member *arn.GroupMember, user *arn.User) .group-info-section 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 diff --git a/pages/group/members.pixy b/pages/group/members.pixy index e7698426..19781f3b 100644 --- a/pages/group/members.pixy +++ b/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 \ No newline at end of file + Avatar(member.User()) \ No newline at end of file diff --git a/pages/group/tabs.pixy b/pages/group/tabs.pixy index ce251d31..7be1d4c1 100644 --- a/pages/group/tabs.pixy +++ b/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") diff --git a/pages/profile/profile.scarlet b/pages/profile/profile.scarlet index ffa98767..2ab3bc2e 100644 --- a/pages/profile/profile.scarlet +++ b/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) diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index cc5d7f15..e553972c 100644 --- a/scripts/AnimeNotifier.ts +++ b/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 } diff --git a/styles/content.scarlet b/styles/content.scarlet index 47665a25..eea91503 100644 --- a/styles/content.scarlet +++ b/styles/content.scarlet @@ -1,5 +1,4 @@ #content vertical padding content-padding - padding-top content-padding-top line-height content-line-height \ No newline at end of file diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index dcb00191..3d8720ee 100644 --- a/styles/include/config.scarlet +++ b/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 diff --git a/styles/mixins/cover-image.scarlet b/styles/mixins/cover-image.scarlet new file mode 100644 index 00000000..eed009c1 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/styles/status-message.scarlet b/styles/status-message.scarlet index 731fbf54..f7e0d031 100644 --- a/styles/status-message.scarlet +++ b/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