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

package/templates/partials/topic/quickreply.tpl

@@ -1,7 +1,7 @@
-<!-- IF privileges.topics:reply -->
-<div component="topic/quickreply/container" class="quick-reply d-flex gap-3">
+{{{ if privileges.topics:reply }}}
+<div component="topic/quickreply/container" class="quick-reply d-flex gap-3 mb-4">
 	<div class="icon hidden-xs">
-		<a class="d-inline-block position-relative" href="<!-- IF loggedInUser.userslug -->{config.relative_path}/user/{loggedInUser.userslug}<!-- ELSE -->#<!-- ENDIF loggedInUser.userslug -->">
+		<a class="d-inline-block position-relative" href="{{{ if loggedInUser.userslug }}}{config.relative_path}/user/{loggedInUser.userslug}{{{ else }}}#{{{ end }}}">
 			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
 			{{{ if loggedInUser.status }}}<span component="user/status" class="position-absolute translate-middle-y badge border border-white border-2 rounded-circle status {loggedInUser.status}"><span class="visually-hidden">[[global:{loggedInUser.status}]]</span></span>{{{ end }}}
 		</a>
@@ -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>
@@ -25,4 +25,4 @@
 	</form>
 
 </div>
-<!-- ENDIF privileges.topics:reply -->
+{{{ end }}}

package/templates/partials/topic/reply-button.tpl

@@ -1,10 +1,10 @@
-<div component="topic/reply/container" class="btn-group action-bar bottom-sheet {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
+<div component="topic/reply/container" class="btn-group action-bar {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
 	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="d-flex align-items-center btn btn-sm btn-primary px-3 fw-semibold " component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply d-sm-block d-md-none"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
 	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown">
 		<span class="caret"></span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li><a class="dropdown-item" href="#" component="topic/reply-as-topic">[[topic:reply-as-topic]]</a></li>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
+		<li><a class="dropdown-item rounded-1" href="#" component="topic/reply-as-topic">[[topic:reply-as-topic]]</a></li>
 	</ul>
 </div>
 

package/templates/partials/topic/sort.tpl

@@ -1,13 +1,25 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span class="d-flex gap-2 align-items-center">
 			<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 			<span class="d-none d-md-inline fw-semibold">[[topic:sort_by]]</span>
 		</span>
 	</button>
-	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
+	<ul class="dropdown-menu p-1 text-sm">
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest">
+			<span class="flex-grow-1">[[topic:oldest_to_newest]]</span>
+			<i class="flex-shrink-0 fa fa-fw"></i> 
+		</a>
+		</li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest">
+			<span class="flex-grow-1">[[topic:newest_to_oldest]]</span>
+			<i class="flex-shrink-0 fa fa-fw"></i> 
+		</a>
+		</li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes">
+			<span class="flex-grow-1">[[topic:most_votes]]</span>
+			<i class="flex-shrink-0 fa fa-fw"></i> 
+		</a>
+		</li>
 	</ul>
 </div>

package/templates/partials/topic/tools.tpl

@@ -1,10 +1,10 @@
 {{{ if privileges.view_thread_tools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-gear link-primary"></i>
 		<span class="d-none d-md-inline fw-semibold">[[topic:thread_tools.title]]</span>
 	</button>
-	<ul class="dropdown-menu">
+	<ul class="dropdown-menu p-1 text-sm">
 		<li class="placeholder-wave"><a class="dropdown-item d-flex gap-2" href="#"><div class="placeholder bg-secondary rounded-1" style="width: 1em;"></div><div class="placeholder bg-secondary rounded-1 col-8"></div></a></li>
 		<li class="placeholder-wave"><a class="dropdown-item d-flex gap-2" href="#"><div class="placeholder bg-secondary rounded-1" style="width: 1em;"></div><div class="placeholder bg-secondary rounded-1 col-8"></div></a></li>
 		<li class="placeholder-wave"><a class="dropdown-item d-flex gap-2" href="#"><div class="placeholder bg-secondary rounded-1" style="width: 1em;"></div><div class="placeholder bg-secondary rounded-1 col-8"></div></a></li>

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

@@ -1,34 +1,32 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{ if privileges.editable }}}
-<li <!-- IF locked -->hidden<!-- ENDIF locked -->><a component="topic/lock" href="#" class="dropdown-item <!-- IF locked -->hidden<!-- ENDIF locked -->"><i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
-<li <!-- IF !locked -->hidden<!-- ENDIF !locked -->><a component="topic/unlock" href="#" class="dropdown-item <!-- IF !locked -->hidden<!-- ENDIF !locked -->"><i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
-<li <!-- IF pinned -->hidden<!-- ENDIF pinned -->><a component="topic/pin" href="#" class="dropdown-item <!-- IF pinned -->hidden<!-- ENDIF pinned -->"><i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
-<li <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->><a component="topic/unpin" href="#" class="dropdown-item <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"><i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]</a></li>
+<li {{{ if locked }}}hidden{{{ end }}}><a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if locked }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
+<li {{{ if !locked }}}hidden{{{ end }}}><a component="topic/unlock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !locked }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
+<li {{{ if pinned }}}hidden{{{ end }}}><a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if pinned }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
+<li {{{ if !pinned }}}hidden{{{ end }}}><a component="topic/unpin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !pinned }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]</a></li>
 
