nodebb-theme-harmony 2.0.0-pre.23 → 2.0.0-pre.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.23",
+  "version": "2.0.0-pre.25",
   "nbbpm": {
     "compatibility": "^3.7.0"
   },
@@ -41,7 +41,7 @@
     "@fontsource/poppins": "5.0.8"
   },
   "devDependencies": {
-    "eslint": "^8.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-nodebb": "^0.2.0",
     "eslint-plugin-import": "^2.24.2"
   }

package/templates/account/blocks.tpl

@@ -7,14 +7,21 @@
 				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter-username]]" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false"/>
 
 				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end p-1 text-sm block-edit overflow-auto" style="max-height:300px;" role="menu">
-					<li><a href="#" class="dropdown-item" role="menuitem">[[admin/menu:search.start-typing]]</a></li>
+					<li component="blocks/start-typing">
+						<a href="#" class="dropdown-item rounded-1" role="menuitem">[[admin/menu:search.start-typing]]</a>
+					</li>
+					<li component="blocks/no-users" class="hidden">
+						<a href="#" class="dropdown-item rounded-1" role="menuitem">[[users:no-users-found]]</a>
+					</li>
 					{{{ each edit }}}
-					<li>
-						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between" role="menuitem">
+					<li component="blocks/search/match">
+						<div class="dropdown-item rounded-1 d-flex flex-nowrap gap-4 justify-content-between align-items-center" role="menuitem">
 							<div class="text-truncate">
 								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
 							</div>
-							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block-toggle]]</button>
+
+							<button class="btn btn-sm btn-outline-danger text-nowrap {{{ if ./isBlocked }}}hidden{{{ end }}}" data-uid="{./uid}" data-action="block">[[user:block-user]]</button>
+							<button class="btn btn-sm btn-outline-primary text-nowrap {{{ if !./isBlocked }}}hidden{{{ end }}}" data-uid="{./uid}" data-action="unblock">[[user:unblock-user]]</button>
 						</div>
 					</li>
 					{{{ end }}}
@@ -28,12 +35,16 @@
 	</div>
 </div>
 <div class="users">
-	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+	<div class="alert alert-warning text-center m-0"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has-no-blocks]]</div>
+
+	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-3">
 		{{{ each users }}}
-		<!-- IMPORT partials/users/item.tpl -->
+		<div class="d-flex flex-column gap-1">
+			<!-- IMPORT partials/users/item.tpl -->
+			<button class="btn btn-sm btn-outline-primary text-nowrap mx-auto" data-uid="{./uid}" data-action="unblock">[[user:unblock-user]]</button>
+		</div>
 		{{{ end }}}
 	</div>
-	<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has-no-blocks]]</div>
 	<!-- IMPORT partials/paginator.tpl -->
 </div>
 

package/templates/account/consent.tpl

@@ -9,9 +9,9 @@
 <div class="row">
 	<div class="col-sm-6">
 		{{{ if gdpr_consent }}}
-		<div class="alert alert-success">
-			<i class="fa fa-check float-end fa-3x"></i>
+		<div class="alert alert-success d-flex gap-3">
 			[[user:consent.received]]
+			<i class="fa fa-check fa-3x"></i>
 		</div>
 		{{{ else }}}
 		<div class="alert alert-warning">

package/templates/account/info.tpl

@@ -29,32 +29,91 @@
 				[[user:info.username-history]]
 			</h5>
 			<div class="card-body">
-				<ul class="list-group">
-					{{{each usernames}}}
-					<li class="list-group-item">
-						{../value}
-						<small class="float-end"><span class="timeago" title="{../timestampISO}"></span></small>
+				<ul class="list-unstyled mb-0">
+					{{{ each usernames }}}
+					<li class="d-flex justify-content-between mb-1">
+						<span class="text-sm">{./value}</span>
+
+						<div>
+							{{{ if ./byUid }}}
+							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
+							{buildAvatar(./byUser, "18px", true)}</a>
+							{{{ end }}}
+							<span class="timeago text-sm lh-1 align-middle" title="{./timestampISO}"></span>
+						</div>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
 			</div>
 		</div>
 
-		<div class="card">
+		<div class="card mb-3">
 			<h5 class="card-header">
 				[[user:info.email-history]]
 			</h5>
 			<div class="card-body">
