nodebb-theme-harmony 0.0.10 → 0.0.11

package/templates/partials/tags_list.tpl

@@ -1,5 +1,6 @@
 {{{each tags}}}
-<h5 class="float-start tag-container me-4 mb-4 fw-bold">
-	<a href="{config.relative_path}/tags/{tags.valueEncoded}" data-tag="{tags.valueEscaped}"><span class="tag-item text-muted text-uppercase text-nowrap tag-class-{tags.class} me-2" data-tag="{tags.valueEscaped}">{tags.valueEscaped}</span><span class="tag-topic-count text-primary text-nowrap human-readable-number" title="{tags.score}">{tags.score}</span></a>
+<h5 class="tag-container fw-bold d-flex">
+	<a class="text-truncate" href="{config.relative_path}/tags/{tags.valueEncoded}" data-tag="{tags.valueEscaped}"><span class="tag-item text-muted text-uppercase text-nowrap tag-class-{tags.class} me-2" data-tag="{tags.valueEscaped}">{tags.valueEscaped}</span></a>
+	<span class="tag-topic-count text-primary text-nowrap human-readable-number" title="{tags.score}">{tags.score}</span>
 </h5>
 {{{end}}}

package/templates/partials/topic/navigator.tpl

@@ -3,13 +3,13 @@
 	<a href="#" class="nav-link border-0 p-2" data-action="scrollUp"><i class="fa fa-fw fa-angle-up"></i></a>
 	<div class="track d-inline-block flex-grow-1 position-relative">
 		<div class="unread d-inline-block position-absolute">
-			<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold">
+			<div class="visible-open meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold">
 				<a href="{url}"></a>
 			</div>
 		</div>
 		<div class="handle d-inline-block position-absolute">
 			<div class="knob d-inline-block rounded-circle translate-middle"></div>
-			<div class="meta small position-absolute text-nowrap fw-semibold">
+			<div class="visible-open meta small position-absolute text-nowrap fw-semibold">
 				<p class="index text-body mb-0"></p>
 				<p class="timestamp text-secondary timeago mb-0"></p>
 			</div>

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

@@ -1,7 +1,5 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<span component="post/tools" class="dropdown moderator-tools bottom-sheet d-inline-block<!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
-	<a class="btn btn-link dropdown-toggle d-block" href="#" data-bs-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a>
+<span component="post/tools" class="dropdown moderator-tools bottom-sheet d-inline-block {{{ if !./display_post_menu }}}hidden{{{ end }}}">
+	<a class="btn-ghost-sm dropdown-toggle d-block" href="#" data-bs-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v text-primary"></i></a>
 	<ul class="dropdown-menu dropdown-menu-end" role="menu">
 		<li class="dropdown-item placeholder-wave">
 			<div class="placeholder" style="width: 20px;">&nbsp;</div>

package/templates/partials/topic/post.tpl

@@ -93,26 +93,26 @@
 
 	<div component="post/replies/container" class="mt-2 col-11 border rounded-1 p-3"></div>
 
-	<div component="post/actions" class="d-flex justify-content-end post-tools">
+	<div component="post/actions" class="d-flex justify-content-end gap-1 post-tools">
 		<!-- IMPORT partials/topic/reactions.tpl -->
-		<a component="post/reply" href="#" class="btn btn-link user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->" title="[[topic:reply]]"><i class="fa fa-reply"></i></a>
-		<a component="post/quote" href="#" class="btn btn-link user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->" title="[[topic:quote]]"><i class="fa fa-quote-right"></i></a>
+		<a component="post/reply" href="#" class="btn-ghost-sm user-select-none {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:reply]]"><i class="fa fa-reply text-primary"></i></a>
+		<a component="post/quote" href="#" class="btn-ghost-sm user-select-none {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-quote-right text-primary"></i></a>
 
-		<!-- IF !reputation:disabled -->
-		<div class="d-flex votes align-items-center">
-			<a component="post/upvote" href="#" class="btn btn-link text-secondary <!-- IF posts.upvoted -->upvoted<!-- ENDIF posts.upvoted -->">
-				<i class="fa fa-chevron-up"></i>
+		{{{ if !reputation:disabled }}}
+		<div class="d-flex votes align-items-stretch">
+			<a component="post/upvote" href="#" class="btn-ghost-sm {{{ if posts.upvoted }}}upvoted{{{ end }}}">
+				<i class="fa fa-chevron-up text-primary"></i>
 			</a>
 
