nodebb-theme-harmony 0.0.10 → 0.0.12

package/library.js

@@ -99,6 +99,7 @@ library.getThemeConfig = async function (config) {
 	config.enableQuickReply = themeConfig.enableQuickReply === 'on';
 	config.centerHeaderElements = themeConfig.centerHeaderElements === 'on';
 	config.stickyToolbar = themeConfig.stickyToolbar === 'on';
+	config.openDraftsOnPageLoad = false;
 	return config;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/public/harmony.js

@@ -76,13 +76,20 @@ $(document).ready(function () {
 
 			async function renderDraftList() {
 				const draftListEl = $('[component="drafts/list"]');
-				draftListEl.find('[data-save-id]').remove();
+				draftListEl.children(':not(.no-drafts)').remove();
 
 				const draftItems = drafts.listAvailable();
+				console.log('harmony sees', draftItems);
 				if (!draftItems.length) {
 					draftListEl.find('.no-drafts').removeClass('hidden');
 					return;
 				}
+				draftItems.reverse().forEach((draft) => {
+					if (draft) {
+						draft.text = draft.text.replace(/(?:\r\n|\r|\n)/g, '<br>');
+					}
+				});
+				console.log(draftItems);
 				const html = await app.parseAndTranslate('partials/sidebar/drafts', 'drafts', { drafts: draftItems });
 				draftListEl.find('.no-drafts').addClass('hidden');
 				draftListEl.append(html).find('.timeago').timeago();
@@ -97,6 +104,8 @@ $(document).ready(function () {
 
 			draftsEl.on('click', '[component="drafts/delete"]', function () {
 				drafts.removeDraft($(this).attr('data-save-id'));
+				renderDraftList();
+				return false;
 			});
 
 			$(window).on('action:composer.drafts.save', updateBadgeCount);

package/scss/account.scss

@@ -6,9 +6,6 @@
 	width: 100%;
 	margin-left: auto;
 	margin-right: auto;
-	.breadcrumb {
-		justify-content: start!important;
-	}
 
 	.avatar-wrapper {
 		border: 4px solid white;

package/scss/common.scss

@@ -2,6 +2,9 @@
 body {
 	overflow-y: scroll;
 }
+.ff-base {
+	font-family: $font-family-base;
+}
 .ff-secondary {
 	font-family: $font-family-secondary;
 }
@@ -75,3 +78,9 @@ body {
 	font-size: 0.875rem;
 	line-height: 1.25rem;
 }
+
+.flex-basis-md-200 {
+	@include media-breakpoint-up(md) {
+		flex-basis: 200px!important;
+	}
+}

package/scss/modules/bottom-sheet.scss

@@ -8,7 +8,7 @@
 			inset: auto 0 0 0!important;
 
 			margin: 0 -1px -1px -1px;
-			padding: 0 5px;
+			padding: 0 5px 4rem 5px!important;
 			max-height: 60%;
 
 			box-shadow: 0 2px 6px rgba(0,0,0,0.35);

package/scss/modules/topic-navigator.scss

@@ -16,7 +16,6 @@
 			}
 
 			.meta {
-				display: none;
 				top: -8px;
 				left: calc($spacer + 8px);
 				font-size: 13px;
@@ -38,7 +37,6 @@
 			transition: $transition-base;
 
 			.meta {
-				display: none;
 				left: calc($spacer + 8px);
 				font-size: 13px;
 			}
@@ -54,8 +52,4 @@
 	[component="topic/navigator"].d-sm-flex.mt-auto + .mt-auto {
 		margin-top: 0 !important;
 	}
-
-	.handle .meta, .unread .meta {
-		display: block;
-	}
 }

package/scss/sidebar.scss

@@ -1,6 +1,6 @@
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
-	.sidebar, .bottombar {
+	nav.sidebar, .bottombar {
 		color: $secondary !important;
 		background-color: $light !important;
 	}
@@ -15,22 +15,24 @@
 .sidebar {
 	$hover-color: mix($light, $dark, 90);
 
-	&.open {
-		min-width: 200px;
-		max-width: 200px;
-		width: 200px;
+	@include media-breakpoint-up(lg) {
+		&.open {
+			min-width: 200px;
+			max-width: 200px;
+			width: 200px;
 
-		.sidebar-toggle {
-			.fa-angles-right { display: none; }
-			.fa-angles-left { display: inline-block; }
-		}
-		.visible-open { display: initial; }
-		.visible-closed { display: none; }
-		hr.visible-open { display: block; }
-		.truncate-open {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+			.sidebar-toggle {
+				.fa-angles-right { display: none; }
+				.fa-angles-left { display: inline-block; }
+			}
+			.visible-open { display: initial; }
+			.visible-closed { display: none; }
+			hr.visible-open { display: block; }
+			.truncate-open {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 		}
 	}
 	.visible-open {	display: none; }
@@ -73,6 +75,7 @@
 
 	.chats-dropdown, .notifications-dropdown, .drafts-dropdown {
 		min-width: 300px;
+		width: 300px;
 		ul {
 			max-height: 400px;
 			overflow-y: auto;
@@ -114,12 +117,3 @@
 		max-height: 100%;
 	}
 }
-
-.sidebar-left {
-	border-right: 1px solid $border-color;
-	left: 0px;
-}
-.sidebar-right {
-	border-left: 1px solid $border-color;
-	right: 0px;
-}

package/scss/skins.scss

@@ -1,6 +1,6 @@
 .skin-quartz {
 	// $body-bg-image is gradient in quartz
-	.icon {
+	[component="post"] .icon {
 		background-color: transparent !important;
 	}
 }
@@ -10,4 +10,11 @@
 	.topic-list-header .btn, .topic-main-buttons .btn {
 		padding: 6px 12px;
 	}
+}
+
+.skin-yeti {
+	.badge {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
 }

package/templates/account/blocks.tpl

@@ -1,8 +1,8 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="d-flex justify-content-between mb-3">
 				<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
 				<div class="justify-content-end">

package/templates/account/categories.tpl

@@ -1,28 +1,34 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row">
-		<h3 class="fw-semibold fs-4">{title}</h3>
-		<div class="col-lg-12 mb-2">
-			<div class="btn-group bottom-sheet" component="category/watch/all">
-				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-					<span>[[user:change_all]]</span>
-					<span class="caret"></span>
-				</button>
-				<ul class="dropdown-menu">
-					<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
-					<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
-					<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
-				</ul>
+	<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>
+
+			<div class="row">
+				<div class="col-lg-12 mb-2">
+					<div class="btn-group bottom-sheet" component="category/watch/all">
+						<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
+							<span>[[user:change_all]]</span>
+							<span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu">
+							<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+							<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
+							<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+						</ul>
+					</div>
+				</div>
+				<div class="col-lg-12">
+					<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+						{{{each categories}}}
+						<!-- IMPORT partials/account/category-item.tpl -->
+						{{{end}}}
+					</ul>
+					<!-- IMPORT partials/paginator.tpl -->
+				</div>
 			</div>
 		</div>
-		<div class="col-lg-12">
-			<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
-				{{{each categories}}}
-				<!-- IMPORT partials/account/category-item.tpl -->
-				{{{end}}}
-			</ul>
-			<!-- IMPORT partials/paginator.tpl -->
-		</div>
 	</div>
 </div>

package/templates/account/consent.tpl

@@ -1,71 +1,17 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
-	<h2>[[user:consent.title]]</h2>
-	<p class="lead">[[user:consent.lead]]</p>
-	<p>[[user:consent.intro]]</p>
 
-	<hr />
+	<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">[[user:consent.title]]</h3>
 
-	<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>
-				[[user:consent.received]]
-			</div>
-			<!-- ELSE -->
-			<div class="alert alert-warning">
-				[[user:consent.not_received]]
-				<br /><br />
-				<div class="text-center">
-					<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
-				</div>
-			</div>
-			<!-- END -->
-			<div class="card">
-				<div class="card-body">
-					<p>[[user:consent.email_intro]]</p>
-					<!-- IF digest.enabled -->
-					<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
-					<!-- ELSE -->
-					[[user:consent.digest_off]]
-					<!-- END -->
+			<p class="lead">[[user:consent.lead]]</p>
+			<p>[[user:consent.intro]]</p>
 
-					<div class="text-center">
-						<a class="btn btn-outline-secondary" href="./settings">
-							<i class="fa fa-cog"></i>
-							[[pages:account/settings]]
-						</a>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="col-sm-6">
-			<div class="card">
-				<div class="card-body">
-					<p><strong>[[user:consent.right_of_access]]</strong></p>
-					<p>[[user:consent.right_of_access_description]]</p>
-					<p><strong>[[user:consent.right_to_rectification]]</strong></p>
-					<p>[[user:consent.right_to_rectification_description]]</p>
-					<p><strong>[[user:consent.right_to_erasure]]</strong></p>
-					<p>[[user:consent.right_to_erasure_description]]</p>
-					<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
-					<p>[[user:consent.right_to_data_portability_description]]</p>
+			<hr />
 
-					<div class="btn-group-vertical d-grid">
-						<a data-action="export-profile" class="btn btn-outline-secondary">
-							<i class="fa fa-download"></i> [[user:consent.export_profile]]
-						</a>
-						<a data-action="export-posts" class="btn btn-outline-secondary">
-							<i class="fa fa-download"></i> [[user:consent.export_posts]]
-						</a>
-						<a data-action="export-uploads" class="btn btn-outline-secondary">
-							<i class="fa fa-download"></i> [[user:consent.export_uploads]]
-						</a>
-					</div>
-				</div>
-			</div>
+			<div class="row">
+		</div>
 	</div>
-</div>
+</div>

package/templates/account/edit/password.tpl

@@ -1,32 +1,37 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<form class="edit-form">
-		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+	<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">{{{ if isSelf }}}[[user:change_password]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
-		<!-- IF isSelf -->
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputCurrentPassword">[[user:current_password]]</label>
-			<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-		</div>
-		<!-- ENDIF isSelf -->
+			<form class="edit-form">
+				<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputNewPassword">[[user:new_password]]</label>
-			<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
-			<span class="form-feedback" id="password-notify"></span>
-		</div>
+				{{{ if isSelf }}}
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-xm" for="inputCurrentPassword">[[user:current_password]]</label>
+					<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+				</div>
+				{{{ end }}}
 
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
-			<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
-			<span class="form-feedback" id="password-confirm-notify"></span>
-		</div>
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-xm" for="inputNewPassword">[[user:new_password]]</label>
+					<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
+					<span class="form-feedback" id="password-notify"></span>
+				</div>
+
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-xm" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
+					<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
+					<span class="form-feedback" id="password-confirm-notify"></span>
+				</div>
 
-		<div class="form-actions">
-			<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
+				<div class="form-actions">
+					<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
+				</div>
+			</form>
 		</div>
-	</form>
-</div>
+	</div>
+</div>

package/templates/account/edit/username.tpl

@@ -1,28 +1,33 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<form class="form-horizontal edit-form">
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputNewUsername">[[user:username]]</label>
-			<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
-		</div>
+	<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">{{{ if isSelf }}}[[user:change_username]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
-		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+			<form class="form-horizontal edit-form">
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-sm" for="inputNewUsername">[[user:username]]</label>
+					<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
+				</div>
 
-		<!-- IF isSelf -->
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputCurrentPassword">[[user:current_password]]</label>
-			<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-		</div>
-		<!-- ENDIF isSelf -->
+				<!-- disables autocomplete on FF --><input type="password" style="display:none">
+
+				{{{ if isSelf }}}
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-sm" for="inputCurrentPassword">[[user:current_password]]</label>
+					<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""{{{ if !hasPassword }}} disabled{{{ end }}}>
+				</div>
+				{{{ end }}}
 
-		<input type="hidden" name="uid" id="inputUID" value="{uid}" />
+				<input type="hidden" name="uid" id="inputUID" value="{uid}" />
 
-		<br/>
-		<div class="form-actions">
-			<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
+				<br/>
+				<div class="form-actions">
+					<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
+				</div>
+			</form>
 		</div>
-	</form>
-</div>
+	</div>
+</div>

package/templates/account/edit.tpl

@@ -1,61 +1,15 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
-			<div class="d-flex justify-content-end mb-3 sticky-lg-top" style="top: 1rem;">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+			<div class="d-flex justify-content-between mb-3">
+				<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:edit-profile]]{{{ else }}}[[pages:account/edit, {username}]]{{{ end }}}</h3>
 				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>
 			</div>
 			<div class="row">
-				<div class="col-xl-2 col-12">
-					<div class="account-picture-block text-center">
-						<div class="row mb-3">
-							<div class="col-12 hidden-xs">
-								<!-- IF picture -->
-								<img id="user-current-picture" class="avatar avatar-rounded" style="--avatar-size: 128px;" src="{picture}" />
-								<!-- ELSE -->
-								<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;">{icon:text}</div>
-								<!-- ENDIF picture -->
-							</div>
-						</div>
-						<ul class="list-group mb-3 text-sm text-nowrap">
-							<!-- IF allowProfilePicture -->
-							<a id="changePictureBtn" href="#" class="list-group-item px-1 text-decoration-none">[[user:change_picture]]</a>
-							<!-- ENDIF allowProfilePicture -->
-							<!-- IF !username:disableEdit -->
-							<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item px-1 text-decoration-none">[[user:change_username]]</a>
-							<!-- ENDIF !username:disableEdit -->
-							<!-- IF !email:disableEdit -->
-							<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item px-1 text-decoration-none">[[user:change_email]]</a>
-							<!-- ENDIF !email:disableEdit -->
-							<!-- IF canChangePassword -->
-							<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item px-1 text-decoration-none">[[user:change_password]]</a>
-							<!-- ENDIF canChangePassword -->
-							{{{each editButtons}}}
-							<a href="{config.relative_path}{editButtons.link}" class="list-group-item px-1 text-decoration-none">{editButtons.text}</a>
-							{{{end}}}
-						</ul>
-
-						<!-- IF config.requireEmailConfirmation -->
-						<!-- IF email -->
-						<!-- IF isSelf -->
-						<a id="confirm-email" href="#" class="btn btn-warning <!-- IF email:confirmed -->hide<!-- ENDIF email:confirmed -->">[[user:confirm_email]]</a><br/><br/>
-						<!-- ENDIF isSelf -->
-						<!-- ENDIF email -->
-						<!-- ENDIF config.requireEmailConfirmation -->
-
-						<!-- IF allowAccountDelete -->
-						<!-- IF isSelf -->
-						<a id="deleteAccountBtn" href="#" class="btn btn-danger">[[user:delete_account]]</a><br/><br/>
-						<!-- ENDIF isSelf -->
-						<!-- ENDIF allowAccountDelete -->
-
-					</div>
-				</div>
-
-				<div class="col-xl-5 col-12">
+				<div class="col-xl-6 col-12">
 					<form role="form" component="profile/edit/form">
 						<div class="mb-2">
 							<label class="form-label fw-bold" for="fullname">[[user:fullname]]</label>
@@ -81,7 +35,7 @@
 						<div class="mb-2">
 							<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
 
-							<select class="form-select" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
+							<select class="form-select mb-1" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
 								<option value="">[[user:no-group-title]]</option>
 								{{{each groups}}}
 								<!-- IF groups.userTitleEnabled -->
@@ -90,8 +44,10 @@
 								{{{end}}}
 							</select>
 							<!-- IF allowMultipleBadges -->
-							<span>[[user:group-order-help]]</span>
-							<i role="button" component="group/order/up" class="fa fa-chevron-up"></i> <i role="button" component="group/order/down" class="fa fa-chevron-down"></i>
+							<div class="d-none d-md-block">
+								<span class="form-text">[[user:group-order-help]]</span>
+								<i role="button" component="group/order/up" class="fa fa-chevron-up"></i> <i role="button" component="group/order/down" class="fa fa-chevron-down"></i>
+							</div>
 							<!-- ENDIF -->
 						</div>
 
@@ -111,12 +67,39 @@
 						<!-- ENDIF !disableSignatures -->
 						<!-- ENDIF allowSignature -->
 					</form>
-
 					<hr class="visible-xs visible-sm"/>
 				</div>
 
-				{{{ if sso.length }}}
-				<div class="col-xl-5 col-12">
+				<div class="col-xl-6 col-12">
+					<div class="text-center">
+						<ul class="list-group mb-3 text-sm text-nowrap">
+							<!-- IF allowProfilePicture -->
+							<a id="changePictureBtn" href="#" class="list-group-item px-1 text-decoration-none">[[user:change_picture]]</a>
+							<!-- ENDIF allowProfilePicture -->
+							<!-- IF !username:disableEdit -->
+							<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item px-1 text-decoration-none">[[user:change_username]]</a>
+							<!-- ENDIF !username:disableEdit -->
+							<!-- IF !email:disableEdit -->
+							<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item px-1 text-decoration-none">[[user:change_email]]</a>
+							<!-- ENDIF !email:disableEdit -->
+							<!-- IF canChangePassword -->
+							<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item px-1 text-decoration-none">[[user:change_password]]</a>
+							<!-- ENDIF canChangePassword -->
+							{{{each editButtons}}}
+							<a href="{config.relative_path}{editButtons.link}" class="list-group-item px-1 text-decoration-none">{editButtons.text}</a>
+							{{{end}}}
+						</ul>
+
+						<!-- IF config.requireEmailConfirmation -->
+						<!-- IF email -->
+						<!-- IF isSelf -->
+						<a id="confirm-email" href="#" class="btn btn-warning <!-- IF email:confirmed -->hide<!-- ENDIF email:confirmed -->">[[user:confirm_email]]</a><br/><br/>
+						<!-- ENDIF isSelf -->
+						<!-- ENDIF email -->
+						<!-- ENDIF config.requireEmailConfirmation -->
+					</div>
+
+					{{{ if sso.length }}}
 					<label class="form-label text-sm fw-semibold">[[user:sso.title]]</label>
 					<div class="list-group">
 						{{{each sso}}}
@@ -132,8 +115,15 @@
 						</div>
 						{{{end}}}
 					</div>
+					{{{ end }}}
+
+					<hr/>
+					{{{ if (allowAccountDelete && isSelf) }}}
+					<div class="d-flex justify-content-end">
+						<button id="deleteAccountBtn" class="btn btn-danger">[[user:delete_account]]</button>
+					</div>
+					{{{ end }}}
 				</div>
-				{{{ end }}}
 			</div>
 		</div>
 	</div>

package/templates/account/followers.tpl

@@ -1,10 +1,9 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			{{{ if !users.length }}}