nodebb-theme-harmony 1.0.0-beta.7 → 1.0.0-beta.71

package/templates/partials/flags/filters.tpl

@@ -1,99 +1,156 @@
 <!-- THIS FILE IS STILL PERSONA -->
 
-<div class="text-center">
-	<div class="card mb-3">
-		<div class="card-body collapse" id="flags-daily-wrapper" aria-expanded="false">
-			<div><canvas id="flags:daily" height="150"></canvas></div>
-		</div>
-		<div class="card-footer" data-bs-toggle="collapse" data-bs-target="#flags-daily-wrapper" aria-controls="#flags-daily-wrapper"><small>[[flags:graph-label]]</small>&nbsp;<i class="fa fa-sort"></i></div>
-	</div>
-</div>
+<div class="d-flex align-items-start gap-2 pb-3 border-bottom">
+	<a class="filter-btn btn btn-light btn-sm border {{{ if filters.quick }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+		<span class="filter-label">{{{ if filters.quick }}}[[flags:filter-quick-{./filters.quick}]]{{{ else }}}[[flags:quick-filters]]{{{ end }}}</span>
+		<span class="caret"></span>
+	</a>
+	<ul class="dropdown-menu">
+		<li>
+			<a class="dropdown-item" href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a>
+		</li>
+	</ul>
 
-<div class="card mb-3">
-	<div class="card-header">
-		[[flags:quick-filters]]
-	</div>
-	<div class="card-body">
-		<ul>
-			<li><a href="{config.relative_path}/flags?quick=mine">[[flags:filter-quick-mine]]</a></li>
+	<div component="flags/filters" class="ps-2 ms-2 border-start d-flex gap-2 me-auto">
+		<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
+
+		<a class="filter-btn btn btn-light btn-sm border {{{ if (sort != "newest") }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if (sort != "newest") }}}[[flags:sort-{./sort}]]{{{ else }}}[[flags:sort]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu">
+			<li><h6 class="dropdown-header">[[flags:sort-all]]</h6></li>
+			<li class="dropdown-item" data-name="sort" data-value="newest">[[flags:sort-newest]]</li>
+			<li class="dropdown-item" data-name="sort" data-value="oldest">[[flags:sort-oldest]]</li>
+			<li class="dropdown-item" data-name="sort" data-value="reports">[[flags:sort-reports]]</li>
+			<li><h6 class="dropdown-header">[[flags:sort-posts-only]]</h6></li>
+			<li class="dropdown-item" data-name="sort" data-value="downvotes">[[flags:sort-downvotes]]</li>
+			<li class="dropdown-item" data-name="sort" data-value="upvotes">[[flags:sort-upvotes]]</li>
+			<li class="dropdown-item" data-name="sort" data-value="replies">[[flags:sort-replies]]</li>
 		</ul>
-	</div>
-</div>
 
-<div class="card mb-3">
-	<div class="card-header">
-		[[flags:filters]]
-	</div>
-	<div class="card-body">
-		<form role="form" component="flags/filters">
-			<fieldset>
-				<div class="mb-3">
-					<label class="form-label" for="filter-cid">[[flags:filter-cid]]</label>
-					<div class="input-group">
-					<!-- IMPORT partials/category-filter.tpl -->
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.state }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if filters.state }}}[[flags:state-{./filters.state}]]{{{ else }}}[[flags:filter-state]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu">
+			<li class="dropdown-item" data-name="state" data-value="open">[[flags:state-open]]</li>
+			<li class="dropdown-item" data-name="state" data-value="wip">[[flags:state-wip]]</li>
+			<li class="dropdown-item" data-name="state" data-value="resolved">[[flags:state-resolved]]</li>
+			<li class="dropdown-item" data-name="state" data-value="rejected">[[flags:state-rejected]]</li>
+		</ul>
+
+		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.type }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+			<span class="filter-label">{{{ if filters.type }}}[[flags:filter-type-{./filters.type}]]{{{ else }}}[[flags:filter-type]]{{{ end }}}</span>
+			<span class="caret"></span>
+		</a>
+		<ul class="dropdown-menu">
+			<li class="dropdown-item" data-name="type" data-value="all">[[flags:filter-type-all]]</li>
+			<li class="dropdown-item" data-name="type" data-value="post">[[flags:filter-type-post]]</li>
+			<li class="dropdown-item" data-name="type" data-value="user">[[flags:filter-type-user]]</li>
+		</ul>
+
+		<div component="flags/filter/assignee" class="dropdown" data-filter-name="assignee">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.assignee }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">[[flags:filter-assignee]]</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each selected.assignee }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							{buildAvatar(@value, "16px", true)} {./username}
+							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						{{{ end }}}
 					</div>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="sort">[[flags:sort]]</label>
