nodebb-theme-harmony 1.0.0-beta.2 → 1.0.0-beta.21

package/templates/partials/category/subcategory.tpl

@@ -1,7 +1,7 @@
 {{{ if children.length }}}
 <div class="subcategory">
 	{{{ if hasMoreSubCategories }}}
-	<div class="mb-2"><!-- IMPORT partials/category-selector.tpl --></div>
+	<div class="mb-2"><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 	{{{ else }}}
 	<h3 class="fs-6 fw-semibold">[[category:subcategories]]</h3>
 	{{{ end }}}

package/templates/partials/category/watch.tpl

@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+<div class="btn-group bottom-sheet" component="topic/watch">
 	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="category/watching/menu" {{{ if !./isWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:watching]]</span></span>
 
@@ -9,11 +9,35 @@
 	</button>
 
 	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text text-muted"><small>[[category:watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/watching" data-state="watching">
+				<span><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-inbox"></i> [[category:watching]]</span>
+					<p class="help-text text-muted"><small>[[category:watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/notwatching" data-state="notwatching">
+				<span><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]</span>
+					<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/ignoring" data-state="ignoring">
+				<span><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]</span>
+					<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p>
+				</div>
+			</a>
+		</li>
 	</ul>
 </div>
 {{{ end }}}

package/templates/partials/chats/message-window.tpl

@@ -6,8 +6,9 @@
 
 {{{ if roomId }}}
 <div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
-	<div component="chat/header" class="d-flex align-items-center px-3 gap-1">
-		<h5 class="members flex-1 fw-semibold tracking-tight">
+	<div component="chat/header" class="d-flex align-items-center px-3 gap-2">
+		<a href="#" data-action="close" role="button" class="d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
+		<h5 class="members flex-1 fw-semibold tracking-tight mb-0">
 			{./chatWithMessage}
 		</h5>
 

package/templates/partials/chats/message.tpl

@@ -14,7 +14,7 @@
 		{{{ end }}}
 	</div>
 	<div class="message-body-wrapper hover-parent">
-		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto">
+		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto text-break">
 			{messages.content}
 		</div>
 

package/templates/partials/flags/filters.tpl

@@ -30,7 +30,7 @@
 				<div class="mb-3">
 					<label class="form-label" for="filter-cid">[[flags:filter-cid]]</label>
 					<div class="input-group">
-					<!-- IMPORT partials/category-filter.tpl -->
+					<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 					</div>
 				</div>
 				<div class="mb-3">

package/templates/partials/groups/admin.tpl

@@ -82,7 +82,7 @@
 			<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
 			<div class="d-flex gap-1">
 				<div class="member-post-cids-selector">
-					<!-- IMPORT partials/category-selector.tpl -->
+					<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
 				</div>
 				<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
 			</div>

package/templates/partials/mobile-footer.tpl

@@ -1,70 +1,78 @@
-<div class="text-dark bg-light bottombar p-2 d-flex d-md-none justify-content-between fixed-bottom ff-secondary align-items-center">
-	<div class="bottom-sheet">
-		<button class="btn" data-bs-toggle="dropdown">
-			<i class="fa fa-bars"></i>
-		</button>
-		<ul class="dropdown-menu">
-			{{{ each navigation }}}
-			<!-- IF function.displayMenuItem, @index -->
-			<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-				<a class="nav-link nav-btn navigation-link p-3 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
-				{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
-					<span class="d-inline-flex justify-content-between align-items-center w-100">
-						<span class="text-nowrap truncate-open">
-							{{{ if ./iconClass }}}
-							<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
-							{{{ end }}}
-							{{{ if navigation.text }}}
-							<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
-							{{{ end }}}
+<div class="d-flex flex-column d-md-none fixed-bottom ff-secondary  gap-1 align-items-center">
+
+	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
+
+	<div class="bottombar p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
+		<div class="">
+			<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
+				<span class="position-relative">
+					<i class="fa fa-fw fa-lg fa-bars"></i>
+					<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
+				</span>
+			</a>
+			<ul class="navigation-dropdown dropdown-menu">
+				{{{ each navigation }}}
+				<!-- IF function.displayMenuItem, @index -->
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+					<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+					{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+						<span class="d-inline-flex justify-content-between align-items-center w-100">
+							<span class="text-nowrap truncate-open">
+								{{{ if ./iconClass }}}
+								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
+								{{{ end }}}
+								{{{ if navigation.text }}}
+								<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
+								{{{ end }}}
+							</span>
+							<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>
-						<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
-					</span>
-				</a>
-				{{{ if navigation.dropdown }}}
-				<div class="ps-3">
-					<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
-						{navigation.dropdownContent}
-					</ul>
-				</div>
-				{{{ end }}}
-			</li>
-			<!-- ENDIF function.displayMenuItem -->
-			{{{end}}}
-		</ul>
-	</div>
+					</a>
+					{{{ if navigation.dropdown }}}
+					<div class="ps-3">
+						<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
+							{navigation.dropdownContent}
+						</ul>
+					</div>
+					{{{ end }}}
+				</li>
+				<!-- ENDIF function.displayMenuItem -->
+				{{{end}}}
+			</ul>
+		</div>
 
-	<div class="">
-		{{{ if config.loggedIn }}}
-		<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
-			{{{ if config.searchEnabled }}}
-			<li component="sidebar/search" class="nav-item m-0 search bottom-sheet position-relative">
-			<!-- IMPORT partials/sidebar/search-mobile.tpl -->
-			</li>
-			{{{ end }}}
+		<div class="">
+			{{{ if config.loggedIn }}}
+			<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
+				{{{ if config.searchEnabled }}}
+				<li component="sidebar/search" class="nav-item m-0 search">
+				<!-- IMPORT partials/sidebar/search-mobile.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="notifications" class="nav-item m-0 notifications bottom-sheet">
-			<!-- IMPORT partials/sidebar/notifications.tpl -->
-			</li>
+				<li component="notifications" class="nav-item m-0 notifications">
+				<!-- IMPORT partials/sidebar/notifications.tpl -->
+				</li>
 
-			{{{ if canChat }}}
-			<li class="nav-item m-0 chats bottom-sheet">
-			<!-- IMPORT partials/sidebar/chats.tpl -->
-			</li>
-			{{{ end }}}
+				{{{ if canChat }}}
+				<li class="nav-item m-0 chats">
+				<!-- IMPORT partials/sidebar/chats.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="sidebar/drafts" class="nav-item m-0 drafts bottom-sheet">
-			<!-- IMPORT partials/sidebar/drafts.tpl -->
-			</li>
+				<li component="sidebar/drafts" class="hidden nav-item m-0 drafts">
+				<!-- IMPORT partials/sidebar/drafts.tpl -->
+				</li>
 
-			<li id="user_label" class="nav-item m-0 py-2 bottom-sheet usermenu">
-			<!-- IMPORT partials/sidebar/user-menu.tpl -->
-			</li>
-		</ul>
-		{{{ else }}}
-		<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
-			<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
-		</ul>
-		{{{ end }}}
+				<li id="user_label" class="nav-item m-0 py-2 usermenu">
+				<!-- IMPORT partials/sidebar/user-menu.tpl -->
+				</li>
+			</ul>
+			{{{ else }}}
+			<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
+				<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
+			</ul>
+			{{{ end }}}
+		</div>
 	</div>
 </div>

package/templates/partials/post_bar.tpl

@@ -16,10 +16,11 @@
 			<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss text-primary"></i></a>
 			{{{ end }}}
 
-			<span class="loading-indicator btn float-start text-muted navbar-text hidden" done="0">
-				<i class="fa fa-refresh fa-spin"></i>
-				<span class="hidden-xs">[[topic:loading_more_posts]]</span>
-			</span>
+			{{{ if browsingUsers }}}
+			<div class="hidden-xs">
+			<!-- IMPORT partials/topic/browsing-users.tpl -->
+			</div>
+			{{{ end }}}
 		</ul>
 		<!-- IMPORT partials/topic/reply-button.tpl -->
 	</div>

package/templates/partials/posts_list_item.tpl

@@ -1,5 +1,5 @@
 <hr/>
-<a class="topic-title fw-semibold fs-5 text-reset" href="{config.relative_path}/post/{./pid}">
+<a class="topic-title fw-semibold fs-5 text-reset text-break" href="{config.relative_path}/post/{./pid}">
     {{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
 </a>
 <li component="post" class="posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
@@ -12,7 +12,7 @@
             <span class="timeago text-sm text-muted" title="{../timestampISO}"></span>
         </div>
 
-        <div component="post/content" class="content text-sm">
+        <div component="post/content" class="content text-sm text-break">
             {../content}
         </div>
     </div>

package/templates/partials/quick-search-results.tpl

@@ -9,7 +9,7 @@
 </div>
 {{{ end }}}
 
-<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 overflow-auto" style="max-width:400px; max-height: 500px;">
+<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 overflow-auto overscroll-behavior-contain" style="max-width:  400px; max-height: 500px;">
 	<li role="separator" class="dropdown-divider d-none d-md-block"></li>
 	{{{ each posts }}}
 	<li data-tid="{posts.topic.tid}" data-pid="{posts.pid}" class="d-flex flex-column gap-1">

package/templates/partials/sidebar/chats.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="chats-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="chat/list" class="chat-list chats-list list-unstyled p-0 pe-1">
+		<ul component="chat/list" class="chat-list chats-list list-unstyled overscroll-behavior-contain p-0 pe-1">
 			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
 				<div class="main-avatar">
 					<div class="placeholder" style="width: 32px; height: 32px;"></div>
@@ -47,7 +47,10 @@
 	<li class="notif-dropdown-link">
 		<div class="d-flex justify-content-center gap-1 flex-wrap">
 			<a component="chats/mark-all-read" role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate ff-secondary"><i class="fa fa-check-double"></i> [[modules:chat.mark_all_read]]</a>
-			<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
+			<!-- on md and up see all chats button goes to last room -->
+			<a class="d-none d-md-inline btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/user/{user.userslug}/chats{{{ if user.lastRoomId }}}/{user.lastRoomId}{{{ end }}}"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
+			<!-- on xs&sm the see all chats button goes to the list of chats -->
+			<a class="d-inline d-md-none btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
 		</div>
 	</li>
 </ul>

package/templates/partials/sidebar/drafts.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="drafts-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="drafts/list" class="draft-list list-unstyled d-flex flex-column gap-1 pe-1">
+		<ul component="drafts/list" class="draft-list list-unstyled d-flex flex-column overscroll-behavior-contain gap-1 pe-1">
 			<li class="no-drafts text-center p-2">[[modules:composer.no-drafts]]</li>
 
 			{{{ each drafts }}}
@@ -22,12 +22,12 @@
 					<div class="dropdown-item rounded-1 p-2 d-flex flex-column gap-2 pointer" component="drafts/open" data-save-id="{./save_id}">
 						{{{ if (./action == "topics.post") }}}
 						{{{ if ./title}}}
-						<div class="text text-xs fw-semibold line-clamp-2">{./title}</div>
+						<div class="text text-xs fw-semibold line-clamp-2 text-break">{./title}</div>
 						{{{ end }}}
 						{{{ end }}}
 
 						{{{ if (./action == "posts.reply") }}}
-						<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.replying_to, "{./title}"]]</div>
+						<div class="text text-xs fw-semibold line-clamp-2 text-break">[[topic:composer.replying_to, "{./title}"]]</div>
 						{{{ end }}}
 
 						{{{ if (./action == "posts.edit") }}}
@@ -35,7 +35,7 @@
 						{{{ end }}}
 
 						{{{ if ./text }}}
-						<div class="text text-sm line-clamp-3">{./text}</div>
+						<div class="text text-sm line-clamp-3 text-break">{./text}</div>
 						{{{ end }}}
 						<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
 					</div>

package/templates/partials/sidebar/notifications.tpl

@@ -4,13 +4,13 @@
 			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
 			<span component="notifications/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 		</span>
-		<span class="nav-text small visible-open fw-semibold">[[global:header.notifications]]</span>
+		<span class="nav-text small visible-open fw-semibold truncate-text">[[global:header.notifications]]</span>
 	</span>
 	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 </a>
-<ul class="notifications-dropdown dropdown-menu p-2 shadow">
+<ul class="notifications-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="notifications/list" class="notification-list list-unstyled">
+		<ul component="notifications/list" class="notification-list list-unstyled overscroll-behavior-contain">
 			<li class="mb-2 placeholder-wave">
 				<div class="text-sm placeholder col-11">&nbsp;</div>
 				<div class="text-sm placeholder col-5">&nbsp;</div><br />

package/templates/partials/sidebar/search-mobile.tpl

@@ -15,7 +15,7 @@
 				<div class="quick-search-results-container"></div>
 			</div>
 
-			<div class="d-flex gap-1 input-container mt-2">
+			<div class="d-flex gap-1 input-container">
 				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
 
 				<div class="nav-btn d-flex justify-content-center align-items-center advanced-search-link">

package/templates/partials/sidebar/user-menu.tpl

@@ -2,7 +2,7 @@
 	{buildAvatar(user, "20px", true)}
 	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
 </label>
-<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
+<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-1" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
 			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span></div>

package/templates/partials/sidebar-left.tpl

@@ -28,7 +28,10 @@
 		{{{end}}}
 	</ul>
 	<div class="w-100">
+		{{{ if !config.disableCustomUserSkins }}}
 		<!-- IMPORT partials/skin-switcher.tpl -->
+		{{{ end }}}
+
 		<div class="sidebar-toggle m-2 d-none d-lg-block">
 			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap">
 				<i class="fa fa-fw fa-angles-right"></i>

package/templates/partials/topic/event.tpl

@@ -2,7 +2,7 @@
 	<div class="timeline-badge">
 		<i class="fa {{{ if ./icon }}}{./icon}{{{ else }}}fa-circle{{{ end }}} small"></i>
 	</div>
-	<span class="timeline-text small">
+	<span class="timeline-text small d-flex align-items-center gap-1">
 		{./text}
 	</span>
 	{{{ if privileges.isAdminOrMod }}}

package/templates/partials/topic/navigation-post.tpl

@@ -1,14 +1,10 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="clearfix">
-	<div class="icon float-start">
-		<a href="<!-- IF post.user.userslug -->{config.relative_path}/user/{post.user.userslug}<!-- ELSE -->#<!-- ENDIF post.user.userslug -->">
-			{buildAvatar(post.user, "24px", true, "", "user/picture")} {post.user.username}
+<div class="d-flex gap-2 mb-2 justify-content-between align-items-center flex-nowrap">
+	<div class="icon text-truncate">
+		<a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{else }}}#{{{ end }}}">
+			{buildAvatar(post.user, "24px", true)} {post.user.username}
 		</a>
 	</div>
-	<small class="float-end">
-		<span class="timeago" title="{post.timestampISO}"></span>
-	</small>
+	<span class="timeago text-nowrap text-sm" title="{post.timestampISO}"></span>
 </div>
 
 <div>{post.content}</div>

package/templates/partials/topic/navigator-mobile.tpl

@@ -0,0 +1,43 @@
+<div class="d-flex justify-content-end w-100">
+	<div class="pagination-block text-bg-light m-2 rounded-1 border border-gray-300" style="height:50px;">
+		<div class="position-relative">
+			<div class="progress-bar rounded-1 bg-info d-block position-absolute" style="height:50px;"></div>
+		</div>
+		<div class="wrapper d-flex align-items-center h-100" style="padding: 5px 0px;">
+			<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop" style="z-index: 1;"></i>
+
+			<a href="#" class="text-reset dropdown-toggle d-inline-block px-3 text-decoration-none" data-bs-toggle="dropdown">
+				<span class="pagination-text position-relative fw-bold"></span>
+			</a>
+
+			<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom" style="z-index: 1;"></i>
+			<ul class="dropdown-menu p-0" role="menu" style="width: 100%;">
+				<li class="p-3">
+					<div class="row">
+						<div class="col-8 post-content overflow-hidden mb-3" style="height: 350px;"></div>
+						<div class="col-4 text-end">
+							<div class="scroller-content">
+								<span class="pointer pagetop">[[topic:first-post]] <i class="fa fa-angle-double-up"></i></span>
+								<div class="scroller-container border-gray-200" style="height: 300px; border-right: 3px solid; margin-right: 5.5px;">
+									<div class="scroller-thumb position-relative" style="height: 40px;right: -6px; padding-right: 15px; margin-right: -15px;">
+										<span class="thumb-text fw-bold user-select-none position-relative" style="top: -15px; padding-right: 10px;"></span>
+										<div class="rounded-2 scroller-thumb-icon bg-primary d-inline-block position-relative" style="width: 9px; height:40px;"></div>
+									</div>
+								</div>
+								<span class="pointer pagebottom">[[topic:last-post]] <i class="fa fa-angle-double-down"></i></span>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-6">
+							<button id="myNextPostBtn" class="btn btn-outline-secondary form-control text-truncate" disabled>[[topic:go-to-my-next-post]]</button>
+						</div>
+						<div class="col-6">
+							<input type="number" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
+						</div>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>

package/templates/partials/topic/post.tpl

@@ -74,7 +74,7 @@
 		<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 !posts.replies.count }}}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, "")}</span>
