Added image upload for groups

This commit is contained in:
Eduard Urbach 2018-11-21 20:35:25 +09:00
parent 6eaca92ab8
commit da898c68e3
18 changed files with 89 additions and 34 deletions

View File

@ -0,0 +1 @@
<svg width="2048" height="1792" viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M657 896q-162 5-265 128h-134q-82 0-138-40.5t-56-118.5q0-353 124-353 6 0 43.5 21t97.5 42.5 119 21.5q67 0 133-23-5 37-5 66 0 139 81 256zm1071 637q0 120-73 189.5t-194 69.5h-874q-121 0-194-69.5t-73-189.5q0-53 3.5-103.5t14-109 26.5-108.5 43-97.5 62-81 85.5-53.5 111.5-20q10 0 43 21.5t73 48 107 48 135 21.5 135-21.5 107-48 73-48 43-21.5q61 0 111.5 20t85.5 53.5 62 81 43 97.5 26.5 108.5 14 109 3.5 103.5zm-1024-1277q0 106-75 181t-181 75-181-75-75-181 75-181 181-75 181 75 75 181zm704 384q0 159-112.5 271.5t-271.5 112.5-271.5-112.5-112.5-271.5 112.5-271.5 271.5-112.5 271.5 112.5 112.5 271.5zm576 225q0 78-56 118.5t-138 40.5h-134q-103-123-265-128 81-117 81-256 0-29-5-66 66 23 133 23 59 0 119-21.5t97.5-42.5 43.5-21q124 0 124 353zm-128-609q0 106-75 181t-181 75-181-75-75-181 75-181 181-75 181 75 75 181z"/></svg>

After

Width:  |  Height:  |  Size: 904 B

3
images/groups/.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
*
!*/
!.gitignore

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

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

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

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

View File

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

View File

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

15
pages/group/image.pixy Normal file
View File

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

14
pages/group/image.scarlet Normal file
View File

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

View File

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

View File

@ -1,2 +1,5 @@
.group-info-section
margin-bottom content-padding
margin-bottom content-padding
.group-founder
justify-content flex-start !important

View File

@ -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)
span= fmt.Sprintf(`Join "%s"`, group.Name)

View File

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

View File

@ -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")
Tab("Edit", "pencil", group.Link() + "/edit")
Tab("Edit image", "image", group.Link() + "/edit/image")

View File

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

View File

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

View File

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

View File

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

View File

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