-					<select class="form-control" id="sort" name="sort">
-						<optgroup label="[[flags:sort-all]]">
-							<option value="newest">[[flags:sort-newest]]</option>
-							<option value="oldest">[[flags:sort-oldest]]</option>
-							<option value="reports">[[flags:sort-reports]]</option>
-						</optgroup>
-						<optgroup label="[[flags:sort-posts-only]]">
-							<option value="downvotes">[[flags:sort-downvotes]]</option>
-							<option value="upvotes">[[flags:sort-upvotes]]</option>
-							<option value="replies">[[flags:sort-replies]]</option>
-						</optgroup>
-					</select>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="filter-state">[[flags:filter-state]]</label>
-					<select class="form-control" id="filter-state" name="state">
-						<option value="">[[flags:state-all]]</option>
-						<option value="open">[[flags:state-open]]</option>
-						<option value="wip">[[flags:state-wip]]</option>
-						<option value="resolved">[[flags:state-resolved]]</option>
-						<option value="rejected">[[flags:state-rejected]]</option>
-					</select>
-				</div>
+				</li>
+			</ul>
+		</div>
 
-				<div class="mb-3">
-					<label class="form-label" for="filter-type">[[flags:filter-type]]</label>
-					<select class="form-control" id="filter-type" name="type">
-						<option value="">[[flags:filter-type-all]]</option>
-						<option value="post">[[flags:filter-type-post]]</option>
-						<option value="user">[[flags:filter-type-user]]</option>
-					</select>
-				</div>
-			</fieldset>
+		<div component="flags/filter/reporterId" class="dropdown" data-filter-name="reporterId">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.reporterId }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">[[flags:filter-reporterId]]</span>
+				<span class="caret"></span>
+			</a>
 
-			<fieldset class="collapse{{{ if expanded }}} show{{{ end }}}" id="more-filters" aria-expanded="{expanded}">
-				<div class="mb-3">
-					<label class="form-label" for="filter-assignee">[[flags:filter-assignee]]</label>
-					<input type="text" class="form-control" id="filter-assignee" name="assignee" />
-				</div>
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each selected.reporterId }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							{buildAvatar(@value, "16px", true)} {./username}
+							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						{{{ end }}}
+					</div>
+				</li>
+			</ul>
+		</div>
 
-				<div class="mb-3">
-					<label class="form-label" for="filter-targetUid">[[flags:filter-targetUid]]</label>
-					<input type="text" class="form-control" id="filter-targetUid" name="targetUid" />
-				</div>
+		<div component="flags/filter/targetUid" class="dropdown" data-filter-name="targetUid">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.targetUid }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">[[flags:filter-targetUid]]</span>
+				<span class="caret"></span>
+			</a>
 
-				<div class="mb-3">
-					<label class="form-label" for="filter-reporterId">[[flags:filter-reporterId]]</label>
-					<input type="text" class="form-control" id="filter-reporterId" name="reporterId" />
-				</div>
-			</fieldset>
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each selected.targetUid }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							{buildAvatar(@value, "16px", true)} {./username}
+							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						{{{ end }}}
+					</div>
+				</li>
+			</ul>
+		</div>
 