-			<div class="d-inline-block px-3" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
+			<div class="d-inline-block px-3 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
 
-			<!-- IF !downvote:disabled -->
-			<a component="post/downvote" href="#" class="btn btn-link text-secondary <!-- IF posts.downvoted -->downvoted<!-- ENDIF posts.downvoted -->">
-				<i class="fa fa-chevron-down"></i>
+			{{{ if !downvote:disabled }}}
+			<a component="post/downvote" href="#" class="btn-ghost-sm {{{ if posts.downvoted }}}downvoted{{{ end }}}">
+				<i class="fa fa-chevron-down text-primary"></i>
 			</a>
-			<!-- ENDIF !downvote:disabled -->
+			{{{ end }}}
 		</div>
-		<!-- ENDIF !reputation:disabled -->
+		{{{ end }}}
 
 		<!-- IMPORT partials/topic/post-menu.tpl -->
 	</div>

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

@@ -1,6 +1,6 @@
-<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="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">
+<div component="topic/reply/container" class="btn-group action-bar bottom-sheet {{{ 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 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" data-bs-toggle="dropdown">
 		<span class="caret"></span>
 	</button>
 	<ul class="dropdown-menu dropdown-menu-end" role="menu">

package/templates/partials/topic/sort.tpl

@@ -1,8 +1,8 @@
 <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">
+	<button class="btn-ghost-sm 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>
+			<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">

package/templates/partials/topic/tools.tpl

@@ -1,8 +1,8 @@
 {{{ 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 class="btn-ghost-sm d-flex gap-2 align-items-baseline 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">
 		<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/watch.tpl

@@ -1,26 +1,27 @@
-<!-- IF config.loggedIn -->
+{{{ if config.loggedIn }}}
 <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>
+	<button class="btn-ghost-sm 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{{{ end }}}">
+			<i class="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<!-- 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 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>
+			<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<!-- 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 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>
+			<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<!-- 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>
+		<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>
+
+		<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" 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>
 	</ul>
 </div>
-<!-- ENDIF config.loggedIn -->
+{{{ end }}}

package/templates/partials/topic-filters.tpl

@@ -1,7 +1,7 @@
 <div class="btn-group bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
-	<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 type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline 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">
 		{{{each filters}}}

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

@@ -23,10 +23,10 @@
 			<!-- 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>
+			<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">
+			<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>
@@ -34,21 +34,17 @@
 		<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 }}}
+				<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 -->
-				{{{ 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 }}}
+			<!-- 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>
 </nav>

package/templates/partials/topic-terms.tpl

@@ -1,7 +1,7 @@
 <div class="btn-group bottom-sheet {{{ if !terms.length }}}hidden{{{ end }}}">
-	<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 type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline 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">
 		{{{each terms}}}

package/templates/partials/topics_list.tpl

@@ -1,4 +1,4 @@
-<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="list-unstyled topic-list pt-4 overflow-auto position-relative" 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 -->>
@@ -56,7 +56,7 @@
 						{{{ end }}}
 
 						{{{ if ./tags.length }}}
-						<span class="lh-1 tag-list hidden-xs d-flex gap-2 me-2 mb-1">
+						<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 }}}
@@ -70,7 +70,7 @@
 				</div>
 			</div>
 
-			<div class="col-md-2 d-none d-md-flex stats text-muted gap-2 px-0">
+			<div class="col-md-2 d-none d-lg-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">
@@ -93,7 +93,7 @@
 				</div>
 			</div>
 
-			<div class="col-md-3 col-sm-3 teaser hidden-xs overflow-hidden" component="topic/teaser">
+			<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;">
 					<a class="background-link" href="{config.relative_path}/topic/{./slug}/{./teaser.index}"></a>
 					{{{ if ./unreplied }}}

package/templates/partials/users/item.tpl

@@ -1,37 +1,39 @@
 <a href="{config.relative_path}/user/{./userslug}" class="btn-ghost align-items-start justify-content-start">
 	{buildAvatar(@value, "48px", true, "flex-shrink-0")}