-<li><a component="topic/move" class="dropdown-item" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]</a></li>
-<li><a component="topic/merge" class="dropdown-item" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]</a></li>
-<li><a component="topic/fork" class="dropdown-item" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.fork]]</a></li>
+<li><a component="topic/move" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread_tools.move]]</a></li>
+<li><a component="topic/merge" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-code-fork"></i> [[topic:thread_tools.merge]]</a></li>
+<li><a component="topic/fork" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-code-fork"></i> [[topic:thread_tools.fork]]</a></li>
 {{{ if !scheduled }}}
-<li><a component="topic/move-posts" class="dropdown-item" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move-posts]]</a></li>
+<li><a component="topic/move-posts" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread_tools.move-posts]]</a></li>
 {{{ end }}}
-<li><a component="topic/mark-unread-for-all" class="dropdown-item" href="#"><i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]</a></li>
+<li><a component="topic/mark-unread-for-all" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]</a></li>
 <li class="dropdown-divider"></li>
 {{{ end }}}
 
-<!-- IF privileges.deletable -->
-<li <!-- IF deleted -->hidden<!-- ENDIF deleted -->><a component="topic/delete" href="#" class="dropdown-item <!-- IF deleted -->hidden<!-- ENDIF deleted -->"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]</a></li>
+{{{ if privileges.deletable }}}
+<li {{{ if deleted }}}hidden{{{ end }}}><a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if deleted }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread_tools.delete]]</a></li>
 {{{ if !scheduled }}}
-<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/restore" href="#" class="dropdown-item <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]</a></li>
+<li {{{ if !deleted }}}hidden{{{ end }}}><a component="topic/restore" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-history"></i> [[topic:thread_tools.restore]]</a></li>
+{{{ end }}}
+{{{ if privileges.purge }}}
+<li {{{ if !deleted }}}hidden{{{ end }}}><a component="topic/purge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {{{ if !deleted }}}hidden{{{ end }}}"><i class="fa fa-fw text-muted fa-eraser"></i> [[topic:thread_tools.purge]]</a></li>
+{{{ end }}}
+{{{ if privileges.isAdminOrMod }}}
+<li><a component="topic/delete/posts" class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#"><i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread_tools.delete-posts]]</a></li>
 {{{ end }}}
-<!-- IF privileges.purge -->
-<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/purge" href="#" class="dropdown-item <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]</a></li>
-<!-- END -->
-<!-- IF privileges.isAdminOrMod -->
-<li><a component="topic/delete/posts" class="dropdown-item" href="#"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete-posts]]</a></li>
-<!-- ENDIF privileges.isAdminOrMod -->
 
-{{{each thread_tools}}}
-<li><a href="#" class="dropdown-item {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a></li>
-{{{end}}}
-<!-- ENDIF privileges.deletable -->
+{{{ each thread_tools }}}
+<li><a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {./class}"><i class="fa fa-fw text-muted {./icon}"></i> {./title}</a></li>
+{{{ end }}}
+{{{ end }}}

package/templates/partials/topic/watch.tpl

@@ -1,27 +1,60 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown 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">
+<div class="btn-group bottom-sheet" component="topic/watch">
+	<button class="btn-ghost-sm d-flex gap-2 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>
+			<i class="flex-shrink-0 fa fa-fw fa-bell-o link-primary"></i>
 			<span class="d-none d-md-inline fw-semibold">[[topic:watching]]</span>
 		</span>
 
 		<span component="topic/not-following/menu" class="d-flex gap-2 align-items-center{{{ if !isNotFollowing}}} hidden{{{ end }}}">
