nodebb-theme-harmony 1.0.0-beta.39 → 1.0.0-beta.40

package/languages/en-GB/harmony.json

@@ -6,5 +6,8 @@
 	"settings.title": "Theme settings",
 	"settings.enableQuickReply": "Enable quick reply",
 	"settings.centerHeaderElements": "Center header elements",
-	"settings.stickyToolbar": "Sticky toolbar"
+	"settings.stickyToolbar": "Sticky toolbar",
+	"settings.stickyToolbar.help": "The toolbar on topic and category pages will stick to the top of the page",
+	"settings.autohideBottombar": "Auto hide bottom bar",
+	"settings.autohideBottombar.help": "The bottom bar on mobile view will be hidden when the page is scrolled down"
 }

package/library.js

@@ -12,6 +12,7 @@ const defaults = {
 	enableQuickReply: 'on',
 	centerHeaderElements: 'off',
 	stickyToolbar: 'on',
+	autohideBottombar: 'off',
 	openSidebars: 'off',
 };
 
@@ -102,15 +103,18 @@ async function loadThemeConfig(uid) {
 		meta.settings.get('harmony'),
 		user.getSettings(uid),
 	]);
-	return { ...defaults, ...themeConfig, ...userConfig };
+
+	const config = { ...defaults, ...themeConfig, ...(_.pick(userConfig, Object.keys(defaults))) };
+	config.enableQuickReply = config.enableQuickReply === 'on';
+	config.centerHeaderElements = config.centerHeaderElements === 'on';
+	config.stickyToolbar = config.stickyToolbar === 'on';
+	config.autohideBottombar = config.autohideBottombar === 'on';
+	config.openSidebars = config.openSidebars === 'on';
+	return config;
 }
 
 library.getThemeConfig = async function (config) {
-	const themeConfig = await loadThemeConfig(config.uid);
-	config.enableQuickReply = themeConfig.enableQuickReply === 'on';
-	config.centerHeaderElements = themeConfig.centerHeaderElements === 'on';
-	config.stickyToolbar = themeConfig.stickyToolbar === 'on';
-	config.openSidebars = themeConfig.openSidebars === 'on';
+	config.theme = await loadThemeConfig(config.uid);;
 	config.openDraftsOnPageLoad = false;
 	return config;
 };
@@ -136,7 +140,7 @@ library.saveUserSettings = async function (hookData) {
 
 library.addUserToTopic = async function (hookData) {
 	const { enableQuickReply } = await loadThemeConfig(hookData.req.uid);
-	if (enableQuickReply === 'on') {
+	if (enableQuickReply) {
 		if (hookData.req.user) {
 			const userData = await user.getUserData(hookData.req.uid);
 			hookData.templateData.loggedInUser = userData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.39",
+  "version": "1.0.0-beta.40",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/public/harmony.js

@@ -54,6 +54,51 @@ $(document).ready(function () {
 					hooks.fire('action:navigator.update', { newIndex: navigator.getIndex() });
 				}
 			});
+
+			const bottomBar = $('[component="bottombar"]');
+			$('body').on('shown.bs.dropdown', '.sticky-tools', function () {
+				bottomBar.addClass('hidden');
+			});
+			$('body').on('hidden.bs.dropdown', '.sticky-tools', function () {
+				bottomBar.removeClass('hidden');
+			});
+
+			let lastScrollTop = 0;
+			const $window = $(window);
+			function onWindowScroll() {
+				const st = $window.scrollTop();
+				if (st !== lastScrollTop) {
+					const diff = Math.abs(st - lastScrollTop);
+					const scrolledDown = st > lastScrollTop;
+					const scrolledUp = st < lastScrollTop;
+					if (diff > 5) {
+						bottomBar.css({
+							bottom: !scrolledUp && scrolledDown ?
+								-bottomBar.find('.bottombar-nav').outerHeight(true) :
+								0,
+						});
+						lastScrollTop = st;
+					}
+				}
+			}
+
+			const delayedScroll = utils.throttle(onWindowScroll, 250);
+			function enableAutohide() {
+				if (config.theme.autohideBottombar) {
+					lastScrollTop = $window.scrollTop();
+					$window.on('scroll', delayedScroll);
+				}
+			}
+
+			hooks.on('action:posts.loading', function () {
+				$window.off('scroll', delayedScroll);
+			});
+			hooks.on('action:posts.loaded', enableAutohide);
+			hooks.on('action:ajaxify.end', function () {
+				$window.off('scroll', delayedScroll);
+				enableAutohide();
+			});
+			enableAutohide();
 		});
 	}
 

package/public/settings.js

@@ -19,6 +19,7 @@ define('forum/account/theme', ['forum/account/header', 'api', 'settings', 'alert
 						...themeSettings,
 					},
 				});
