nodebb-theme-harmony 1.0.0-beta.5 → 1.0.0-beta.50

package/templates/account/theme.tpl

@@ -1,33 +1,42 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<div class="mb-3 d-flex justify-content-between">
-				<h3 class="fw-semibold fs-5">[[harmony:settings.title]]</h3>
+<div class="mb-3 d-flex justify-content-between">
+	<h3 class="fw-semibold fs-5">[[harmony:settings.title]]</h3>
 
-				<button id="save" type="button" class="btn btn-primary">[[global:save_changes]]</button>
-			</div>
+	<button id="save" type="button" class="btn btn-primary">[[global:save_changes]]</button>
+</div>
 
-			<form id="theme-settings" role="form">
-				<div class="form-check mb-2">
-					<input class="form-check-input" type="checkbox" id="enableQuickReply" name="enableQuickReply" {{{ if config.enableQuickReply }}}checked{{{ end }}}>
-					<label class="form-check-label">[[harmony:settings.enableQuickReply]]</label>
-				</div>
-
-				<div class="form-check mb-2">
-					<input class="form-check-input" type="checkbox" id="centerHeaderElements" name="centerHeaderElements" {{{ if config.centerHeaderElements }}}checked{{{ end }}}>
-					<label class="form-check-label">[[harmony:settings.centerHeaderElements]]</label>
-				</div>
+<form id="theme-settings" role="form">
+	<div class="form-check mb-2">
+		<input class="form-check-input" type="checkbox" id="enableQuickReply" name="enableQuickReply" {{{ if config.theme.enableQuickReply }}}checked{{{ end }}}>
+		<label class="form-check-label">[[harmony:settings.enableQuickReply]]</label>
+	</div>
 
-				<div class="form-check mb-2">
-					<input class="form-check-input" type="checkbox" id="stickyToolbar" name="stickyToolbar" {{{ if config.stickyToolbar }}}checked{{{ end }}}>
-					<label class="form-check-label">[[harmony:settings.stickyToolbar]]</label>
-				</div>
+	<div class="form-check mb-2">
+		<input class="form-check-input" type="checkbox" id="centerHeaderElements" name="centerHeaderElements" {{{ if config.theme.centerHeaderElements }}}checked{{{ end }}}>
+		<label class="form-check-label">[[harmony:settings.centerHeaderElements]]</label>
+	</div>
 
+	<div class="form-check mb-2">
+		<input class="form-check-input" type="checkbox" id="stickyToolbar" name="stickyToolbar" {{{ if config.theme.stickyToolbar }}}checked{{{ end }}}>
+		<div class="form-check-label">
+			[[harmony:settings.stickyToolbar]]
+			<p class="form-text">
+				[[harmony:settings.stickyToolbar.help]]
+			</p>
+		</div>
+	</div>
 
-			</form>
+	<div class="form-check mb-2">
+		<input class="form-check-input" type="checkbox" id="autohideBottombar" name="autohideBottombar" {{{ if config.theme.autohideBottombar }}}checked{{{ end }}}>
+		<div class="form-check-label">
+			[[harmony:settings.autohideBottombar]]
+			<p class="form-text">
+				[[harmony:settings.autohideBottombar.help]]
+			</p>
 		</div>
 	</div>
-</div>
+
+</form>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/topics.tpl

@@ -1,44 +1,39 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<div class="d-flex justify-content-between align-items-center mb-3">
-				<div class="d-flex gap-1">
-					<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>
-					{{{ if showSort }}}
-					<div class="btn-group bottom-sheet" component="thread/sort">
-						<button title="[[global:sort]]" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
-						<ul class="dropdown-menu">
-							{{{each sortOptions }}}
-							<li><a class="dropdown-item" href="{config.relative_path}{./url}"><i class="fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>{./name}</a></li>
-							{{{end}}}
-						</ul>
-					</div>
-					{{{ end }}}
-				</div>
+<div class="d-flex justify-content-between align-items-center mb-3">
+	<div class="d-flex gap-1">
+		<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>
+		{{{ if showSort }}}
+		<div class="btn-group bottom-sheet" component="thread/sort">
+			<button title="[[global:sort]]" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
+			<ul class="dropdown-menu">
+				{{{each sortOptions }}}
+				<li><a class="dropdown-item" href="{config.relative_path}{./url}"><i class="fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>{./name}</a></li>
+				{{{end}}}
+			</ul>
+		</div>
+		{{{ end }}}
+	</div>
 
