Improved post UI

arn/Likeable.go

@@ -35,13 +35,19 @@ func LikeAction() *api.Action {
 				return errors.New("Drafts need to be published before they can be liked")
 			}
 
-			likeable := obj.(Likeable)
 			user := GetUserFromContext(ctx)
 
 			if user == nil {
 				return errors.New("Not logged in")
 			}
 
+			postable, isPostable := obj.(Postable)
+
+			if isPostable && postable.Creator().ID == user.ID {
+				return errors.New("You can't like your own posts")
+			}
+
+			likeable := obj.(Likeable)
 			likeable.Like(user.ID)
 
 			// Call OnLike if the object implements it

mixins/Postable.pixy

@@ -4,9 +4,9 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, showP
 			.post-author
 				Avatar(post.Creator())
 
-			.post-content(data-highlight=post.Creator().ID == highlightAuthorID)
+			.post-box(data-highlight=post.Creator().ID == highlightAuthorID)
 				.post-header
-					.post-creator
+					.post-header-info
 						a(href=post.Creator().Link())= post.Creator().Nick
 					
 						if showParent
@@ -18,34 +18,22 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, showP
 								span  in 
 								a(href=post.Parent().Link())= post.Parent().TitleByUser(user)
 
-					if user == nil || user.ID == post.Creator().ID
-						//- Don't display a like icon.
-					else if post.LikedBy(user.ID)
-						button.post-action.post-likes.tip.action(id="unlike-" + post.GetID(), aria-label="Unlike", data-action="unlike", data-trigger="click")
-							RawIcon("heart")
-					else
-						button.post-action.post-likes.tip.action(id="like-" + post.GetID(), aria-label="Like", data-action="like", data-trigger="click")
-							RawIcon("heart-o")
-
 					if user != nil
-						button.post-action.tip.action(data-post-id=post.GetID(), aria-label="Reply", data-action="reply", data-trigger="click")
-							RawIcon("reply")
-
 						if user.ID == post.Creator().ID
-							button.post-action.tip.action(data-action="editPost", data-trigger="click", data-id=post.GetID(), aria-label="Edit")
+							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.tip.action(data-action="deletePost", data-trigger="click", data-id=post.GetID(), aria-label="Delete")
+							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.tip(href=post.Link(), aria-label="Link")
+					a.post-action.post-header-action.tip(href=post.Link(), aria-label="Link")
 						RawIcon("link")
 					
 					.post-date.utc-date(data-date=post.GetCreated())
 
-				div(id="render-" + post.GetID())!= post.HTML()
+				.post-content(id="render-" + post.GetID())!= post.HTML()
 
 				if user != nil && user.ID == post.Creator().ID
 					.post-edit-interface
@@ -63,6 +51,21 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, showP
 								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()

pages/activity/activity.pixy

@@ -36,7 +36,7 @@ component Activity(activity arn.Activity, user *arn.User)
 	//- 		Avatar(activity.Creator())
 	//- 	.post-content
 	//- 		.post-header
-	//- 			.post-creator
+	//- 			.post-header-info
 	//- 				a(href=activity.Creator().Link())= activity.Creator().Nick
 
 	//- 				if activity.TypeName() == "ActivityCreate"

pages/post/post.pixy

@@ -4,6 +4,7 @@ component Post(post *arn.Post, user *arn.User)
 			Postable(post, user, true, true, "")
 
 			if user != nil && user.Role == "admin"
-				.side-note-container.mountable
+				.buttons
-					a.side-note.tip(href=post.Link() + "/edit", aria-label="Admin Edit")
+					a.button.mountable(href=post.Link() + "/edit")
 						Icon("edit")
+						span Edit (admin)

pages/post/post.scarlet

@@ -1,6 +0,0 @@
-.side-note-container
-	horizontal
-	justify-content flex-end
-
-.side-note
-	font-size 0.9rem

styles/post.scarlet

@@ -10,8 +10,9 @@ post-content-padding-y = 0.75rem
 	horizontal
 	horizontal-line-bottom
 
-.post-creator
+.post-header-info
 	flex 1
+	clip-long-text
 
 .post-action
 	display flex
@@ -20,23 +21,26 @@ post-content-padding-y = 0.75rem
 	background none
 	padding 0
 	height auto
-	margin-right 0.5rem
-	opacity 0
 	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-content
+.post-box
 	ui-element
 	flex-grow 1
 	padding 0.75rem 1rem
 	position relative
+	overflow hidden
 
 	h1, h2, h3
 		font-weight bold
@@ -60,9 +64,22 @@ post-content-padding-y = 0.75rem
 		object-fit cover
 
 	:hover
-		.post-action
+		.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
@@ -82,10 +99,6 @@ post-content-padding-y = 0.75rem
 	button
 		pointer-events all
 
-.post-likes
-	color hsla(text-color-h, text-color-s, text-color-l, 0.4)
-	margin-right 0.4em
-
 .post-edit-interface
 	vertical