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

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-3">
+		<input class="form-check-input" type="checkbox" id="enableQuickReply" name="enableQuickReply" {{{ if config.theme.enableQuickReply }}}checked{{{ end }}}>
+		<label class="form-check-label" for="enableQuickReply">[[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-3">
+		<input class="form-check-input" type="checkbox" id="centerHeaderElements" name="centerHeaderElements" {{{ if config.theme.centerHeaderElements }}}checked{{{ end }}}>
+		<label class="form-check-label" for="centerHeaderElements">[[harmony:settings.centerHeaderElements]]</label>
+	</div>
 
+	<div class="form-check mb-3">
+		<input class="form-check-input" type="checkbox" id="stickyToolbar" name="stickyToolbar" {{{ if config.theme.stickyToolbar }}}checked{{{ end }}}>
+		<label class="form-check-label" for="stickyToolbar">
+			[[harmony:settings.stickyToolbar]]
+			<p class="form-text mb-0">
+				[[harmony:settings.stickyToolbar.help]]
+			</p>
+		</label>
+	</div>
 
-			</form>
-		</div>
+	<div class="form-check mb-3">
+		<input class="form-check-input" type="checkbox" id="autohideBottombar" name="autohideBottombar" {{{ if config.theme.autohideBottombar }}}checked{{{ end }}}>
+		<label class="form-check-label" for="autohideBottombar">
+			[[harmony:settings.autohideBottombar]]
+			<p class="form-text mb-0">
+				[[harmony:settings.autohideBottombar.help]]
+			</p>
+		</label>
 	</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" id="category-no-topics">
 			[[category:no_topics]]
 		</div>
 		{{{ end }}}

package/templates/chats.tpl

@@ -1,27 +1,26 @@
-<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>
 
 			<div class="input-group">
 				<input class="form-control" type="text" component="chat/search" data-bs-toggle="dropdown" />
+				<ul component="chat/search/list" class="dropdown-menu">
+					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+				</ul>
 				<button class="btn btn-primary" type="button">
 					<i class="fa fa-search"></i>
 				</button>
 			</div>
-
-			<ul component="chat/search/list" class="dropdown-menu">
-				<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
-			</ul>
 		</div>
 		<hr class="text-muted opacity-25 my-1">
-		<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0 pe-2" data-nextstart="{nextStart}">
+		<div component="chat/recent" class="chats-list overflow-auto mb-0 pe-1" data-nextstart="{nextStart}">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}
-		</ul>
+		</div>
 	</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>