-				<div class="d-flex gap-1">
-					{{{ if canEdit }}}
-					<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
-					<a href="{config.relative_path}/user/{userslug}/watched"class="btn-ghost-sm fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
-					<a href="{config.relative_path}/user/{userslug}/ignored" class="btn-ghost-sm fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
-					{{{ end }}}
-				</div>
-			</div>
+	<div class="d-flex gap-1">
+		{{{ if canEdit }}}
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
+		<a href="{config.relative_path}/user/{userslug}/watched"class="btn-ghost-sm fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
+		<a href="{config.relative_path}/user/{userslug}/ignored" class="btn-ghost-sm fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
+		{{{ end }}}
+	</div>
+</div>
 
 
-			{{{ if !topics.length }}}
-			<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
-			{{{ end }}}
+{{{ if !topics.length }}}
+<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+{{{ end }}}
 
-			<div class="category">
-				<!-- IMPORT partials/topics_list.tpl -->
-				{{{ if config.usePagination }}}
-				<!-- IMPORT partials/paginator.tpl -->
-				{{{ end }}}
-			</div>
-		</div>
-	</div>
+<div class="category">
+	<!-- IMPORT partials/topics_list.tpl -->
+	{{{ if config.usePagination }}}
+	<!-- IMPORT partials/paginator.tpl -->
+	{{{ end }}}
 </div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/uploads.tpl

@@ -1,44 +1,37 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<h3 class="fw-semibold fs-5">{title}</h3>
+<!-- IMPORT partials/account/header.tpl -->
 
-			<!-- IF privateUploads -->
-			<div class="alert alert-info text-center">[[uploads:private-uploads-info]]</div>
-			<!-- ELSE -->
-			<div class="alert alert-info text-center">[[uploads:public-uploads-info]]</div>
-			<!-- ENDIF privateUploads -->
+<h3 class="fw-semibold fs-5">{title}</h3>
 
-			<!-- IF !uploads.length -->
-			<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
-			<!-- ENDIF !uploads.length -->
+<div class="alert alert-info text-center">
+	{{{ if privateUploads }}}[[uploads:private-uploads-info]]{{{ else }}}[[uploads:public-uploads-info]]{{{ end }}}
+</div>
 
-			<table class="table table-striped table-responsive">
-				<thead>
-					<tr>
-						<th></th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					{{{each uploads}}}
-					<tr data-name="{uploads.name}">
-						<td>
-							<a class="text-break" href="{config.relative_path}{uploads.url}">{uploads.url}</a>
-						</td>
-						<td>
-							<div class="btn-group ">
-								<button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
-							</div>
-						</td>
-					</tr>
-					{{{end}}}
-				</tbody>
-			</table>
+{{{ if !uploads.length }}}
+<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
+{{{ end }}}
 
-			<!-- IMPORT partials/paginator.tpl -->
-		</div>
-	</div>
-</div>
+<table class="table table-striped table-responsive">
+	<thead>
+		<tr>
+			<th></th>
+			<th></th>
+		</tr>
+	</thead>
+	<tbody>
+		{{{ each uploads }}}
+		<tr data-name="{./name}">
+			<td>
+				<a class="text-break" href="{config.relative_path}{./url}">{./url}</a>
+			</td>
+			<td>
+				<div class="btn-group ">
+					<button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
+				</div>
+			</td>
+		</tr>
+		{{{ end }}}
+	</tbody>
+</table>
+
+<!-- IMPORT partials/paginator.tpl -->
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/admin/plugins/harmony.tpl

@@ -4,15 +4,29 @@
 		<form role="form" class="harmony-settings">
 			<div class="form-check form-switch">
 				<input type="checkbox" class="form-check-input" id="enableQuickReply" name="enableQuickReply" />
