nodebb-theme-harmony 2.0.0-pre.9 → 2.0.1

package/templates/footer.tpl

@@ -1,17 +1,17 @@
-
-			</div><!-- /.container#content -->
-		</main>
-		<!-- IMPORT partials/sidebar-right.tpl -->
-	</div>
-	<!-- IMPORT partials/mobile-footer.tpl -->
-	{{{ if !isSpider }}}
-	<div class="">
-		<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>
-	</div>
-	{{{ end }}}
-
-	<!-- IMPORT partials/footer/js.tpl -->
-</body>
-</html>
+
+			</div><!-- /.container#content -->
+		</main>
+		<!-- IMPORT partials/sidebar-right.tpl -->
+	</div>
+	<!-- IMPORT partials/mobile-footer.tpl -->
+	{{{ if !isSpider }}}
+	<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>
+	</div>
+	{{{ end }}}
+
+	<!-- IMPORT partials/footer/js.tpl -->
+</body>
+</html>

package/templates/groups/details.tpl

@@ -1,86 +1,86 @@
-<div component="groups/container" class="groups details">
-	<div class="cover position-absolute start-0 top-0" component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
-		<div class="container">
-			{{{ if group.isOwner }}}
-			<div class="controls text-center">
-				<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
-				<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
-				<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
-			</div>
-			<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
-			<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-			{{{ end }}}
-		</div>
-	</div>
-
-	<div class="d-flex flex-column flex-md-row justify-content-md-between pb-4 mb-4 mt-2 border-bottom">
-		<div class="d-flex flex-column mt-1">
-			<div class="d-flex align-items-center gap-2">
-				<h3 class="mb-0">{group.displayName}</h3>
-			</div>
-			<div class="d-flex gap-2">
-				{group.descriptionParsed}
-				<div>
-					{{{ if group.private }}}<span class="badge text-bg-light border border-1">[[groups:details.private]]</span>{{{ end }}}
-					{{{ if group.hidden }}}<span class="badge text-bg-light border border-1">[[groups:details.hidden]]</span>{{{ end }}}
-				</div>
-			</div>
-		</div>
-		<div class="d-flex gap-2 align-items-start">
-			{{{ if loggedIn }}}
-			{function.membershipBtn, group}
-			{{{ end }}}
-			{{{ if isAdmin }}}
-			<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-light"><i class="fa fa-gear"></i> [[user:edit]]</a>
-			{{{ end }}}
-		</div>
-	</div>
-
-	<div class="d-flex flex-column flex-md-row">
-		<div data-widget-area="left">
-			{{{each widgets.left}}}
-			{{widgets.left.html}}
-			{{{end}}}
-		</div>
-		<!-- IMPORT partials/groups/sidebar-left.tpl -->
-
-		<div class="flex-grow-1 ps-md-2 ps-lg-5" style="min-width:0;">
-			<div class="tab-content">
-				<div class="tab-pane fade show active" id="groups-posts" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
-					{{{ if !posts.length }}}
-					<div class="alert alert-info my-2">[[groups:details.has-no-posts]]</div>
-					{{{ end }}}
-					<!-- IMPORT partials/posts_list.tpl -->
-				</div>
-				<div class="tab-pane fade" id="groups-members" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.members]]</h3>
-
-					<!-- IMPORT partials/groups/memberlist.tpl -->
-				</div>
-				{{{ if group.isOwner }}}
-				<div class="tab-pane fade" id="groups-pending" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.pending]]</h3>
-					<!-- IMPORT partials/groups/pending.tpl -->
-				</div>
-
-				<div class="tab-pane fade" id="groups-invited" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.invited]]</h3>
-					<!-- IMPORT partials/groups/invited.tpl -->
-				</div>
-
-				<div class="tab-pane fade" id="groups-admin" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.owner-options]]</h3>
-					<!-- IMPORT partials/groups/admin.tpl -->
-				</div>
-				{{{ end }}}
-			</div>
-		</div>
-
-		<div data-widget-area="right">
-			{{{each widgets.right}}}
-			{{widgets.right.html}}
-			{{{end}}}
-		</div>
-	</div>
-</div>
+<div component="groups/container" class="groups details">
+	<div class="cover position-absolute start-0 top-0" component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
+		<div class="container">
+			{{{ if group.isOwner }}}
+			<div class="controls text-center">
+				<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
+				<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
+				<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
+			</div>
+			<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
+			<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
+			{{{ end }}}
+		</div>
+	</div>
+
+	<div class="d-flex flex-column flex-md-row justify-content-md-between pb-4 mb-4 mt-2 border-bottom">
+		<div class="d-flex flex-column mt-1">
+			<div class="d-flex align-items-center gap-2">
+				<h3 class="mb-0">{group.displayName}</h3>
+			</div>
+			<div class="d-flex gap-2">
+				{group.descriptionParsed}
+				<div>
+					{{{ if group.private }}}<span class="badge text-bg-light border border-1">[[groups:details.private]]</span>{{{ end }}}
+					{{{ if group.hidden }}}<span class="badge text-bg-light border border-1">[[groups:details.hidden]]</span>{{{ end }}}
+				</div>
+			</div>
+		</div>
+		<div class="d-flex gap-2 align-items-start">
+			{{{ if loggedIn }}}
+			{function.membershipBtn, group}
+			{{{ end }}}
+			{{{ if isAdmin }}}
+			<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-light"><i class="fa fa-gear"></i> [[user:edit]]</a>
+			{{{ end }}}
+		</div>
+	</div>
+
+	<div class="d-flex flex-column flex-md-row">
+		<div data-widget-area="left">
+			{{{each widgets.left}}}
+			{{widgets.left.html}}
+			{{{end}}}
+		</div>
+		<!-- IMPORT partials/groups/sidebar-left.tpl -->
+
+		<div class="flex-grow-1 ps-md-2 ps-lg-5" style="min-width:0;">
+			<div class="tab-content">
+				<div class="tab-pane fade show active" id="groups-posts" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
+					{{{ if !posts.length }}}
+					<div class="alert alert-info my-2">[[groups:details.has-no-posts]]</div>
+					{{{ end }}}
+					<!-- IMPORT partials/posts_list.tpl -->
+				</div>
+				<div class="tab-pane fade" id="groups-members" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.members]]</h3>
+
+					<!-- IMPORT partials/groups/memberlist.tpl -->
+				</div>
+				{{{ if group.isOwner }}}
+				<div class="tab-pane fade" id="groups-pending" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.pending]]</h3>
+					<!-- IMPORT partials/groups/pending.tpl -->
+				</div>
+
+				<div class="tab-pane fade" id="groups-invited" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.invited]]</h3>
+					<!-- IMPORT partials/groups/invited.tpl -->
+				</div>
+
+				<div class="tab-pane fade" id="groups-admin" role="tabpanel">
+					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.owner-options]]</h3>
+					<!-- IMPORT partials/groups/admin.tpl -->
+				</div>
+				{{{ end }}}
+			</div>
+		</div>
+
+		<div data-widget-area="right">
+			{{{each widgets.right}}}
+			{{widgets.right.html}}
+			{{{end}}}
+		</div>
+	</div>
+</div>