-			<i class="fa fa-fw fa-bell-slash-o link-primary"></i>
+			<i class="flex-shrink-0 fa fa-fw fa-bell-slash-o link-primary"></i>
 			<span class="d-none d-md-inline fw-semibold">[[topic:not-watching]]</span>
 		</span>
 
 		<span component="topic/ignoring/menu" class="d-flex gap-2 align-items-center{{{ if !isIgnoring }}} hidden{{{ end }}}">
-			<i class="fa fa-fw fa-eye-slash link-primary"></i>
+			<i class="flex-shrink-0 fa fa-fw fa-eye-slash link-primary"></i>
 			<span class="d-none d-md-inline fw-semibold">[[topic:ignoring]]</span>
 		</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>
+	<ul class="dropdown-menu p-1 text-sm">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/following">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw fa-bell-o"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:watching]]</span>
+					</span>
+					<div class="help-text text-muted text-xs">[[topic:watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
+			</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 rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/not-following">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw fa-bell-slash-o"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:not-watching]]</span>
+					</span>
+					<div class="help-text text-muted text-xs">[[topic:not-watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
+			</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 rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/ignoring">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="flex-shrink-0 fa fa-fw fa-eye-slash"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:ignoring]]</span>
+					</span>
+					<div class="help-text text-muted text-xs">[[topic:ignoring.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
 	</ul>
 </div>
 {{{ end }}}

package/templates/partials/topic-filters.tpl

@@ -1,12 +1,15 @@
 <div class="btn-group bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
-	<button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+	<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
 		<i class="fa fa-fw fa-filter link-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedFilter.name}</span>
 	</button>
-	<ul class="dropdown-menu" role="menu">
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
 		{{{each filters}}}
 		<li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
-			<a class="dropdown-item" role="menu-item" href="{config.relative_path}/{filters.url}"><i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>{filters.name}</a>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{config.relative_path}/{filters.url}">
+				<div class="flex-grow-1">{filters.name}</div>
+				<i class="flex-shrink-0 fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>
+			</a>
 		</li>
 		{{{end}}}
 	</ul>

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

@@ -1,50 +1,54 @@
-<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">
-		<ul class="navbar-nav me-auto gap-2 align-items-center">
-			{{{ if template.category }}}
-			<!-- IMPORT partials/category/watch.tpl -->
-			<!-- IMPORT partials/category/sort.tpl -->
-			{{{ end }}}
-			{{{ if (template.popular || template.top)}}}
-			<!-- IMPORT partials/topic-terms.tpl -->
-			{{{ end }}}
-			{{{ if (template.unread || (template.recent || (template.popular || template.top))) }}}
-			<!-- IMPORT partials/topic-filters.tpl -->
-			<!-- IMPORT partials/category-filter.tpl -->
-			{{{ end }}}
-			{{{ if template.unread }}}
-			<div class="markread btn-group {{{ if !topics.length }}}hidden{{{ end }}}">
-				<!-- IMPORT partials/category-selector.tpl -->
-			</div>
-			{{{ end }}}
-			{{{ if template.tag }}}
-			<!-- IMPORT partials/category-filter.tpl -->
-			{{{ end }}}
-			<!-- IMPORT partials/category/tools.tpl -->
+<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} mb-3">
+	<nav class="topic-list-header navbar navbar-expand p-0 border-0 rounded">
+		<div class="card card-header flex-row p-2 gap-1 border rounded w-100 align-items-center">
+			<ul component="category/controls" class="navbar-nav me-auto gap-2 align-items-start flex-wrap">
+				{{{ if template.category }}}
+				<!-- IMPORT partials/category/watch.tpl -->
+				<!-- IMPORT partials/tags/filter-dropdown-left.tpl -->
+				<!-- IMPORT partials/category/sort.tpl -->
+				{{{ end }}}
+				{{{ if (template.popular || template.top)}}}
+				<!-- IMPORT partials/topic-terms.tpl -->
+				{{{ end }}}
+				{{{ if (template.unread || (template.recent || (template.popular || template.top))) }}}
+				<!-- IMPORT partials/topic-filters.tpl -->
+				<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
+				<!-- IMPORT partials/tags/filter-dropdown-left.tpl -->
+				{{{ end }}}
+				{{{ if template.unread }}}
+				<div class="markread btn-group {{{ if !topics.length }}}hidden{{{ end }}}">
+					<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
+				</div>
+				{{{ end }}}
+				{{{ if template.tag }}}
+				<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
+				{{{ end }}}
+				<!-- IMPORT partials/category/tools.tpl -->
 
-			{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-			<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 }}}
+				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
+				<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 }}}
 
