diff --git a/images/elements/no-group-image.svg b/images/elements/no-group-image.svg new file mode 100644 index 00000000..c79bfd50 --- /dev/null +++ b/images/elements/no-group-image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/groups/.gitignore b/images/groups/.gitignore new file mode 100644 index 00000000..b6e069c5 --- /dev/null +++ b/images/groups/.gitignore @@ -0,0 +1,3 @@ +* +!*/ +!.gitignore \ No newline at end of file diff --git a/images/groups/original/.gitignore b/images/groups/original/.gitignore new file mode 100644 index 00000000..c96a04f0 --- /dev/null +++ b/images/groups/original/.gitignore @@ -0,0 +1,2 @@ +* +!.gitignore \ No newline at end of file diff --git a/images/groups/small/.gitignore b/images/groups/small/.gitignore new file mode 100644 index 00000000..c96a04f0 --- /dev/null +++ b/images/groups/small/.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 d5507549..ee81aa57 100644 --- a/pages/group/edit.go +++ b/pages/group/edit.go @@ -17,7 +17,7 @@ func Edit(ctx *aero.Context) string { user := utils.GetUser(ctx) if err != nil { - return ctx.Error(http.StatusNotFound, "Track not found", err) + return ctx.Error(http.StatusNotFound, "Group not found", err) } var member *arn.GroupMember @@ -26,13 +26,24 @@ func Edit(ctx *aero.Context) string { member = group.FindMember(user.ID) } - 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", - }, - } - return ctx.HTML(components.GroupTabs(group, member, user) + editform.Render(group, "Edit group", user)) } + +// EditImage renders the form to edit the group images. +func EditImage(ctx *aero.Context) string { + id := ctx.Get("id") + group, err := arn.GetGroup(id) + user := utils.GetUser(ctx) + + if err != nil { + return ctx.Error(http.StatusNotFound, "Group not found", err) + } + + var member *arn.GroupMember + + if user != nil { + member = group.FindMember(user.ID) + } + + return ctx.HTML(components.EditGroupImage(group, member, user)) +} diff --git a/pages/group/group.scarlet b/pages/group/group.scarlet index 6d4fb10e..81e25fc1 100644 --- a/pages/group/group.scarlet +++ b/pages/group/group.scarlet @@ -1,20 +1,12 @@ .group-view - horizontal-wrap + vertical width 100% max-width 900px margin 0 auto -< 1100px - .group-view - vertical - .group-feed flex 1 -.group-members - margin-bottom 0.5rem - justify-content flex-start - .group-header margin-bottom content-padding diff --git a/pages/group/image.pixy b/pages/group/image.pixy new file mode 100644 index 00000000..c79da890 --- /dev/null +++ b/pages/group/image.pixy @@ -0,0 +1,15 @@ +component EditGroupImage(group *arn.Group, member *arn.GroupMember, user *arn.User) + GroupTabs(group, member, user) + + .widget-form + h1.mountable Edit group image + + .widget.mountable(data-api="/api/group/" + group.ID) + h3.widget-title + Icon("picture-o") + span Image + + InputFileUpload("group-image-input", "File", "image", "/api/upload/group/" + group.ID + "/image") + + .group-image-container.mountable + img.group-image.group-image-input-preview.lazy(data-src=group.ImageLink("small"), data-webp="true", data-color=group.AverageColor(), alt="Group image") \ No newline at end of file diff --git a/pages/group/image.scarlet b/pages/group/image.scarlet new file mode 100644 index 00000000..d27338db --- /dev/null +++ b/pages/group/image.scarlet @@ -0,0 +1,14 @@ +.group-image-container + vertical + align-items center + +.group-image + flex-shrink 0 + width 70px + height 70px + margin-right 1rem + border-radius ui-element-border-radius + object-fit cover + +.group-image-input-preview + margin 0 \ No newline at end of file diff --git a/pages/group/info.pixy b/pages/group/info.pixy index b1cecd9d..4a6a0618 100644 --- a/pages/group/info.pixy +++ b/pages/group/info.pixy @@ -12,6 +12,14 @@ 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/info.scarlet b/pages/group/info.scarlet index 7d80c43f..786ed3df 100644 --- a/pages/group/info.scarlet +++ b/pages/group/info.scarlet @@ -1,2 +1,5 @@ .group-info-section - margin-bottom content-padding \ No newline at end of file + margin-bottom content-padding + +.group-founder + justify-content flex-start !important \ No newline at end of file diff --git a/pages/group/members.pixy b/pages/group/members.pixy index 133f62f2..58601a0f 100644 --- a/pages/group/members.pixy +++ b/pages/group/members.pixy @@ -9,4 +9,4 @@ component GroupMembers(group *arn.Group, member *arn.GroupMember, user *arn.User .buttons button.mountable Icon("user-plus") - span= fmt.Sprintf("Join %s", group.Name) \ No newline at end of file + span= fmt.Sprintf(`Join "%s"`, group.Name) \ No newline at end of file diff --git a/pages/group/members.scarlet b/pages/group/members.scarlet new file mode 100644 index 00000000..545fac2b --- /dev/null +++ b/pages/group/members.scarlet @@ -0,0 +1,2 @@ +.group-members + margin-bottom content-padding \ No newline at end of file diff --git a/pages/group/tabs.pixy b/pages/group/tabs.pixy index 29baadd2..27c9f215 100644 --- a/pages/group/tabs.pixy +++ b/pages/group/tabs.pixy @@ -5,4 +5,5 @@ component GroupTabs(group *arn.Group, member *arn.GroupMember, user *arn.User) Tab("Members", "globe", group.Link() + "/members") if member != nil && member.Role == "founder" - Tab("Edit", "pencil", group.Link() + "/edit") \ No newline at end of file + Tab("Edit", "pencil", group.Link() + "/edit") + Tab("Edit image", "image", group.Link() + "/edit/image") \ No newline at end of file diff --git a/pages/groups/groups.pixy b/pages/groups/groups.pixy index 1ba34a1b..67fab353 100644 --- a/pages/groups/groups.pixy +++ b/pages/groups/groups.pixy @@ -18,7 +18,7 @@ component Groups(groups []*arn.Group, groupsPerPage int, user *arn.User) #load-more-target.groups each group in groups a.group.mountable(href=group.Link()) - img.group-image.lazy(data-src=group.ImageURL(), alt=group.Name) + img.group-image.lazy(data-src=group.ImageLink("small"), data-webp="true", data-color=group.AverageColor(), alt=group.Name) .group-info h3.group-name= group.Name diff --git a/pages/groups/groups.scarlet b/pages/groups/groups.scarlet index 856e95a9..b5dbfa9d 100644 --- a/pages/groups/groups.scarlet +++ b/pages/groups/groups.scarlet @@ -4,8 +4,11 @@ const group-padding-x = 0.75rem .groups display grid grid-gap content-padding-half - // grid-template-columns repeat(auto-fill, min(100%, 520px)) - // justify-content center + +> 600px + .groups + grid-template-columns repeat(auto-fit, 520px) + justify-content center .group horizontal @@ -21,21 +24,18 @@ const group-padding-x = 0.75rem background-color theme-black text-shadow none -.group-image - width 70px - height 70px - margin-right 1rem - border-radius ui-element-border-radius - .group-info vertical + overflow hidden .group-name - horizontal - align-items center + // horizontal + // align-items center + clip-long-text .group-tagline opacity 0.6 + clip-long-text .group-member-count position absolute diff --git a/pages/index/grouproutes/grouproutes.go b/pages/index/grouproutes/grouproutes.go index 3bca2e40..673ea7ce 100644 --- a/pages/index/grouproutes/grouproutes.go +++ b/pages/index/grouproutes/grouproutes.go @@ -14,4 +14,5 @@ func Register(l *layout.Layout) { 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/edit/image", group.EditImage) } diff --git a/pages/inventory/inventory.scarlet b/pages/inventory/inventory.scarlet index 5ab1a448..c3060f7e 100644 --- a/pages/inventory/inventory.scarlet +++ b/pages/inventory/inventory.scarlet @@ -3,7 +3,7 @@ const inventory-slot-size = 64px .inventory display grid grid-gap 0.25rem - grid-template-columns repeat(auto-fit, inventory-slot-size) + grid-template-columns repeat(auto-fill, inventory-slot-size) grid-auto-rows inventory-slot-size justify-content center width 100% diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index dca37f29..cc5d7f15 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -819,7 +819,7 @@ export default class AnimeNotifier { let extension = "" // Replace URL with WebP if supported - if(this.webpEnabled && element.dataset.webp === "true") { + if(this.webpEnabled && element.dataset.webp === "true" && !dataSrc.endsWith(".svg")) { let queryPos = dataSrc.lastIndexOf("?") if(queryPos !== -1) {