-				<label for="enableQuickReply" class="form-check-label">Enable quick reply</label>
+				<label for="enableQuickReply" class="form-check-label">[[harmony:settings.enableQuickReply]]</label>
 			</div>
 			<div class="form-check form-switch">
 				<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />
-				<label for="centerHeaderElements" class="form-check-label">Center header elements</label>
+				<label for="centerHeaderElements" class="form-check-label">[[harmony:settings.centerHeaderElements]]</label>
 			</div>
 			<div class="form-check form-switch">
 				<input type="checkbox" class="form-check-input" id="stickyToolbar" name="stickyToolbar" />
-				<label for="stickyToolbar" class="form-check-label">Sticky toolbar on topic and category pages</label>
+				<div for="stickyToolbar" class="form-check-label">
+					[[harmony:settings.stickyToolbar]]
+					<p class="form-text">
+						[[harmony:settings.stickyToolbar.help]]
+					</p>
+				</div>
+			</div>
+			<div class="form-check form-switch">
+				<input type="checkbox" class="form-check-input" id="autohideBottombar" name="autohideBottombar" />
+				<div for="autohideBottombar" class="form-check-label">
+					[[harmony:settings.autohideBottombar]]
+					<p class="form-text">
+						[[harmony:settings.autohideBottombar.help]]
+					</p>
+				</div>
 			</div>
 		</form>
 	</div>

package/templates/categories.tpl

@@ -6,7 +6,7 @@
 <div class="row">
 	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		{{{ if pagination.pages.length }}}
-		<div><!-- IMPORT partials/category-selector.tpl --></div>
+		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 		{{{ end }}}
 		<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 			{{{ each categories }}}

package/templates/category.tpl

@@ -1,19 +1,10 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
-
-{{{ if widgets.header.length }}}
-<div data-widget-area="header">
-	{{{ each widgets.header }}}
-	{{widgets.header.html}}
-	{{{ end }}}
-</div>
-{{{ end }}}
-
 <div class="d-flex flex-column gap-2">
-	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
 		<h2 class="fs-2 fw-semibold mb-0 text-center">{./name}</h2>
 	</div>
-	<div class="d-flex flex-wrap gap-2 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+	<div class="d-flex flex-wrap gap-2 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<span class="badge text-body border border-gray-300 stats text-xs">
 			<span title="{totalTopicCount}" class="human-readable-number fw-bold">{totalTopicCount}</span>
 			<span class="text-lowercase fw-normal">[[global:topics]]</span>
@@ -25,6 +16,15 @@
 	</div>
 </div>
 
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+{{{ end }}}
+
+
 <div class="row mt-3">
 	<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		<!-- IMPORT partials/category/subcategory.tpl -->
@@ -33,8 +33,7 @@
 
 		{{{ if !topics.length }}}
 		{{{ if privileges.topics:create }}}
-		<hr class="visible-xs" />
-		<div class="alert alert-warning" id="category-no-topics">
+		<div class="alert alert-info mt-3" id="category-no-topics">
 			[[category:no_topics]]
 		</div>
 		{{{ end }}}

package/templates/chats.tpl

@@ -1,4 +1,4 @@
-<div class="chats-full d-flex gap-1 vh-100 py-3">
+<div class="chats-full d-flex gap-1 h-100 mt-3 mt-md-0 py-md-3">
 	<div class="d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
 		<div class="chat-search dropdown mb-2">
 			<label class="text-xs text-muted">[[users:search-user-for-chat]]</label>
@@ -21,7 +21,7 @@
 			{{{end}}}
 		</ul>
 	</div>
-	<div class="flex-1 ms-md-2 ps-md-2 border-1 border-start-md" component="chat/main-wrapper">
+	<div class="flex-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" component="chat/main-wrapper">
 		<!-- IMPORT partials/chats/message-window.tpl -->
 	</div>
 	<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>

package/templates/flags/detail.tpl

@@ -11,7 +11,7 @@
 
 		<hr />
 