-			<div class="d-grid gap-2">
-				{{{ if expanded }}}
-				<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:more-filters]] ">[[flags:fewer-filters]]&nbsp;<i class="fa fa-sort"></i></button>
-				{{{ else }}}
-				<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#more-filters" aria-controls="#more-filters" data-text-variant="[[flags:fewer-filters]] ">[[flags:more-filters]]&nbsp;<i class="fa fa-sort"></i></button>
-				{{{ end }}}
-				<button type="button" id="apply-filters" class="btn btn-primary">[[flags:apply-filters]]</button>
-			  </div>
+		<form role="form">
+			<input type="hidden" name="sort" value="{./sort}" />
+			<input type="hidden" name="state" value="{./filters.state}" />
+			<input type="hidden" name="type" value="{./filters.type}" />
 		</form>
 	</div>
+
+	<div component="flags/filters/reset">
+		<a class="filter-btn btn btn-warning btn-sm border {{{ if !hasFilter }}}btn-light disabled{{{ end }}}" href="{config.relative_path}/flags" role="button">
+			<span class="filter-label">[[flags:filter-reset]]</span>
+		</a>
+	</div>
+
+	<div class="btn-group float-end" component="flags/bulk-actions">
+		<button class="filter-btn btn btn-light btn-sm border" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
+			<span class="filter-label">[[flags:bulk-actions]]</span>
+		</button>
+		<ul class="dropdown-menu">
+			<li><a href="#" class="dropdown-item" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>
+			<li><a href="#" class="dropdown-item" data-action="bulk-mark-resolved">[[flags:bulk-resolve]]</a></li>
+		</ul>
+	</div>
 </div>

package/templates/partials/flags/results.tpl

@@ -0,0 +1,38 @@
+<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">
+	[[flags:x-flags-found, {count}]]
+</div>
+
+<table class="table table-striped table-hover" component="flags/list">
+	<thead>
+		<tr>
+			<th></th>
+			<th class="text-xs text-muted">[[flags:reports]]</th>
+			<th class="text-xs text-muted">[[flags:first-reported]]</th>
+			<th class="text-xs text-muted">[[flags:state]]</th>
+			<th>
+				<input type="checkbox" data-action="toggle-all" autocomplete="off" />
+			</th>
+		</tr>
+	</thead>
+	<tbody>
+		{{{ each flags }}}
+		<tr data-flag-id="{./flagId}">
+			<td>
+				<a class="text-reset text-decoration-underline" href="{config.relative_path}/flags/{./flagId}">
+					{./target_readable}
+				</a>
+			</td>
+			<td>
+				{./heat}
+			</td>
+			<td><span class="timeago" title="{./datetimeISO}"></span></td>
+			<td><span class="badge bg-{./labelClass}">[[flags:state-{./state}]]</span></td>
+			<td>
+				<input type="checkbox" autocomplete="off" />
+			</td>
+		</tr>
+		{{{end}}}
+	</tbody>
+</table>
+
+<!-- IMPORT partials/paginator.tpl -->

package/templates/partials/groups/admin.tpl

@@ -4,7 +4,7 @@
 			<div class="col-12 col-lg-6">
 				<div class="mb-3">
 					<label class="form-label" for="name">[[groups:details.group_name]]</label>
-					<input <!-- IF group.system -->readonly<!-- ENDIF group.system --> class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
+					<input {{{ if group.system }}}readonly{{{ end }}} class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
 				</div>
 				<div class="mb-3">
 					<label class="form-label" for="name">[[groups:details.description]]</label>
@@ -13,7 +13,7 @@
 
 				<div class="form-check">
 					<label class="form-check-label">[[groups:details.private]]</label>
-					<input class="form-check-input" name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private -->>
+					<input class="form-check-input" name="private" type="checkbox"{{{ if group.private }}} checked{{{ end }}}>
 					{{{ if !allowPrivateGroups }}}
 					<p class="form-text">
 						[[groups:details.private_system_help]]
@@ -25,7 +25,7 @@
 				</div>
 				<div class="form-check">
 					<label class="form-check-label">[[groups:details.hidden]]</label>
