nodebb-theme-persona 12.1.4 → 13.0.0

package/README.md

@@ -1,14 +1,14 @@
-Persona theme for NodeBB
-====================
-
-Persona is the new default theme for NodeBB as of v0.7.1
-
-## Addons
-
-[Recent Cards](https://github.com/psychobunny/nodebb-plugin-recent-cards)
-
-## Screenshots
-
-![](https://d2gn4xht817m0g.cloudfront.net/p/product_screenshots/images/original/000/570/286/570286-db378dfd28256a8fabacc9129b3638dc678ac393.png?1439315393)
-
-![](https://d2gn4xht817m0g.cloudfront.net/p/product_screenshots/images/original/000/570/287/570287-5875c63ce086d361b76d94e5bc7cc88a5fd34b8b.png?1439315419)
+Persona theme for NodeBB
+====================
+
+Persona is the new default theme for NodeBB as of v0.7.1
+
+## Addons
+
+[Recent Cards](https://github.com/psychobunny/nodebb-plugin-recent-cards)
+
+## Screenshots
+
+![](https://d2gn4xht817m0g.cloudfront.net/p/product_screenshots/images/original/000/570/286/570286-db378dfd28256a8fabacc9129b3638dc678ac393.png?1439315393)
+
+![](https://d2gn4xht817m0g.cloudfront.net/p/product_screenshots/images/original/000/570/287/570287-5875c63ce086d361b76d94e5bc7cc88a5fd34b8b.png?1439315419)

package/package.json

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

package/public/persona.js

@@ -7,30 +7,21 @@ $(document).ready(function () {
 	setupMobileMenu();
 	setupQuickReply();
 	configureNavbarHiding();
-	updatePanelOffset();
 
 	$(window).on('resize', utils.debounce(configureNavbarHiding, 200));
 	$(window).on('resize', updatePanelOffset);
 
 	function updatePanelOffset() {
-		const headerEl = document.getElementById('header-menu');
+		const header = document.getElementById('header-menu');
 
-		if (!headerEl) {
+		if (!header) {
 			console.warn('[persona/updatePanelOffset] Could not find #header-menu, panel offset unchanged.');
 			return;
 		}
 
-		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);
+		const rect = header.getBoundingClientRect();
+		const offset = Math.max(0, rect.bottom);
 		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
-		localStorage.setItem('panelOffset', offset);
 	}
 
 	var lastBSEnv = '';
@@ -63,7 +54,6 @@ $(document).ready(function () {
 					return data;
 				})
 				.on('action:navigator.scrolled', () => {
-					console.warn('reenabling', navbarEl);
 					navbarEl.autoHidingNavbar('setDisableAutohide', false);
 				});
 
@@ -188,7 +178,7 @@ $(document).ready(function () {
 				}
 
 				icon = el.closest('[data-pid]').find('.edit-icon').first();
-				icon.prop('title', el.text()).tooltip('fixTitle').removeClass('hidden');
+				icon.prop('title', el.text()).tooltip().removeClass('hidden');
 			});
 		}
 
@@ -198,7 +188,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('fixTitle').removeClass('hidden');
+			icon.prop('title', el.text()).tooltip().removeClass('hidden');
 		});
 
 		$(window).on('action:topic.loaded', activateEditedTooltips);
@@ -222,8 +212,8 @@ $(document).ready(function () {
 			var margin = window.innerWidth;
 
 			if (swapped) {
-				$('#mobile-menu').removeClass('pull-left');
-				$('#mobile-chats').addClass('pull-left');
+				$('#mobile-menu').removeClass('float-start');
+				$('#mobile-chats').addClass('float-start');
 			}
 
 			if (document.documentElement.getAttribute('data-dir') === 'rtl') {
@@ -353,8 +343,8 @@ $(document).ready(function () {
 					});
 			}
 
-			const searchInputEl = $('.navbar-header .navbar-search input[name="term"]');
-			const searchButton = $('.navbar-header .navbar-search button[type="button"]');
+			const searchInputEl = $('.navbar .navbar-search input[name="term"]');
+			const searchButton = $('.navbar .navbar-search button[type="button"]');
 			searchButton.off('click').on('click', function () {
 				if (!config.loggedIn && !app.user.privileges['search:content']) {
 					alerts.alert({
@@ -376,7 +366,7 @@ $(document).ready(function () {
 			search.enableQuickSearch({
 				searchElements: {
 					inputEl: searchInputEl,
-					resultEl: $('.navbar-header .navbar-search .quick-search-container'),
+					resultEl: $('.navbar .navbar-search .quick-search-container'),
 				},
 				searchOptions: {
 					in: config.searchDefaultInQuick,
@@ -501,8 +491,6 @@ $(document).ready(function () {
 						}
 					});
 				}
-
-				$('.topic-main-buttons [title]').tooltip();
 			}
 		});
 	}

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

@@ -11,14 +11,13 @@
 	}
 
 	> .row {
-		max-width: @screen-lg-min;
 		margin-left: auto;
 		margin-right: auto;
 
 		.fullname {
 			text-align: center;
 			font-size: 20px;
-			color: @gray-light;
+			color: $gray-600;
 			font-weight: 300;
 			margin-bottom: 24px;
 		}
@@ -32,7 +31,7 @@
 		margin-bottom: 1em;
 		background-origin: content-box;
 		width: 100%;
-		top: calc(var(--panel-offset) - 20px);
+		top: var(--panel-offset);
 		position: absolute;
 		left: auto;
 		right: 0px;
@@ -86,7 +85,7 @@
 			height: 200px;
 			line-height: 200px;
 			opacity: 0;
-			.transition(opacity .15s linear);
+			@include transition(opacity .15s linear);
 			cursor: pointer;
 			pointer-events: none;
 
@@ -135,8 +134,8 @@
 			top: 1em;
 			right: 2em;
 			opacity: 1;
-			background-color: @brand-primary;
-			color: @gray-lighter;
+			background-color: $primary;
+			color: $gray-200;
 			padding: 0.5em;
 			font-weight: bold;
 
@@ -166,7 +165,7 @@
 		}
 	}
 
-	@media (min-width: @screen-md-min) {
+	@include media-breakpoint-up(md) {
 		margin-top: 300px;
 
 		.cover,  .container {
@@ -202,7 +201,7 @@
 			max-width: 75%;
 			margin-left: auto;
 			margin-right: auto;
-			color: @gray-light;
+			color: $gray-600;
 		}
 
 		.profile-meta {
@@ -232,7 +231,7 @@
 			.stat-label {
 				font-size: 12px;
 				text-transform: uppercase;
-				color: @gray-light;
+				color: $gray-600;
 			}
 		}
 	}
@@ -308,7 +307,7 @@
 	bottom: -26px;
 
 	.open #profile {
-		background-color: lighten(@brand-primary, 10%);
+		background-color: lighten($primary, 10%);
 	}
 
 	.persona-fab {
@@ -317,8 +316,7 @@
 	}
 }
 
-
-@media (max-width: @screen-md-min) {
+@include media-breakpoint-down(md) {
 	.account > .row {
 		overflow: hidden;
 	}
@@ -329,15 +327,8 @@
 }
 
 
-//
-
 .account-picture-block{
 	vertical-align:top;
-	margin-bottom:20px;
-
-	div {
-		margin-bottom: 10px;
-	}
 
 	.dropdown-toggle {
 		cursor: pointer;
@@ -354,84 +345,10 @@
   font-weight:bold;
 }
 
-.picture-switcher {
-	img, .user-icon {
-		.user-icon-style(46px, 2.4rem, 50%);
-	}
-
-	@media (max-width: @screen-sm) {
-		img, .user-icon {
-			display: none;
-		}
-	}
-
-	h4 {
-		line-height: 46px;
-		margin: 0;
-	}
-
-	.modal-body .btn {
-		padding: 10px 5px;
-		font-size: 13px;
-	}
-
-	label {
-		vertical-align: top;
-		line-height: 26px;
-
-		> input[type="radio"] {
-			display: none;
-
-			&:checked {
-				+ span:before {
-					border-radius: 50%;
-					border: 2px solid @brand-primary;
-					position: relative;
-					top: -4px;
-					left: -4px;
-				}
-			}
-
-			&[value="transparent"] {
-				&:checked + span:before {
-					padding-top: 2px;
-					padding-left: 2px;
-				}
-
-				+ span:before {
-					content: '\f05e';
-					font-family: FontAwesome;
-					color: @gray-lighter;
-					font-size: 28px;
-				}
-			}
-		}
-
-		span {
-			display: inline-block;
-			width: 24px;
-			height: 24px;
-			border-radius: 50%;
-			margin-right: .5em;
-
-			&:before {
-				content: '';
-				display: inline-block;
-				width: 32px;
-				height: 32px;
-			}
-		}
-	}
-}
-
 .page-user-info {
 	.recent-flags {
 		padding-left: 0;
 
-		li {
-			list-style-type: none;
-		}
-
 		.title {
 			font-weight: bold;
 		}
@@ -439,7 +356,7 @@
 		.timestamp {
 			font-size: 1.25rem;
 			font-style: italic;
-			color: @gray-light;
+			color: $gray-600;
 		}
 	}
 
@@ -447,15 +364,14 @@
 		padding-left: 0;
 
 		li {
-			list-style-type: none;
-			border-bottom: 1px solid @gray-lighter;
+			border-bottom: 1px solid $gray-200;
 			margin-bottom: 1rem;
 		}
 
 		.expiry {
 			font-size: 1.25rem;
 			font-style: italic;
-			color: @gray-light;
+			color: $gray-600;
 		}
 	}
 }

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

@@ -6,10 +6,10 @@
 
 		padding-bottom: 10px;
 
-		@media (max-width: @screen-xs-max) {
-			border-top: 1px solid @gray-lighter;
+		@include media-breakpoint-down(sm) {
+			border-top: 1px solid $gray-200;
 			&:last-child {
-				border-bottom: 1px solid @gray-lighter;
+				border-bottom: 1px solid $gray-200;
 			};
 		}
 
@@ -18,19 +18,8 @@
 		.content {
 			padding: 10px 15px;
 
-			.icon {
-				font-size: 17px;
-				line-height: 17px;
-				padding: 13px;
-				border-radius: 50%;
-				margin-right: 15px;
-				min-width: 46px;
-				min-height: 46px;
-				margin-top: 2px;
-			}
-
 			img, .user-icon {
-				.user-icon-style(46px, 2.4rem, 50%);
+				@include user-icon-style(46px, 2.4rem, 50%);
 			}
 
 			h2 {
@@ -39,12 +28,6 @@
 				overflow: hidden;
 				font-size: 18px;
 				line-height: 22px;
-				margin: 0;
-				margin-left: 62px;
-
-				strong {
-					color: @gray-dark;
-				}
 			}
 		}
 
@@ -61,7 +44,7 @@
 			font-size: 16px;
 		}
 
-		.card {
+		.lastpost {
 			border-left: 4px solid #ccc;
 			text-align: left;
 			margin-top: 10px;
@@ -74,12 +57,6 @@
 				padding-left: 20px;
 			}
 
-			img {
-				border-radius: 50%;
-				width: 24px;
-				height: 24px;
-			}
-
 			p {
 				margin: 0;
 				.emoji {
@@ -97,27 +74,21 @@
 
 			.user-icon {
 				display: inline-block;
-				.user-icon-style(24px, 1.5rem, 50%);
+				@include user-icon-style(24px, 1.5rem, 50%);
 			}
 		}
 
 		.category-children {
 			.category-children-item {
+				min-width: 180px;
 				margin-right: 10px;
 				margin-bottom: 1px;
-			}
-			.icon {
-				min-width: 23px;
-				min-height: 23px;
-				font-size: 10px;
-				line-height: 12px;
-				padding: 5px;
-				margin-right: 5px;
+				display: inline-block;
 			}
 		}
 
 		[component="topic/header"] > i[component="topic/pinned"] {
-			color: @brand-danger;
+			color: $danger;
 		}
 	}
 
@@ -164,7 +135,7 @@
 	text-align: center;
 	margin: 0;
 	padding-top:25px;
-	.pointer;
+	@include pointer;
 	margin-bottom: 10px;
 	overflow:hidden;
 
@@ -228,7 +199,6 @@
 
 	small {
 		text-transform: uppercase;
-		color: @gray-light;
 		font-weight: 300;
 		font-size: 12px;
 	}

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

@@ -1,7 +1,6 @@
 .category {
 
 	.topic-list {
-		margin-top: 10px;
 		overflow: visible;
 	}
 
@@ -10,15 +9,18 @@
 			list-style: none;
 
 			&:not(.unread) {
-				.card {
-					border-color: lighten(@gray-light, 20%) !important;
+				.lastpost {
+					border-color: lighten($gray-600, 20%) !important;
 				}
 
 				h2 a {
-					color: @text-muted;
+					color: $text-muted;
 				}
 			}
-
+			.info {
+				margin-left: 62px;
+				font-size: 0.75rem;
+			}
 			&.deleted {
 				-moz-opacity: 0.30;
 				opacity: 0.30;
@@ -30,7 +32,7 @@
 
 			.select {
 				position: relative;
-				.pointer;
+				@include pointer;
 
 				&:before {
 					content: "";
@@ -46,13 +48,13 @@
 					top: 0px;
 					left: 0px;
 					border: 1px solid transparent;
-					background: white;
+					background: $white;
 					width: 100%;
 					height: 100%;
 					padding: 14px;
 
 					&:before {
-						.pointer;
+						@include pointer;
 					}
 				}
 
@@ -61,7 +63,7 @@
 				}
 
 				.fa-check, .avatar {
-					.transition(.2s ease-in-out all);
+					@include transition(.2s ease-in-out all);
 				}
 
 				float: left;
@@ -69,8 +71,8 @@
 
 			.avatar .select {
 				.fa-check {
-					border: 1px solid @brand-success;
-					color: @brand-success;
+					border: 1px solid $success;
+					color: $success;
 				}
 			}
 
@@ -80,8 +82,8 @@
 				}
 
 				.fa-check {
-					border: 1px solid @brand-success;
-					color: @brand-success;
+					border: 1px solid $success;
+					color: $success;
 					opacity: 1;
 				}
 			}
@@ -94,29 +96,23 @@
 				.avatar .select {
 					.fa-check {
 						opacity: 1;
-						background-color: @brand-success;
-						border: 1px solid @brand-success;
-						color: @btn-success-color;
-						.transition(all .15s ease-in-out);
+						background-color: $success;
+						border: 1px solid $success;
+						color: $white;
+						@include transition(all .15s ease-in-out);
 					}
 
 					&:hover .fa-check {
-						background-color: @brand-success;
-						border: 1px solid @btn-success-border;
-						color: @btn-success-color;
+						background-color: $success;
+						border: 1px solid $success;
+						color: $white;
 					}
 				}
 			}
 
-			.fa-stack {
-				font-size: 90%;
-				border-radius: 50%;
-				vertical-align: -6px;
-			}
-
-			.card .user-icon {
+			.lastpost .user-icon {
 				display: inline-block;
-				.user-icon-style(24px, 1.5rem, 50%);
+				@include user-icon-style(24px, 1.5rem, 50%);
 			}
 		}
 
@@ -126,7 +122,7 @@
 	}
 
 	.unread {
-		.topic-title {
+		.title {
 			font-weight: bold;
 		}
 	}
@@ -139,72 +135,27 @@
 .category, .categories, .subcategory {
 	> p {
 		text-transform: uppercase;
-		color: @gray-light;
 	}
 
 	.description {
-		font-size: 1.4rem;
 		font-weight: normal;
 		line-height: 1.2;
-		color: @gray-light;
 		margin-top: 5px;
 		min-height: 25px
 	}
 
-	.description, .category-children {
+	.title, .description, .category-children {
 		margin-left: 62px;
 	}
-
-	.category-children {
-		display: block;
-		font-size: 15px;
-
-		small {
-			color: #999999;
-			font-size: 1.4rem;
-    		vertical-align: -2px;
-		}
-	}
 }
 
 .categories-title {
 	text-transform: uppercase;
-	color: @gray-light;
 	margin: 0 0 10px;
 	font-size: 14px;
 	font-weight: normal;
 	line-height: 1.42857143;
 }
 
-[component="category-selector"], .category-dropdown-container {
-	.fa-stack {
-		font-size: 65%;
-		border-radius: 50%;
-	}
-
-	#category-dropdown-check:checked + .dropdown-menu {
-		display: block;
-	}
-}
-
-.category-dropdown-menu {
-	max-height: 500px;
-	overflow-y: auto;
-}
 
-.merge-topic-card {
-	position: fixed;
-	bottom: 10%;
-	right: 2rem;
-	z-index: @zindex-modal;
-	.topics-section {
-		max-height: 500px;
-		overflow-y: auto;
-	}
-}
 
-@media screen and (min-width: @screen-sm-min) {
-	.merge-topic-card {
-		max-width: 33%;
-	}
-}