-		<!-- IF type_bool.post -->
+		{{{ if type_bool.post }}}
 		<div class="d-flex">
 			<div class="flex-shrink-0">
 				<a href="{config.relative_path}/user/{target.user.userslug}">{buildAvatar(target.user, "64px", true, "media-object")}</a>
@@ -21,9 +21,9 @@
 				{target.content}
 			</div>
 		</div>
-		<!-- ENDIF type_bool.post -->
+		{{{ end }}}
 
-		<!-- IF type_bool.user -->
+		{{{ if type_bool.user }}}
 		<div class="d-flex">
 			<div class="flex-shrink-0">
 				<a href="{config.relative_path}/user/{target.userslug}">{buildAvatar(target, "64px", true, "media-object")}</a>
@@ -36,11 +36,11 @@
 				</p>
 			</div>
 		</div>
-		<!-- ENDIF type_bool.user -->
+		{{{ end }}}
 
-		<!-- IF type_bool.empty -->
+		{{{ if type_bool.empty }}}
 		<div class="alert alert-warning" role="alert">[[flags:target-purged]]</div>
-		<!-- ENDIF type_bool.empty -->
+		{{{ end }}}
 
 		<hr />
 
@@ -95,27 +95,27 @@
 				</form>
 
 				<div component="flag/notes">
-					<!-- IF !notes.length -->
+					{{{ if !notes.length }}}
 					<div class="alert alert-success text-center">[[flags:no-notes]]</div>
-					<!-- ENDIF !notes.length -->
-					{{{each notes}}}
+					{{{ end }}}
+					{{{ each notes }}}
 					<div class="d-flex mb-3">
 						<div class="flex-shrink-0">
-							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(notes.user, "32px", true, "media-object")}</a>
+							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "32px", true, "media-object")}</a>
 						</div>
 						<div class="flex-grow-1 mx-3">
 							<h2 class="h5">
-								<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
-								<small><span class="timeago" title="{../datetimeISO}"></span></small>
+								<a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
+								<small><span class="timeago" title="{./datetimeISO}"></span></small>
 							</h4>
-							{../content}
+							{./content}
 						</div>
 						<div class="flex-shrink-0">
 							<a href="#" class="btn btn-sm btn-link" data-action="prepare-edit"><i class="fa fa-pencil"></i></a>
 							<a href="#" class="btn btn-sm btn-link" data-action="delete-note"><i class="fa fa-trash text-danger"></i></a>
 						</div>
 					</div>
-					{{{end}}}
+					{{{ end }}}
 				</div>
 			</div>
 			<div class="col-sm-6">
@@ -146,7 +146,6 @@
 						<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="fa fa-street-view"></i>
 							[[flags:flagged-user]]
-							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
@@ -176,25 +175,25 @@
 
 				<h2 class="h4">[[flags:history]]</h2>
 				<div component="flag/history">
-					<!-- IF !history.length -->
+					{{{ if !history.length }}}
 					<div class="alert alert-success text-center">[[flags:no-history]]</div>
-					<!-- ENDIF !history.length -->
-					{{{each history}}}
+					{{{ end }}}
+					{{{ each history }}}
 					<div class="d-flex">
 						<div class="flex-shrink-0">
-							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(history.user, "32px", true, "media-object")}</a>
+							<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "32px", true, "media-object")}</a>
 						</div>
 						<div class="flex-grow-1 ms-3">
 							<h4 class="media-heading">
-								<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
-								<small><span class="timeago" title="{../datetimeISO}"></span></small>
+								<a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
+								<small><span class="timeago" title="{./datetimeISO}"></span></small>
 							</h4>
 							<ul>
-								{{{each ./fields}}}
+								{{{ each ./fields }}}
 								<li>
-									<span class="badge bg-primary">[[flags:{@key}]]</span><!-- IF @value --> &rarr; <span class="badge bg-light text-dark">{@value}</span><!-- ENDIF @value -->
+									<span class="badge bg-primary">[[flags:{@key}]]</span>{{{ if @value }}} &rarr; <span class="badge bg-light text-dark">{@value}</span>{{{ end }}}
 								</li>
