Improved posts style

config.json

@@ -22,7 +22,8 @@
 		"headers",
 		"input",
 		"grid",
-		"forum",
+		"post",
+		"thread",
 		"tabs",
 		"tags",
 		"user",

mixins/Comments.pixy

@@ -11,4 +11,4 @@ component Comments(parent arn.PostParent, user *arn.User)
 		//- 	p.no-data.mountable No comments have been written yet.
 		//- else
 		each post in parent.PostsRelevantFirst(5)
-			Postable(post, user, true, "", "")
+			Postable(post, user, true, "")

mixins/Postable.pixy

@@ -1,12 +1,15 @@
-component Postable(post arn.Postable, user *arn.User, includeReplies bool, headerContent string, highlightAuthorID string)
+component Postable(post arn.Postable, user *arn.User, includeReplies bool, highlightAuthorID string)
 	.post.mountable(id=strings.ToLower(post.TypeName()) + "-" + fmt.Sprint(post.GetID()), data-pro=post.Creator().IsPro(), data-api="/api/" + strings.ToLower(post.TypeName()) + "/" + post.GetID())
 		.post-parent
 			.post-author
 				Avatar(post.Creator())
 
 			.post-content(data-highlight=post.Creator().ID == highlightAuthorID)
-				if headerContent != ""
+				.post-header
-					div!= headerContent
+					.post-creator
+						a(href=post.Creator().Link())= post.Creator().Nick
+					
+					.post-date.utc-date(data-date=post.GetCreated())
 
 				div(id="render-" + post.GetID())!= post.HTML()
 
@@ -26,8 +29,6 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, heade
 								Icon("close")
 								span Cancel
 
-				.post-date.utc-date.no-tip(data-date=post.GetCreated())
-
 				.post-toolbar(id="toolbar-" + post.GetID())
 					.spacer
 					.post-likes.tip(id="likes-" + post.GetID(), aria-label=stringutils.Plural(post.CountLikes(), "like"))= "+" + strconv.Itoa(post.CountLikes())
@@ -59,4 +60,4 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, heade
 		.replies(id="replies-" + post.GetID())
 			if includeReplies
 				each reply in post.Posts()
-					Postable(reply, user, true, "", highlightAuthorID)
+					Postable(reply, user, true, highlightAuthorID)

mixins/PostableList.pixy

@@ -2,4 +2,4 @@ component PostableList(postables []arn.Postable, user *arn.User)
 	.thread
 		.posts
 			each post in postables
-				Postable(post, user, false, "", "")
+				Postable(post, user, false, "")

pages/activity/activity.pixy

@@ -30,8 +30,8 @@ component Activity(activity arn.Activity, user *arn.User)
 		.post-author
 			Avatar(activity.Creator())
 		.post-content
-			.activity-header
+			.post-header
-				.activity-creator
+				.post-creator
 					a(href=activity.Creator().Link())= activity.Creator().Nick
 
 					if activity.TypeName() == "ActivityCreate"
@@ -49,7 +49,7 @@ component Activity(activity arn.Activity, user *arn.User)
 						button.activity-action.tip.action(data-action="deleteObject", data-trigger="click", aria-label="Delete", data-return-path="/activity", data-confirm-type="activity")
 							RawIcon("trash")
 				
-				.activity-date.utc-date(data-date=activity.GetCreated())
+				.post-date.utc-date(data-date=activity.GetCreated())
 
 			if activity.TypeName() == "ActivityCreate"
 				ActivityCreateText(activity.(*arn.ActivityCreate), user)

pages/activity/activity.scarlet

@@ -9,19 +9,6 @@
 		.activity-action
 			opacity 1
 
-.activity-header
-	horizontal
-	horizontal-line-bottom
-
-.activity-creator
-	flex 1
-
-.activity-date
-	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
-
-.actvity-text-create
-	opacity 0.8
-
 .activity-text-consume-anime
 	// ...
 

pages/post/post.pixy

@@ -1,7 +1,7 @@
 component Post(post *arn.Post, user *arn.User)
 	.thread
 		.posts
-			Postable(post, user, true, "", "")
+			Postable(post, user, true, "")
 
 			.side-note-container.mountable
 				if user != nil && user.Role == "admin"

pages/thread/thread.pixy

@@ -3,7 +3,7 @@ component Thread(thread *arn.Thread, user *arn.User)
 
 	#thread.thread(data-id=thread.ID)
 		.posts
-			Postable(thread, user, true, "", thread.Creator().ID)
+			Postable(thread, user, true, thread.Creator().ID)
 			
 			//- Reply
 			if user != nil

styles/post.scarlet

@@ -1,22 +1,21 @@
 post-content-padding-y = 0.75rem
 
-.thread-link
+.post-author
-	vertical
-	margin 0.25rem 0
-
-	.post-author
-		margin-bottom 0.25rem
-
-> 330px
-	.thread-link
 	horizontal
+	justify-content center
+	align-items flex-start
+	margin-right post-avatar-text-margin
 
-		.post-author
+.post-header
-			margin-bottom 0
+	horizontal
+	horizontal-line-bottom
 
-		.user-image
+.post-creator
-			width 42px
+	flex 1
-			height 42px
+
+.post-date
+	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
+	white-space nowrap
 
 .post-content
 	ui-element
@@ -49,40 +48,6 @@ post-content-padding-y = 0.75rem
 		.post-toolbar
 			opacity 1
 
-		.post-date
-			opacity 0.25
-
-.thread-content
-	horizontal
-	ui-element
-	padding 0.4rem 1rem
-	align-items center
-
-.thread-icons,
-.thread-reply-count
-	horizontal
-	align-items center
-	opacity 0.5
-	text-align right
-	font-size 0.9rem
-
-.thread-reply-count
-	margin-right 0.5rem
-
-.thread-content-container
-	flex 1
-	vertical
-	justify-content center
-
-.thread-link-title
-	color text-color
-
-.post-author
-	horizontal
-	justify-content center
-	align-items flex-start
-	margin-right post-avatar-text-margin
-
 .new-post-actions
 	justify-content flex-end
 	opacity 0
@@ -102,8 +67,6 @@ post-content-padding-y = 0.75rem
 	button
 		pointer-events all
 
-// Toolbar
-
 .post-toolbar
 	horizontal
 	opacity 0
@@ -136,7 +99,7 @@ post-content-padding-y = 0.75rem
 	color delete-color
 
 .post-save
-	//
+	// ...
 
 .post-edit-interface
 	vertical
@@ -146,12 +109,3 @@ post-content-padding-y = 0.75rem
 
 .post-text-input
 	min-height 200px
-
-.post-date
-	position absolute
-	right -1rem
-	top 0.25rem
-	white-space nowrap
-	opacity 0
-	transform translateX(100%)
-	default-transition

styles/thread.scarlet

@@ -0,0 +1,42 @@
+.thread-link
+	vertical
+	margin 0.25rem 0
+
+	.post-author
+		margin-bottom 0.25rem
+
+> 330px
+	.thread-link
+		horizontal
+
+		.post-author
+			margin-bottom 0
+
+		.user-image
+			width 42px
+			height 42px
+
+.thread-content
+	horizontal
+	ui-element
+	padding 0.4rem 1rem
+	align-items center
+
+.thread-icons,
+.thread-reply-count
+	horizontal
+	align-items center
+	opacity 0.5
+	text-align right
+	font-size 0.9rem
+
+.thread-reply-count
+	margin-right 0.5rem
+
+.thread-content-container
+	flex 1
+	vertical
+	justify-content center
+
+.thread-link-title
+	color text-color