-					<input class="form-check-input" name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden -->>
+					<input class="form-check-input" name="hidden" type="checkbox"{{{ if group.hidden }}} checked{{{ end }}}>
 					<p class="form-text text-xs m-0">
 						[[groups:details.hidden_help]]
 					</p>
@@ -82,7 +82,7 @@
 			<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
 			<div class="d-flex gap-1">
 				<div class="member-post-cids-selector">
-					<!-- IMPORT partials/category-selector.tpl -->
+					<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
 				</div>
 				<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
 			</div>

package/templates/partials/groups/badge.tpl

@@ -1 +1 @@
-<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon}{{{ if ./userTitle}}} me-1{{{ end }}}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>
+<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon}{{{ if ./userTitle}}} me-1{{{ end }}}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text align-text-bottom">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>

package/templates/partials/groups/memberlist.tpl

@@ -25,7 +25,7 @@
 			<div class="d-flex align-items-center justify-content-between">
 				<div class="d-flex align-items-center gap-2">
 					<a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
-					<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
+					<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning {{{ if !group.members.isOwner }}}invisible{{{ end }}}"></i>
 				</div>
 
 				{{{ if group.isOwner }}}

package/templates/partials/groups/sidebar-left.tpl

@@ -1,5 +1,5 @@
 <div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
-	<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
+	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
 		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
 			<div class="flex-1">[[global:posts]]</div>
 		</button>

package/templates/partials/header/brand.tpl

@@ -1,6 +1,6 @@
 {{{ if (brand:logo || config.showSiteTitle)}}}
 <div class="container brand-container">
-	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<div component="brand/wrapper" class="d-flex align-items-center gap-3 p-2 rounded-1 align-content-stretch ">
 			{{{ if brand:logo }}}
 			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}">

package/templates/partials/mobile-footer.tpl

@@ -1,73 +1,78 @@
-<div class="text-dark bg-light bottombar p-2 d-flex d-md-none justify-content-between fixed-bottom ff-secondary align-items-center">
-	<div class="">
-		<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
-			<span class="position-relative">
-				<i class="fa fa-fw fa-lg fa-bars"></i>
-				<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
-			</span>
-		</a>
-		<ul class="navigation-dropdown dropdown-menu">
-			{{{ each navigation }}}
-			<!-- IF function.displayMenuItem, @index -->
-			<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-				<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if navigation.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 truncate-open">
-							{{{ if ./iconClass }}}
-							<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
-							{{{ end }}}
-							{{{ if navigation.text }}}
-							<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
-							{{{ end }}}
+<div component="bottombar" class="bottombar d-flex flex-column d-lg-none fixed-bottom ff-secondary gap-1 align-items-center">
+
+	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
+
+	<div class="bottombar-nav p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
+		<div class="">
+			<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
+				<span class="position-relative">
+					<i class="fa fa-fw fa-lg fa-bars"></i>
+					<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
+				</span>
+			</a>
+			<ul class="navigation-dropdown dropdown-menu">
+				{{{ each navigation }}}
+				{{{ if displayMenuItem(@root, @index) }}}
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+					<a class="nav-link nav-btn 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 }}}
+							</span>
+							<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>
-						<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
-					</span>
-				</a>
-				{{{ if navigation.dropdown }}}
-				<div class="ps-3">
-					<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
-						{navigation.dropdownContent}
-					</ul>
-				</div>
+					</a>
+					{{{ if ./dropdown }}}
+					<div class="ps-3">
+						<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
+							{./dropdownContent}
+						</ul>
+					</div>
+					{{{ end }}}
+				</li>
 				{{{ end }}}
-			</li>
-			<!-- ENDIF function.displayMenuItem -->
-			{{{end}}}
-		</ul>
-	</div>
+				{{{ end }}}
+			</ul>
+		</div>
 
