nodebb-theme-harmony 1.0.0-beta.66 → 1.0.0-beta.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.66",
+  "version": "1.0.0-beta.68",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/scss/modules/topic-navigator.scss

@@ -3,11 +3,29 @@
 	.scroller-container {
 		height: 300px;
 		border-left: 2px solid $border-color;
+
 		.scroller-thumb {
+			&:not(.active) {
+				transition: top 100ms linear;
+			}
 			cursor: grab;
 			&.active {
 				cursor: grabbing;
 			}
 		}
+
+		.unread {
+			width: 1px;
+			height: 0; // initial
+			bottom: 0;
+			background: $primary;
+			transition: $transition-base;
+			left: -1px;
+
+			.meta {
+				left: 5px;
+				font-size: 13px;
+			}
+		}
 	}
 }

package/scss/sidebar.scss

@@ -76,7 +76,7 @@
 	.chats-dropdown, .notifications-dropdown, .drafts-dropdown {
 		min-width: 300px;
 		width: 300px;
-		ul {
+		.chat-list {
 			max-height: 400px;
 			overflow-y: auto;
 		}

package/scss/topic.scss

@@ -40,7 +40,7 @@
 			}
 
 			[component="post"] {
-				&.deleted {
+				&.deleted .post-container {
 					opacity: .5;
 				}
 

package/templates/chats.tpl

@@ -14,11 +14,11 @@
 			</div>
 		</div>
 		<hr class="text-muted opacity-25 my-1">
-		<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0" data-nextstart="{nextStart}">
+		<div component="chat/recent" class="chats-list overflow-auto mb-0 pe-1" data-nextstart="{nextStart}">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}
-		</ul>
+		</div>
 	</div>
 	<div class="flex-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" component="chat/main-wrapper">
 		<!-- IMPORT partials/chats/message-window.tpl -->

package/templates/notifications.tpl

@@ -1,6 +1,6 @@
 <div class="notifications">
 	<div class="btn-toolbar justify-content-end" role="toolbar">
-		<button class="btn btn-light" component="notifications/mark_all">[[notifications:mark_all_read]]</button>
+		<button class="btn btn-sm btn-light" component="notifications/mark_all">[[notifications:mark_all_read]]</button>
 	</div>
 
 	<hr class="text-muted opacity-25"/>

package/templates/partials/chats/recent_room.tpl

@@ -1,4 +1,4 @@
-<li component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="{{{ if !@last }}}border-bottom mb-1{{{ end }}} rounded-1 {{{ if ./unread }}}unread{{{ end }}}">
+<div component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="rounded-1 {{{ if ./unread }}}unread{{{ end }}}">
 	<div class="d-flex gap-1 justify-content-between p-1">
 		<div class="position-relative d-flex flex-grow-1 gap-2 justify-content-start align-items-start">
 			<div class="main-avatar">
@@ -42,4 +42,5 @@
 			</button>
 		</div>
 	</div>
-</li>
+</div>
+<hr class="text-muted opacity-25 my-1" />

package/templates/partials/sidebar/chats.tpl

@@ -10,8 +10,8 @@
 </a>
 <ul class="chats-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="chat/list" class="chat-list chats-list list-unstyled overscroll-behavior-contain p-0 ff-base">
-			<li class="rounded-1">
+		<div component="chat/list" class="chat-list chats-list overscroll-behavior-contain p-0 pe-1 ff-base">
+			<div class="rounded-1">
 				<div class="d-flex gap-1 justify-content-between">
 					<div class="dropdown-item p-2 d-flex gap-2 placeholder-wave">
 						<div class="main-avatar">
@@ -29,8 +29,8 @@
 						</button>
 					</div>
 				</div>
-			</li>
-		</ul>
+			</div>
+		</div>
 	</li>
 	<li class="dropdown-divider"></li>
 	<li class="notif-dropdown-link">

package/templates/partials/topic/navigator.tpl

@@ -7,14 +7,13 @@
 					<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
 					<div>
 						<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
-						<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0"></p>
+						<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
 					</div>
 				</div>
 
-				<!-- TODO -->
-				<div class="unread d-inline-block position-relative hidden">
-					<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold">
-						<a href="{url}"></a>
+				<div class="unread d-inline-block position-absolute bottom-0">
+					<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
+						<a class="text-decoration-none" href="{url}"></a>
 					</div>
 				</div>
 			</div>

package/templates/partials/topic/post.tpl

@@ -14,7 +14,7 @@
 		</a>
 	</div>
 
-	<div class="d-flex flex-grow-1 flex-column w-100" style="min-width: 0;">
+	<div class="post-container d-flex flex-grow-1 flex-column w-100" style="min-width: 0;">
 		<div class="d-flex align-items-center gap-1 flex-wrap w-100 post-header mt-1">
 			<div class="icon bg-body d-sm-none">
 				<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
@@ -38,14 +38,13 @@
 			{{{ end }}}
 
 			<div class="d-flex gap-1 hidden-xs align-items-center">
+				<span class="text-muted">
 				{{{ if posts.toPid }}}
-				<span class="text-muted">replied to</span><!-- FIX THIS, DOES NOT l10n PROPERLY -->
-				<a component="post/parent" data-topid="{posts.toPid}" href="{config.relative_path}/post/{posts.toPid}">{{{ if posts.parent.username }}}{posts.parent.username}{{{ else }}}[[global:guest]]{{{ end }}}</a>
+				{generateRepliedTo(@value, config.timeagoCutoff)}
 				{{{ else }}}
-				<span class="text-muted">wrote</span><!-- FIX THIS, DOES NOT l10n PROPERLY -->
+				{generateWrote(@value, config.timeagoCutoff)}
 				{{{ end }}}
-
-				<a class="permalink text-muted" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
+				</span>
 
 				<i component="post/edit-indicator" class="fa fa-edit text-muted{{{ if privileges.posts:history }}} pointer{{{ end }}} edit-icon {{{ if !posts.editor.username }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {./editedISO}]]"></i>
 				<span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></span>