-				<ul class="list-group">
-					{{{each emails}}}
-					<li class="list-group-item">
-						{../value}
-						<small class="float-end"><span class="timeago" title="{../timestampISO}"></span></small>
+				<ul class="list-unstyled mb-0">
+					{{{ each emails }}}
+					<li class="d-flex justify-content-between mb-1">
+						<span class="text-sm">{./value}</span>
+						<div>
+							{{{ if ./byUid }}}
+							<a class="lh-1" href="{{{ if ./byUser.userslug }}}{config.relative_path}/user/{./byUser.userslug}{{{ else }}}#{{{ end }}}">
+							{buildAvatar(./byUser, "18px", true)}</a>
+							{{{ end }}}
+							<span class="timeago text-sm lh-1 align-middle" title="{./timestampISO}"></span>
+						</div>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
 			</div>
 		</div>
+
+		{{{ if isAdminOrGlobalModerator }}}
+		<div class="card">
+			<h5 class="card-header">
+				[[user:info.moderation-note]]
+			</h5>
+			<div class="card-body">
+				<textarea component="account/moderation-note" class="form-control mb-3" aria-label="[[user:info.moderation-note]]"></textarea>
+
+				<button class="btn btn-sm float-end btn-success" component="account/save-moderation-note">[[user:info.moderation-note.add]]</button>
+				<br/>
+				<div component="account/moderation-note/list">
+					{{{ each moderationNotes }}}
+					<hr/>
+
+					<div data-id="{./id}">
+						<div class="mb-1">
+							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{buildAvatar(./user, "24px", true)}</a>
+
+							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="fw-bold" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
+
+							<span class="timeago" title="{./timestampISO}"></span>
+						</div>
+
+
+						<div component="account/moderation-note/content-area" class="d-flex flex-column">
+							<div class="content">
+								{./note}
+							</div>
+							<button component="account/moderation-note/edit" class="btn btn-sm btn-link align-self-end">[[topic:edit]]</button>
+						</div>
+
+						<div component="account/moderation-note/edit-area" class="d-flex flex-column gap-2">
+							<textarea class="form-control w-100 overflow-hidden">{./rawNote}</textarea>
+							<div class="align-self-end">
+								<button component="account/moderation-note/cancel-edit" class="btn btn-sm btn-link text-danger align-self-end">[[global:cancel]]</button>
+								<button component="account/moderation-note/save-edit" class="btn btn-sm btn-primary align-self-end">[[global:save]]</button>
+							</div>
+						</div>
+					</div>
+					{{{ end }}}
+				</div>
+				<!-- IMPORT partials/paginator.tpl -->
+			</div>
+		</div>
+		{{{ end }}}
 	</div>
 	<div class="col-sm-6 mb-3">
 		<div class="card mb-3">
@@ -65,15 +124,38 @@
 				{{{ if history.flags.length }}}
 				<ul class="recent-flags list-unstyled">
 					{{{ each history.flags }}}
-					<li>
-						<p>
+					<li class="mb-4 border-bottom">
+						<div class="mb-1 d-flex align-items-center justify-content-between">
+							<div>
+								{{{ if (./type == "user")}}}
+								<span class="badge text-bg-info">[[user:info.profile]]</span>
+								{{{ else }}}
+								<span class="badge text-bg-info">[[user:info.post]]</span>
+								{{{ end }}}
+								<span class="timestamp timeago" title="{./timestampISO}"></span>
+							</div>
+
+							<a href="{config.relative_path}/flags/{./flagId}" class="badge badge border border-gray-300 text-body">[[user:info.view-flag]]</a>
+						</div>
+
+						{{{ if (./type == "post") }}}
+						<p class="mb-1">
 							{{{ if history.flags.targetPurged }}}
 							<div>[[flags:target-purged]]</div>
 							{{{ else }}}
-							<a class="title" href="{config.relative_path}/post/{./pid}">{./title}</a><br />
+							<a class="title" href="{config.relative_path}/post/{./pid}">{./title}</a>
 							{{{ end }}}
-							<span class="timestamp">[[flags:flagged-timeago-readable, {./timestampISO}, {./timestampReadable}]]</span>
 						</p>