+				<span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
 				{{{end}}}
 				{{{ if posts.replies.hasMore}}}
 				<span><i class="fa fa-ellipsis"></i></span>
@@ -104,7 +104,7 @@
 				<i class="fa fa-chevron-up text-primary"></i>
 			</a>
 
-			<div class="d-inline-block px-3 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
+			<div class="d-inline-block px-2 mx-1 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
 
 			{{{ if !downvote:disabled }}}
 			<a component="post/downvote" href="#" class="btn-ghost-sm {{{ if posts.downvoted }}}downvoted{{{ end }}}">

package/templates/partials/topic/quickreply.tpl

@@ -9,14 +9,14 @@
 	<form class="flex-grow-1 d-flex flex-column gap-2" method="post" action="{config.relative_path}/compose">
 		<input type="hidden" name="tid" value="{tid}" />
 		<input type="hidden" name="_csrf" value="{config.csrf_token}" />
-		<div class="quickreply-message">
+		<div class="quickreply-message position-relative">
 			<textarea rows="4" name="content" component="topic/quickreply/text" class="form-control mousetrap" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
 			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
 		<div>
-			<div class="btn-group">
+			<div class="d-flex justify-content-end gap-2">
+				<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-outline" formmethod="get"><i class="fa fa-expand"></i></button>
 				<button type="submit" component="topic/quickreply/button" class="btn btn-sm btn-primary">[[topic:post-quick-reply]]</button>