-								{{{end}}}
+								{{{ end }}}
 								{{{ each ./meta }}}
 								<li>
 									<span class="badge bg-{{./labelClass}}">{{./key}}</span>{{{ if ./value }}} &rarr; <span class="badge bg-light text-dark">{{ ./value }}</span>{{{ end }}}
@@ -203,7 +202,7 @@
 							</ul>
 						</div>
 					</div>
-					{{{end}}}
+					{{{ end }}}
 				</div>
 			</div>
 		</div>

package/templates/flags/list.tpl

@@ -7,18 +7,18 @@
 		<!-- IMPORT partials/flags/filters.tpl -->
 	</div>
 	<div class="col-sm-8 col-md-9">
-		<!-- IF hasFilter -->
+		{{{ if hasFilter }}}
 		<div class="alert alert-warning">
 			<p class="float-end">
 				<a href="{config.relative_path}/flags">[[flags:filter-reset]]</a>
 			</p>
 			[[flags:filter-active]]
 		</div>
-		<!-- ENDIF hasFilter -->
+		{{{ end }}}
 
 		<div class="btn-group float-end" component="flags/bulk-actions">
 			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
-				<i class="fa fa-clone"></i> [[flags:bulk-actions]] <span class="caret"></span>
+				<i class="fa fa-clone"></i> <span class="fw-semibold">[[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>
@@ -39,7 +39,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				<!-- IF !flags.length -->
+				{{{ if !flags.length }}}
 				<tr>
 					<td colspan="5">
 						<div class="alert alert-success text-center">
@@ -47,22 +47,22 @@
 						</div>
 					</td>
 				</tr>
-				<!-- ENDIF !flags.length -->
-				{{{each flags}}}
-				<tr data-flag-id="{../flagId}">
+				{{{ end }}}
+				{{{ each flags }}}
+				<tr data-flag-id="{./flagId}">
 					<td>
 						<input type="checkbox" autocomplete="off" />
 					</td>
 					<td>
-						<a href="{config.relative_path}/flags/{../flagId}">
-							<strong>{../target_readable}</strong>
+						<a href="{config.relative_path}/flags/{./flagId}">
+							<strong>{./target_readable}</strong>
 						</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><span class="timeago" title="{./datetimeISO}"></span></td>
+					<td><span class="badge bg-{./labelClass}">[[flags:state-{./state}]]</span></td>
 				</tr>
 				{{{end}}}
 			</tbody>

package/templates/footer.tpl

@@ -5,8 +5,8 @@
 	</div>
 	<!-- IMPORT partials/mobile-footer.tpl -->
 	{{{ if !isSpider }}}
-	<div class="row">
-		<div component="toaster/tray" class="col-12 col-md-3 alert-window fixed-bottom pb-3 mb-5 mb-md-2 me-md-5 ms-auto">
+	<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;">
 			<div id="reconnect-alert" class="alert alert-dismissible alert-warning clearfix hide" component="toaster/toast">
 				<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-hidden="true"></button>
 				<p>[[global:reconnecting-message, {config.siteTitle}]]</p>

package/templates/groups/details.tpl

@@ -2,10 +2,10 @@
 	<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">
-				<span class="upload"><i class="fa fa-fw fa-2x fa-upload"></i></span>
-				<span class="resize"><i class="fa fa-fw fa-2x fa-arrows"></i></span>
-				<span class="remove"><i class="fa fa-fw fa-2x fa-times"></i></span>
+			<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>
@@ -13,24 +13,27 @@
 		</div>
 	</div>
 
-	<div class="d-flex flex-column pb-4 mb-4 mt-2 border-bottom">
-		<div class="d-flex justify-content-between mt-1 align-items-center">
+	<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">
 				<h2 class="mb-0">{group.displayName}</h2>
-				{{{ 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>
-				{{{ 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 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>
-		{group.descriptionParsed}
+		<div>
+			{{{ 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">

package/templates/groups/members.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div class="users">
 	<!-- IMPORT partials/users_list.tpl -->

package/templates/header.tpl

@@ -24,7 +24,7 @@
 </head>
 
 <body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
-	<div class="d-flex justify-content-between pb-4 pb-md-0">
+	<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;">

package/templates/partials/account/footer.tpl

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