+				config.theme = (await api.get('/api/config')).theme;
 				alerts.success('[[success:settings-saved]]');
 			});
 		}

package/scss/modals.scss

@@ -1,4 +1,9 @@
 .tool-modal {
 	bottom: $spacer * 3;
 	right: $spacer * 4;
-}
+
+	@include media-breakpoint-down(md) {
+		right: $spacer;
+		left: $spacer;
+	}
+}

package/scss/modules/bottom-sheet.scss

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

package/scss/sidebar.scss

@@ -1,10 +1,10 @@
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
-	nav.sidebar, .bottombar {
+	nav.sidebar, .bottombar-nav {
 		color: $secondary !important;
 		background-color: $light !important;
 	}
-	.bottombar {
+	.bottombar-nav {
 		.dropdown-menu {
 			color: $secondary !important;
 			background-color: $light !important;
@@ -97,7 +97,10 @@
 }
 
 .bottombar {
-	z-index: $zindex-dropdown;
+	transition: bottom 150ms linear;
+}
+
+.bottombar-nav {
 	.nav-text {
 		font-size: 1rem;
 		color: $body-color;

package/templates/account/theme.tpl

@@ -8,19 +8,35 @@
 
 <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 }}}>
+		<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="centerHeaderElements" name="centerHeaderElements" {{{ if config.centerHeaderElements }}}checked{{{ end }}}>
+		<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.stickyToolbar }}}checked{{{ end }}}>
-		<label class="form-check-label">[[harmony:settings.stickyToolbar]]</label>
+		<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>
+
+	<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>
+
 </form>
 
 <!-- IMPORT partials/account/footer.tpl -->

package/templates/category.tpl

@@ -1,10 +1,10 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <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>

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 pb-5 pb-md-0 mb-5 mb-md-2 pe-3 me-md-5 ms-auto" style="width:300px; z-index: 2!important;">
 			<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/partials/breadcrumbs.tpl

@@ -1,5 +1,5 @@
 {{{ if breadcrumbs.length }}}
-<ol class="breadcrumb mb-0 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}" itemscope="itemscope" itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
+<ol class="breadcrumb mb-0 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}" itemscope="itemscope" itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
 	{{{ each breadcrumbs }}}
 	<li{{{ if @last }}} component="breadcrumb/current"{{{ end }}} itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="breadcrumb-item {{{ if @last }}}active{{{ end }}}">
 		<meta itemprop="position" content="{@index}" />

package/templates/partials/header/brand.tpl

@@ -1,6 +1,6 @@
 {{{ if (brand:logo || config.showSiteTitle)}}}
 <div class="container brand-container">
-	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<div component="brand/wrapper" class="d-flex align-items-center gap-3 p-2 rounded-1 align-content-stretch ">
 			{{{ if brand:logo }}}
 			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}">

package/templates/partials/mobile-footer.tpl

@@ -1,8 +1,8 @@
-<div class="d-flex flex-column d-md-none fixed-bottom ff-secondary gap-1 align-items-center">
+<div component="bottombar" class="bottombar d-flex flex-column d-md-none fixed-bottom ff-secondary gap-1 align-items-center">
 
 	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
 
-	<div class="bottombar p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
+	<div class="bottombar-nav p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
 		<div class="">
 			<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
 				<span class="position-relative">