-				<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-primary" formmethod="get"><i class="fa fa-expand"></i></button>
 			</div>
 		</div>
 	</form>

package/templates/partials/topic/watch.tpl

@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+<div class="btn-group bottom-sheet" component="topic/watch">
 	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="topic/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
 			<i class="fa fa-fw fa-bell-o link-primary"></i>
@@ -17,11 +17,35 @@
 		</span>
 	</button>
 	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" component="topic/following"><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]<p class="help-text text-muted"><small>[[topic:watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="topic/following">
+				<span><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]</span>
+					<p class="help-text text-muted"><small>[[topic:watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="topic/not-following"><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]<p class="help-text text-muted"><small>[[topic:not-watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="topic/not-following">
+				<span><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]</span>
+					<p class="help-text text-muted"><small>[[topic:not-watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="topic/ignoring"><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]<p class="help-text text-muted"><small>[[topic:ignoring.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="topic/ignoring">
+				<span><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]</span>
+					<p class="help-text text-muted"><small>[[topic:ignoring.description]]</small></p>
+				</div>
+			</a>
+		</li>
 	</ul>
 </div>
 {{{ end }}}

package/templates/partials/topic-list-bar.tpl

@@ -1,5 +1,5 @@
 <nav class="topic-list-header {{{ if config.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded">
-	<div class="card card-header flex-row p-2 border rounded ff-secondary w-100">
+	<div class="card card-header flex-row p-2 gap-1 border rounded ff-secondary w-100">
 		<ul class="navbar-nav me-auto gap-2 align-items-center">
 			{{{ if template.category }}}
 			<!-- IMPORT partials/category/watch.tpl -->
@@ -10,15 +10,15 @@
 			{{{ end }}}
 			{{{ if (template.unread || (template.recent || (template.popular || template.top))) }}}
 			<!-- IMPORT partials/topic-filters.tpl -->
-			<!-- IMPORT partials/category-filter.tpl -->
+			<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 			{{{ end }}}
 			{{{ if template.unread }}}
 			<div class="markread btn-group {{{ if !topics.length }}}hidden{{{ end }}}">
-				<!-- IMPORT partials/category-selector.tpl -->
+				<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
 			</div>
 			{{{ end }}}
 			{{{ if template.tag }}}
-			<!-- IMPORT partials/category-filter.tpl -->
+			<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 			{{{ end }}}
 			<!-- IMPORT partials/category/tools.tpl -->
 
@@ -27,11 +27,11 @@
 			{{{ end }}}
 
 			<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="d-inline-block text-decoration-none">
-				<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
+				<div class="d-md-block alert alert-warning h-100 m-0 px-2 py-1 line-clamp-2 text-sm text-break hide" id="new-topics-alert">There is a new post. Click here to reload.</div>
 			</a>
 		</ul>
 
-		<div class="d-flex gap-1 align-items-stretch">
+		<div class="d-flex gap-1 align-items-center">
 			{{{ if template.category }}}
 				{{{ if privileges.topics:create }}}
 				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary btn-sm text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>