+						{{{ end }}}
+
+						<div class="d-flex gap-2 align-items-center mb-3">
+							<span class="text-sm">[[user:info.reported-by]]</span>
+							<div class="d-flex text-nowrap">
+								{{{ each ./reports }}}
+								<a style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "24px", true)}</a>
+								{{{ end }}}
+							</div>
+						</div>
 					</li>
 					{{{ end }}}
 				</ul>
@@ -97,23 +179,36 @@
 			<div class="card-body">
 				{{{ if history.bans.length }}}
 				<ul class="ban-history list-unstyled">
-					{{{each history.bans}}}
-					<li>
+					{{{ each history.bans }}}
+					<li class="mb-4 border-bottom">
+						<div class="mb-1 d-flex align-items-center justify-content-between">
+							<div>
+								<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
+								<strong>
+									<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
+								</strong>
+								<span class="timestamp timeago" title="{./timestampISO}"></span>
+							</div>
+							{{{ if (./type != "unban") }}}
+							<span class="badge text-bg-danger">[[user:banned]]</span>
+							{{{ else }}}
+							<span class="badge text-bg-success">[[user:unbanned]]</span>
+							{{{ end }}}
+						</div>
+						<p class="mb-1">
+							<span class="reason">[[user:info.banned-reason-label]]: <strong>{./reason}</strong></span>
+						</p>
 						<p>
-							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
-							<strong>
-								<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
-							</strong>
-							<span class="timestamp timeago" title="{./timestampISO}"></span> &mdash; {./timestampReadable}<br />
 							{{{ if ./until }}}
-							<span class="expiry">[[user:info.banned-until, {./untilReadable}]]</span><br />
+							<span class="expiry">[[user:info.banned-until, {isoTimeToLocaleString(./untilISO, config.userLang)}]]</span>
 							{{{ else }}}
-							<span class="expiry">[[user:info.banned-permanently]]</span><br />
+							{{{ if (./type != "unban") }}}
+							<span class="expiry">[[user:info.banned-permanently]]</span>
+							{{{ end }}}
 							{{{ end }}}
-							<span class="reason"><strong>[[user:info.banned-reason-label]]</strong>: {./reason}</span>
 						</p>
 					</li>
-					{{{end}}}
+					{{{ end }}}
 				</ul>
 				{{{ else }}}
 				<div class="alert alert-success">[[user:info.no-ban-history]]</div>
@@ -139,18 +234,28 @@
 				{{{ if history.mutes.length }}}
 				<ul class="ban-history list-unstyled">
 					{{{ each history.mutes }}}
-					<li>
+					<li class="mb-4 border-bottom">
+						<div class="mb-1 d-flex align-items-center justify-content-between">
+							<div>
+								<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
+								<strong>
+									<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
+								</strong>
+								<span class="timestamp timeago" title="{./timestampISO}"></span>
+							</div>
+							{{{ if (./type != "unmute") }}}
+							<span class="badge text-bg-danger">[[user:muted]]</span>
+							{{{ else }}}
+							<span class="badge text-bg-success">[[user:unmuted]]</span>
+							{{{ end }}}
+						</div>
+						<p class="mb-1">
+							<span class="reason">[[user:info.banned-reason-label]]: <strong>{./reason}</strong></span>
+						</p>
 						<p>
-							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
-							<strong>
-								<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
-							</strong>
-							<span class="timestamp timeago" title="{./timestampISO}"></span> &mdash; {./timestampReadable}<br />
 							{{{ if ./until }}}
-							<span class="expiry">[[user:info.muted-until, {./untilReadable}]]</span><br />
+							<span class="expiry">[[user:info.muted-until, {isoTimeToLocaleString(./untilISO, config.userLang)}]]</span>
 							{{{ end }}}
-
-							<span class="reason"><strong>[[user:info.banned-reason-label]]</strong>: {./reason}</span>
 						</p>
 					</li>
 					{{{ end }}}
@@ -160,42 +265,6 @@
 				{{{ end }}}
 			</div>
 		</div>