-			<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>
-			</a>
-		</ul>
+				<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">
+					<i class="fa fa-fw fa-arrow-up"></i> [[recent:load-new-posts]]
+				</a>
+			</ul>
 
-		<div class="d-flex gap-1 align-items-stretch">
-			{{{ 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>
-				{{{ end }}}
-			{{{ else }}}
-				{{{ if canPost }}}
-				<!-- IMPORT partials/buttons/newTopic.tpl -->
-				{{{ end }}}
-			{{{ end }}}
-			<!-- only show login button if not logged in and doesn't have any posting privilege -->
-			{{{ if (!loggedIn && (!privileges.topics:create && !canPost))}}}
-			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			{{{ end }}}
+			<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>
+					{{{ end }}}
+				{{{ else }}}
+					{{{ if canPost }}}
+					<!-- IMPORT partials/buttons/newTopic.tpl -->
+					{{{ end }}}
+				{{{ end }}}
+				<!-- only show login button if not logged in and doesn't have any posting privilege -->
+				{{{ if (!loggedIn && (!privileges.topics:create && !canPost))}}}
+				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+				{{{ end }}}
+			</div>
 		</div>
-	</div>
-</nav>
+	</nav>
+</div>

package/templates/partials/topic-terms.tpl

@@ -1,12 +1,15 @@
 <div class="btn-group bottom-sheet {{{ if !terms.length }}}hidden{{{ end }}}">
-	<button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+	<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
 		<i class="fa fa-fw fa-clock text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedTerm.name}</span>
 	</button>
-	<ul class="dropdown-menu" role="menu">
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
 		{{{each terms}}}
 		<li role="presentation" class="category">
-			<a class="dropdown-item" role="menu-item" href="{config.relative_path}/{terms.url}"><i class="fa fa-fw {{{ if terms.selected }}}fa-check{{{ end }}}"></i>{terms.name}</a>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{config.relative_path}/{terms.url}">
+				<div class="flex-grow-1">{terms.name}</div>
+				<i class="flex-shrink-0 fa fa-fw {{{ if terms.selected }}}fa-check{{{ end }}}"></i>
+			</a>
 		</li>
 		{{{end}}}
 	</ul>

package/templates/partials/topics_list.tpl

@@ -1,127 +1,119 @@
-<ul component="category" class="list-unstyled topic-list pt-4 overflow-auto position-relative" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+<ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
 
 	{{{ each topics }}}
-	<li component="category/topic" class="category-item position-relative {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
+	<li component="category/topic" class="category-item position-relative w-100 border-bottom py-3 py-lg-4 gap-1 d-flex flex-column flex-lg-row align-items-start {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
 		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
 		<meta itemprop="name" content="{function.stripTags, ./title}" />
 		<meta itemprop="itemListOrder" content="descending" />
 		<meta itemprop="position" content="{./index}" />
-		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
+		<a id="{./index}" data-index="{./index}" component="topic/anchor" class="position-absolute"></a>
 
-		<div class="row">
-			<div class="col-md-7 col-sm-9 col-12 content d-flex">
-				<div class="me-3">
-					<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" />
-							{{{ else }}}
-							{buildAvatar(./user, "40px", true, "not-responsive")}
-							{{{ end }}}
-						</a>
-					</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">
-						{{{ if topics.noAnchor }}}
-						<span>{./title}</span>
-						{{{ else }}}
-						<a class="text-reset" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">{./title}</a>
-						{{{ end }}}
-					</h2>
-					<div class="info d-flex align-items-center flex-wrap">
-						<span component="topic/labels" class="d-flex mb-1">
-							<span component="topic/scheduled" class="me-2 badge border border-gray-300 text-primary {{{ if !./scheduled }}}hidden{{{ end }}}">
-								<i class="fa fa-clock-o"></i>
-								[[topic:scheduled]]
-							</span>
-							<span component="topic/pinned" class="me-2 badge border border-gray-300 text-primary {{{ if (./scheduled || !./pinned) }}}hidden{{{ end }}}">
-								<i class="fa fa-thumb-tack"></i>
-								{{{ if !./pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {./pinExpiryISO}]]{{{ end }}}
-							</span>
-							<span component="topic/locked" class="me-2 badge border border-gray-300 text-primary {{{ if !./locked }}}hidden{{{ end }}}">
-								<i class="fa fa-lock"></i>
-								[[topic:locked]]
-							</span>
-							<span class="me-2 badge border border-gray-300 text-primary {{{ if !./oldCid }}}hidden{{{ end }}}">
-								<i class="fa fa-arrow-circle-right"></i>
-								[[topic:moved]]
-							</span>
-							{{{each ./icons}}}<span class="me-2">{@value}</span>{{{end}}}
-						</span>
 
-
-						{{{ if !template.category }}}
-						<a class="lh-1 me-2 mb-1" href="{config.relative_path}/category/{./category.slug}">{function.buildCategoryLabel, ./category, "border"}</a>
-						{{{ end }}}
-
-						{{{ if ./tags.length }}}
-						<span class="lh-1 tag-list hidden-xs d-flex flex-wrap gap-2 me-2 mb-1 ">
-							{{{ each ./tags }}}
-							<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 text-xs fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
-							{{{ end }}}
-						</span>
-						{{{ end }}}
-
-						<span class="hidden-xs text-xs timeago text-muted me-2 mb-1" title="{./timestampISO}"></span>
-
-						<span class="visible-xs-inline timeago text-muted text-xs" title="{{{ if ./teaser.timestampISO }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></span>
-					</div>
+		<div class="d-flex p-0 col-lg-7 gap-2 gap-lg-3 align-items-start">
+			<div class="flex-shrink-0 position-relative">
+				<a class="text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+					{buildAvatar(./user, "40px", true, "avatar avatar-tooltip")}
+				</a>
+				{{{ if showSelect }}}
+				<div class="checkbox position-absolute top-100 start-50 translate-middle-x p-1 m-0 d-none d-lg-flex" style="max-width:max-content">
+					<i component="topic/select" class="fa text-muted pointer fa-square-o"></i>
 				</div>
+				{{{ end }}}
+			</div>
+			<div class="flex-grow-1 d-flex flex-wrap gap-1">
+				<h3 component="topic/header" class="title text-break fs-5 fw-semibold m-0 tracking-tight w-100 {{{ if showSelect }}}me-4 me-lg-0{{{ end }}}">
+					{{{ if topics.noAnchor }}}
+					<span>{./title}</span>
+					{{{ else }}}
+					<a class="text-reset" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">{./title}</a>
+					{{{ end }}}
+				</h3>
+				<span component="topic/labels" class="d-flex flex-wrap gap-1">
+					<span component="topic/scheduled" class="badge border border-gray-300 text-primary {{{ if !./scheduled }}}hidden{{{ end }}}">
+						<i class="fa fa-clock-o"></i>
+						[[topic:scheduled]]
+					</span>
+					<span component="topic/pinned" class="badge border border-gray-300 text-primary {{{ if (./scheduled || !./pinned) }}}hidden{{{ end }}}">
+						<i class="fa fa-thumb-tack"></i>
+						{{{ if !./pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {./pinExpiryISO}]]{{{ end }}}
+					</span>
+					<span component="topic/locked" class="badge border border-gray-300 text-primary {{{ if !./locked }}}hidden{{{ end }}}">
+						<i class="fa fa-lock"></i>
+						[[topic:locked]]
+					</span>
+					<span class="badge border border-gray-300 text-primary {{{ if !./oldCid }}}hidden{{{ end }}}">
+						<i class="fa fa-arrow-circle-right"></i>
+						[[topic:moved]]
+					</span>
+					{{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
+					{{{ if !template.category }}}
+					<a class="lh-1" href="{config.relative_path}/category/{./category.slug}">{function.buildCategoryLabel, ./category, "border"}</a>
+					{{{ end }}}
+					{{{ if ./tags.length }}}
+					<span class="lh-1 tag-list hidden-xs d-flex flex-wrap gap-1">
+						{{{ each ./tags }}}
+						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 text-muted fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+						{{{ end }}}
+					</span>
+					{{{ end }}}
+					<span class="hidden-xs badge bg-transparent text-muted fw-normal timeago" title="{./timestampISO}"></span>
+				</span>
 			</div>
+			{{{ if ./thumbs.length }}}
+			<a class="position-relative text-decoration-none flex-shrink-0 d-none d-xl-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">
+				<img class="topic-thumb rounded-1" style="width:auto;height: 3.33rem;" src="{./thumbs.0.url}"/>
+				<span data-numthumbs="{./thumbs.length}" class="px-1 position-absolute top-0 start-100 translate-middle badge rounded bg-info" style="z-index: 1;">+{increment(./thumbs.length, "-1")}</span>
+			</a>
+			{{{ end }}}
+		</div>
 
-			<div class="col-md-2 d-none d-lg-flex stats text-muted gap-2 px-0">
+		<div class="d-flex p-0 col-lg-5 align-content-stretch">
+			<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr 1fr;">
 				{{{ if !reputation:disabled }}}
-				<div class="stats-votes flex-1">
-					<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
-						<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./votes}" data-toFixed="0">{./votes}</span>
-						<span class="text-lowercase text-xs">[[global:votes]]</span>
-					</div>
+				<div class="stats-votes card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="human-readable-number fs-5 ff-secondary lh-1" title="{./votes}" data-toFixed="0">{./votes}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:votes]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-chevron-up"></i>
 				</div>
 				{{{ end }}}
-				<div class="stats-postcount flex-1">
-					<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
-						<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./postcount}" data-toFixed="0">{./postcount}</span>
-						<span class="text-lowercase text-xs">[[global:posts]]</span>
-					</div>
+				<div class="stats-postcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="human-readable-number fs-5 ff-secondary lh-1" title="{./postcount}" data-toFixed="0">{./postcount}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-message"></i>
 				</div>
-				<div class="stats-viewcount flex-1">
-					<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
-						<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./viewcount}" data-toFixed="0">{./viewcount}</span>
-						<span class="text-lowercase text-xs">[[global:views]]</span>
-					</div>
+				<div class="stats-viewcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="human-readable-number fs-5 ff-secondary lh-1" title="{./viewcount}" data-toFixed="0">{./viewcount}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:views]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-eye"></i>
 				</div>
 			</div>
-
-			<div class="col-md-3 col-sm-3 teaser d-none d-md-block overflow-hidden" component="topic/teaser">
-				<div class="lastpost background-link-container border-start border-2 h-100" style="border-color: {./category.bgColor}!important;">
+			<div component="topic/teaser" class="meta teaser col-lg-6">
+				<div class="lastpost background-link-container border-start border-2 lh-sm h-100" style="border-color: {./category.bgColor}!important;">
 					<a class="background-link" href="{config.relative_path}/topic/{./slug}/{./teaser.index}"></a>
 					{{{ if ./unreplied }}}
-					<p class="ps-3 text-xs lh-1">
+					<div class="ps-2 text-xs">
 						[[category:no_replies]]
-					</p>
+					</div>
 					{{{ else }}}
 					{{{ if ./teaser.pid }}}
-					<p class="ps-3 mb-0 lh-1">
-						<a href="{config.relative_path}/user/{./teaser.user.userslug}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "not-responsive")}</a>
+					<div class="ps-2">
+						<a href="{config.relative_path}/user/{./teaser.user.userslug}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "avatar-tooltip not-responsive")}</a>
 						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}">
 						</a>
-					</p>
-					<div class="post-content overflow-hidden text-xs line-clamp-2 ps-3">
+					</div>
+					<div class="post-content text-xs ps-2 line-clamp-2 lh-sm text-break">
 						{./teaser.content}
 					</div>
 					{{{ end }}}
 					{{{ end }}}
 				</div>
 			</div>
-
-			{{{ if showSelect }}}
-			<div class="position-absolute top-0 end-0 w-auto p-0">
-				<i component="topic/select" class="fa fa-square-o fs-5 text-muted pointer"></i>
-			</div>
-			{{{ end }}}
 		</div>
-		<hr class="text-muted opacity-25"/>
+		{{{ if showSelect }}}
+		<div class="checkbox position-absolute top-0 end-0 p-1 mt-3 m-0 d-flex d-lg-none" style="max-width:max-content">
+			<i component="topic/select" class="fa fa-square-o text-muted pointer"></i>
+		</div>
+		{{{ end }}}
 	</li>
 	{{{end}}}
 </ul>