nodebb-theme-harmony 0.0.1 → 0.0.3

package/templates/partials/topic/quickreply.tpl

@@ -1,28 +1,26 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IF privileges.topics:reply -->
-<div component="topic/quickreply/container" class="clearfix quick-reply">
-	<div class="icon float-start hidden-xs">
-		<a data-uid="{loggedInUser.uid}" href="{{{ if loggedInUser.userslug }}}{config.relative_path}/user/{loggedInUser.userslug}{{{ else }}}#{{{ end }}}">
+<div component="topic/quickreply/container" class="quick-reply d-flex gap-3">
+	<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 -->">
 			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
-			{{{ if loggedInUser.status }}}
-			<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
-			{{{ end }}}
+			{{{ 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>
 	</div>
-	<form method="post" action="{config.relative_path}/compose">
+	<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">
-			<textarea name="content" component="topic/quickreply/text" class="form-control mousetrap" rows="5" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
+			<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 class="btn-group float-end">
-			<button type="submit" component="topic/quickreply/button" class="btn btn-primary">[[topic:post-quick-reply]]</button>
-			<button type="submit" component="topic/quickreply/expand" class="btn btn-outline-primary" formmethod="get"><i class="fa fa-expand"></i></button>
+		<div>
+			<div class="btn-group">
+				<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>
-	<form component="topic/quickreply/upload" method="post" enctype="multipart/form-data">
+	<form class="d-none" component="topic/quickreply/upload" method="post" enctype="multipart/form-data">
 		<input type="file" name="files[]" multiple class="hidden"/>
 	</form>
 

package/templates/partials/topic/reactions.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- This partial intentionally left blank; overwritten by nodebb-plugin-reactions -->

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

@@ -1,8 +1,6 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div component="topic/reply/container" class="btn-group action-bar bottom-sheet <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">
-	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="btn btn-sm btn-primary" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply visible-xs-inline"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:reply]]</span></a>
-	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown">
+	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="d-flex align-items-center btn btn-primary px-3 py-2 fw-semibold border border-0 " component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply visible-xs-inline"></i><span class="visible-md-inline visible-lg-inline"> [[topic:reply]]</span></a>
+	<button type="button" class="btn btn-sm btn-primary dropdown-toggle border border-0 border-start border-primary" data-bs-toggle="dropdown">
 		<span class="caret"></span>
 	</button>
 	<ul class="dropdown-menu dropdown-menu-end" role="menu">
@@ -10,20 +8,18 @@
 	</ul>
 </div>
 
-<!-- IF loggedIn -->
-<!-- IF !privileges.topics:reply -->
-<!-- IF locked -->
-<a component="topic/reply/locked" class="btn btn-sm btn-primary" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
-<!-- ENDIF locked -->
-<!-- ENDIF !privileges.topics:reply -->
-
-<!-- IF !locked -->
-<a component="topic/reply/locked" class="btn btn-sm btn-primary hidden" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
-<!-- ENDIF !locked -->
-
-<!-- ELSE -->
+{{{ if loggedIn }}}
+	{{{ if !privileges.topics:reply }}}
+		{{{ if locked }}}
+		<a component="topic/reply/locked" class="d-flex gap-2 align-items-center fw-semibold btn btn-primary disabled" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
+		{{{ end }}}
+	{{{ end }}}
 
-<!-- IF !privileges.topics:reply -->
-<a component="topic/reply/guest" href="{config.relative_path}/login" class="btn btn-sm btn-primary">[[topic:guest-login-reply]]</a>
-<!-- ENDIF !privileges.topics:reply -->
-<!-- ENDIF loggedIn -->
+	{{{ if !locked }}}
+	<a component="topic/reply/locked" class="d-flex gap-2 align-items-center fw-semibold btn btn-primary disabled hidden" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
+	{{{ end }}}
+{{{ else }}}
+	{{{ if !privileges.topics:reply }}}
+	<a component="topic/reply/guest" href="{config.relative_path}/login" class="d-flex align-items-center fw-semibold btn btn-primary">[[topic:guest-login-reply]]</a>
+	{{{ end }}}
+{{{ end }}}

package/templates/partials/topic/selection-tooltip.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div component="selection/tooltip" class="selection-tooltip-container position-absolute card card-body p-1 rounded-1 mt-2" style="z-index: 1;">
     <button component="selection/tooltip/quote" class="btn btn-sm btn-primary quote-tooltip-btn">[[topic:quote]]</button>
 </div>

package/templates/partials/topic/sort.tpl

@@ -1,9 +1,11 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div title="[[topic:sort_by]]" class="btn-group bottom-sheet hidden-xs" component="thread/sort">
-	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-	<span><i class="fa fa-fw fa-sort"></i></span></button>
-	<ul class="dropdown-menu dropdown-menu-end">
+<div class="btn-group bottom-sheet" component="thread/sort">
+	<button class="btn btn-link d-flex gap-2 align-items-baseline 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 small link-primary"></i>
+			<span class="d-none d-md-inline small">[[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>

package/templates/partials/topic/stats.tpl

@@ -1,14 +1,15 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="stats text-muted">
-	<i class="fa fa-fw fa-user" title="[[global:posters]]"></i>
-	<span title="{postercount}" class="human-readable-number">{postercount}</span>
-</div>
-<div class="stats text-muted">
-	<i class="fa fa-fw fa-pencil" title="[[global:posts]]"></i>
-	<span component="topic/post-count" title="{postcount}" class="human-readable-number">{postcount}</span>
-</div>
-<div class="stats text-muted">
-	<i class="fa fa-fw fa-eye" title="[[global:views]]"></i>
-	<span class="human-readable-number" title="{viewcount}">{viewcount}</span>
-</div>
+<span class="badge text-body border border-gray-300 stats text-xs">
+	<i class="fa fa-fw fa-pencil visible-xs-inline" title="[[global:posts]]"></i>
+	<span component="topic/post-count" title="{postcount}" class="human-readable-number fw-bold">{postcount}</span>
+	<span class="hidden-xs text-lowercase fw-normal">[[global:posts]]</span>
+</span>
+<span class="badge text-body border border-gray-300 stats text-xs">
+	<i class="fa fa-fw fa-user visible-xs-inline" title="[[global:posters]]"></i>
+	<span title="{postercount}" class="human-readable-number fw-bold">{postercount}</span>
+	<span class="hidden-xs text-lowercase fw-normal">[[global:posters]]</span>
+</span>
+<span class="badge text-body border border-gray-300 stats text-xs">
+	<i class="fa fa-fw fa-eye visible-xs-inline" title="[[global:views]]"></i>
+	<span class="human-readable-number fw-bold" title="{viewcount}">{viewcount}</span>
+	<span class="hidden-xs text-lowercase fw-normal">[[global:views]]</span>
+</span>

package/templates/partials/topic/tag.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="tag tag-item fw-bold tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 text-xs tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>

package/templates/partials/topic/tags.tpl

@@ -1,5 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-{{{ each tags }}}
-<!-- IMPORT partials/topic/tag.tpl -->
-{{{ end }}}
+{{{ each tags }}}<!-- IMPORT partials/topic/tag.tpl -->{{{ end }}}

package/templates/partials/topic/tools.tpl

@@ -0,0 +1,13 @@
+{{{ if privileges.view_thread_tools }}}
+<div class="btn-group thread-tools bottom-sheet">
+	<button class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<i class="fa fa-fw fa-gear small link-primary"></i>
+		<span class="d-none d-md-inline small">[[topic:thread_tools.title]]</span>
+	</button>
+	<ul class="dropdown-menu">
+		<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>
+	</ul>
+</div>
+{{{ end }}}

package/templates/partials/topic/watch.tpl

@@ -1,21 +1,23 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IF config.loggedIn -->
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch"
-data-bs-toggle="tooltip"
-	{{{if isFollowing}}}title="[[topic:watching]]"{{{end}}}
-	{{{if isNotFollowing}}}title="[[topic:not-watching]]"{{{end}}}
-	{{{if isIgnoring}}}title="[[topic:ignoring]]"{{{end}}}
->
-	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-		<span component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i></span>
+<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+	<button class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<span component="topic/following/menu" class="d-flex gap-2 align-items-center<!-- IF !isFollowing --> hidden<!-- ENDIF !isFollowing -->">
+			<i class="fa fa-fw fa-bell-o small link-primary"></i>
+			<span class="d-none d-md-inline small">[[topic:watching]]</span>
+		</span>
 
-		<span component="topic/not-following/menu" <!-- IF !isNotFollowing -->class="hidden"<!-- ENDIF !isNotFollowing -->><i class="fa fa-fw fa-bell-slash-o"></i></span>
+		<span component="topic/not-following/menu" class="d-flex gap-2 align-items-center<!-- IF !isNotFollowing --> hidden<!-- ENDIF !isNotFollowing -->">
+			<i class="fa fa-fw fa-bell-slash-o small link-primary"></i>
+			<span class="d-none d-md-inline small">[[topic:not-watching]]</span>
+		</span>
 
-		<span component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i></span>
+		<span component="topic/ignoring/menu" class="d-flex gap-2 align-items-center<!-- IF !isIgnoring --> hidden<!-- ENDIF !isIgnoring -->">
+			<i class="fa fa-fw fa-eye-slash small link-primary"></i>
+			<span class="d-none d-md-inline small">[[topic:ignoring]]</span>
+		</span>
 
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end">
+	<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<!-- ENDIF isFollowing -->"></i><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]<p class="help-text hidden-xs"><small>[[topic:watching.description]]</small></p></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<!-- ENDIF isNotFollowing -->"></i><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]<p class="help-text hidden-xs"><small>[[topic:not-watching.description]]</small></p></a></li>
 		<li><a class="dropdown-item" href="#" component="topic/ignoring"><i component="topic/ignoring/check" class="fa fa-fw <!-- IF isIgnoring -->fa-check<!-- ENDIF isIgnoring -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]<p class="help-text hidden-xs"><small>[[topic:ignoring.description]]</small></p></a></li>

package/templates/partials/topic-filters.tpl

@@ -1,10 +1,9 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="btn-group bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
-	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
-		<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
+	<button type="button" class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+		<i class="fa fa-fw fa-filter small link-primary"></i>
+		<span class="visible-md-inline visible-lg-inline small">{selectedFilter.name}</span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+	<ul class="dropdown-menu" 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>

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

@@ -0,0 +1,54 @@
+<nav class="topic-list-header sticky-tools 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 -->
+
+			{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
+			<a class="btn btn-link link-primary d-none d-lg-block" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss"></i></a>
+			{{{ end }}}
+
+			<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="d-inline-block">
+				<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>
+
+		<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 text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
+				{{{ else }}}
+					{{{ if !loggedIn }}}
+					<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+					{{{ end }}}
+				{{{ end }}}
+			{{{ else }}}
+				{{{ if canPost }}}
+				<!-- IMPORT partials/buttons/newTopic.tpl -->
+				{{{ else }}}
+					{{{ if !loggedIn }}}
+					<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+					{{{ end }}}
+				{{{ end }}}
+			{{{ end }}}
+		</div>
+	</div>
+</nav>

package/templates/partials/topic-terms.tpl

@@ -1,10 +1,9 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="btn-group bottom-sheet {{{ if !terms.length }}}hidden{{{ end }}}">
-	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
-	{selectedTerm.name} <span class="caret"></span>
+	<button type="button" class="btn btn-link d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+		<i class="fa fa-fw fa-clock small link-primary"></i>
+		<span class="visible-md-inline visible-lg-inline small">{selectedTerm.name}</span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+	<ul class="dropdown-menu" 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>

package/templates/partials/topics_list.tpl

@@ -1,118 +1,127 @@
-<!-- THIS FILE IS STILL PERSONA -->
+<ul component="category" class="list-unstyled topic-list pt-3 overflow-auto position-relative" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
 
-<ul component="category" class="topic-list" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
-	{{{each topics}}}
-	<li component="category/topic" class="row clearfix category-item {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
-		<link itemprop="url" content="{config.relative_path}/topic/{../slug}" />
-		<meta itemprop="name" content="{function.stripTags, ../title}" />
+	{{{ each topics }}}
+	<li component="category/topic" class="category-item position-relative {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>
+		<meta itemprop="position" content="{./index}" />
+		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
 
-		<div class="col-md-6 col-sm-9 col-10 content">
-			<div class="avatar float-start me-2">
-				<!-- IF showSelect -->
-				<div class="select" component="topic/select">
-					{{{ if ./thumbs.length }}}
-					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
-					{{{ else }}}
-					{buildAvatar(../user, "48px", true, "not-responsive")}
-					{{{ end }}}
-					<i class="fa fa-check"></i>
+		<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>
-				<!-- ENDIF showSelect -->
+				<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 !showSelect -->
-				<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="float-start">
-					{{{ if ./thumbs.length }}}
-					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
-					{{{ else }}}
-					{buildAvatar(../user, "48px", true, "not-responsive")}
-					{{{ end }}}
-				</a>
-				<!-- ENDIF !showSelect -->
-			</div>
 
-			<h2 component="topic/header" class="title mb-1">
-				<i component="topic/scheduled" class="fa fa-clock-o {{{ if !topics.scheduled }}}hide{{{ end }}}" title="[[topic:scheduled]]"></i>
-				<i component="topic/pinned" class="fa fa-thumb-tack {{{ if (topics.scheduled || !topics.pinned) }}}hide{{{ end }}}" title="{{{ if !../pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {../pinExpiryISO}]]{{{ end }}}"></i>
-				<i component="topic/locked" class="fa fa-lock {{{ if !topics.locked }}}hide{{{ end }}}" title="[[topic:locked]]"></i>
-				<i component="topic/moved" class="fa fa-arrow-circle-right {{{ if !topics.oldCid }}}hide{{{ end }}}" title="[[topic:moved]]"></i>
-				{{{each topics.icons}}}{@value}{{{end}}}
+						{{{ 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 topics.noAnchor }}}
-				<span>{./title}</span>
-				{{{ else }}}
-				<a href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">{./title}</a>
-				{{{ end }}}
-			</h2>
-			<div class="info">
-				<!-- IF !template.category -->
-				<div class="category-item d-inline-block">
-					{buildCategoryIcon(./category, "24px", "rounded-circle")}
-					<a class="text-muted" href="{config.relative_path}/category/{topics.category.slug}">{topics.category.name}</a>
-				</div>
-				&bull;
-				<!-- ENDIF !template.category -->
+						{{{ if ./tags.length }}}
+						<span class="lh-1 tag-list hidden-xs d-flex 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 }}}
 
-				{{{ if topics.tags.length }}}
-				<span class="tag-list hidden-xs">
-					{{{ each ./tags }}}
-					<!-- IMPORT partials/topic/tag.tpl -->
-					{{{ end }}}
-					&bull;
-				</span>
-				{{{ end }}}
-
-				<span class="hidden-xs"><span class="timeago text-muted" title="{./timestampISO}"></span> &bull; <a class="text-muted" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{./user.displayname}</a></span>
+						<span class="hidden-xs text-xs timeago text-muted me-2 mb-1" title="{./timestampISO}"></span>
 
-				<span class="visible-xs-inline timeago text-muted" title="{{{ if ./teaser.timestampISO }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></span>
+						<span class="visible-xs-inline timeago text-muted text-xs" title="{{{ if ./teaser.timestampISO }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></span>
+					</div>
+				</div>
 			</div>
-		</div>
 
-		<div class="mobile-stat col-2 visible-xs text-end">
-			<span class="human-readable-number">{topics.postcount}</span> <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a>
-		</div>
-
-		<div class="col-md-1 hidden-sm hidden-xs stats stats-votes">
-			<!-- IF !reputation:disabled -->
-			<span class="human-readable-number" title="{topics.votes}">{topics.votes}</span><br />
-			<small>[[global:votes]]</small>
-			<!-- END -->
-		</div>
-
-		<div class="col-md-1 hidden-sm hidden-xs stats stats-postcount">
-			<span class="human-readable-number" title="{topics.postcount}">{topics.postcount}</span><br />
-			<small>[[global:posts]]</small>
-		</div>
-
-		<div class="col-md-1 hidden-sm hidden-xs stats stats-viewcount">
-			<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
-			<small>[[global:views]]</small>
-		</div>
+			<div class="col-md-2 d-none d-md-flex stats text-muted gap-2 px-0">
+				{{{ 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>
+				{{{ 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>
+				<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>
+			</div>
 
-		<div class="col-md-3 col-sm-3 teaser hidden-xs" component="topic/teaser">
-			<div class="lastpost background-link-container" style="border-color: {topics.category.bgColor}">
-				<a class="background-link" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"></a>
-				<!-- IF topics.unreplied -->
-				<p>
-					[[category:no_replies]]
-				</p>
-				<!-- ELSE -->
-				<!-- IF topics.teaser.pid -->
-				<p>
-					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24px", true, "not-responsive")}</a>
-					<a class="permalink text-muted" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
-						<span class="timeago" title="{topics.teaser.timestampISO}"></span>
-					</a>
-				</p>
-				<div class="post-content">
-					{topics.teaser.content}
+			<div class="col-md-3 col-sm-3 teaser hidden-xs overflow-hidden" component="topic/teaser">
+				<div class="lastpost background-link-container border-start border-2 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">
+						[[category:no_replies]]
+					</p>
+					{{{ 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>
+						<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">
+						{./teaser.content}
+					</div>
+					{{{ end }}}
+					{{{ end }}}
 				</div>
-				<!-- ENDIF topics.teaser.pid -->
-				<!-- ENDIF topics.unreplied -->
 			</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"/>
 	</li>
 	{{{end}}}
 </ul>

package/templates/partials/users/item.tpl

@@ -0,0 +1,7 @@
+<a href="{config.relative_path}/user/{./userslug}" class="btn-ghost align-items-start">
+	{buildAvatar(@value, "48px", true)}
+	<div class="d-flex flex-1 flex-column">
+		<div class="fw-semibold">{./displayname}</div>
+		<div class="text-xs text-muted">@{./username}</div>
+	</div>
+</a>