nodebb-theme-harmony 1.0.0-beta.1 → 1.0.0-beta.11

package/package.json

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

package/public/harmony.js

@@ -1,9 +1,11 @@
 'use strict';
 
 $(document).ready(function () {
+	setupNProgress();
 	setupMobileMenu();
 	setupSearch();
 	setupDrafts();
+	handleMobileNavigator();
 
 	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
 		const skin = $(this).attr('data-value');
@@ -55,26 +57,6 @@ $(document).ready(function () {
 		$('[component="sidebar/search"]').on('shown.bs.dropdown', function () {
 			$(this).find('[component="search/fields"] input[name="query"]').trigger('focus');
 		});
-
-		function resizeResults(hookData) {
-			if (hookData && hookData.data && !hookData.data.posts.length) {
-				$('.bottombar .quick-search-results').css({ height: 'initial' });
-				return;
-			}
-			const dropdown = $('.bottombar .search-dropdown');
-			const padY = dropdown.innerHeight() - dropdown.height();
-			const input = dropdown.find('.input-container').outerHeight(true);
-			const showMore = dropdown.find('.show-more-container').outerHeight(true);
-			const newHeight = Math.max(
-				150,
-				$(window).height() - (input + (showMore || 0) + (padY * 2) + 30)
-			);
-			$('.bottombar .quick-search-results').height(newHeight);
-		}
-		require(['hooks'], function (hooks) {
-			$(window).on('resize', resizeResults);
-			hooks.on('action:search.quick.complete', resizeResults);
-		});
 	}
 
 	function setupDrafts() {
@@ -122,4 +104,32 @@ $(document).ready(function () {
 			updateBadgeCount();
 		});
 	}
+
+	function setupNProgress() {
+		require(['nprogress'], function (NProgress) {
+			window.nprogress = NProgress;
+			if (NProgress) {
+				$(window).on('action:ajaxify.start', function () {
+					NProgress.set(0.7);
+				});
+
+				$(window).on('action:ajaxify.end', function () {
+					NProgress.done(true);
+				});
+			}
+		});
+	}
+
+	function handleMobileNavigator() {
+		const paginationBlockEl = $('.pagination-block');
+		require(['hooks'], function (hooks) {
+			hooks.on('action:ajaxify.end', function () {
+				paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
+			});
+			hooks.on('filter:navigator.scroll', function (hookData) {
+				paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
+				return hookData;
+			});
+		});
+	}
 });

package/scss/chats.scss

@@ -6,8 +6,10 @@
 body.page-user-chats {
 	overflow: hidden;
 }
-
-.expanded-chat, .chat-modal {
+[component="chat/nav-wrapper"] {
+	width: 300px;
+}
+.expanded-chat {
 	// no taskbar so hide minimize button
 	[data-action="minimize"] {
 		display: none!important;
@@ -38,6 +40,9 @@ body.page-user-chats {
 
 /* Mobile handling of chat page */
 @include media-breakpoint-down(md) {
+	[component="chat/nav-wrapper"] {
+		width: 100%;
+	}
 	.page-user-chats {
 		.chats-full {
 			padding-bottom: 8rem!important;

package/scss/harmony.scss

@@ -19,5 +19,6 @@
 @import "modules/composer";
 @import "modules/topics-list";
 @import "modules/cover";
+@import "modules/nprogress";
 
 @import "skins";

package/scss/modules/bottom-sheet.scss

@@ -1,5 +1,5 @@
 .bottom-sheet {
-	@include media-breakpoint-down(sm) {
+	@include media-breakpoint-down(md) {
 		.dropdown-menu {
 			display: block;
 			visibility: hidden;

package/scss/modules/nprogress.scss

@@ -0,0 +1,80 @@
+#nprogress {
+	pointer-events: none;
+}
+
+$nprogress-color: $primary;
+
+#nprogress .bar {
+	background: $nprogress-color;
+	position: fixed;
+	z-index: 1031;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 2px;
+}
+
+#nprogress .peg {
+	display: block;
+	position: absolute;
+	right: 0px;
+	width: 100px;
+	height: 100%;
+	box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
+	opacity: 1.0;
+
+	-webkit-transform: rotate(3deg) translate(0px, -4px);
+		-ms-transform: rotate(3deg) translate(0px, -4px);
+			transform: rotate(3deg) translate(0px, -4px);
+}
+
+#nprogress .spinner {
+	display: none;
+	position: fixed;
+	z-index: 1031;
+	top: 15px;
+	right: 15px;
+}
+
+@include media-breakpoint-down(sm) {
+	#nprogress .spinner {
+	  bottom: 15px;
+	  right: 15px;
+	  top: initial;
+	}
+}
+
+
+#nprogress .spinner-icon {
+	width: 18px;
+	height: 18px;
+	box-sizing: border-box;
+
+	border: solid 2px transparent;
+	border-top-color: $nprogress-color;
+	border-left-color: $nprogress-color;
+	border-radius: 50%;
+
+	-webkit-animation: nprogress-spinner 400ms linear infinite;
+			animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+	overflow: hidden;
+	position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+	position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+	0%   { -webkit-transform: rotate(0deg); }
+	100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+	0%   { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+

package/scss/sidebar.scss

@@ -113,7 +113,32 @@
 		font-size: 9px;
 		line-height: 12px;
 	}
-	.search.bottom-sheet .dropdown-menu {
-		max-height: 100%;
+
+	.navigation-dropdown, .user-dropdown {
+		> li {
+			> a, .dropdown-item {
+				padding: 10px 20px!important;
+			}
+		}
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		max-height: 60vh!important;
+		overflow: auto!important;
+	}
+	.search-dropdown .quick-search-results {
+		max-height: 250px!important;
+		overflow-y: auto!important;
+	}
+	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		ul {
+			max-height: 60vh!important;
+			overflow-y: auto!important;
+		}
 	}
 }

package/scss/topic.scss

@@ -1,3 +1,5 @@
+.pagination-block { display: none; }
+
 .page-topic {
 	[component="topic/title"] {
 		font-size: 28px;
@@ -106,6 +108,15 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		display: block;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+		&.ready {
+			opacity: 1;
+		}
+	}
 }
 
 @include media-breakpoint-up(sm) {

package/templates/chats.tpl

@@ -1,5 +1,5 @@
 <div class="chats-full d-flex gap-1 vh-100 py-3">
-	<div class="d-flex flex-column h-100" style="width:300px;" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
+	<div class="d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
 		<div class="chat-search dropdown mb-2">
 			<label class="text-xs text-muted">[[users:search-user-for-chat]]</label>
 

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/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="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/sidebar/chats.tpl

@@ -45,9 +45,12 @@
 	</li>
 	<li class="dropdown-divider"></li>
 	<li class="notif-dropdown-link">
-		<div class="d-flex justify-content-center gap-1 flex-nowrap">
-			<a component="chats/mark-all-read" role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap 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 ff-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
+		<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>
+			<!-- 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

@@ -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") }}}

package/templates/partials/sidebar/notifications.tpl

@@ -4,11 +4,11 @@
 			<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">
 			<li class="mb-2 placeholder-wave">
@@ -20,9 +20,9 @@
 	</li>
 	<li class="dropdown-divider"></li>
 	<li class="notif-dropdown-link">
-		<div class="d-flex justify-content-center gap-1 flex-nowrap">
-			<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap ff-secondary"><i class="fa fa-check-double"></i> [[notifications:mark_all_read]]</a>
-			<a class="btn btn-sm btn-primary flex-fill text-nowrap ff-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>
+		<div class="d-flex justify-content-center gap-1 flex-wrap">
+			<a 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> [[notifications:mark_all_read]]</a>
+			<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>
 		</div>
 	</li>
 </ul>

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="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/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/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-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 -->
@@ -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>

package/templates/partials/topics_list.tpl

@@ -14,7 +14,7 @@
 					<div class="avatar">
 						<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none">
 							{{{ if ./thumbs.length }}}
-							<img src="{./thumbs.0.url}" class="not-responsive" />
+							<img class="topic-thumb rounded-1" width="80" height="auto" src="{./thumbs.0.url}" class="not-responsive" />
 							{{{ else }}}
 							{buildAvatar(./user, "40px", true, "not-responsive")}
 							{{{ end }}}
@@ -22,7 +22,7 @@
 					</div>
 				</div>
 				<div class="d-flex flex-column gap-1">
-					<h2 component="topic/header" class="title mb-1 {{{ if showSelect }}}me-4{{{ end }}} me-md-0 text-md fw-bold">
+					<h2 component="topic/header" class="text-break title mb-1 {{{ if showSelect }}}me-4{{{ end }}} me-md-0 text-md fw-bold">
 						{{{ if topics.noAnchor }}}
 						<span>{./title}</span>
 						{{{ else }}}

package/templates/topic.tpl

@@ -6,7 +6,7 @@
 </div>
 {{{ end }}}
 
-<h2 component="post/header" class="fs-2 mb-0 {{{ if config.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
+<h2 component="post/header" class="fs-2 mb-0 text-break {{{ if config.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
 	<span class="topic-title" component="topic/title">{title}</span>
 </h2>
 
@@ -28,7 +28,7 @@
 			<i class="fa fa-arrow-circle-right"></i>
 			{{{ if privileges.isAdminOrMod }}}[[topic:moved-from, {oldCategory.name}]]{{{ else }}}[[topic:moved]]{{{ end }}}
 		</span>
-		{{{each icons}}}<span class="align-middle">{@value}</span>{{{end}}}
+		{{{each icons}}}<span>{@value}</span>{{{end}}}
 	</span>
 	<a class="lh-1" href="{config.relative_path}/category/{category.slug}">{function.buildCategoryLabel, category, "border"}</a>
 	<div class="lh-1 tags tag-list d-flex hidden-xs gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>