nodebb-theme-persona 12.1.6 → 12.1.8

package/{scss/topic.scss → less/topic.less}

@@ -12,7 +12,7 @@
 			font-size: 24px;
 			color:inherit;
 			line-height: 32px;
-			@include media-breakpoint-down(sm) {
+			@media (max-width: @screen-sm-max) {
 				font-size: 18px;
 				line-height: 24px;
 				margin-top: 0px;
@@ -21,7 +21,7 @@
 
 		> span {
 			text-transform: uppercase;
-			color: $gray-600;
+			color: @gray-light;
 			display: inline-block;
 			margin-top: 8px;
 		}
@@ -33,26 +33,42 @@
 
 	[component="topic/labels"] {
 		font-size: 20px;
-		color: $text-muted;
+		color: @text-muted;
 	}
 
 	[component="topic/browsing-users"] {
 		margin-bottom: -5px;
 	}
 	.topic-header {
-		top: var(--panel-offset);
-		background-color: $body-bg;
-		z-index: $zindex-dropdown; // allows for top nav dropdowns to appear on top
+		position: sticky;
+		top: calc(var(--panel-offset) - 20px);
+		background-color: @body-bg;
+		z-index: @zindex-navbar;
+		margin-left: -15px;
+		margin-right: -15px;
+		padding-left: 15px;
+		padding-right: 15px;
 	}
 
 	.topic-info {
-		border-bottom: 1px solid $post-border-color;
+		border-bottom: 1px solid @post-border-color;
 		margin-bottom: 10px;
 		padding-bottom: 10px;
 		> * {
 			padding-top: 10px;
 		}
 	}
+	.category-item {
+		.icon {
+			min-width: 23px;
+    		min-height: 23px;
+    		font-size: 10px;
+    		line-height: 12px;
+    		padding: 5px;
+			margin-right: 5px;
+			border-radius: 50%;
+		}
+	}
 
 	.posts {
 		h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
@@ -102,7 +118,7 @@
 				top: 0px;
 				z-index: 1;
 
-				@include media-breakpoint-up(md) {
+				@media (min-width: @screen-md-min) {
 					top: 2px;
 					font-size: 16px;
 				}
@@ -121,23 +137,24 @@
 	.login-required {
 		display: inline-block;
 		padding: 0 0.5em;
-		border: 1px dashed $gray-600;
+		border: 1px dashed @gray-light;
 	}
 
 	.bookmarked {
 		font-size: 16px;
-		color: darken($post-highlight, 20%);
+		color: darken(@post-highlight, 20%);
 		opacity: 0;
-		@include transition(0.75s ease-in-out opacity);
+		.transition(0.75s ease-in-out opacity);
 		margin-left: 5px;
 	}
 
 	[component="post/anchor"] {
 		position: relative;
-		top: -$post-padding;
+		top: -@post-padding;
 	}
 
 	[component="post/upvote"], [component="post/downvote"] {
+		color: @gray-light;
 		display: inline-block;
 		padding: 1rem;
 
@@ -146,14 +163,14 @@
 		}
 	}
 
-	[component="post/upvote"].upvoted {
-		border-radius: 3px;
-		border: 1px solid $success;
+	[component="post/upvote"].upvoted i::before {
+		content: @fa-var-chevron-circle-up;
+		color: @brand-primary;
 	}
 
-	[component="post/downvote"].downvoted {
-		border-radius: 3px;
-		border: 1px solid $warning;
+	[component="post/downvote"].downvoted i::before {
+		content: @fa-var-chevron-circle-down;
+		color: @brand-primary;
 	}
 
 	[component="post/vote-count"] {
@@ -173,7 +190,7 @@
 		font-size: 11px;
 
 		img, .user-icon {
-			@include user-icon-style(16px, 10px, 50%);
+			.user-icon-style(16px, 10px, 50%);
 			vertical-align: 1px;
 		}
 
@@ -185,6 +202,10 @@
 			margin-left: 3px;
 		}
 
+		.replies-last {
+			color: @gray-light;
+		}
+
 		.fa {
 			font-size: 80%;
 		}
@@ -212,7 +233,7 @@
 
 	[component="post/replies"] {
 		margin-left: 61px;
-		margin-top: $post-padding;
+		margin-top: @post-padding;
 		border-left: 5px solid #eee;
 		padding-left: 20px;
 
@@ -236,16 +257,16 @@
 			margin-top: 2px;
 			display: block;
 
-			color: $gray-600;
+			color: @gray-light;
 
 			strong {
-				color: $gray-800;
+				color: @gray-dark;
 			}
 		}
 	}
 
 	.content {
-		margin-top: $post-padding;
+		margin-top: @post-padding;
 		padding-bottom: 1px;
 		margin-top: -43px;
 		margin-left: 38px;
@@ -257,7 +278,7 @@
 	.post-tools {
 		a {
 			padding: 1rem 10px;
-			@include pointer;
+			.pointer;
 		}
 	}
 
@@ -274,7 +295,7 @@
 			background: white !important;
 			color: #333;
 			&:hover {
-				background: $primary !important;
+				background: @brand-primary !important;
 			}
 		}
 	}
@@ -285,12 +306,12 @@
 		}
 
 		.btn {
-			background: $body-bg;
+			background: @body-bg;
 			text-transform: uppercase;
 			font-weight: 600;
 			box-shadow: none !important;
 			font-size: 11px;
-			color: $gray-600;
+			color: @gray-light;
 			padding: 0;
 		}
 	}
@@ -307,7 +328,7 @@
 		word-wrap: break-word;
 	}
 