package/templates/groups/list.tpl

@@ -1,56 +1,58 @@
-<div data-widget-area="header">
-	{{{each widgets.header}}}
-	{{widgets.header.html}}
-	{{{end}}}
-</div>
-<div class="groups list">
-	<h3 class="fw-semibold">[[pages:groups]]</h3>
-	<div class="d-flex flex-wrap justify-content-between">
-		<div class="mb-2 mb-md-0">
-			<div class="text-sm d-flex flex-wrap align-items-center gap-2">
-				[[topic:sort-by]]
-				<div class="d-flex gap-2">
-					<a href="?sort=alpha" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group-name]]</a>
-					<a href="?sort=count" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member-count]]</a>
-					<a href="?sort=date" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation-date]]</a>
-				</div>
-			</div>
-		</div>
-		<div class="">
-			<div class="d-flex justify-content-end gap-2">
-				<div class="">
-					{{{ 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 }}}
-					<select class="form-select hidden" id="search-sort">
-						<option value="alpha">[[groups:details.group-name]]</option>
-						<option value="count">[[groups:details.member-count]]</option>
-						<option value="date">[[groups:details.creation-date]]</option>
-					</select>
-				</div>
-				<div class="">
-					<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]]">
-							<i class="fa fa-search"></i>
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<hr />
-
-	<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
-		{{{ if groups.length }}}
-		<!-- IMPORT partials/groups/list.tpl -->
-		{{{ else }}}
-		<div class="col-12">
-			<div class="alert alert-warning">
-			[[groups:no-groups-found]]
-			</div>
-		</div>
-		{{{ end }}}
-	</div>
-</div>
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="groups list">
+	<h3 class="fw-semibold">[[pages:groups]]</h3>
+	<div class="d-flex flex-wrap justify-content-between">
+		<div class="mb-2 mb-md-0">
+			<div class="text-sm d-flex flex-wrap align-items-center gap-2">
+				[[topic:sort-by]]
+				<div class="d-flex gap-2">
+					<a href="?sort=alpha" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group-name]]</a>
+					<a href="?sort=count" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member-count]]</a>
+					<a href="?sort=date" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation-date]]</a>
+				</div>
+			</div>
+		</div>
+		<div>
+			<div class="d-flex justify-content-end gap-2">
+				<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 }}}
+					<select class="form-select hidden" id="search-sort">
+						<option value="alpha">[[groups:details.group-name]]</option>
+						<option value="count">[[groups:details.member-count]]</option>
+						<option value="date">[[groups:details.creation-date]]</option>
+					</select>
+				</div>
+				<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]]">
+							<i class="fa fa-search"></i>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<hr />
+
+	<div component="groups/container" class="row" id="groups-list">
+		{{{ if groups.length }}}
+		<!-- IMPORT partials/groups/list.tpl -->
+		{{{ else }}}
+		<div class="col-12">
+			<div class="alert alert-warning">
+			[[groups:no-groups-found]]
+			</div>
+		</div>
+		{{{ end }}}
+	</div>
+
+	<!-- IMPORT partials/paginator.tpl -->
+</div>

