Improved posts style

2019-06-09 09:52:13 +09:00 · 2019-06-09 09:52:13 +09:00 · 2074d81e69
commit 2074d81e69
parent a0ee24e81e
10 changed files with 74 additions and 89 deletions
--- a/config.json
+++ b/config.json
@ -22,7 +22,8 @@
 		"headers",
 		"input",
 		"grid",
-		"forum",
+		"post",
+		"thread",
 		"tabs",
 		"tags",
 		"user",
--- a/mixins/Comments.pixy
+++ b/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, "")
--- a/mixins/Postable.pixy
+++ b/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 != ""
-					div!= headerContent
+				.post-header
+					.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)
--- a/mixins/PostableList.pixy
+++ b/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, "")
--- a/pages/activity/activity.pixy
+++ b/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
-				.activity-creator
+			.post-header
+				.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)
--- a/pages/activity/activity.scarlet
+++ b/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
 	// ...

--- a/pages/post/post.pixy
+++ b/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"
--- a/pages/thread/thread.pixy
+++ b/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
--- a/styles/forum.scarlet
+++ b/styles/forum.scarlet
@ -1,22 +1,21 @@
 post-content-padding-y = 0.75rem

-.thread-link
-	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
-			margin-bottom 0
+.post-header
+	horizontal
+	horizontal-line-bottom

-		.user-image
-			width 42px
-			height 42px
+.post-creator
+	flex 1
+
+.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
--- a/styles/thread.scarlet
+++ b/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