nodebb-theme-harmony 0.0.9 → 0.0.11

package/templates/account/settings.tpl

@@ -1,231 +1,218 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row">
-		<div class="col-12 col-md-6">
-			<!-- IF !disableCustomUserSkins -->
-			<h4>[[user:select-skin]]</h4>
-			<div class="card card-body mb-3">
-				<select class="form-select" id="bootswatchSkin" data-property="bootswatchSkin">
-					{{{each bootswatchSkinOptions}}}
-					<option value="{bootswatchSkinOptions.value}" <!-- IF bootswatchSkinOptions.selected -->selected<!-- ENDIF bootswatchSkinOptions.selected -->>{bootswatchSkinOptions.name}</option>
-					{{{end}}}
-				</select>
-			</div>
-			<!-- ENDIF !disableCustomUserSkins -->
-
-			<!-- IF allowUserHomePage -->
-			<h4>[[user:select-homepage]]</h4>
-			<div class="card card-body mb-3">
-				<div class="mb-2">
-					<label for="homePageRoute">[[user:homepage]]</label>
-					<select class="form-select" id="homePageRoute" data-property="homePageRoute">
-						<option value="none">None</option>
-						{{{each homePageRoutes}}}
-						<option value="{homePageRoutes.route}" <!-- IF homePageRoutes.selected -->selected="1"<!-- ENDIF homePageRoutes.selected -->>{homePageRoutes.name}</option>
-						{{{end}}}
-					</select>
-					<p class="form-text">[[user:homepage_description]]</p>
-				</div>
-				<div id="homePageCustom" class="mb-2" style="display: none;">
-					<label for="homePageCustom">[[user:custom_route]]</label>
-					<input type="text" class="form-control" data-property="homePageCustom" id="homePageCustom" value="{settings.homePageRoute}"/>
-					<p class="form-text">[[user:custom_route_help]]</p>
-				</div>
-			</div>
-			<!-- ENDIF allowUserHomePage -->
-
-			<h4>[[global:privacy]]</h4>
-			<div class="card card-body mb-3">
-				<!-- IF !hideEmail -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="showemail" <!-- IF settings.showemail -->checked <!-- ENDIF settings.showemail -->/>
-					<strong>
-						<label class="form-check-label">[[user:show_email]]</label>
-					</strong>
-				</div>
-				<!-- ENDIF !hideEmail -->
-
-				<!-- IF !hideFullname -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="showfullname" <!-- IF settings.showfullname -->checked<!-- ENDIF settings.showfullname -->/>
-					<strong>
-						<label class="form-check-label">[[user:show_fullname]]</label>
-					</strong>
-				</div>
-				<!-- ENDIF !hideFullname -->
-				<!-- IF !config.disableChat -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="restrictChat" <!-- IF settings.restrictChat -->checked<!-- ENDIF settings.restrictChat -->/>
-					<strong>
-						<label class="form-check-label">[[user:restrict_chats]]</label>
-					</strong>
-				</div>
-				<!-- ENDIF !config.disableChat -->
+	<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">{{{ if isSelf }}}[[pages:account/settings]]{{{ else }}}[[pages:account/settings-of, {username}]]{{{ end }}}</h3>
+				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>
 			</div>