package/templates/groups/members.tpl

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

package/templates/header.tpl

@@ -1,45 +1,45 @@
-<!DOCTYPE html>
-<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
-<head>
-	<title>{browserTitle}</title>
-	{{{each metaTags}}}{function.buildMetaTag}{{{end}}}
-	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/client{{{if bootswatchSkin}}}-{bootswatchSkin}{{{end}}}{{{ if (languageDirection=="rtl") }}}-rtl{{{ end }}}.css?{config.cache-buster}" />
-	{{{each linkTags}}}{function.buildLinkTag}{{{end}}}
-
-	<script>
-		var config = JSON.parse('{{configJSON}}');
-		var app = {
-			user: JSON.parse('{{userJSON}}')
-		};
-
-		document.documentElement.style.setProperty('--panel-offset', `${localStorage.getItem('panelOffset') || 0}px`);
-	</script>
-
-	{{{if useCustomHTML}}}
-	{{customHTML}}
-	{{{end}}}
-	{{{if useCustomCSS}}}
-	<style>{{customCSS}}</style>
-	{{{end}}}
-</head>
-
-<body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
-	<a class="visually-hidden-focusable position-absolute top-0 start-0 p-3 m-3 bg-body" style="z-index: 1021;" href="#content">[[global:skip-to-content]]</a>
-	<div class="layout-container d-flex justify-content-between pb-4 pb-md-0">
-		<!-- IMPORT partials/sidebar-left.tpl -->
-
-		<main id="panel" class="d-flex flex-column gap-3 flex-grow-1 mt-3" style="min-width: 0;">
-			<!-- IMPORT partials/header/brand.tpl -->
-			<script>
-				const headerEl = document.getElementById('header-menu');
-				if (headerEl) {
-					const rect = headerEl.getBoundingClientRect();
-					const offset = Math.max(0, rect.bottom);
-					document.documentElement.style.setProperty('--panel-offset', offset + `px`);
-				} else {
-					document.documentElement.style.setProperty('--panel-offset', `0px`);
-				}
-			</script>
-			<div class="container-lg px-md-4 d-flex flex-column gap-3 h-100 mb-5 mb-lg-0" id="content">
-			<!-- IMPORT partials/noscript/warning.tpl -->
-			<!-- IMPORT partials/noscript/message.tpl -->
+<!DOCTYPE html>
+<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
+<head>
+	<title>{browserTitle}</title>
+	{{{each metaTags}}}{function.buildMetaTag}{{{end}}}
+	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/client{{{if bootswatchSkin}}}-{bootswatchSkin}{{{end}}}{{{ if (languageDirection=="rtl") }}}-rtl{{{ end }}}.css?{config.cache-buster}" />
+	{{{each linkTags}}}{function.buildLinkTag}{{{end}}}
+
+	<script>
+		var config = JSON.parse('{{configJSON}}');
+		var app = {
+			user: JSON.parse('{{userJSON}}')
+		};
+
+		document.documentElement.style.setProperty('--panel-offset', `${localStorage.getItem('panelOffset') || 0}px`);
+	</script>
+
+	{{{if useCustomHTML}}}
+	{{customHTML}}
+	{{{end}}}
+	{{{if useCustomCSS}}}
+	<style>{{customCSS}}</style>
+	{{{end}}}
+</head>
+
+<body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
+	<a class="visually-hidden-focusable position-absolute top-0 start-0 p-3 m-3 bg-body" style="z-index: 1021;" href="#content">[[global:skip-to-content]]</a>
+	<div class="layout-container d-flex justify-content-between pb-4 pb-md-0">
+		<!-- IMPORT partials/sidebar-left.tpl -->
+
+		<main id="panel" class="d-flex flex-column gap-3 flex-grow-1 mt-3" style="min-width: 0;">
+			<!-- IMPORT partials/header/brand.tpl -->
+			<script>
+				const headerEl = document.getElementById('header-menu');
+				if (headerEl) {
+					const rect = headerEl.getBoundingClientRect();
+					const offset = Math.max(0, rect.bottom);
+					document.documentElement.style.setProperty('--panel-offset', offset + `px`);
+				} else {
+					document.documentElement.style.setProperty('--panel-offset', `0px`);
+				}
+			</script>
+			<div class="container-lg px-md-4 d-flex flex-column gap-3 h-100 mb-5 mb-lg-0" id="content">
+			<!-- IMPORT partials/noscript/warning.tpl -->
+			<!-- IMPORT partials/noscript/message.tpl -->