@@ -17,15 +17,15 @@
 					<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
 					{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 						<span class="d-inline-flex justify-content-between align-items-center w-100">
-							<span class="text-nowrap truncate-open">
+							<span class="text-nowrap">
 								{{{ if ./iconClass }}}
 								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
 								{{{ end }}}
 								{{{ if ./text }}}
-								<span class="nav-text visible-open px-2 fw-semibold">{./text}</span>
+								<span class="nav-text px-2 fw-semibold">{./text}</span>
 								{{{ end }}}
 							</span>
-							<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+							<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>
 					</a>
 					{{{ if ./dropdown }}}

package/templates/partials/post_bar.tpl

@@ -1,4 +1,4 @@
-<nav class="{{{ if config.stickyToolbar }}}sticky-tools{{{ end }}} navbar navbar-expand mt-4 p-0 border-0 rounded topic-main-buttons">
+<nav class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} navbar navbar-expand mt-4 p-0 border-0 rounded topic-main-buttons">
 	<div class="card card-header flex-row p-2 border rounded ff-secondary w-100">
 		<ul class="navbar-nav me-auto gap-2 align-items-center">
 			{{{ if loggedIn }}}

package/templates/partials/sidebar-left.tpl

@@ -1,4 +1,4 @@
-<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
+<nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
 	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 		{{{ each navigation }}}
 		{{{ if displayMenuItem(@root, @index) }}}

package/templates/partials/sidebar-right.tpl

@@ -1,4 +1,4 @@
-<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
+<nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
 	{{{ if config.loggedIn }}}
 	<ul id="logged-in-menu" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 	<!-- IMPORT partials/sidebar/logged-in-menu.tpl -->

package/templates/partials/topic/navigator-mobile.tpl

@@ -1,26 +1,31 @@
-<div class="d-flex justify-content-end w-100">
-	<div class="pagination-block text-bg-light m-2 rounded-1 border border-gray-300" style="height:50px;">
+<div class="d-flex w-100">
+	<div class="pagination-block text-bg-light m-2 rounded-1 border border-gray-300 w-100" style="height:30px;">
 		<div class="position-relative">
-			<div class="progress-bar rounded-1 bg-info d-block position-absolute" style="height:50px;"></div>
+			<div class="progress-bar rounded-1 bg-info d-block position-absolute" style="height:28px;"></div>
 		</div>
-		<div class="wrapper d-flex align-items-center h-100" style="padding: 5px 0px;">
-			<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop" style="z-index: 1;"></i>
+		<div class="wrapper dropup-center d-flex align-items-center justify-content-between w-100 h-100" style="padding: 5px 0px;">
+			<div class="lh-1 px-2">
+				<i class="fa fa-angle-double-up pointer fa-fw pagetop fs-5" style="z-index: 1;"></i>
+			</div>
 
 			<a href="#" class="text-reset dropdown-toggle d-inline-block px-3 text-decoration-none" data-bs-toggle="dropdown">
 				<span class="pagination-text position-relative fw-bold"></span>
 			</a>
 
-			<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom" style="z-index: 1;"></i>
+			<div class="lh-1 px-2">
+				<i class="fa fa-angle-double-down pointer fa-fw pagebottom fs-5" style="z-index: 1;"></i>
+			</div>
+
 			<ul class="dropdown-menu p-0" role="menu" style="width: 100%;">
 				<li class="p-3">
 					<div class="row">
 						<div class="col-8 post-content overflow-hidden mb-3" style="height: 350px;"></div>
-						<div class="col-4 text-end">
+						<div class="col-4 ps-0 text-end">
 							<div class="scroller-content">
 								<span class="pointer pagetop">[[topic:first-post]] <i class="fa fa-angle-double-up"></i></span>
 								<div class="scroller-container border-gray-200" style="height: 300px; border-right: 3px solid; margin-right: 5.5px;">