+			<div class="row">
+				<div class="col-12 col-md-6">
+					{{{ if !disableCustomUserSkins }}}
+					<h6 class="fw-bold">[[user:select-skin]]</h6>
+					<div class="">
+						<select class="form-select form-select-sm" id="bootswatchSkin" data-property="bootswatchSkin">
+							{{{each bootswatchSkinOptions}}}
+							<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{bootswatchSkinOptions.name}</option>
+							{{{end}}}
+						</select>
+					</div>
+					<hr/>
+					{{{ end }}}
+
+					{{{ if allowUserHomePage }}}
+					<h6 class="fw-bold">[[user:select-homepage]]</h6>
+					<div class="">
+						<div class="mb-2">
+							<select class="form-select form-select-sm" id="homePageRoute" data-property="homePageRoute">
+								<option value="none">None</option>
+								{{{each homePageRoutes}}}
+								<option value="{homePageRoutes.route}" <!-- IF homePageRoutes.selected -->selected="1"<!-- ENDIF homePageRoutes.selected -->>{homePageRoutes.name}</option>
+								{{{end}}}
+							</select>
+							<p class="form-text text-xs">[[user:homepage_description]]</p>
+						</div>
+						<div id="homePageCustom" class="mb-2" style="display: none;">
+							<label class="form-label" for="homePageCustom">[[user:custom_route]]</label>
+							<input type="text" class="form-control form-control-sm" data-property="homePageCustom" id="homePageCustom" value="{settings.homePageRoute}"/>
+							<p class="form-text text-xs">[[user:custom_route_help]]</p>
+						</div>
+					</div>
+					<hr/>
+					{{{ end }}}
+
+					<h6 class="fw-bold">[[global:privacy]]</h6>
+					<div class="">
+						{{{ if !hideEmail }}}
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="showemail" {{{ if settings.showemail }}}checked {{{ end }}}/>
+							<label class="form-check-label text-sm">[[user:show_email]]</label>
+						</div>
+						{{{ end }}}
+
+						{{{ if !hideFullname }}}
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="showfullname" {{{ if settings.showfullname }}}checked{{{ end }}}/>
+							<label class="form-check-label text-sm">[[user:show_fullname]]</label>
+						</div>
+						{{{ end }}}
+						{{{ if !config.disableChat }}}
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="restrictChat" {{{ if settings.restrictChat }}}checked{{{ end }}}/>
+							<label class="form-check-label text-sm">[[user:restrict_chats]]</label>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+
+					<h6 class="fw-bold">[[user:browsing]]</h6>
+					<div class="">
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="openOutgoingLinksInNewTab" {{{ if settings.openOutgoingLinksInNewTab }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:open_links_in_new_tab]]</label>
+						</div>
+						{{{ if inTopicSearchAvailable }}}
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="topicSearchEnabled" {{{ if settings.topicSearchEnabled }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:enable_topic_searching]]</label>
+						</div>
+						<p class="form-text text-xs">[[user:topic_search_help]]</p>
+						{{{ end }}}
+
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="updateUrlWithPostIndex" {{{ if settings.updateUrlWithPostIndex }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:update_url_with_post_index]]</label>
+						</div>
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="scrollToMyPost" {{{ if settings.scrollToMyPost }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:scroll_to_my_post]]</label>
+						</div>
+					</div>
+					<hr/>
+
+					<h6 class="fw-bold">[[global:pagination]]</h6>
+					<div class="">
+						<div class="mb-2 form-check">
+							<input type="checkbox" class="form-check-input" data-property="usePagination" {{{ if settings.usePagination }}}checked{{{ end }}}>
+							<label class="form-check-label">[[user:paginate_description]]</label>
+						</div>
+						<div class="mb-2">
+							<label class="form-label">[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</label>
+							<input type="text" class="form-control form-control-sm" data-property="topicsPerPage" value="{settings.topicsPerPage}">
+						</div>
+						<div class="">
+							<label class="form-label">[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</label>
+							<input type="text" class="form-control form-control-sm" data-property="postsPerPage" value="{settings.postsPerPage}">
+						</div>
+					</div>
 
-			<h4>[[user:browsing]]</h4>
-			<div class="card card-body mb-3">
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="openOutgoingLinksInNewTab" <!-- IF settings.openOutgoingLinksInNewTab -->checked<!-- ENDIF settings.openOutgoingLinksInNewTab -->/>
-					<strong>
-						<label class="form-check-label">[[user:open_links_in_new_tab]]</label>
-					</strong>
-				</div>
-				<!-- IF inTopicSearchAvailable -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="topicSearchEnabled" <!-- IF settings.topicSearchEnabled -->checked<!-- ENDIF settings.topicSearchEnabled -->/>
-					<strong>
-						<label class="form-check-label">[[user:enable_topic_searching]]</label>
-					</strong>
-				</div>
-				<p class="form-text">[[user:topic_search_help]]</p>
-				<!-- ENDIF inTopicSearchAvailable -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="updateUrlWithPostIndex" {{{ if settings.updateUrlWithPostIndex }}}checked{{{ end }}}/>
-					<strong>
-						<label class="form-check-label">[[user:update_url_with_post_index]]</label>
-					</strong>
-				</div>
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="scrollToMyPost" <!-- IF settings.scrollToMyPost -->checked<!-- ENDIF settings.scrollToMyPost -->/>
-					<strong>
-						<label class="form-check-label">[[user:scroll_to_my_post]]</label>
-					</strong>
-				</div>
-			</div>
+					{{{ if !disableEmailSubscriptions }}}
+					<hr/>
+					<h6 class="fw-bold">[[global:email]]</h6>
+					<div class="">
+						<div class="mb-2">
+							<label class="form-label" for="dailyDigestFreq">[[user:digest_label]]</label>
+							<select class="form-select form-select-sm" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
+								{{{each dailyDigestFreqOptions}}}
+								<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{./name}</option>
+								{{{end}}}
+							</select>
+							<p class="form-text text-xs">[[user:digest_description]]</p>
+						</div>
+					</div>
+					{{{ end }}}
 
-			<h4>[[global:pagination]]</h4>
-			<div class="card card-body mb-3">
-				<div class="mb-2 form-check">
-					<input type="checkbox" class="form-check-input" data-property="usePagination" <!-- IF settings.usePagination -->checked<!-- ENDIF settings.usePagination -->> <strong><label class="form-check-label">[[user:paginate_description]]</label></strong>
-				</div>
-				<div class="mb-3">
-					<strong><label class="form-label">[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</label></strong>
-					<input type="text" class="form-control" data-property="topicsPerPage" value="{settings.topicsPerPage}">
-				</div>
-				<div class="">
-					<strong><label class="form-label">[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</label></strong>
-					<input type="text" class="form-control" data-property="postsPerPage" value="{settings.postsPerPage}">
-				</div>
-			</div>
+					{{{ each customSettings}}}
+					<hr/>
+					<h6 class="fw-bold">{./title}</h6>
+					<div class="">
+						{./content}
+					</div>
 
-			<!-- IF !disableEmailSubscriptions -->
-			<h4>[[global:email]]</h4>
-			<div class="card card-body mb-3">
-				<div class="mb-2">
-					<label for="dailyDigestFreq">[[user:digest_label]]</label>
-					<select class="form-select" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
-						{{{each dailyDigestFreqOptions}}}
-						<option value="{dailyDigestFreqOptions.value}" <!-- IF dailyDigestFreqOptions.selected -->selected="1"<!-- ENDIF dailyDigestFreqOptions.selected -->>{dailyDigestFreqOptions.name}</option>
-						{{{end}}}
-					</select>
-					<p class="form-text">[[user:digest_description]]</p>
+					{{{end}}}
+					<hr class="d-block d-md-none"/>
 				</div>
-			</div>
-			<!-- ENDIF !disableEmailSubscriptions -->
-
-			{{{each customSettings}}}
-			<h4>{customSettings.title}</h4>
-			<div class="card card-body mb-3">
-				{customSettings.content}
-			</div>
-			{{{end}}}
 
-		</div>
-
-		<div class="col-12 col-md-6">
-			<h4>[[global:language]]</h4>
-			<div class="card card-body mb-3">
-				<div class="row">
-					<div class="mb-2 col-lg-12">
-						<select data-property="userLang" class="form-select">
+				<div class="col-12 col-md-6">
+					<h6 class="fw-bold">[[global:language]]</h6>
+					<div class="">
+						<select data-property="userLang" class="form-select form-select-sm mb-2">
 							{{{each languages}}}
-							<option value="{languages.code}" <!-- IF languages.selected -->selected<!-- ENDIF languages.selected -->>{languages.name} ({languages.code})</option>
+							<option value="{./code}" {{{ if ./selected }}}selected{{{ end }}}>{./name} ({./code})</option>
 							{{{end}}}
 						</select>
 					</div>
-				</div>
-				<!-- IF isAdmin -->
-				<!-- IF isSelf -->
-				<label>[[user:acp_language]]</label>
-				<div class="row">
-					<div class="mb-2 col-lg-12">
-						<select data-property="acpLang" class="form-select">
+					<hr/>
+					{{{ if (isAdmin && isSelf) }}}
+					<h6 class="fw-bold">[[user:acp_language]]</h6>
+					<div class="">
+						<select data-property="acpLang" class="form-select form-select-sm">
 							{{{each acpLanguages}}}
-							<option value="{acpLanguages.code}" <!-- IF acpLanguages.selected -->selected<!-- ENDIF acpLanguages.selected -->>{acpLanguages.name} ({acpLanguages.code})</option>
+							<option value="{./code}" {{{ if ./selected }}}selected{{{ end }}}>{./name} ({./code})</option>
 							{{{end}}}
 						</select>
 					</div>
-				</div>
-				<!-- ENDIF isSelf -->
-				<!-- ENDIF isAdmin -->
-			</div>
-
-			<h4>[[topic:watch]]</h4>
-			<div class="card card-body mb-3">
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="followTopicsOnCreate" <!-- IF settings.followTopicsOnCreate -->checked <!-- ENDIF settings.followTopicsOnCreate -->/>
-					<strong>
-						<label class="form-check-label">[[user:follow_topics_you_create]]</label>
-					</strong>
-				</div>
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="followTopicsOnReply" <!-- IF settings.followTopicsOnReply -->checked<!-- ENDIF settings.followTopicsOnReply -->/>
-					<strong>
-						 <label class="form-check-label">[[user:follow_topics_you_reply_to]]</label>
-					</strong>
-				</div>
-				<div class="mb-2">
-					<label>[[user:default-category-watch-state]]</label>
-					<select class="form-select" data-property="categoryWatchState">
-						<option value="watching" <!-- IF categoryWatchState.watching -->selected<!-- ENDIF categoryWatchState.watching -->>[[category:watching]]</option>
-						<option value="notwatching" <!-- IF categoryWatchState.notwatching -->selected<!-- ENDIF categoryWatchState.notwatching -->>[[category:not-watching]]</option>
-						<option value="ignoring" <!-- IF categoryWatchState.ignoring -->selected<!-- ENDIF categoryWatchState.ignoring -->>[[category:ignoring]]</option>
-					</select>
-				</div>
-			</div>
-
-
-			<h4>[[user:notifications]]</h4>
-			<div class="card card-body mb-3">
-				{{{each notificationSettings}}}
-				<div class="row mb-3">
-					<div class="col-7">
-						<label>{notificationSettings.label}</label>
-					</div>
-					<div class="mb-2 col-5">
-						<select class="form-select" data-property="{notificationSettings.name}">
-							<option value="none" <!-- IF notificationSettings.none -->selected<!-- ENDIF notificationSettings.none -->>[[notifications:none]]</option>
-							<option value="notification" <!-- IF notificationSettings.notification -->selected<!-- ENDIF notificationSettings.notification -->>[[notifications:notification_only]]</option>
-							<option value="email" <!-- IF notificationSettings.email -->selected<!-- ENDIF notificationSettings.email -->>[[notifications:email_only]]</option>
-							<option value="notificationemail" <!-- IF notificationSettings.notificationemail -->selected<!-- ENDIF notificationSettings.notificationemail -->>[[notifications:notification_and_email]]</option>
-						</select>
+					<hr/>
+					{{{ end }}}
+
+					<h6 class="fw-bold">[[topic:watch]]</h6>
+					<div class="">
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="followTopicsOnCreate" {{{ if settings.followTopicsOnCreate }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:follow_topics_you_create]]</label>
+						</div>
+						<div class="form-check">
+							<input class="form-check-input" type="checkbox" data-property="followTopicsOnReply" {{{ if settings.followTopicsOnReply }}}checked{{{ end }}}/>
+							 <label class="form-check-label">[[user:follow_topics_you_reply_to]]</label>
+						</div>
+						<div class="mb-2">
+							<label class="form-label">[[user:default-category-watch-state]]</label>
+							<select class="form-select form-select-sm" data-property="categoryWatchState">
+								<option value="watching" {{{ if categoryWatchState.watching }}}selected{{{ end }}}>[[category:watching]]</option>
+								<option value="notwatching" {{{ if categoryWatchState.notwatching }}}selected{{{ end }}}>[[category:not-watching]]</option>
+								<option value="ignoring" {{{ if categoryWatchState.ignoring }}}selected{{{ end }}}>[[category:ignoring]]</option>
+							</select>
+						</div>
 					</div>
-				</div>
-				{{{end}}}
+					<hr/>
+
+					<h6 class="fw-bold">[[user:notifications]]</h6>
+					<div class="">
+						{{{each notificationSettings}}}
+						<div class="row mb-3">
+							<div class="col-7">
+								<label class="text-sm">{./label}</label>
+							</div>
+							<div class="mb-2 col-5">
+								<select class="form-select form-select-sm" data-property="{./name}">
+									<option value="none" {{{ if ./none }}}selected{{{ end }}}>[[notifications:none]]</option>
+									<option value="notification" {{{ if ./notification }}}selected{{{ end }}}>[[notifications:notification_only]]</option>
+									<option value="email" {{{ if ./email }}}selected{{{ end }}}>[[notifications:email_only]]</option>
+									<option value="notificationemail" {{{ if ./notificationemail }}}selected{{{ end }}}>[[notifications:notification_and_email]]</option>
+								</select>
+							</div>
+						</div>
+						{{{end}}}
 
-				<div class="row">
-					<div class="col-7">
-						<label for="upvote-notif-freq">[[user:upvote-notif-freq]]</label>
-					</div>
-					<div class="mb-2 col-5">
-						<select class="form-select" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
-							{{{each upvoteNotifFreq}}}
-							<option value="{upvoteNotifFreq.name}" <!-- IF upvoteNotifFreq.selected -->selected<!-- ENDIF upvoteNotifFreq.selected -->>
-								[[user:upvote-notif-freq.{upvoteNotifFreq.name}]]
-							</option>
-							{{{end}}}
-						</select>
+						<div class="row">
+							<div class="col-7">
+								<label class="text-sm" for="upvote-notif-freq">[[user:upvote-notif-freq]]</label>
+							</div>
+							<div class="mb-2 col-5">
+								<select class="form-select form-select-sm" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
+									{{{ each upvoteNotifFreq }}}
+									<option value="{./name}" {{{ if ./selected }}}selected{{{ end }}}>
+										[[user:upvote-notif-freq.{./name}]]
+									</option>
+									{{{end}}}
+								</select>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="form-actions">
-		<a id="submitBtn" href="#" class="btn btn-primary">[[global:save_changes]]</a>
-	</div>
 </div>
-

package/templates/account/theme.tpl

@@ -1,29 +1,33 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<p>[[persona:settings.intro]]</p>
+	<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>
 
-	<hr />
+				<button id="save" type="button" class="btn btn-primary">[[global:save_changes]]</button>
+			</div>
 
-	<form id="theme-settings" role="form">
-		<div class="checkbox">
-			<label>
-				<input type="checkbox" id="persona:menus:legacy-layout" name="persona:menus:legacy-layout"> <strong>[[persona:settings.mobile-menu-side]]</strong>
-			</label>
-		</div><br />
+			<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-group">
-			<label for="persona:navbar:autohide">[[persona:settings.autoHidingNavbar]]</label>
-			<select multiple class="form-control" name="persona:navbar:autohide" id="persona:navbar:autohide">
-				<option value="xs">[[persona:settings.autoHidingNavbar-xs]]</option>
-				<option value="sm">[[persona:settings.autoHidingNavbar-sm]]</option>
-				<option value="md">[[persona:settings.autoHidingNavbar-md]]</option>
-				<option value="lg">[[persona:settings.autoHidingNavbar-lg]]</option>
-			</select>
-		</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>
+
+				<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>
 
-		<button id="save" type="button" class="btn btn-primary">[[global:save_changes]]</button>
-	</form>
+
+			</form>
+		</div>
+	</div>
 </div>

package/templates/account/topics.tpl

@@ -1,32 +1,33 @@
 <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 align-items-center mb-3">
-				<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>
 				<div class="d-flex gap-1">
-					<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
+					<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>
 
-			{{{ if showSort }}}
-			<div class="btn-toolbar justify-content-end mb-2">
-				<div class="btn-group bottom-sheet" component="thread/sort">
-					<button class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span></button>
-					<ul class="dropdown-menu dropdown-menu-end">
-						{{{each sortOptions }}}
-						<li><a class="dropdown-item" href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
-						{{{end}}}
-					</ul>
-				</div>
-			</div>
-			{{{ end }}}
 
 			{{{ if !topics.length }}}
 			<div class="alert alert-warning text-center">{noItemsFoundKey}</div>

package/templates/account/uploads.tpl

@@ -1,12 +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;">
 			<h3 class="fw-semibold fs-5">{title}</h3>
 
 			<!-- IF privateUploads -->
@@ -19,7 +15,7 @@
 			<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
 			<!-- ENDIF !uploads.length -->
 
-			<table class="table table-striped">
+			<table class="table table-striped table-responsive">
 				<thead>
 					<tr>
 						<th></th>
@@ -30,7 +26,7 @@
 					{{{each uploads}}}
 					<tr data-name="{uploads.name}">
 						<td>
-							<a href="{config.relative_path}{uploads.url}">{uploads.url}</a>
+							<a class="text-break" href="{config.relative_path}{uploads.url}">{uploads.url}</a>
 						</td>
 						<td>
 							<div class="btn-group ">

package/templates/admin/plugins/harmony.tpl

@@ -10,6 +10,10 @@
 				<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />
 				<label for="centerHeaderElements" class="form-check-label">Center header elements</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>
 		</form>
 	</div>
 </div>

package/templates/groups/details.tpl

@@ -14,7 +14,7 @@
 	</div>
 
 	<div class="d-flex flex-column pb-4 mb-4 mt-2 border-bottom">
-		<div class="d-flex justify-content-between align-items-center">
+		<div class="d-flex justify-content-between mt-1 align-items-center">
 			<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 }}}
@@ -33,11 +33,10 @@
 		{group.descriptionParsed}
 	</div>
 
-	<div class="row">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/groups/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="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>
@@ -68,22 +67,6 @@
 				</div>
 				{{{ end }}}
 			</div>
-
-			<div data-widget-area="left">
-				{{{each widgets.left}}}
-				{{widgets.left.html}}
-				{{{end}}}
-			</div>
-		</div>
-		<div class="col-lg-8 col-12">
-			<div class="col-lg-11">
-
-			</div>
-			<div data-widget-area="right">
-				{{{each widgets.right}}}
-				{{widgets.right.html}}
-				{{{end}}}
-			</div>
 		</div>
 	</div>
 </div>