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

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 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 -->
-			<!-- 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="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>
+				<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-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 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,122 @@
-<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 class="topic-thumb rounded-1" width="80" height="auto" 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="text-break 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 pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
+					<i component="topic/select" class="fa text-muted pointer fa-square-o p-1"></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>
+					{{{ if !config.theme.mobileTopicTeasers}}}
+					<span class="visible-xs-inline badge bg-transparent text-muted fw-normal timeago" title="{{{ if ./teaser.timestampISO }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></span>
+					{{{ end }}}
+				</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 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
+				<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-sm-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 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 p-1"></i>
+		</div>
+		{{{ end }}}
 	</li>
 	{{{end}}}
 </ul>

package/templates/partials/userFilter-placeholders.tpl

@@ -0,0 +1,5 @@
+<div class="placeholder-wave w-100 d-flex gap-2">
+	<button class="btn btn-light btn-sm border placeholder col-3"></button>
+	<button class="btn btn-light btn-sm border placeholder col-4"></button>
+	<button class="btn btn-light btn-sm border placeholder col-3"></button>
+</div>

package/templates/partials/users/filter-dropdown-content.tpl

@@ -0,0 +1,23 @@
+<button type="button" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown">
+	{{{ if selectedUser }}}
+	<span class="fw-semibold">{buildAvatar(selectedUser, "20px", true, "not-responsive")} {selectedUser.username}</span>
+	{{{ else }}}
+	<span class="fw-semibold">[[users:all-users]]</span>
+	{{{ end }}} <span class="caret"></span>
+</button>
+<ul class="dropdown-menu p-1 text-sm" role="menu">
+	<li role="presentation" class="user {{{ if !selectedUser}}}selected{{{end}}}">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{config.relative_path}/{allUsersUrl}">
+			<div class="flex-grow-1">[[users:all-users]]</div>
+			<i class="flex-shrink-0 fa fa-fw {{{ if !selectedUser }}}fa-check{{{ end }}}"></i>
+		</a>
+	</li>
+	{{{ each users }}}
+	<li role="presentation" class="user {{{ if ./selected}}}selected{{{end}}}">
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{config.relative_path}/{./url}">
+			<div class="flex-grow-1 d-inline-flex gap-1 align-items-center">{buildAvatar(@value, "24px", true, "not-responsive")} {./username}</div>
+			<i class="flex-shrink-0 fa fa-fw {{{ if ./selected }}}fa-check{{{ end }}}"></i>
+		</a>
+	</li>
+	{{{end}}}
+</ul>

package/templates/partials/users/item.tpl

@@ -1,39 +1,37 @@
-<a href="{config.relative_path}/user/{./userslug}" class="btn-ghost align-items-start justify-content-start">
+<a href="{config.relative_path}/user/{./userslug}" class="btn-ghost align-items-start justify-content-start p-2 ff-base">
 	{buildAvatar(@value, "48px", true, "flex-shrink-0")}
 	<div class="d-flex flex-column text-truncate">
 		<div class="fw-semibold text-truncate" title="{./displayname}">{./displayname}</div>
 		<div class="text-xs text-muted text-truncate">@{./username}</div>
 
-		<div class="align-self-start">
-			{{{ if section_online }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="timeago" title="{./lastonlineISO}"></span>
-			</div>
-			{{{ end }}}
+		{{{ if section_online }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="timeago" title="{./lastonlineISO}"></span>
+		</div>
+		{{{ end }}}
 
-			{{{ if section_joindate }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="timeago" title="{./joindateISO}"></span>
-			</div>
-			{{{ end }}}
+		{{{ if section_joindate }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="timeago" title="{./joindateISO}"></span>
+		</div>
+		{{{ end }}}
 
-			{{{ if section_sort-reputation }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="formatted-number">{./reputation}</span>
-			</div>
-			{{{ end }}}
+		{{{ if section_sort-reputation }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="formatted-number">{./reputation}</span>
+		</div>
+		{{{ end }}}
 
-			{{{ if section_sort-posts }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="formatted-number">{./postcount}</span>
-			</div>
-			{{{ end }}}
+		{{{ if section_sort-posts }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="formatted-number">{./postcount}</span>
+		</div>
+		{{{ end }}}
 
-			{{{ if section_flagged }}}
-			<div class="card card-header border rounded-1 py-0 px-1 text-xs">
-				<span class="formatted-number">{./flags}</span>
-			</div>
-			{{{ end }}}
+		{{{ if section_flagged }}}
+		<div class="text-xs text-muted text-truncate">
+			<span class="formatted-number">{./flags}</span>
 		</div>
+		{{{ end }}}
 	</div>
 </a>

package/templates/partials/users_list.tpl

@@ -1,4 +1,4 @@
-<div id="users-container" class="users-container row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-2">
+<div id="users-container" class="users-container row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-4">
 {{{ each users }}}
 	<!-- IMPORT partials/users/item.tpl -->
 {{{ end }}}

package/templates/popular.tpl

@@ -1,13 +1,15 @@
+{{{ if widgets.header.length }}}
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
 	{{{end}}}
 </div>
+{{{ end }}}
 <div class="popular">
 	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
 		{{{ if !topics.length }}}
-		<div class="alert alert-warning" id="category-no-topics">[[recent:no_popular_topics]]</div>
+		<div class="alert alert-info" id="category-no-topics">[[recent:no_popular_topics]]</div>
 		{{{ end }}}
 
 		<!-- IMPORT partials/topics_list.tpl -->