-									<div class="scroller-thumb position-relative" style="height: 40px;right: -6px; padding-right: 15px; margin-right: -15px;">
-										<span class="thumb-text fw-bold user-select-none position-relative" style="top: -15px; padding-right: 10px;"></span>
+									<div class="scroller-thumb position-relative text-nowrap" style="height: 40px;right: -6px; padding-right: 15px; margin-right: -15px;">
+										<span class="thumb-text text-sm fw-bold user-select-none position-relative pe-2" style="top: -15px;"></span>
 										<div class="rounded-2 scroller-thumb-icon bg-primary d-inline-block position-relative" style="width: 9px; height:40px;"></div>
 									</div>
 								</div>

package/templates/partials/topic/post.tpl

@@ -63,7 +63,7 @@
 			</div>
 			<div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
 				<span class="bookmarked opacity-0 text-primary"><i class="fa fa-bookmark-o"></i></span>
-				<a href="{config.relative_path}/post/{./pid}" class="post-index text-muted">#{increment(./index, "1")}</a>
+				<a href="{config.relative_path}/post/{./pid}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
 			</div>
 		</div>
 

package/templates/partials/topic/reply-button.tpl

@@ -1,4 +1,4 @@
-<div component="topic/reply/container" class="btn-group action-bar bottom-sheet {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
+<div component="topic/reply/container" class="btn-group action-bar {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
 	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="d-flex align-items-center btn btn-sm btn-primary px-3 fw-semibold " component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply d-sm-block d-md-none"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
 	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown">
 		<span class="caret"></span>

package/templates/partials/topic-list-bar.tpl

@@ -1,4 +1,4 @@
-<nav class="topic-list-header {{{ if config.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded mb-3">
+<nav class="topic-list-header {{{ if config.theme.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded mb-3">
 	<div class="card card-header flex-row p-2 gap-1 border rounded ff-secondary w-100">
 		<ul class="navbar-nav me-auto gap-2 align-items-center">
 			{{{ if template.category }}}

package/templates/partials/topics_list.tpl

@@ -114,13 +114,12 @@
 						{{{ end }}}
 					</div>
 				</div>
-
-				{{{ if showSelect }}}
-				<div class="position-absolute top-0 end-0 w-auto p-0">
-					<i component="topic/select" class="fa fa-square-o fs-5 text-muted pointer"></i>
-				</div>
-				{{{ end }}}
 			</div>
+			{{{ if showSelect }}}
+			<div class="position-absolute top-0 end-0 w-auto p-0">
+				<i component="topic/select" class="fa fa-square-o fs-5 text-muted pointer"></i>
+			</div>
+			{{{ end }}}
 		</div>
 		<hr class="text-muted opacity-25"/>
 	</li>

package/templates/topic.tpl

@@ -6,11 +6,11 @@
 </div>
 {{{ end }}}
 
-<h2 component="post/header" class="fs-2 mb-0 text-break {{{ if config.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
+<h2 component="post/header" class="fs-2 mb-0 text-break {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
 	<span class="topic-title" component="topic/title">{title}</span>
 </h2>
 
-<div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+<div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 	<span component="topic/labels" class="d-flex gap-2">
 		<span component="topic/scheduled" class="badge badge border border-gray-300 text-primary {{{ if !scheduled }}}hidden{{{ end }}}">
 			<i class="fa fa-clock-o"></i>
@@ -74,7 +74,7 @@
 		</div>
 		{{{ end }}}
 
-		{{{ if config.enableQuickReply }}}
+		{{{ if config.theme.enableQuickReply }}}
 		<!-- IMPORT partials/topic/quickreply.tpl -->
 		{{{ end }}}
 

package/templates/users.tpl

@@ -12,7 +12,7 @@
 		<div class="">
 			<div class="d-flex justify-content-end gap-2">
 				{{{ if showInviteButton }}}
-				<button component="user/invite" class="btn btn-primary btn-sm"><i class="fa fa-user-plus"></i> [[users:invite]]</button>
+				<button component="user/invite" class="btn btn-primary btn-sm text-nowrap"><i class="fa fa-user-plus"></i> [[users:invite]]</button>
 				{{{ end }}}
 				{{{ if displayUserSearch }}}
 				<div class="search">