nodebb-theme-harmony 1.0.58 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.58",
+  "version": "1.0.60",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/scss/modules/topic-navigator.scss

@@ -1,6 +1,6 @@
 .topic .pagination-block {
 	.scroller-content {
-		min-width: 150px;
+		min-width: 170px;
 	}
 	.scroller-container {
 		left: 10px;

package/scss/topic.scss

@@ -1,26 +1,22 @@
 .pagination-block { display: none; }
 
 .page-topic {
-	[component="topic/title"] {
-		font-size: 28px;
-		line-height: 34px;
-		font-weight: $font-weight-semibold;
-	}
-
 	[component="topic/reply"], [component="topic/reply/locked"], [component="topic/reply/guest"] {
 		font-size: 14px;
 		line-height: 20px;
 	}
 
 	.topic {
-		.posts {
+		.posts-container {
 			max-width: 960px;
 			width: 960px;
+		}
+
+		.posts {
 			// fixes code blocks pushing content out on mobile
 			@include media-breakpoint-down(md) {
 				max-width: calc(100vw - $grid-gutter-width);
 			}
-			list-style-type: none;
 
 			&.timeline {
 				@include timeline-style;
@@ -75,17 +71,12 @@
 				}
 			}
 
-			[component="post/reply-count"] {
-				font-size: $font-size-base * .75;
-			}
-
 			[component="post/upvote"], [component="post/downvote"] {
 				&.upvoted, &.downvoted {
 					background-color: lighten($btn-ghost-hover-color, 5%);
 
 					&:hover {
-					background-color: $btn-ghost-hover-color;
-
+						background-color: $btn-ghost-hover-color;
 					}
 				}
 			}
@@ -93,15 +84,10 @@
 	}
 
 	.quick-reply {
-		max-width: 960px;
 		@include topic-avatars();
 	}
 
 	[component="post/replies/container"] {
-		&:empty {
-			display: none;
-		}
-
 		.icon {
 			display: none !important;
 		}

package/templates/partials/topic/navigator.tpl

@@ -1,4 +1,4 @@
-<div class="pagination-block d-none d-lg-block flex-grow-1 mb-2">
+<div class="pagination-block d-none d-lg-block flex-grow-1 mb-4">
 	<div class="d-flex justify-content-end sticky-top mt-4" style="top:6rem;z-index:1;">
 		<div class="ps-1 ps-md-0 d-inline-block">
 			<div class="scroller-content d-flex gap-2 flex-column align-items-start">

package/templates/partials/topic/post.tpl

@@ -77,9 +77,9 @@
 	<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
 	{{{ end }}}
 
-	<div class="clearfix">
+	<div class="d-flex">
 		{{{ if !hideReplies }}}
-		<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 btn-outline border rounded-1 p-1 threaded-replies user-select-none float-start text-muted text-decoration-none {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
+		<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 btn-outline border rounded-1 p-1 threaded-replies user-select-none text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
 			<span component="post/reply-count/avatars" class="avatars d-inline-flex gap-1 align-items-top {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
 				{{{each posts.replies.users}}}
 				<span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
@@ -99,7 +99,7 @@
 		{{{ end }}}
 	</div>
 
-	<div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3"></div>
+	<div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3 hidden-empty"></div>
 
 	<div component="post/actions" class="d-flex justify-content-end gap-1 post-tools">
 		<!-- IMPORT partials/topic/reactions.tpl -->

package/templates/topic.tpl

@@ -9,7 +9,7 @@
 <div class="d-flex flex-column gap-3" itemid="{url}" itemscope itemtype="https://schema.org/DiscussionForumPosting">
 	<div class="d-flex flex-wrap">
 		<div class="d-flex flex-column gap-3 flex-grow-1">
-			<h2 component="post/header" class="tracking-tight fw-semibold fs-2 mb-0 text-break {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}" itemprop="headline">
+			<h2 component="post/header" class="tracking-tight fw-semibold fs-3 mb-0 text-break {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}" itemprop="headline">
 				<span class="topic-title" component="topic/title">{title}</span>
 			</h2>
 
@@ -56,7 +56,8 @@
 			{{{ end }}}
 
 			<div class="d-flex gap-0 gap-lg-5">
-				<ul component="topic" class="posts timeline mt-sm-2 p-0 py-3" style="min-width: 0;" data-tid="{tid}" data-cid="{cid}">
+				<div class="posts-container" style="min-width: 0;">
+					<ul component="topic" class="posts timeline list-unstyled mt-sm-2 p-0 py-3" style="min-width: 0;" data-tid="{tid}" data-cid="{cid}">
 					{{{each posts}}}
 						<li component="post" class="pt-4 {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
 							<a component="post/anchor" data-index="{./index}" id="{increment(./index, "1")}"></a>
@@ -72,22 +73,21 @@
 						{{{ end }}}
 						{{{ end }}}
 					{{{end}}}
-				</ul>
+					</ul>
+					{{{ if browsingUsers }}}
+					<div class="visible-xs">
+						<!-- IMPORT partials/topic/browsing-users.tpl -->
+						<hr/>
+					</div>
+					{{{ end }}}
+					{{{ if config.theme.enableQuickReply }}}
+					<!-- IMPORT partials/topic/quickreply.tpl -->
+					{{{ end }}}
+				</div>
 
 				<!-- IMPORT partials/topic/navigator.tpl -->
 			</div>
 
-			{{{ if browsingUsers }}}
-			<div class="visible-xs">
-				<!-- IMPORT partials/topic/browsing-users.tpl -->
-				<hr/>
-			</div>
-			{{{ end }}}
-
-			{{{ if config.theme.enableQuickReply }}}
-			<!-- IMPORT partials/topic/quickreply.tpl -->
-			{{{ end }}}
-
 			{{{ if config.usePagination }}}
 			<!-- IMPORT partials/paginator.tpl -->
 			{{{ end }}}