package/templates/notifications.tpl

@@ -1,32 +1,32 @@
-<div class="notifications">
-	<div class="btn-toolbar justify-content-end" role="toolbar">
-		<button class="btn btn-sm btn-light" component="notifications/mark_all">[[notifications:mark-all-read]]</button>
-	</div>
-
-	<hr class="text-muted opacity-25"/>
-
-	<div class="d-flex flex-column flex-md-row">
-		<div class="flex-shrink-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;">
-				{{{ each filters }}}
-				{{{ if ./separator }}}
-				<hr/>
-				{{{ else }}}
-				<a class="btn-ghost ff-secondary fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
-					<div class="flex-grow-1">{filters.name}</div>
-					<span class="flex-shrink-0 text-xs" title="{./count}">{humanReadableNumber(./count)}</span>
-				</a>
-				{{{ end }}}
-				{{{ end }}}
-			</div>
-		</div>
-		<div class="flex-grow-1 ps-md-2 ps-lg-5">
-			<ul component="notifications/list" class="notifications-list list-unstyled" data-nextstart="{nextStart}">
-				<!-- IMPORT partials/notifications_list.tpl -->
-			</ul>
-			<!-- IMPORT partials/paginator.tpl -->
-		</div>
-	</div>
-</div>
-
-
+<div class="notifications">
+	<div class="btn-toolbar justify-content-end" role="toolbar">
+		<button class="btn btn-sm btn-light" component="notifications/mark_all">[[notifications:mark-all-read]]</button>
+	</div>
+
+	<hr class="text-muted opacity-25"/>
+
+	<div class="d-flex flex-column flex-md-row">
+		<div class="flex-shrink-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;">
+				{{{ each filters }}}
+				{{{ if ./separator }}}
+				<hr/>
+				{{{ else }}}
+				<a class="btn btn-ghost d-flex gap-2 text-start text-sm ff-secondary fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
+					<div class="flex-grow-1">{filters.name}</div>
+					<span class="flex-shrink-0 text-xs" title="{./count}">{humanReadableNumber(./count)}</span>
+				</a>
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+		</div>
+		<div class="flex-grow-1 ps-md-2 ps-lg-5">
+			<ul component="notifications/list" class="notifications-list list-unstyled" data-nextstart="{nextStart}">
+				<!-- IMPORT partials/notifications_list.tpl -->
+			</ul>
+			<!-- IMPORT partials/paginator.tpl -->
+		</div>
+	</div>
+</div>
+
+

package/templates/partials/account/admin-menu.tpl

