nodebb-theme-harmony 2.0.21 → 2.0.23

package/library.js

@@ -16,6 +16,7 @@ const defaults = {
 	mobileTopicTeasers: 'off',
 	stickyToolbar: 'on',
 	topicSidebarTools: 'on',
+	topMobilebar: 'off',
 	autohideBottombar: 'on',
 	openSidebars: 'off',
 	chatModals: 'off',
@@ -150,6 +151,7 @@ library.loadThemeConfig = async function (uid) {
 	config.stickyToolbar = config.stickyToolbar === 'on';
 	config.topicSidebarTools = config.topicSidebarTools === 'on';
 	config.autohideBottombar = config.autohideBottombar === 'on';
+	config.topMobilebar = config.topMobilebar === 'on';
 	config.openSidebars = config.openSidebars === 'on';
 	config.chatModals = config.chatModals === 'on';
 	return config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "nbbpm": {
     "compatibility": "^4.0.0"
   },

package/public/harmony.js

@@ -63,6 +63,7 @@ $(document).ready(function () {
 			});
 
 			const bottomBar = $('[component="bottombar"]');
+			const location = config.theme.topMobilebar ? 'top' : 'bottom';
 			const $body = $('body');
 			const $window = $(window);
 			$body.on('shown.bs.dropdown hidden.bs.dropdown', '.sticky-tools', function () {
@@ -86,12 +87,18 @@ $(document).ready(function () {
 					const diff = Math.abs(st - lastScrollTop);
 					const scrolledDown = st > lastScrollTop;
 					const scrolledUp = st < lastScrollTop;
+					const isHiding = !scrolledUp && scrolledDown;
 					if (diff > 10) {
 						bottomBar.css({
-							bottom: !scrolledUp && scrolledDown ?
+							[location]: isHiding ?
 								-bottomBar.find('.bottombar-nav').outerHeight(true) :
 								0,
 						});
+						if (config.theme.topMobilebar && config.theme.autohideBottombar) {
+							$('.sticky-tools').css({
+								top: isHiding ? 0 : 'var(--panel-offset)',
+							});
+						}
 					}
 				}
 				lastScrollTop = st;
@@ -116,7 +123,7 @@ $(document).ready(function () {
 			hooks.on('action:ajaxify.end', function () {
 				$window.off('scroll', delayedScroll);
 				if (config.theme.autohideBottombar) {
-					bottomBar.css({ bottom: 0 });
+					bottomBar.css({ [location]: 0 });
 					setTimeout(enableAutohide, 250);
 				}
 			});

package/scss/harmony.scss

@@ -7,6 +7,7 @@
 @import "category";
 @import "chats";
 @import "sidebar";
+@import "mobilebar";
 @import "status";
 @import "account";
 @import "groups";

package/scss/mobilebar.scss

@@ -0,0 +1,63 @@
+.navigator-mobile {
+	.pagination-block {
+		.scroller-container {
+			border-right: 3px solid;
+			margin-right: 5.5px;
+			.scroller-thumb {
+				right: -6px;
+				padding-right: 15px;
+				margin-right: -15px;
+			}
+		}
+	}
+}
+
+.bottombar-nav {
+	#user_dropdown .avatar {
+		margin: 2px 0; // fixes the avatar so its height is same as the icons on right sidebar
+	}
+	.nav-text {
+		font-size: 1rem;
+		color: $body-color;
+	}
+	.nav-link {
+		padding: 8px;
+		border-radius: $border-radius-sm;
+	}
+	.usermenu, .chats, .notifications, .drafts, .search, .logged-out-menu {
+		.visible-open { display: none; }
+	}
+	.badge {
+		font-size: 9px;
+		line-height: 12px;
+	}
+
+	.dropdown-menu {
+		left: 0!important;
+		right: 0!important;
+		box-shadow: none!important;
+		border-left: 0;
+		border-right: 0;
+		border-radius: 0;
+		.list-container {
+			max-height: 60vh!important;
+			overflow-y: auto!important;
+		}
+	}
+
+	.navigation-dropdown, .user-dropdown {
+		> li {
+			> a, .dropdown-item {
+				padding: 10px 20px!important;
+			}
+		}
+
+		max-height: 60vh!important;
+		overflow: auto!important;
+	}
+
+	.search-dropdown .quick-search-results {
+		max-height: 225px!important;
+		overflow-y: auto!important;
+	}
+}

package/scss/modules/cover.scss

@@ -6,7 +6,7 @@
 	position: absolute;
 	background-origin: content-box;
 	width: 100%;
-	top: var(--panel-offset);
+	top: var(--panel-offset)!important;
 	left: auto;
 	right: 0px;
 

package/scss/sidebar.scss

@@ -121,68 +121,3 @@
 }
  /*rtl:end:ignore*/
 
-.bottombar {
-	transition: bottom 150ms linear;
-
-	.pagination-block {
-		.scroller-container {
-			border-right: 3px solid;
-			margin-right: 5.5px;
-			.scroller-thumb {
-				right: -6px;
-				padding-right: 15px;
-				margin-right: -15px;
-			}
-		}
-	}
-}
-
-.bottombar-nav {
-	#user_dropdown .avatar {
-		margin: 2px 0; // fixes the avatar so its height is same as the icons on right sidebar
-	}
-	.nav-text {
-		font-size: 1rem;
-		color: $body-color;
-	}
-	.nav-link {
-		padding: 8px;
-		border-radius: $border-radius-sm;
-	}
-	.usermenu, .chats, .notifications, .drafts, .search, .logged-out-menu {
-		.visible-open { display: none; }
-	}
-	.badge {
-		font-size: 9px;
-		line-height: 12px;
-	}
-
-	.dropdown-menu {
-		left: 0!important;
-		right: 0!important;
-		box-shadow: none!important;
-		border-left: 0;
-		border-right: 0;
-		border-radius: 0;
-		.list-container {
-			max-height: 60vh!important;
-			overflow-y: auto!important;
-		}
-	}
-
-	.navigation-dropdown, .user-dropdown {
-		> li {
-			> a, .dropdown-item {
-				padding: 10px 20px!important;
-			}
-		}
-
-		max-height: 60vh!important;
-		overflow: auto!important;
-	}
-
-	.search-dropdown .quick-search-results {
-		max-height: 225px!important;
-		overflow-y: auto!important;
-	}
-}

package/templates/account/theme.tpl

@@ -58,6 +58,13 @@
 		</label>
 	</div>
 
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="topMobilebar" name="topMobilebar" {{{ if theme.topMobilebar }}}checked{{{ end }}}>
+		<label class="form-check-label" for="topMobilebar">
+			[[themes/harmony:settings.topMobilebar]]
+		</label>
+	</div>
+
 	<div class="form-check form-switch mb-3">
 		<input class="form-check-input" type="checkbox" role="switch" id="openSidebars" name="openSidebars" {{{ if theme.openSidebars }}}checked{{{ end }}}>
 		<label class="form-check-label" for="openSidebars">[[themes/harmony:settings.openSidebars]]</label>

package/templates/admin/plugins/harmony.tpl

@@ -48,6 +48,12 @@
 						</p>
 					</div>
 				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="topMobilebar" name="topMobilebar" />
+					<div for="topMobilebar" class="form-check-label">
+						[[themes/harmony:settings.topMobilebar]]
+					</div>
+				</div>
 				<div class="form-check form-switch">
 					<input type="checkbox" class="form-check-input" id="openSidebars" name="openSidebars" />
 					<label for="openSidebars" class="form-check-label">[[themes/harmony:settings.openSidebars]]</label>

package/templates/footer.tpl

@@ -3,7 +3,14 @@
 		</main>
 		<!-- IMPORT partials/sidebar-right.tpl -->
 	</div>
+	{{{ if !config.theme.topMobilebar }}}
 	<!-- IMPORT partials/mobile-footer.tpl -->
+	{{{ else }}}
+	<div class="fixed-bottom navigator-mobile">
+		<!-- IMPORT partials/topic/navigator-mobile.tpl -->
+	</div>
+	{{{ end }}}
+
 	{{{ if !isSpider }}}
 	<div>
 		<div component="toaster/tray" class="alert-window fixed-bottom mb-5 mb-md-2 me-2 me-md-5 ms-auto" style="width:300px; z-index: 1090;">

package/templates/header.tpl

@@ -11,8 +11,7 @@
 		var app = {
 			user: JSON.parse('{{userJSON}}')
 		};
-
-		document.documentElement.style.setProperty('--panel-offset', `${localStorage.getItem('panelOffset') || 0}px`);
+		document.documentElement.style.setProperty('--panel-offset', `0px`);
 	</script>
 
 	{{{if useCustomHTML}}}
@@ -25,21 +24,16 @@
 
 <body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
 	<a class="visually-hidden-focusable position-absolute top-0 start-0 p-3 m-3 bg-body" style="z-index: 1021;" href="#content">[[global:skip-to-content]]</a>
+
+	{{{ if config.theme.topMobilebar }}}
+	<!-- IMPORT partials/mobile-header.tpl -->
+	{{{ end }}}
+
 	<div class="layout-container d-flex justify-content-between pb-4 pb-md-0">
 		<!-- IMPORT partials/sidebar-left.tpl -->
 
 		<main id="panel" class="d-flex flex-column gap-3 flex-grow-1 mt-3" style="min-width: 0;">
 			<!-- IMPORT partials/header/brand.tpl -->
-			<script>
-				const headerEl = document.getElementById('header-menu');
-				if (headerEl) {
-					const rect = headerEl.getBoundingClientRect();
-					const offset = Math.max(0, rect.bottom);
-					document.documentElement.style.setProperty('--panel-offset', offset + `px`);
-				} else {
-					document.documentElement.style.setProperty('--panel-offset', `0px`);
-				}
-			</script>
 			<div class="container-lg px-md-4 d-flex flex-column gap-3 h-100 mb-5 mb-lg-0" id="content">
 			<!-- IMPORT partials/noscript/warning.tpl -->
 			<!-- IMPORT partials/noscript/message.tpl -->

package/templates/partials/categories/item.tpl

@@ -14,6 +14,7 @@
 				{./descriptionParsed}
 			</div>
 			{{{ end }}}
+			{{{ if !./link }}}
 			<div class="d-flex gap-1 d-block d-lg-none w-100">
 				<span class="badge text-body border stats text-xs text-muted">
 					<i class="fa fa-fw fa-list"></i>
@@ -27,6 +28,7 @@
 				<a href="{config.relative_path}{./teaser.url}" class="border badge bg-transparent text-muted fw-normal timeago {{{ if (!./teaser.timestampISO || config.theme.mobileTopicTeasers) }}}hidden{{{ end }}}" title="{./teaser.timestampISO}"></a>
 				{{{ end }}}
 			</div>
+			{{{ end }}}
 			{{{ if !config.hideSubCategories }}}
 			{{{ if ./children.length }}}
 			<ul class="list-unstyled category-children row row-cols-1 row-cols-md-2 g-2 my-1 w-100">

package/templates/partials/mobile-footer.tpl

@@ -1,96 +1,4 @@
-<div component="bottombar" class="bottombar d-flex flex-column d-lg-none fixed-bottom ff-secondary gap-1 align-items-center" style="bottom: 0px;">
-
+<div component="bottombar" class="bottombar d-flex flex-column d-lg-none ff-secondary gap-1 align-items-center fixed-bottom" style="transition: bottom 150ms linear;">
 	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
-
-	<div class="bottombar-nav p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
-		<div class="bottombar-nav-left d-flex gap-3 align-items-center">
-			<div>
-				<a href="#" role="button" class="nav-link d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-					<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" role="menu">
-					{{{ each navigation }}}
-					{{{ if displayMenuItem(@root, @index) }}}
-					<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-						<a class="nav-link navigation-link px-3 py-2 {{{ if ./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">
-									{{{ if ./iconClass }}}
-									<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
-									{{{ end }}}
-									{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{./text}</span>{{{ end }}}
-								</span>
-								<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
-							</span>
-						</a>
-						{{{ if ./dropdown }}}
-						<div class="ps-3">
-							<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
-								{./dropdownContent}
-							</ul>
-						</div>
-						{{{ end }}}
-					</li>
-					{{{ end }}}
-					{{{ end }}}
-				</ul>
-			</div>
-		</div>
-		<div class="bottombar-nav-right d-flex gap-3 align-items-center">
-			<div>
-				{{{ 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">
-					<!-- IMPORT partials/sidebar/notifications.tpl -->
-					</li>
-
-					{{{ if canChat }}}
-					<li class="nav-item m-0 chats">
-					<!-- IMPORT partials/sidebar/chats.tpl -->
-					</li>
-					{{{ end }}}
-
-					<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 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">
-					{{{ if (config.searchEnabled && user.privileges.search:content) }}}
-					<li component="sidebar/search" class="nav-item mx-2 search">
-						<!-- IMPORT partials/sidebar/search-mobile.tpl -->
-					</li>
-					{{{ end }}}
-
-					{{{ if allowRegistration }}}
-					<li class="nav-item mx-2" title="[[global:register]]">
-						<a class="nav-link" href="{relative_path}/register">
-							<i class="fa fa-fw fa-user-plus"></i>
-						</a>
-					</li>
-					{{{ end }}}
-
-					<li class="nav-item mx-2" title="[[global:login]]">
-						<a class="nav-link" href="{relative_path}/login">
-							<i class="fa fa-fw fa-sign-in"></i>
-						</a>
-					</li>
-				</ul>
-				{{{ end }}}
-			</div>
-		</div>
-	</div>
-</div>
+	<!-- IMPORT partials/mobile-nav.tpl -->
+</div>

package/templates/partials/mobile-header.tpl

@@ -0,0 +1,14 @@
+<div component="bottombar" class="bottombar d-flex flex-column d-lg-none ff-secondary gap-1 align-items-center sticky-top" style="transition: top 150ms linear;">
+	<!-- IMPORT partials/mobile-nav.tpl -->
+</div>
+
+<script>
+	const headerEl = document.querySelector('[component="bottombar"]');
+	if (headerEl && headerEl.classList.contains('sticky-top')) {
+		const rect = headerEl.getBoundingClientRect();
+		const offset = Math.max(0, rect.bottom);
+		document.documentElement.style.setProperty('--panel-offset', offset + `px`);
+	} else {
+		document.documentElement.style.setProperty('--panel-offset', `0px`);
+	}
+</script>

package/templates/partials/mobile-nav.tpl

@@ -0,0 +1,91 @@
+<div class="bottombar-nav p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
+	<div class="bottombar-nav-left d-flex gap-3 align-items-center">
+		<div>
+			<a href="#" role="button" class="nav-link d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<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" role="menu">
+				{{{ each navigation }}}
+				{{{ if displayMenuItem(@root, @index) }}}
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+					<a class="nav-link navigation-link px-3 py-2 {{{ if ./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">
+								{{{ if ./iconClass }}}
+								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
+								{{{ end }}}
+								{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{./text}</span>{{{ end }}}
+							</span>
+							<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+						</span>
+					</a>
+					{{{ if ./dropdown }}}
+					<div class="ps-3">
+						<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
+							{./dropdownContent}
+						</ul>
+					</div>
+					{{{ end }}}
+				</li>
+				{{{ end }}}
+				{{{ end }}}
+			</ul>
+		</div>
+	</div>
+	<div class="bottombar-nav-right d-flex gap-3 align-items-center">
+		<div>
+			{{{ 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">
+				<!-- IMPORT partials/sidebar/notifications.tpl -->
+				</li>
+
+				{{{ if canChat }}}
+				<li class="nav-item m-0 chats">
+				<!-- IMPORT partials/sidebar/chats.tpl -->
+				</li>
+				{{{ end }}}
+
+				<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 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">
+				{{{ if (config.searchEnabled && user.privileges.search:content) }}}
+				<li component="sidebar/search" class="nav-item mx-2 search">
+					<!-- IMPORT partials/sidebar/search-mobile.tpl -->
+				</li>
+				{{{ end }}}
+
+				{{{ if allowRegistration }}}
+				<li class="nav-item mx-2" title="[[global:register]]">
+					<a class="nav-link" href="{relative_path}/register">
+						<i class="fa fa-fw fa-user-plus"></i>
+					</a>
+				</li>
+				{{{ end }}}
+
+				<li class="nav-item mx-2" title="[[global:login]]">
+					<a class="nav-link" href="{relative_path}/login">
+						<i class="fa fa-fw fa-sign-in"></i>
+					</a>
+				</li>
+			</ul>
+			{{{ end }}}
+		</div>
+	</div>
+</div>

package/templates/partials/post_bar.tpl

@@ -1,4 +1,4 @@
-<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} {{{ if config.theme.topicSidebarTools }}}d-block d-lg-none{{{ end }}}">
+<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} {{{ if config.theme.topicSidebarTools }}}d-block d-lg-none{{{ end }}}" style="top: {{{ if (config.theme.topMobilebar && !config.theme.autohideBottombar) }}}var(--panel-offset){{{ else }}}0{{{ end }}};">
 	<nav class="d-flex flex-nowrap my-2 p-0 border-0 rounded topic-main-buttons">
 		<div class="d-flex flex-row p-2 text-bg-light border rounded w-100 align-items-center">
 			<div class="d-flex me-auto mb-0 gap-2 align-items-center flex-wrap">

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

@@ -1,9 +1,7 @@
-{{{ if multiplePages }}}
+{{{ if (multiplePages && !config.theme.topMobilebar) }}}
 <div class="show-more-container">
 	<div class="text-center d-block d-md-none">
-		<a href="{url}" class="btn btn-sm btn-primary">
-			[[search:see-more-results, {matchCount}]]
-		</a>
+		<a href="{url}" class="btn btn-sm btn-primary">[[search:see-more-results, {matchCount}]]</a>
 	</div>
 	<li role="separator" class="dropdown-divider d-block d-md-none"></li>
 </div>
@@ -35,9 +33,12 @@
 
 {{{ if multiplePages }}}
 <div class="text-center mt-2 d-none d-md-block">
-	<a href="{url}" class="btn btn-sm btn-primary">
-		[[search:see-more-results, {matchCount}]]
-	</a>
+	<a href="{url}" class="btn btn-sm btn-primary">[[search:see-more-results, {matchCount}]]</a>
+</div>
+{{{ end }}}
+{{{ if (multiplePages && config.theme.topMobilebar) }}}
+<div class="text-center mt-2 d-block d-md-none">
+	<a href="{url}" class="btn btn-sm btn-primary">[[search:see-more-results, {matchCount}]]</a>
 </div>
 {{{ end }}}
 

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

@@ -4,7 +4,7 @@
 </a>
 <div class="search-dropdown dropdown-menu p-2 shadow" role="menu">
 	<form component="search/form" id="search-form" class="d-flex justify-content-end align-items-center" role="search" method="GET">
-		<div component="search/fields" class="w-100" id="search-fields">
+		<div component="search/fields" class="d-flex flex-column w-100 {{{ if config.theme.topMobilebar }}}flex-column-reverse gap-2{{{ end }}}" id="search-fields">
 			<div id="quick-search-container" class="quick-search-container d-block hidden">
 				<div class="form-check filter-category mb-2 ms-2">
 					<input class="form-check-input" type="checkbox" checked>

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

@@ -4,7 +4,7 @@
 			{buildAvatar(post.user, "24px", true)} {post.user.username}
 		</a>
 	</div>
-	<span class="timeago text-nowrap text-sm" title="{post.timestampISO}"></span>
+	<span class="timeago text-nowrap text-sm text-muted" title="{post.timestampISO}"></span>
 </div>
 
 <div>{post.content}</div>

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

@@ -1,4 +1,4 @@
-<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} mb-3">
+<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} mb-3" style="top: {{{ if (config.theme.topMobilebar && !config.theme.autohideBottombar) }}}var(--panel-offset){{{ else }}}0{{{ end }}};">
 	<nav class="topic-list-header d-flex flex-nowrap my-2 p-0 border-0 rounded">
 		<div class="d-flex flex-row p-2 text-bg-light gap-1 border rounded w-100">
 			<div component="category/controls" class="d-flex me-auto mb-0 gap-2 flex-wrap">