Group up existing components into elements
This commit is contained in:
75
elements/Postable/Postable.pixy
Normal file
75
elements/Postable/Postable.pixy
Normal file
@ -0,0 +1,75 @@
|
||||
component Postable(post arn.Postable, user *arn.User, includeReplies bool, showParent bool, highlightAuthorID string)
|
||||
.post.mountable(id=fmt.Sprintf("%s-%s", strings.ToLower(post.TypeName()), post.GetID()), data-pro=post.Creator().IsPro(), data-api=fmt.Sprintf("/api/%s/%s", strings.ToLower(post.TypeName()), post.GetID()))
|
||||
.post-parent
|
||||
.post-author
|
||||
Avatar(post.Creator())
|
||||
|
||||
.post-box(data-highlight=post.Creator().ID == highlightAuthorID)
|
||||
.post-header
|
||||
.post-header-info
|
||||
a(href=post.Creator().Link())= post.Creator().Nick
|
||||
|
||||
if showParent
|
||||
if post.TypeName() == "Thread"
|
||||
span in
|
||||
a(href=post.Link())= post.TitleByUser(user)
|
||||
else if post.GetParentType() == "User"
|
||||
if post.GetParentID() != post.Creator().ID
|
||||
span to
|
||||
a(href=post.Parent().Link())= post.Parent().TitleByUser(user)
|
||||
else if post.GetParentType() != ""
|
||||
span in
|
||||
a(href=post.Parent().Link())= post.Parent().TitleByUser(user)
|
||||
|
||||
if user != nil
|
||||
if user.ID == post.Creator().ID
|
||||
button.post-action.post-header-action.tip.action(data-action="editPost", data-trigger="click", data-id=post.GetID(), aria-label="Edit")
|
||||
RawIcon("pencil")
|
||||
|
||||
if post.TypeName() != "Thread"
|
||||
if user != nil && (user.Role == "admin" || user.Role == "editor")
|
||||
button.post-action.post-header-action.tip.action(data-action="deletePost", data-trigger="click", data-id=post.GetID(), aria-label="Delete")
|
||||
RawIcon("trash")
|
||||
|
||||
a.post-action.post-header-action.tip(href=post.Link(), aria-label="Link")
|
||||
RawIcon("link")
|
||||
|
||||
.post-date.utc-date(data-date=post.GetCreated())
|
||||
|
||||
.post-content(id="render-" + post.GetID())!= post.HTML()
|
||||
|
||||
if user != nil && user.ID == post.Creator().ID
|
||||
.post-edit-interface
|
||||
if post.TypeName() == "Thread"
|
||||
input.post-title-input.hidden(id="title-" + post.GetID(), value=post.TitleByUser(user), type="text", placeholder="Thread title")
|
||||
|
||||
textarea.post-text-input.hidden(id="source-" + post.GetID(), maxlength=limits.DefaultTextAreaMaxLength)= post.GetText()
|
||||
|
||||
.buttons.hidden(id="edit-toolbar-" + post.GetID())
|
||||
a.button.post-save.action(data-action="savePost", data-trigger="click", data-id=post.GetID())
|
||||
Icon("save")
|
||||
span Save
|
||||
|
||||
a.button.post-cancel-edit.action(data-action="editPost", data-trigger="click", data-id=post.GetID())
|
||||
Icon("close")
|
||||
span Cancel
|
||||
|
||||
.post-toolbar
|
||||
if user != nil
|
||||
button.post-action.post-toolbar-action.tip.action(data-post-id=post.GetID(), aria-label="Reply", data-action="reply", data-trigger="click")
|
||||
Icon("reply")
|
||||
span= post.CountPosts()
|
||||
|
||||
if user != nil && post.LikedBy(user.ID)
|
||||
button.post-action.post-toolbar-action.tip.action(id="unlike-" + post.GetID(), aria-label="Unlike", data-action="unlike", data-trigger="click", data-like="true")
|
||||
Icon("heart")
|
||||
span= post.CountLikes()
|
||||
else
|
||||
button.post-action.post-toolbar-action.tip.action(id="like-" + post.GetID(), aria-label="Like", data-action="like", data-trigger="click", data-like="false")
|
||||
Icon("heart-o")
|
||||
span= post.CountLikes()
|
||||
|
||||
.replies(id="replies-" + post.GetID())
|
||||
if includeReplies
|
||||
each reply in post.Posts()
|
||||
Postable(reply, user, true, false, highlightAuthorID)
|
||||
109
elements/Postable/Postable.scarlet
Normal file
109
elements/Postable/Postable.scarlet
Normal file
@ -0,0 +1,109 @@
|
||||
post-content-padding-y = 0.75rem
|
||||
|
||||
.post-author
|
||||
horizontal
|
||||
justify-content center
|
||||
align-items flex-start
|
||||
margin-right post-avatar-text-margin
|
||||
|
||||
.post-header
|
||||
horizontal
|
||||
horizontal-line-bottom
|
||||
|
||||
.post-header-info
|
||||
flex 1
|
||||
clip-long-text
|
||||
|
||||
.post-action
|
||||
display flex
|
||||
align-items center
|
||||
border none
|
||||
background none
|
||||
padding 0
|
||||
height auto
|
||||
color hsla(text-color-h, text-color-s, text-color-l, 0.5)
|
||||
|
||||
:hover
|
||||
color link-hover-color
|
||||
background none
|
||||
|
||||
.post-header-action
|
||||
opacity 0
|
||||
margin-right 0.5rem
|
||||
|
||||
.post-date
|
||||
color hsla(text-color-h, text-color-s, text-color-l, 0.5)
|
||||
white-space nowrap
|
||||
|
||||
.post-box
|
||||
ui-element
|
||||
flex-grow 1
|
||||
padding 0.75rem 1rem
|
||||
position relative
|
||||
overflow hidden
|
||||
|
||||
h1, h2, h3
|
||||
font-weight bold
|
||||
text-align left
|
||||
line-height 1.5em
|
||||
margin 1rem 0
|
||||
|
||||
h1
|
||||
font-size 1.5rem
|
||||
|
||||
h2
|
||||
font-size 1.3rem
|
||||
|
||||
h3
|
||||
font-size 1.1rem
|
||||
|
||||
img
|
||||
max-width 100%
|
||||
max-height 450px
|
||||
width 100%
|
||||
object-fit cover
|
||||
|
||||
:hover
|
||||
.post-header-action
|
||||
opacity 1
|
||||
|
||||
.post-toolbar
|
||||
horizontal
|
||||
justify-content flex-end
|
||||
margin-top typography-margin
|
||||
padding-top typography-margin
|
||||
border-top 1px solid reverse-light-color
|
||||
|
||||
.post-toolbar-action
|
||||
margin-left 1rem
|
||||
|
||||
[data-like="true"]
|
||||
color hsla(0, 90%, 50%, 1)
|
||||
|
||||
.new-post-actions
|
||||
justify-content flex-end
|
||||
opacity 0
|
||||
height 0
|
||||
transform translateY(-50%)
|
||||
transition all transition-speed ease
|
||||
|
||||
button
|
||||
pointer-events none
|
||||
|
||||
.new-post-actions-enabled
|
||||
opacity 1
|
||||
height auto
|
||||
margin-bottom 0.75rem
|
||||
transform translateY(0)
|
||||
|
||||
button
|
||||
pointer-events all
|
||||
|
||||
.post-edit-interface
|
||||
vertical
|
||||
|
||||
.post-title-input
|
||||
margin-bottom post-content-padding-y
|
||||
|
||||
.post-text-input
|
||||
min-height 200px
|
||||
Reference in New Issue
Block a user