nodebb-theme-harmony 0.0.14 → 1.0.0-beta.10

package/package.json

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

package/public/harmony.js

@@ -1,6 +1,7 @@
 'use strict';
 
 $(document).ready(function () {
+	setupNProgress();
 	setupMobileMenu();
 	setupSearch();
 	setupDrafts();
@@ -55,26 +56,6 @@ $(document).ready(function () {
 		$('[component="sidebar/search"]').on('shown.bs.dropdown', function () {
 			$(this).find('[component="search/fields"] input[name="query"]').trigger('focus');
 		});
-
-		function resizeResults(hookData) {
-			if (hookData && hookData.data && !hookData.data.posts.length) {
-				$('.bottombar .quick-search-results').css({ height: 'initial' });
-				return;
-			}
-			const dropdown = $('.bottombar .search-dropdown');
-			const padY = dropdown.innerHeight() - dropdown.height();
-			const input = dropdown.find('.input-container').outerHeight(true);
-			const showMore = dropdown.find('.show-more-container').outerHeight(true);
-			const newHeight = Math.max(
-				150,
-				$(window).height() - (input + (showMore || 0) + (padY * 2) + 30)
-			);
-			$('.bottombar .quick-search-results').height(newHeight);
-		}
-		require(['hooks'], function (hooks) {
-			$(window).on('resize', resizeResults);
-			hooks.on('action:search.quick.complete', resizeResults);
-		});
 	}
 
 	function setupDrafts() {
@@ -122,4 +103,18 @@ $(document).ready(function () {
 			updateBadgeCount();
 		});
 	}
+	function setupNProgress() {
+		require(['nprogress'], function (NProgress) {
+			window.nprogress = NProgress;
+			if (NProgress) {
+				$(window).on('action:ajaxify.start', function () {
+					NProgress.set(0.7);
+				});
+
+				$(window).on('action:ajaxify.end', function () {
+					NProgress.done(true);
+				});
+			}
+		});
+	}
 });

package/scss/chats.scss

@@ -6,8 +6,10 @@
 body.page-user-chats {
 	overflow: hidden;
 }
-
-.expanded-chat, .chat-modal {
+[component="chat/nav-wrapper"] {
+	width: 300px;
+}
+.expanded-chat {
 	// no taskbar so hide minimize button
 	[data-action="minimize"] {
 		display: none!important;
@@ -38,6 +40,9 @@ body.page-user-chats {
 
 /* Mobile handling of chat page */
 @include media-breakpoint-down(md) {
+	[component="chat/nav-wrapper"] {
+		width: 100%;
+	}
 	.page-user-chats {
 		.chats-full {
 			padding-bottom: 8rem!important;

package/scss/harmony.scss

@@ -19,5 +19,6 @@
 @import "modules/composer";
 @import "modules/topics-list";
 @import "modules/cover";
+@import "modules/nprogress";
 
 @import "skins";

package/scss/modules/bottom-sheet.scss

@@ -1,5 +1,5 @@
 .bottom-sheet {
-	@include media-breakpoint-down(sm) {
+	@include media-breakpoint-down(md) {
 		.dropdown-menu {
 			display: block;
 			visibility: hidden;

package/scss/modules/nprogress.scss

@@ -0,0 +1,80 @@
+#nprogress {
+	pointer-events: none;
+}
+
+$nprogress-color: $primary;
+
+#nprogress .bar {
+	background: $nprogress-color;
+	position: fixed;
+	z-index: 1031;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 2px;
+}
+
+#nprogress .peg {
+	display: block;
+	position: absolute;
+	right: 0px;
+	width: 100px;
+	height: 100%;
+	box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
+	opacity: 1.0;
+
+	-webkit-transform: rotate(3deg) translate(0px, -4px);
+		-ms-transform: rotate(3deg) translate(0px, -4px);
+			transform: rotate(3deg) translate(0px, -4px);
+}
+
+#nprogress .spinner {
+	display: none;
+	position: fixed;
+	z-index: 1031;
+	top: 15px;
+	right: 15px;
+}
+
+@include media-breakpoint-down(sm) {
+	#nprogress .spinner {
+	  bottom: 15px;
+	  right: 15px;
+	  top: initial;
+	}
+}
+
+
+#nprogress .spinner-icon {
+	width: 18px;
+	height: 18px;
+	box-sizing: border-box;
+
+	border: solid 2px transparent;
+	border-top-color: $nprogress-color;
+	border-left-color: $nprogress-color;
+	border-radius: 50%;
+
+	-webkit-animation: nprogress-spinner 400ms linear infinite;
+			animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+	overflow: hidden;
+	position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+	position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+	0%   { -webkit-transform: rotate(0deg); }
+	100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+	0%   { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+

package/scss/sidebar.scss

@@ -113,7 +113,32 @@
 		font-size: 9px;
 		line-height: 12px;
 	}
-	.search.bottom-sheet .dropdown-menu {
-		max-height: 100%;
+
+	.navigation-dropdown, .user-dropdown {
+		> li {
+			> a, .dropdown-item {
+				padding: 10px 20px!important;
+			}
+		}
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		max-height: 60vh!important;
+		overflow: auto!important;
+	}
+	.search-dropdown .quick-search-results {
+		max-height: 250px!important;
+		overflow-y: auto!important;
+	}
+	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		ul {
+			max-height: 60vh!important;
+			overflow-y: auto!important;
+		}
 	}
 }

package/templates/chats.tpl

@@ -1,5 +1,5 @@
 <div class="chats-full d-flex gap-1 vh-100 py-3">
-	<div class="d-flex flex-column h-100" style="width:300px;" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
+	<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>
 

package/templates/partials/chats/message-window.tpl

@@ -6,8 +6,9 @@
 
 {{{ if roomId }}}
 <div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
-	<div component="chat/header" class="d-flex align-items-center px-3 gap-1">
-		<h5 class="members flex-1 fw-semibold tracking-tight">
+	<div component="chat/header" class="d-flex align-items-center px-3 gap-2">
+		<a href="#" data-action="close" role="button" class="d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
+		<h5 class="members flex-1 fw-semibold tracking-tight mb-0">
 			{./chatWithMessage}
 		</h5>
 

package/templates/partials/chats/message.tpl

@@ -14,7 +14,7 @@
 		{{{ end }}}
 	</div>
 	<div class="message-body-wrapper hover-parent">
-		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto">
+		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto text-break">
 			{messages.content}
 		</div>
 

package/templates/partials/mobile-footer.tpl

@@ -1,13 +1,16 @@
 <div class="text-dark bg-light bottombar p-2 d-flex d-md-none justify-content-between fixed-bottom ff-secondary align-items-center">
-	<div class="bottom-sheet">
-		<button class="btn" data-bs-toggle="dropdown">
-			<i class="fa fa-bars"></i>
-		</button>
-		<ul class="dropdown-menu">
+	<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">
+				<i class="fa fa-fw fa-lg fa-bars"></i>
+				<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
+			</span>
+		</a>
+		<ul class="navigation-dropdown dropdown-menu">
 			{{{ each navigation }}}
 			<!-- IF function.displayMenuItem, @index -->
 			<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-				<a class="nav-link nav-btn navigation-link p-3 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+				<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if navigation.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">
@@ -38,26 +41,26 @@
 		{{{ if config.loggedIn }}}
 		<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
 			{{{ if config.searchEnabled }}}
-			<li component="sidebar/search" class="nav-item m-0 search bottom-sheet position-relative">
+			<li component="sidebar/search" class="nav-item m-0 search">
 			<!-- IMPORT partials/sidebar/search-mobile.tpl -->
 			</li>
 			{{{ end }}}
 
-			<li component="notifications" class="nav-item m-0 notifications bottom-sheet">
+			<li component="notifications" class="nav-item m-0 notifications">
 			<!-- IMPORT partials/sidebar/notifications.tpl -->
 			</li>
 
 			{{{ if canChat }}}
-			<li class="nav-item m-0 chats bottom-sheet">
+			<li class="nav-item m-0 chats">
 			<!-- IMPORT partials/sidebar/chats.tpl -->
 			</li>
 			{{{ end }}}
 
-			<li component="sidebar/drafts" class="nav-item m-0 drafts bottom-sheet">
+			<li component="sidebar/drafts" class="nav-item m-0 drafts">
 			<!-- IMPORT partials/sidebar/drafts.tpl -->
 			</li>
 
-			<li id="user_label" class="nav-item m-0 py-2 bottom-sheet usermenu">
+			<li id="user_label" class="nav-item m-0 py-2 usermenu">
 			<!-- IMPORT partials/sidebar/user-menu.tpl -->
 			</li>
 		</ul>

package/templates/partials/post_bar.tpl

@@ -16,10 +16,11 @@
 			<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss text-primary"></i></a>
 			{{{ end }}}
 
-			<span class="loading-indicator btn float-start text-muted navbar-text hidden" done="0">
-				<i class="fa fa-refresh fa-spin"></i>
-				<span class="hidden-xs">[[topic:loading_more_posts]]</span>
-			</span>
+			{{{ if browsingUsers }}}
+			<div class="hidden-xs">
+			<!-- IMPORT partials/topic/browsing-users.tpl -->
+			</div>
+			{{{ end }}}
 		</ul>
 		<!-- IMPORT partials/topic/reply-button.tpl -->
 	</div>

package/templates/partials/sidebar/chats.tpl

@@ -45,9 +45,12 @@
 	</li>
 	<li class="dropdown-divider"></li>
 	<li class="notif-dropdown-link">
-		<div class="d-flex justify-content-center gap-1 flex-nowrap">
-			<a component="chats/mark-all-read" role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap ff-secondary"><i class="fa fa-check-double"></i> [[modules:chat.mark_all_read]]</a>
-			<a class="btn btn-sm btn-primary flex-fill text-nowrap ff-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
+		<div class="d-flex justify-content-center gap-1 flex-wrap">
+			<a component="chats/mark-all-read" role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate ff-secondary"><i class="fa fa-check-double"></i> [[modules:chat.mark_all_read]]</a>
+			<!-- on md and up see all chats button goes to last room -->
+			<a class="d-none d-md-inline btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/user/{user.userslug}/chats{{{ if user.lastRoomId }}}/{user.lastRoomId}{{{ end }}}"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
+			<!-- on xs&sm the see all chats button goes to the list of chats -->
+			<a class="d-inline d-md-none btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
 		</div>
 	</li>
 </ul>

package/templates/partials/sidebar/drafts.tpl

@@ -22,12 +22,12 @@
 					<div class="dropdown-item rounded-1 p-2 d-flex flex-column gap-2 pointer" component="drafts/open" data-save-id="{./save_id}">
 						{{{ if (./action == "topics.post") }}}
 						{{{ if ./title}}}
-						<div class="text text-xs fw-semibold line-clamp-2">{./title}</div>
+						<div class="text text-xs fw-semibold line-clamp-2 text-break">{./title}</div>
 						{{{ end }}}
 						{{{ end }}}
 
 						{{{ if (./action == "posts.reply") }}}
-						<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.replying_to, "{./title}"]]</div>
+						<div class="text text-xs fw-semibold line-clamp-2 text-break">[[topic:composer.replying_to, "{./title}"]]</div>
 						{{{ end }}}
 
 						{{{ if (./action == "posts.edit") }}}

package/templates/partials/sidebar/notifications.tpl

@@ -8,7 +8,7 @@
 	</span>
 	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 </a>
-<ul class="notifications-dropdown dropdown-menu p-2 shadow">
+<ul class="notifications-dropdown dropdown-menu p-1 shadow">
 	<li>
 		<ul component="notifications/list" class="notification-list list-unstyled">
 			<li class="mb-2 placeholder-wave">
@@ -20,9 +20,9 @@
 	</li>
 	<li class="dropdown-divider"></li>
 	<li class="notif-dropdown-link">
-		<div class="d-flex justify-content-center gap-1 flex-nowrap">
-			<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap ff-secondary"><i class="fa fa-check-double"></i> [[notifications:mark_all_read]]</a>
-			<a class="btn btn-sm btn-primary flex-fill text-nowrap ff-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>
+		<div class="d-flex justify-content-center gap-1 flex-wrap">
+			<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate ff-secondary"><i class="fa fa-check-double"></i> [[notifications:mark_all_read]]</a>
+			<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>
 		</div>
 	</li>
 </ul>

package/templates/partials/sidebar/search-mobile.tpl

@@ -15,7 +15,7 @@
 				<div class="quick-search-results-container"></div>
 			</div>
 
-			<div class="d-flex gap-1 input-container mt-2">
+			<div class="d-flex gap-1 input-container">
 				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
 
 				<div class="nav-btn d-flex justify-content-center align-items-center advanced-search-link">

package/templates/partials/sidebar/user-menu.tpl

@@ -2,7 +2,7 @@
 	{buildAvatar(user, "20px", true)}
 	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
 </label>
-<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
+<ul id="user-control-list" component="header/usercontrol" class="user-dropdown dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-1" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
 			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span></div>

package/templates/partials/sidebar-left.tpl

@@ -28,7 +28,10 @@
 		{{{end}}}
 	</ul>
 	<div class="w-100">
+		{{{ if !config.disableCustomUserSkins }}}
 		<!-- IMPORT partials/skin-switcher.tpl -->
+		{{{ end }}}
+
 		<div class="sidebar-toggle m-2 d-none d-lg-block">
 			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap">
 				<i class="fa fa-fw fa-angles-right"></i>

package/templates/partials/topic/quickreply.tpl

@@ -9,12 +9,12 @@
 	<form class="flex-grow-1 d-flex flex-column gap-2" method="post" action="{config.relative_path}/compose">
 		<input type="hidden" name="tid" value="{tid}" />
 		<input type="hidden" name="_csrf" value="{config.csrf_token}" />
-		<div class="quickreply-message">
+		<div class="quickreply-message position-relative">
 			<textarea rows="4" name="content" component="topic/quickreply/text" class="form-control mousetrap" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
 			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
 		<div>
-			<div class="btn-group">
+			<div class="d-flex justify-content-end gap-2">
 				<button type="submit" component="topic/quickreply/button" class="btn btn-sm btn-primary">[[topic:post-quick-reply]]</button>
 				<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-primary" formmethod="get"><i class="fa fa-expand"></i></button>
 			</div>

package/templates/partials/topics_list.tpl

@@ -14,7 +14,7 @@
 					<div class="avatar">
 						<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none">
 							{{{ if ./thumbs.length }}}
-							<img src="{./thumbs.0.url}" class="not-responsive" />
+							<img class="topic-thumb rounded-1" width="80" height="auto" src="{./thumbs.0.url}" class="not-responsive" />
 							{{{ else }}}
 							{buildAvatar(./user, "40px", true, "not-responsive")}
 							{{{ end }}}
@@ -22,7 +22,7 @@
 					</div>
 				</div>
 				<div class="d-flex flex-column gap-1">
-					<h2 component="topic/header" class="title mb-1 {{{ if showSelect }}}me-4{{{ end }}} me-md-0 text-md fw-bold">
+					<h2 component="topic/header" class="text-break title mb-1 {{{ if showSelect }}}me-4{{{ end }}} me-md-0 text-md fw-bold">
 						{{{ if topics.noAnchor }}}
 						<span>{./title}</span>
 						{{{ else }}}

package/templates/topic.tpl

@@ -6,12 +6,12 @@
 </div>
 {{{ end }}}
 
-<h2 component="post/header" class="fs-2 mb-0 {{{ if config.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
+<h2 component="post/header" class="fs-2 mb-0 text-break {{{ if config.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 }}}">
-	<span component="topic/labels" class="d-flex gap-2">
+	<span component="topic/labels" class="d-flex gap-2 lh-1">
 		<span component="topic/scheduled" class="badge badge border border-gray-300 text-primary {{{ if !scheduled }}}hidden{{{ end }}}">
 			<i class="fa fa-clock-o"></i>
 			[[topic:scheduled]]
@@ -28,7 +28,7 @@
 			<i class="fa fa-arrow-circle-right"></i>
 			{{{ if privileges.isAdminOrMod }}}[[topic:moved-from, {oldCategory.name}]]{{{ else }}}[[topic:moved]]{{{ end }}}
 		</span>
-		{{{each icons}}}<span class="align-middle">{@value}</span>{{{end}}}
+		{{{each icons}}}<span>{@value}</span>{{{end}}}
 	</span>
 	<a class="lh-1" href="{config.relative_path}/category/{category.slug}">{function.buildCategoryLabel, category, "border"}</a>
 	<div class="lh-1 tags tag-list d-flex hidden-xs gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>