-	<div class="">
-		{{{ if config.loggedIn }}}
-		<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
-			{{{ if config.searchEnabled }}}
-			<li component="sidebar/search" class="nav-item m-0 search">
-			<!-- IMPORT partials/sidebar/search-mobile.tpl -->
-			</li>
-			{{{ end }}}
+		<div class="">
+			{{{ if config.loggedIn }}}
+			<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
+				{{{ if config.searchEnabled }}}
+				<li component="sidebar/search" class="nav-item m-0 search">
+				<!-- IMPORT partials/sidebar/search-mobile.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="notifications" class="nav-item m-0 notifications">
-			<!-- IMPORT partials/sidebar/notifications.tpl -->
-			</li>
+				<li component="notifications" class="nav-item m-0 notifications">
+				<!-- IMPORT partials/sidebar/notifications.tpl -->
+				</li>
 
-			{{{ if canChat }}}
-			<li class="nav-item m-0 chats">
-			<!-- IMPORT partials/sidebar/chats.tpl -->
-			</li>
-			{{{ end }}}
+				{{{ if canChat }}}
+				<li class="nav-item m-0 chats">
+				<!-- IMPORT partials/sidebar/chats.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="sidebar/drafts" class="nav-item m-0 drafts">
-			<!-- IMPORT partials/sidebar/drafts.tpl -->
-			</li>
+				<li component="sidebar/drafts" class="hidden nav-item m-0 drafts">
+				<!-- IMPORT partials/sidebar/drafts.tpl -->
+				</li>
 
-			<li id="user_label" class="nav-item m-0 py-2 usermenu">
-			<!-- IMPORT partials/sidebar/user-menu.tpl -->
-			</li>
-		</ul>
-		{{{ else }}}
-		<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
-			<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
-		</ul>
-		{{{ end }}}
+				<li id="user_label" class="nav-item m-0 py-2 usermenu">
+				<!-- IMPORT partials/sidebar/user-menu.tpl -->
+				</li>
+			</ul>
+			{{{ else }}}
+			<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
+				<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
+			</ul>
+			{{{ end }}}
+		</div>
 	</div>
 </div>

package/templates/partials/notifications_list.tpl

@@ -20,7 +20,7 @@
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>
 			</div>
 		</div>
-		<div class="">
+		<div>
 			{{{ if ./nid }}}
 			<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
 				<i class="unread fa fa-2xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}"></i>

package/templates/partials/paginator.tpl

@@ -1,45 +1,47 @@
 <div component="pagination" class="pagination-container mt-3{{{ if !pagination.pages.length }}} hidden{{{ end }}}">
 	<ul class="pagination pagination-sm gap-1 hidden-xs hidden-sm justify-content-center">
 		<li class="page-item previous float-start{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+			<a class="page-link rounded fw-secondary px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		{{{each pagination.pages}}}
 			{{{ if pagination.pages.separator }}}
 			<li component="pagination/select-page" class="page-item page select-page">
-				<a class="page-link rounded fw-secondary text-reset px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
+				<a class="page-link rounded fw-secondary px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
 			</li>
 			{{{ else }}}
 			<li class="page-item page{{{ if pagination.pages.active }}} active{{{ end }}}" >
-				<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
+				<a class="page-link rounded fw-secondary px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
 			</li>
 			{{{ end }}}
 		{{{end}}}
 
 		<li class="page-item next float-end {{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+			<a class="page-link rounded fw-secondary px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 	</ul>
 
+	{{{ if !template.topic }}}
 	<ul class="pagination pagination-sm hidden-md hidden-lg justify-content-center">
 		<li class="page-item first{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
+			<a class="page-link fw-secondary"  href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
 		</li>
 
 		<li class="page-item previous{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+			<a class="page-link fw-secondary"  href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		<li component="pagination/select-page" class="page-item page select-page">
-			<a class="page-link fw-secondary text-reset" href="#">{pagination.currentPage} / {pagination.pageCount}</a>
+			<a class="page-link fw-secondary"  href="#">{pagination.currentPage} / {pagination.pageCount}</a>
 		</li>
 
 		<li class="page-item next{{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+			<a class="page-link fw-secondary"  href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 
 		<li class="page-item last{{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
+			<a class="page-link fw-secondary"  href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
 		</li>
 	</ul>
+	{{{ end }}}
 </div>