@@ -1,36 +1,36 @@
-<div class="btn-group bottom-sheet">
-	<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-		<i class="fa fa-gear fa-fw"></i>
-	</button>
-	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm account-sub-links" role="menu">
-		<li>
-			<a class="dropdown-item rounded-1" href="{config.relative_path}/user/{userslug}/info" role="menuitem">[[user:account-info]]</a>
-		</li>
-		{{{ if (canBan || canMute) }}}
-		<li role="separator" class="dropdown-divider"></li>
-		{{{ end }}}
-		{{{ if canBan }}}
-		<li class="{{{ if banned }}}hide{{{ end }}}">
-			<a class="dropdown-item rounded-1" component="account/ban" href="#" role="menuitem">[[user:ban-account]]</a>
-		</li>
-		<li class="{{{ if !banned }}}hide{{{ end }}}">
-			<a class="dropdown-item rounded-1" component="account/unban" href="#" role="menuitem">[[user:unban-account]]</a>
-		</li>
-		{{{ end }}}
-		{{{ if canMute }}}
-		<li class="{{{ if muted }}}hide{{{ end }}}">
-			<a class="dropdown-item rounded-1" component="account/mute" href="#" role="menuitem">[[user:mute-account]]</a>
-		</li>
-		<li class="{{{ if !muted }}}hide{{{ end }}}">
-			<a class="dropdown-item rounded-1" component="account/unmute" href="#" role="menuitem">[[user:unmute-account]]</a>
-		</li>
-		{{{ end }}}
-		{{{ if isAdmin }}}
-		<li>
-			<a component="account/delete-account" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-account-as-admin]]</a>
-			<a component="account/delete-content" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-content]]</a>
-			<a component="account/delete-all" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-all]]</a>
-		</li>
-		{{{ end }}}
-	</ul>
-</div>
+<div class="btn-group bottom-sheet">
+	<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-gear fa-fw"></i>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm account-sub-links" role="menu">
+		<li>
+			<a class="dropdown-item rounded-1" href="{config.relative_path}/user/{userslug}/info" role="menuitem">[[user:account-info]]</a>
+		</li>
+		{{{ if (canBan || canMute) }}}
+		<li role="separator" class="dropdown-divider"></li>
+		{{{ end }}}
+		{{{ if canBan }}}
+		<li class="{{{ if banned }}}hide{{{ end }}}">
+			<a class="dropdown-item rounded-1" component="account/ban" href="#" role="menuitem">[[user:ban-account]]</a>
+		</li>
+		<li class="{{{ if !banned }}}hide{{{ end }}}">
+			<a class="dropdown-item rounded-1" component="account/unban" href="#" role="menuitem">[[user:unban-account]]</a>
+		</li>
+		{{{ end }}}
+		{{{ if canMute }}}
+		<li class="{{{ if muted }}}hide{{{ end }}}">
+			<a class="dropdown-item rounded-1" component="account/mute" href="#" role="menuitem">[[user:mute-account]]</a>
+		</li>
+		<li class="{{{ if !muted }}}hide{{{ end }}}">
+			<a class="dropdown-item rounded-1" component="account/unmute" href="#" role="menuitem">[[user:unmute-account]]</a>
+		</li>
+		{{{ end }}}
+		{{{ if isAdmin }}}
+		<li>
+			<a component="account/delete-account" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-account-as-admin]]</a>
+			<a component="account/delete-content" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-content]]</a>
+			<a component="account/delete-all" href="#" class="dropdown-item rounded-1" role="menuitem">[[user:delete-all]]</a>
+		</li>
+		{{{ end }}}
+	</ul>
+</div>

package/templates/partials/account/category-item.tpl

@@ -1,22 +1,22 @@
-<li component="categories/category" data-cid="{./cid}" data-parent-cid="{../parentCid}" class="category-{./cid}">
-	<meta itemprop="name" content="{./name}">
-	<div class="content depth-{./depth} d-flex gap-2">
-		<div class="flex-grow-1 align-items-start d-flex gap-2">
-			<div>
-				{buildCategoryIcon(@value, "24px", "rounded-1")}
-			</div>
-			<div class="d-grid gap-0">
-				<div class="title fw-semibold">
-					<!-- IMPORT partials/categories/link.tpl -->
-				</div>
-				{{{ if ./descriptionParsed }}}
-				<div class="description text-muted text-xs w-100">{./descriptionParsed}</div>
-				{{{ end }}}
-			</div>
-		</div>
-		<div class="flex-shrink-0">
-			<!-- IMPORT partials/category/watch.tpl -->
-		</div>
-	</div>
-	<hr />
-</li>
+<li component="categories/category" data-cid="{./cid}" data-parent-cid="{../parentCid}" class="category-{./cid}">
+	<meta itemprop="name" content="{./name}">
+	<div class="content depth-{./depth} d-flex gap-2">
+		<div class="flex-grow-1 align-items-start d-flex gap-2">
+			<div>
+				{buildCategoryIcon(@value, "24px", "rounded-1")}
+			</div>
+			<div class="d-grid gap-0">
+				<div class="title fw-semibold">
+					<!-- IMPORT partials/categories/link.tpl -->
+				</div>
+				{{{ if ./descriptionParsed }}}
+				<div class="description text-muted text-xs w-100">{./descriptionParsed}</div>
+				{{{ end }}}
+			</div>
+		</div>
+		<div class="flex-shrink-0">
+			<!-- IMPORT partials/category/watch.tpl -->
+		</div>
+	</div>
+	<hr />
+</li>

package/templates/partials/account/footer.tpl

@@ -1,3 +1,3 @@
-		</div>
-	</div>
+		</div>
+	</div>
 </div>