-	@include media-breakpoint-down(sm) {
+	@media (max-width: @screen-sm-max) {
 		.content {
 			margin-left: 0;
 			margin-top: -10px;
@@ -328,7 +349,7 @@
 			margin-top: -3px;
 
 			.avatar {
-				@include user-icon-style(23px, calc(23px * 0.6), 50%);
+				.user-icon-style(23px, 1.3rem, 50%);
 			}
 		}
 
@@ -356,7 +377,7 @@
 				font-size: 12px;
 				top: 0px;
 
-				@include media-breakpoint-up(md) {
+				@media (min-width: @screen-md-min) {
 					top: 2px;
 					font-size: 16px;
 				}
@@ -368,10 +389,10 @@
 		}
 
 		.quickreply-message {
-			margin-left: 63px;
+			margin-left: 61px;
 			margin-bottom: 5px;
 
-			@include media-breakpoint-down(sm) {
+			@media (max-width: @screen-sm-max) {
 				margin-left: 0;
 
 				[component="topic/quickreply/text"] {
@@ -399,7 +420,7 @@
 
 	.posts {
 		&.timeline {
-			@include timeline-style;
+			.timeline-style;
 		}
 
 		list-style-type: none;
@@ -407,7 +428,7 @@
 
 		[component="post"] {
 			position: relative;
-			@include transition(0.75s ease-in-out border-color);
+			.transition(0.75s ease-in-out border-color);
 
 			.edit-icon {
 				vertical-align: -2%;
@@ -424,8 +445,8 @@
 			}
 
 			&.highlight {
-				border-color: darken($post-highlight, 20%);
-				box-shadow: 0px 2px 2px -2px $post-highlight;
+				border-color: darken(@post-highlight, 20%);
+				box-shadow: 0px 2px 2px -2px @post-highlight;
 
 				.bookmarked {
 					opacity: 1;
@@ -434,7 +455,7 @@
 		}
 
 		.content {
-			@include fix-lists;
+			.fix-lists;
 
 			blockquote {
 				font-size: 12px;
@@ -454,7 +475,7 @@
 				}
 			}
 
-			iframe, .img-fluid {
+			iframe, .img-responsive {
 				max-width: 85%;
 				display: inline;
 			}
@@ -478,7 +499,7 @@
 				}
 			}
 
-			@include media-breakpoint-down(sm) {
+			@media (max-width: @screen-sm-min) {
 				pre {
 					max-height: 250px;
 				}
@@ -488,7 +509,7 @@
 
 	.pagination-block {
 		position: fixed;
-		background-color: $gray-200;
+		background-color: @gray-lighter;
 		bottom: 0px;
 		right: 0px;
 		z-index: 100;
@@ -496,7 +517,7 @@
 		opacity: 0;
 
 		.pagination-text {
-			color: $text-muted;
+			color: @text-color;
 			position: relative;
     		top: -3px;
     		font-weight: bolder;
@@ -512,6 +533,7 @@
 				padding-left: 20px;
 				padding-right: 20px;
 				padding-top: 10px;
+				padding-bottom: 10px;
 			}
 			.dropdown-menu {
 				width: 475px;
@@ -525,7 +547,7 @@
 				}
 				.scroller-container {
 					height: 300px;
-					border-right: 3px solid $gray-200;
+					border-right: 3px solid @gray-lighter;
 					margin-right: 3px;
 					cursor: pointer;
 					.scroller-thumb {
@@ -539,7 +561,7 @@
 						.scroller-thumb-icon {
 							width: 9px;
 							height: 40px;
-							background-color: $primary;
+							background-color: @brand-primary;
 							position: relative;
 							display: inline-block;
 							border-radius: 3px;
@@ -554,22 +576,21 @@
 					}
 				}
 			}
-			@include media-breakpoint-down(sm) {
+			@media (max-width: @screen-sm-min) {
 				.dropdown-menu {
 					width: 100%;
 				}
 			}
 		}
 		.progress-bar {
-			background-color: $info;
+			background-color: @brand-info;
 			display:block;
 			z-index: -1;
 			position: absolute;
 			transition: width 50ms ease-in;
-			height: 100%;
 		}
 	}
-	@include media-breakpoint-down(sm) {
+	@media (max-width: @screen-sm-min) {
 		.pagination-block {
 			width: 100%;
 		}
@@ -583,7 +604,7 @@
 		position: relative;
 
 		img, .user-icon {
-			@include user-icon-style(20px, 1rem, 50%);
+			.user-icon-style(20px, 1rem, 50%);
 			vertical-align: middle;
 			margin: 0 7px;
 		}
@@ -599,13 +620,13 @@
 			top: -36px;
 			left: 7px;
 
-			@include transition("opacity ease 250ms, top ease 250ms")
+			.transition(~"opacity ease 250ms, top ease 250ms")
 		}
 
 		&.replying::after {
 			opacity: 1;
 			top: -50px;
-			animation: topic-reply-pulse 2s ease-in infinite;
+			.animation(topic-reply-pulse 2s ease-in infinite);
 		}
 	}
 
@@ -618,17 +639,34 @@
 	}
 }
 
+.fork-thread-card {
+	position: fixed;
+	bottom: 10%;
+	right: 2rem;
+	z-index: 1;
+}
+
 .selection-tooltip-container {
 	position: absolute;
 	padding: 5px;
-	border: 1px solid $card-border-color;
-	background-color: $card-bg;
+	border: 1px solid @well-border;
+	background-color: @well-bg;
 	border-radius: 3px;
 	margin: 10px 0px 0px 0px;
 	z-index: 1;
 }
 
+@media screen and (min-width: @screen-sm-min) {
+	.fork-thread-card {
+		max-width: 33%;
+	}
+}
+
 [component="post"] {
+	.avatar.avatar-sm2x {
+		font-size: 2.875rem;
+	}
+
 	>.post-header [component="user/picture"], >.post-header [component="user/status"] {
 		opacity: 1;
 	}
@@ -637,16 +675,15 @@
 		opacity: 0;
 	}
 
-	&.selected {
+	&.bg-success {
 		background-color: initial;
 
 		>.post-header .icon:before {
-			border: 1px solid $success;
-    		color: $white;
-			background-color: $success;
+			border: 1px solid #5cb85c;
+    		color: #5cb85c;
     		-webkit-transition: .2s ease-in-out all;
     		transition: .2s ease-in-out all;
-			content: fa-content($fa-var-check);
+    		content: "\f00c";
     		padding: 14px;
 		    border-radius: 50%;
 		    opacity: 1;

package/less/topics_list.less

@@ -0,0 +1,16 @@
+#new-topics-alert {
+    margin-bottom: 0px;
+    padding: 10px 16px;
+}
+
+.topic-list-header {
+    position: sticky;
+    top: @navbar-height;
+    background-color: @body-bg;
+    z-index: @zindex-navbar;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-top: 1px solid @post-border-color;
+    border-bottom: 1px solid @post-border-color;
+}

package/less/users.less

@@ -0,0 +1,73 @@
+.users {
+
+	&.admin {
+		#users-container {
+			padding: 0;
+		}
+
+		.users-box{
+			display: inline-block;
+			margin-top: 20px;
+			text-align: center;
+			vertical-align: top;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			height: auto;
+			max-width: 125px;
+
+			img {
+				width:80px;
+				height:80px;
+			}
+
+			a {
+				margin-bottom:5px;
+			}
+		}
+	}
+}
+
+.users-container {
+	padding: 0;
+	list-style-type: none;
+
+	li {
+		padding-bottom: 10px;
+	}
+
+	.users-box{
+		display: inline-block;
+		margin-top: 20px;
+		text-align: center;
+		vertical-align: top;
+		width: 104px;
+
+		a {
+			max-width: 94px;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+	}
+
+	.user-info {
+		>span {
+			max-width: 94px;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			display: inline-block;
+		}
+	}
+
+	.user-img {
+		.user-icon-style(20px, 1rem, 50%);
+		vertical-align: middle;
+	}
+
+	.anon-user .avatar {
+		background: @gray-lighter;
+		color: white;
+	}
+}

package/{scss/variables.scss → less/variables.less}

@@ -2,6 +2,6 @@
 //
 //## Post objects found on the category, recent, popular, etc. pages
 
-$post-padding:			20px;
-$post-border-color: 	$gray-200;
-$post-highlight:		$info;
+@post-padding:			20px;
+@post-border-color: 	@gray-lighter;
+@post-highlight:		@brand-info;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "12.1.6",
+  "version": "12.1.8",
   "nbbpm": {
-    "compatibility": "^3.0.0"
+    "compatibility": "^2.0.0"
   },
   "description": "Persona theme for NodeBB",
   "main": "library.js",

package/public/persona.js

@@ -7,21 +7,30 @@ $(document).ready(function () {
 	setupMobileMenu();
 	setupQuickReply();
 	configureNavbarHiding();
+	updatePanelOffset();
 
 	$(window).on('resize', utils.debounce(configureNavbarHiding, 200));
 	$(window).on('resize', updatePanelOffset);
 
 	function updatePanelOffset() {
-		const header = document.getElementById('header-menu');
+		const headerEl = document.getElementById('header-menu');
 
-		if (!header) {
+		if (!headerEl) {
 			console.warn('[persona/updatePanelOffset] Could not find #header-menu, panel offset unchanged.');
 			return;
 		}
 
-		const rect = header.getBoundingClientRect();
-		const offset = Math.max(0, rect.bottom);
+		const headerRect = headerEl.getBoundingClientRect();
+		const headerStyle = window.getComputedStyle(headerEl);
+
+		let offset =
+			headerRect.y + headerRect.height +
+			(parseInt(headerStyle.marginTop, 10) || 0) +
+			(parseInt(headerStyle.marginBottom, 10) || 0);
+
+		offset = Math.max(0, offset);
 		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
+		localStorage.setItem('panelOffset', offset);
 	}
 
 	var lastBSEnv = '';
@@ -178,7 +187,7 @@ $(document).ready(function () {
 				}
 
 				icon = el.closest('[data-pid]').find('.edit-icon').first();
-				icon.prop('title', el.text()).tooltip().removeClass('hidden');
+				icon.prop('title', el.text()).tooltip('fixTitle').removeClass('hidden');
 			});
 		}
 
@@ -188,7 +197,7 @@ $(document).ready(function () {
 				return parseInt($(el).closest('[data-pid]').attr('data-pid'), 10) === parseInt(data.post.pid, 10);
 			});
 			var el = parent.find('[component="post/editor"]').first();
-			icon.prop('title', el.text()).tooltip().removeClass('hidden');
+			icon.prop('title', el.text()).tooltip('fixTitle').removeClass('hidden');
 		});
 
 		$(window).on('action:topic.loaded', activateEditedTooltips);
@@ -212,8 +221,8 @@ $(document).ready(function () {
 			var margin = window.innerWidth;
 
 			if (swapped) {
-				$('#mobile-menu').removeClass('float-start');
-				$('#mobile-chats').addClass('float-start');
+				$('#mobile-menu').removeClass('pull-left');
+				$('#mobile-chats').addClass('pull-left');
 			}
 
 			if (document.documentElement.getAttribute('data-dir') === 'rtl') {
@@ -343,8 +352,8 @@ $(document).ready(function () {
 					});
 			}
 
-			const searchInputEl = $('.navbar .navbar-search input[name="term"]');
-			const searchButton = $('.navbar .navbar-search button[type="button"]');
+			const searchInputEl = $('.navbar-header .navbar-search input[name="term"]');
+			const searchButton = $('.navbar-header .navbar-search button[type="button"]');
 			searchButton.off('click').on('click', function () {
 				if (!config.loggedIn && !app.user.privileges['search:content']) {
 					alerts.alert({
@@ -366,7 +375,7 @@ $(document).ready(function () {
 			search.enableQuickSearch({
 				searchElements: {
 					inputEl: searchInputEl,
-					resultEl: $('.navbar .navbar-search .quick-search-container'),
+					resultEl: $('.navbar-header .navbar-search .quick-search-container'),
 				},
 				searchOptions: {
 					in: config.searchDefaultInQuick,
@@ -491,6 +500,8 @@ $(document).ready(function () {
 						}
 					});
 				}
+
+				$('.topic-main-buttons [title]').tooltip();
 			}
 		});
 	}

package/templates/account/blocks.tpl

@@ -1,33 +1,35 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
-	<h1>[[pages:account/blocks, {username}]]</h1>
-	<div class="row justify-content-end mb-2">
-		<div class="col-3">
-			<div class="dropdown">
-				<input class="form-control" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
-
-				<ul class="dropdown-menu block-edit list-unstyled">
-					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
-					{{{ each edit }}}
-					<li class="">
-						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
-							<div class="text-truncate">
-								<a href="{config.relative_path}/uid/{../uid}">{buildAvatar(edit, "24px", true)} {../username}</a>
-							</div>
-							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{../uid}" data-action="toggle">[[user:block_toggle]]</button>
-						</div>
-					</li>
-					{{{ end }}}
-				</ul>
-			</div>
-		</div>
-	</div>
 
 	<div class="users row">
-		<div class="col-12">
-			<!-- IMPORT partials/users_list.tpl -->
+		<h1>[[pages:account/blocks, {username}]]</h1>
+
+		<div class="col-sm-8 col-xs-12">
+			<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
+				<!-- IMPORT partials/users_list.tpl -->
+			</ul>
 			<div class="alert alert-warning text-center"<!-- IF users.length --> style="display: none;"<!-- END -->>[[user:has_no_blocks]]</div>
 			<!-- IMPORT partials/paginator.tpl -->
 		</div>
+		<div class="col-sm-4 col-xs-12">
+			<div class="panel panel-default">
+				<div class="panel-body form">
+					<div class="form-group">
+						<label for="user-search">[[users:search]]</label>
+						<input class="form-control" type="text" id="user-search" placeholder="[[users:enter_username]]" />
+						<ul class="block-edit list-group">
+							{{{ each edit }}}
+							<li class="list-group-item clearfix">
+								<button class="btn btn-sm btn-primary pull-right" data-uid="{../uid}" data-action="toggle">[[user:block_toggle]]</button>
+								<div class="pull-left">
+									<a href="{config.relative_path}/uid/{../uid}">{buildAvatar(edit, "sm", true)} {../username}</a>
+								</div>
+							</li>
+							{{{ end }}}
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>