-	<div class="d-flex flex-column text-truncate align-items-start">
+	<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>
 
-		{{{ if section_online }}}
-		<div class="card card-header border py-0 px-1 text-xs">
-			<span class="timeago" title="{./lastonlineISO}"></span>
-		</div>
-		{{{ end }}}
+		<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_joindate }}}
-		<div class="card card-header border py-0 px-1 text-xs">
-			<span class="timeago" title="{./joindateISO}"></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_sort-reputation }}}
-		<div class="card card-header border py-0 px-1 text-xs">
-			<span class="formatted-number">{./reputation}</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-posts }}}
-		<div class="card card-header border py-0 px-1 text-xs">
-			<span class="formatted-number">{./postcount}</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_flagged }}}
-		<div class="card card-header border py-0 px-1 text-xs">
-			<span class="formatted-number">{./flags}</span>
+			{{{ 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 }}}
 		</div>
-		{{{ end }}}
 	</div>
 </a>

package/templates/partials/users_list_menu.tpl

@@ -1,4 +1,4 @@
-<div component="user/list/menu" class="text-sm d-flex align-items-center gap-2">
+<div component="user/list/menu" class="text-sm d-flex flex-wrap align-items-center gap-2">
 	<a class="btn-ghost fw-semibold" href="{config.relative_path}/users?section=online">[[global:online]]</a>
 
 	<a class="btn-ghost fw-semibold" href="{config.relative_path}/users?section=sort-posts">[[users:top_posters]]</a>

package/templates/tags.tpl

@@ -8,12 +8,16 @@
 	{{{ if displayTagSearch }}}
 	{{{ if tags.length }}}
 	<div class="row justify-content-end mb-3">
-		<div class="col-lg-3">
-			<div class="input-group">
-				<input type="text" class="form-control form-control-sm" placeholder="[[global:search]]" id="tag-search">
-				<button class="btn btn-primary btn-sm" type="button">
-					<i class="fa fa-search"></i>
-				</button>
+		<div class="col-lg-6">
+			<div class="d-flex justify-content-end">
+				<div>
+					<div class="input-group">
+						<input type="text" class="form-control form-control-sm" placeholder="[[global:search]]" id="tag-search">
+						<button class="btn btn-primary btn-sm" type="button">
+						<i class="fa fa-search"></i>
+						</button>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -24,8 +28,8 @@
 	<div class="alert alert-warning">[[tags:no_tags]]</div>
 	{{{ end }}}
 
-	<div class="category row">
-		<div class="col-md-12 clearfix tag-list" data-nextstart="{nextStart}">
+	<div class="category">
+		<div class="tag-list row row-cols-2 row-cols-lg-3 row-cols-xl-4  row-cols-xxl-5 gx-3 gy-2" data-nextstart="{nextStart}">
 			<!-- IMPORT partials/tags_list.tpl -->
 		</div>
 	</div>

package/templates/topic.tpl

@@ -6,9 +6,7 @@
 </div>
 {{{ end }}}
 
-<!-- IMPORT partials/breadcrumbs.tpl -->
-
-<h2 component="post/header" class="fs-2 mb-1 {{{ if config.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
+<h2 component="post/header" class="fs-2 mb-0 {{{ if config.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
 	<span class="topic-title" component="topic/title">{title}</span>
 </h2>
 

package/templates/users.tpl

@@ -1,4 +1,3 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
@@ -6,14 +5,14 @@
 </div>
 <div class="users">
 	<h2 class="fw-semibold">[[global:users]]</h2>
-	<div class="row justify-content-between">
-		<div class="col-lg-6">
+	<div class="d-flex flex-wrap justify-content-between">
+		<div class="mb-2 mb-md-0">
 		<!-- IMPORT partials/users_list_menu.tpl -->
 		</div>
-		<div class="col-lg-6 text-end">
+		<div class="">
 			<div class="d-flex justify-content-end gap-2">
 				{{{ if showInviteButton }}}
-				<button component="user/invite" class="btn btn-success btn-sm"><i class="fa fa-users"></i> [[users:invite]]</button>
+				<button component="user/invite" class="btn btn-primary btn-sm"><i class="fa fa-user-plus"></i> [[users:invite]]</button>
 				{{{ end }}}
 				{{{ if displayUserSearch }}}
 				<div class="search">