-
-		{{{ if isAdminOrGlobalModerator }}}
-		<div class="card">
-			<h5 class="card-header">
-				[[user:info.moderation-note]]
-			</h5>
-			<div class="card-body">
-				<textarea component="account/moderation-note" class="form-control mb-3" aria-label="[[user:info.moderation-note]]"></textarea>
-
-				<button class="btn btn-sm float-end btn-success" component="account/save-moderation-note">[[user:info.moderation-note.add]]</button>
-				<br/>
-				<div component="account/moderation-note/list">
-					{{{ each moderationNotes }}}
-					<hr/>
-
-					<div>
-						<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{buildAvatar(./user, "24px", true)}</a>
-						<strong>
-							<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{./user.username}" data-uid="{./user.uid}">{./user.username}</a>
-						</strong>
-
-						<div class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
-							<span class="timeago" title="{./timestampISO}"></span>
-						</div>
-						<br />
-
-						<div class="content">
-							{./note}
-						</div>
-					</div>
-					{{{ end }}}
-				</div>
-				<!-- IMPORT partials/paginator.tpl -->
-			</div>
-		</div>
-		{{{ end }}}
 	</div>
 </div>
 

package/templates/account/posts.tpl

@@ -24,7 +24,7 @@
 <div class="alert alert-warning text-center">{noItemsFoundKey}</div>
 {{{ end }}}
 
-<div class="">
+<div>
 	<!-- IMPORT partials/posts_list.tpl -->
 
 	{{{ if config.usePagination }}}

package/templates/account/settings.tpl

@@ -100,7 +100,7 @@
 			<label class="form-label text-sm" for="topicsPerPage">[[user:topics-per-page]] ([[user:max-items-per-page, {maxTopicsPerPage}]])</label>
 			<input type="text" class="form-control form-control-sm" id="topicsPerPage" data-property="topicsPerPage" value="{settings.topicsPerPage}">
 		</div>
-		<div class="">
+		<div>
 			<label class="form-label text-sm" for="postsPerPage">[[user:posts-per-page]] ([[user:max-items-per-page, {maxPostsPerPage}]])</label>
 			<input type="text" class="form-control form-control-sm" id="postsPerPage" data-property="postsPerPage" value="{settings.postsPerPage}">
 		</div>
@@ -119,7 +119,7 @@
 				<option value="most_views" {{{ if (settings.categoryTopicSort == "most_views") }}}selected{{{ end }}}>[[topic:most-views]]</option>
 			</select>
 		</div>
-		<div class="">
+		<div>
 			<label class="form-label text-sm" for="topicPostSort">[[user:topic-post-sort]]</label>
 			<select class="form-select form-select-sm" id="topicPostSort" data-property="topicPostSort">
 				<option value="oldest_to_newest" {{{ if (settings.topicPostSort == "oldest_to_newest") }}}selected{{{ end }}}>[[topic:oldest-to-newest]]</option>
@@ -132,7 +132,7 @@
 		{{{ if !disableEmailSubscriptions }}}
 		<hr/>
 		<h6 class="fw-bold">[[global:email]]</h6>
-		<div class="">
+		<div>
 			<div class="mb-2">
 				<label class="form-label text-sm" for="dailyDigestFreq">[[user:digest-label]]</label>
 				<select class="form-select form-select-sm" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
@@ -148,7 +148,7 @@
 		{{{ each customSettings}}}
 		<hr/>
 		<h6 class="fw-bold">{./title}</h6>
-		<div class="">
+		<div>
 			{./content}
 		</div>
 		{{{end}}}
@@ -177,7 +177,7 @@
 		{{{ end }}}
 
 		<h6 class="fw-bold">[[topic:watch]]</h6>
-		<div class="">
+		<div>
 			<div class="form-check form-switch">
 				<input class="form-check-input" type="checkbox" role="switch" id="followTopicsOnCreate" data-property="followTopicsOnCreate" {{{ if settings.followTopicsOnCreate }}}checked{{{ end }}}/>
 				<label class="form-check-label text-sm" for="followTopicsOnCreate">[[user:follow-topics-you-create]]</label>

package/templates/flags/detail.tpl

@@ -87,7 +87,7 @@
 				<div class="d-flex gap-2 align-items-center">
 					<a class="d-flex text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true)}</a>
 					<a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
-					<span class="timeago text-muted" title="{./datetimeISO}"></span>
+					<span class="timeago text-muted text-nowrap" title="{./datetimeISO}"></span>
 				</div>
 				<div>
 					<ul class="list-unstyled">

package/templates/footer.tpl

@@ -5,7 +5,7 @@
 	</div>
 	<!-- IMPORT partials/mobile-footer.tpl -->
 	{{{ if !isSpider }}}
-	<div class="">
+	<div>
 		<div component="toaster/tray" class="alert-window fixed-bottom mb-5 mb-md-2 me-2 me-md-5 ms-auto" style="width:300px; z-index: 1090;">
 			<!-- IMPORT partials/reconnect-alert.tpl -->
 		</div>

package/templates/groups/list.tpl

@@ -16,9 +16,9 @@
 				</div>
 			</div>
 		</div>
-		<div class="">
+		<div>
 			<div class="d-flex justify-content-end gap-2">
-				<div class="">
+				<div>
 					{{{ if allowGroupCreation }}}
 					<button class="btn btn-primary btn-sm text-nowrap" data-action="new"><i class="fa fa-users"></i> [[groups:new-group]]</button>
 					{{{ end }}}
@@ -28,7 +28,7 @@
 						<option value="date">[[groups:details.creation-date]]</option>
 					</select>
 				</div>
-				<div class="">
+				<div>
 					<div class="input-group">
 						<input type="text" class="form-control form-control-sm" placeholder="[[global:search]]" name="query" id="search-text">
 						<button id="search-button" class="btn btn-primary btn-sm" aria-label="[[global:search]]">

package/templates/login.tpl

@@ -15,26 +15,20 @@
 							<label for="username">{allowLoginWith}</label>
 							<input class="form-control" type="text" placeholder="{allowLoginWith}" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="nickname" value="{username}" aria-required="true"/>
 						</div>
+
 						<div class="mb-2 d-flex flex-column gap-2">
-							<div class="d-flex justify-content-between align-items-center">
-								<label for="password">[[user:password]]</label>
-								{{{ if allowPasswordReset }}}
-								<a id="reset-link" class="text-sm text-reset text-decoration-underline" href="{config.relative_path}/reset">[[login:forgot-password]]</a>
-								{{{ end }}}
-							</div>
+							<label for="password">[[user:password]]</label>
 							<div>
 								<input class="form-control" type="password" placeholder="[[user:password]]" name="password" id="password" autocomplete="current-password" autocapitalize="off" aria-required="true"/>
 								<p id="caps-lock-warning" class="text-danger hidden text-sm mb-0 form-text" aria-live="polite" role="alert" aria-atomic="true">
 									<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
 								</p>
 							</div>
-						</div>
-						<div class="mb-2">
-							<div class="checkbox">
-								<label>
-									<input type="checkbox" name="remember" id="remember" checked /> [[login:remember-me]]
-								</label>
+							{{{ if allowPasswordReset }}}
+							<div>
+								<a id="reset-link" class="text-sm text-reset text-decoration-underline" href="{config.relative_path}/reset">[[login:forgot-password]]</a>
 							</div>
+							{{{ end }}}
 						</div>
 
 						{{{ each loginFormEntry }}}
@@ -49,6 +43,11 @@
 
 						<button class="btn btn-primary" id="login" type="submit">[[global:login]]</button>
 
+						<div class="form-check mb-2">
+							<input class="form-check-input" type="checkbox" name="remember" id="remember" checked />
+							<label class="form-check-label" for="remember">[[login:remember-me]]</label>
+						</div>
+
 						<div class="alert alert-danger {{{ if !error }}} hidden{{{ end }}}" id="login-error-notify" role="alert" aria-atomic="true">
 							<strong>[[login:failed-login-attempt]]</strong>
 							<p class="mb-0">{error}</p>

package/templates/partials/breadcrumbs-json-ld.tpl

@@ -1,26 +1,16 @@
-<script type="application/ld+json">
-{
-	"@context": "https://schema.org",
-	"@type": "BreadcrumbList",
-	"itemListElement": [
-		{
-			"@type": "ListItem",
-			"position": 1,
-			"name": "{config.siteTitle}",
-			"item": "{breadcrumbs.0.url}"
-		}
-		{{{ each breadcrumbs }}}
-		{{{ if !@first}}}
-		,{
-			"@type": "ListItem",
-			"position": {increment(@index, "1")},
-			"name": "{stripTags(./text)}"
-			{{{ if !@last }}}
-			,"item": "{./url}"
-			{{{ end }}}
-		}
-		{{{ end }}}
-		{{{ end }}}
-	]
+<script type="application/ld+json">{
+"@context": "https://schema.org",
+"@type": "BreadcrumbList",
+"itemListElement": [{
+	"@type": "ListItem",
+	"position": 1,
+	"name": "{config.siteTitle}",
+	"item": "{breadcrumbs.0.url}"
 }
-</script>
+{{{ each breadcrumbs }}}{{{ if !@first}}},{
+	"@type": "ListItem",
+	"position": {increment(@index, "1")},
+	"name": "{stripTags(./text)}"
+	{{{ if !@last }}},"item": "{./url}"{{{ end }}}
+}{{{ end }}}{{{ end }}}
+]}</script>

package/templates/partials/groups/memberlist.tpl

@@ -4,7 +4,7 @@
 		<button component="groups/members/add" type="button" class="btn btn-primary btn-sm me-3" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i> [[groups:details.add-member]]</button>
 	</div>
 	{{{ end }}}
-	<div class="">
+	<div>
 		<div class="input-group">
 			<input class="form-control form-control-sm" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
 			<button class="btn btn-primary btn-sm search-button" type="button">

package/templates/partials/mobile-footer.tpl

@@ -15,16 +15,13 @@
 					{{{ each navigation }}}
 					{{{ if displayMenuItem(@root, @index) }}}
 					<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-						<a class="nav-link navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
-						{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+						<a class="nav-link navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 							<span class="d-inline-flex justify-content-between align-items-center w-100">
 								<span class="text-nowrap">
 									{{{ if ./iconClass }}}
 									<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
 									{{{ end }}}
-									{{{ if ./text }}}
-									<span class="nav-text px-2 fw-semibold">{./text}</span>
-									{{{ end }}}
+									{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{./text}</span>{{{ end }}}
 								</span>
 								<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 							</span>

package/templates/partials/post_bar.tpl

@@ -18,9 +18,7 @@
 				{{{ end }}}
 
 				{{{ if browsingUsers }}}
-				<div class="hidden-xs">
-				<!-- IMPORT partials/topic/browsing-users.tpl -->
-				</div>
+				<div class="hidden-xs"><!-- IMPORT partials/topic/browsing-users.tpl --></div>
 				{{{ end }}}
 			</div>
 			<!-- IMPORT partials/topic/reply-button.tpl -->

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

@@ -9,7 +9,7 @@
 </div>
 {{{ end }}}
 
-<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 pe-1 overflow-auto overscroll-behavior-contain ff-base ghost-scrollbar" style="max-width:  400px; max-height: 500px;">
+<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 pe-1 overflow-auto overscroll-behavior-contain ff-base ghost-scrollbar" style="max-width: {dropdown.maxWidth}; max-height: {dropdown.maxHeight};">
 	<li role="separator" class="dropdown-divider d-none d-md-block"></li>
 	{{{ each posts }}}
 	<li data-tid="{posts.topic.tid}" data-pid="{posts.pid}" class="d-flex flex-column gap-1">

package/templates/partials/sidebar-left.tpl

@@ -3,8 +3,7 @@
 		{{{ each navigation }}}
 		{{{ if displayMenuItem(@root, @index) }}}
 		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
-			{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
+			<a class="nav-link navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}} {{{ if ./text }}}aria-label="{./text}"{{{ end }}}>
 				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 					<span class="position-relative">
 						{{{ if ./iconClass }}}
@@ -12,9 +11,7 @@
 						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						{{{ end }}}
 					</span>
-					{{{ if ./text }}}
-					<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>
-					{{{ end }}}
+					{{{ if ./text }}}<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>{{{ end }}}
 				</span>
 				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 			</a>

package/templates/partials/topic/navigator.tpl

@@ -2,7 +2,7 @@
 	<div class="d-flex justify-content-end sticky-top mt-4" style="top:6rem;z-index:1;">
 		<div class="ps-1 ps-md-0 d-inline-block">
 			<div class="scroller-content d-flex gap-2 flex-column align-items-start">
-				<div class="pointer pagetop btn-ghost-sm ff-secondary d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></div>
+				<button class="pagetop btn-ghost-sm ff-secondary d-inline-flex border-0" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></button>
 				<div class="scroller-container position-relative">
 					<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
 						<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
@@ -18,7 +18,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="pointer pagebottom btn-ghost-sm ff-secondary d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></div>
+				<button class="pagebottom btn-ghost-sm ff-secondary d-inline-flex border-0" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></button>
 			</div>
 		</div>
 	</div>