nodebb-theme-persona 11.3.21 → 11.3.25

package/less/mobile.less

@@ -63,15 +63,50 @@
 			left: auto;
 			right: 7px;
 			top: 10px;
-
+			&[component="notifications/icon"] {
+				right: 41px;
+			}
 			&.unread-count::after {
 				position: static;
 			}
 		}
 	}
+	.navbar-header .navbar-search {
+		input[name="term"] {
+			width: 150px;
+		}
 
-	#menu {
-		padding-top: 100px;
+		padding: 4px 0px 4px 0px;
+	}
+	#menu .menu-section {
+		padding-top: 20px;
+	}
+	#chats-menu {
+		.nav-pills {
+			[component="user/status"] {
+				position: absolute;
+				right: 20px;
+			}
+
+			background-color: #101010;
+			height: 50px;
+			li {
+				margin: 0;
+				padding: 0;
+				width: 33%;
+				text-align: center;
+				height: 100%;
+				a {
+					height: 100%;
+					padding-top: 15px;
+				}
+				&.active {
+					a {
+						background-color: #1D1F20;
+					}
+				}
+			}
+		}
 	}
 
 	.slideout-menu {
@@ -170,7 +205,6 @@
 			font-style: normal;
 
 			&:after {
-				left: 5px;
 				top: -1px;
 				padding: 3px 7px;
 				background: #333;
@@ -189,10 +223,6 @@
 		margin: 0;
 	}
 
-	.menu-section {
-		margin: 25px 0;
-	}
-
 	.menu-section-title {
 		text-transform: uppercase;
 		color: #85888d;
@@ -205,7 +235,7 @@
 
 	.menu-section-list {
 		padding: 0;
-		margin: 10px 0;
+		margin: 0;
 		list-style: none;
 
 		a, button {

package/less/search.less

@@ -78,6 +78,13 @@
 	}
 }
 
+@media (max-width: @screen-xs-max) {
+	.quick-search-container {
+		left: 0px;
+		right: 0px;
+	}
+}
+
 .quick-search-results, .search-results {
 	.post-info {
 		font-size: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "11.3.21",
+  "version": "11.3.25",
   "nbbpm": {
     "compatibility": "^1.18.0"
   },

package/public/persona.js

@@ -10,10 +10,6 @@ $(document).ready(function () {
 	$(window).on('resize', utils.debounce(configureNavbarHiding, 200));
 	$(window).on('resize', updatePanelOffset);
 
-	$(window).on('action:app.loggedIn', function () {
-		setupMobileMenu();
-	});
-
 	$(window).on('action:app.load', function () {
 		setupTaskbar();
 		setupMobileMenu();
@@ -196,14 +192,14 @@ $(document).ready(function () {
 			return;
 		}
 
-		require(['pulling', 'storage'], function (Pulling, Storage) {
+		require(['pulling', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) {
 			if (!Pulling) {
 				return;
 			}
 
 			// initialization
 
-			var chatMenuVisible = !config.disableChat && app.user && parseInt(app.user.uid, 10);
+			var chatMenuVisible = app.user && parseInt(app.user.uid, 10);
 			var swapped = !!Storage.getItem('persona:menus:legacy-layout');
 			var margin = window.innerWidth;
 
@@ -285,19 +281,16 @@ $(document).ready(function () {
 				navSlideout.enable().toggle();
 			});
 
-			function loadNotifications() {
-				require(['notifications'], function (notifications) {
-					const notifList = $('#menu [data-section="notifications"] ul');
-					notifications.loadNotifications(notifList, function () {
-						notifList.find('.deco-none').removeClass('deco-none');
-						console.log(notifList.find('.deco-none'));
+			if (chatMenuVisible) {
+				chatsSlideout.on('opened', function loadNotifications() {
+					require(['notifications'], function (notifications) {
+						const notifList = $('#chats-menu [data-section="notifications"] ul');
+						notifications.loadNotifications(notifList, function () {
+							notifList.find('.deco-none').removeClass('deco-none');
+						});
 					});
 				});
-			}
 
-			navSlideout.on('opened', loadNotifications);
-
-			if (chatMenuVisible) {
 				navSlideout.on('beforeopen', function () {
 					chatsSlideout.close();
 					chatsSlideout.disable();
@@ -306,13 +299,16 @@ $(document).ready(function () {
 				});
 			}
 
-			$('#menu [data-section="navigation"] ul').html($('#main-nav').html() + ($('#search-menu').html() || '') + ($('#logged-out-menu').html() || ''));
+			$('#menu [data-section="navigation"] ul').html(
+				$('#main-nav').html() +
+				($('#logged-out-menu').html() || '')
+			);
 
-			$('#user-control-list').children().clone(true, true).appendTo($('#menu [data-section="profile"] ul'));
+			$('#user-control-list').children().clone(true, true).appendTo($('#chats-menu [data-section="profile"] ul'));
 
 			socket.on('event:user_status_change', function (data) {
 				if (parseInt(data.uid, 10) === app.user.uid) {
-					app.updateUserStatus($('#menu [component="user/status"]'), data.status);
+					app.updateUserStatus($('#chats-menu [component="user/status"]'), data.status);
 					navSlideout.close();
 				}
 			});
@@ -344,6 +340,37 @@ $(document).ready(function () {
 					});
 			}
 
+			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({
+						message: '[[error:search-requires-login]]',
+						timeout: 3000,
+					});
+					ajaxify.go('login');
+					return false;
+				}
+
+				searchButton.addClass('hidden');
+				searchInputEl.removeClass('hidden').focus();
+				return false;
+			});
+			searchInputEl.on('blur', function () {
+				searchInputEl.addClass('hidden');
+				searchButton.removeClass('hidden');
+			});
+			search.enableQuickSearch({
+				searchElements: {
+					inputEl: searchInputEl,
+					resultEl: $('.navbar-header .navbar-search .quick-search-container'),
+				},
+				searchOptions: {
+					in: config.searchDefaultInQuick,
+				},
+			});
+
+
 			// add a checkbox in the user settings page
 			// so users can swap the sides the menus appear on
 

package/templates/login.tpl

@@ -5,78 +5,80 @@
 	{{{end}}}
 </div>
 <div class="row login">
-	<div class="row {{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		{{{ if allowLocalLogin }}}
-		<div class="{{{ if alternate_logins }}}col-md-6{{{ else }}}col-md-12{{{ end }}}">
-			<div class="login-block">
-				<div class="alert alert-danger" id="login-error-notify" <!-- IF error -->style="display:block"<!-- ELSE -->style="display: none;"<!-- ENDIF error -->>
-					<button type="button" class="close" data-dismiss="alert">&times;</button>
-					<strong>[[login:failed_login_attempt]]</strong>
-					<p>{error}</p>
-				</div>
+	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<div class="row">
+			{{{ if allowLocalLogin }}}
+			<div class="{{{ if alternate_logins }}}col-md-6{{{ else }}}col-md-12{{{ end }}}">
+				<div class="login-block">
+					<div class="alert alert-danger" id="login-error-notify" <!-- IF error -->style="display:block"<!-- ELSE -->style="display: none;"<!-- ENDIF error -->>
+						<button type="button" class="close" data-dismiss="alert">&times;</button>
+						<strong>[[login:failed_login_attempt]]</strong>
+						<p>{error}</p>
+					</div>
 
-				<form class="form-horizontal" role="form" method="post" id="login-form">
-					<div class="form-group">
-						<label for="username" class="col-lg-2 control-label">{allowLoginWith}</label>
-						<div class="col-lg-10">
-							<input class="form-control" type="text" placeholder="{allowLoginWith}" name="username" id="username" autocorrect="off" autocapitalize="off" value="{username}"/>
+					<form class="form-horizontal" role="form" method="post" id="login-form">
+						<div class="form-group">
+							<label for="username" class="col-lg-2 control-label">{allowLoginWith}</label>
+							<div class="col-lg-10">
+								<input class="form-control" type="text" placeholder="{allowLoginWith}" name="username" id="username" autocorrect="off" autocapitalize="off" value="{username}"/>
+							</div>
 						</div>
-					</div>
-					<div class="form-group">
-						<label for="password" class="col-lg-2 control-label">[[user:password]]</label>
-						<div class="col-lg-10">
-							<input class="form-control" type="password" placeholder="[[user:password]]" name="password" id="password" <!-- IF username -->autocomplete="off"<!-- ENDIF username -->/>
-							<p id="caps-lock-warning" class="text-danger hidden">
-								<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
-							</p>
+						<div class="form-group">
+							<label for="password" class="col-lg-2 control-label">[[user:password]]</label>
+							<div class="col-lg-10">
+								<input class="form-control" type="password" placeholder="[[user:password]]" name="password" id="password" <!-- IF username -->autocomplete="off"<!-- ENDIF username -->/>
+								<p id="caps-lock-warning" class="text-danger hidden">
+									<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
+								</p>
+							</div>
 						</div>
-					</div>
-					<div class="form-group">
-						<div class="col-lg-offset-2 col-lg-10">
-							<div class="checkbox">
-								<label>
-									<input type="checkbox" name="remember" id="remember" checked /> [[login:remember_me]]
-								</label>
+						<div class="form-group">
+							<div class="col-lg-offset-2 col-lg-10">
+								<div class="checkbox">
+									<label>
+										<input type="checkbox" name="remember" id="remember" checked /> [[login:remember_me]]
+									</label>
+								</div>
 							</div>
 						</div>
-					</div>
-					{{{each loginFormEntry}}}
-					<div class="form-group loginFormEntry">
-						<label for="login-{loginFormEntry.styleName}" class="col-lg-4 control-label">{loginFormEntry.label}</label>
-						<div id="login-{loginFormEntry.styleName}" class="col-lg-8">{{loginFormEntry.html}}</div>
-					</div>
-					{{{end}}}
-					<input type="hidden" name="_csrf" value="{config.csrf_token}" />
-					<input type="hidden" name="noscript" id="noscript" value="true" />
-					<div class="form-group">
-						<div class="col-lg-offset-2 col-lg-10">
-							<button class="btn btn-primary btn-lg btn-block" id="login" type="submit">[[global:login]]</button>
-							<!-- IF allowRegistration -->
-							<span>[[login:dont_have_account]] <a href="{config.relative_path}/register">[[register:register]]</a></span>
-							<!-- ENDIF allowRegistration -->
-							<!-- IF allowPasswordReset -->
-							&nbsp; <a id="reset-link" href="{config.relative_path}/reset">[[login:forgot_password]]</a>
-							<!-- ENDIF allowPasswordReset -->
+						{{{each loginFormEntry}}}
+						<div class="form-group loginFormEntry">
+							<label for="login-{loginFormEntry.styleName}" class="col-lg-4 control-label">{loginFormEntry.label}</label>
+							<div id="login-{loginFormEntry.styleName}" class="col-lg-8">{{loginFormEntry.html}}</div>
 						</div>
-					</div>
-				</form>
+						{{{end}}}
+						<input type="hidden" name="_csrf" value="{config.csrf_token}" />
+						<input type="hidden" name="noscript" id="noscript" value="true" />
+						<div class="form-group">
+							<div class="col-lg-offset-2 col-lg-10">
+								<button class="btn btn-primary btn-lg btn-block" id="login" type="submit">[[global:login]]</button>
+								<!-- IF allowRegistration -->
+								<span>[[login:dont_have_account]] <a href="{config.relative_path}/register">[[register:register]]</a></span>
+								<!-- ENDIF allowRegistration -->
+								<!-- IF allowPasswordReset -->
+								&nbsp; <a id="reset-link" href="{config.relative_path}/reset">[[login:forgot_password]]</a>
+								<!-- ENDIF allowPasswordReset -->
+							</div>
+						</div>
+					</form>
 
+				</div>
 			</div>
-		</div>
-		{{{ end }}}
+			{{{ end }}}
 
-		{{{ if alternate_logins }}}
-		<div class="{{{ if allowLocalLogin }}}col-md-6<{{{ else }}}col-md-12{{{ end }}}">
-			<div class="alt-login-block">
-				<h4>[[login:alternative_logins]]</h4>
-				<ul class="alt-logins">
-					{{{each authentication}}}
-					<li class="{authentication.name}"><a rel="nofollow noopener noreferrer" target="_top" href="{config.relative_path}{authentication.url}"><i class="fa {authentication.icon} fa-3x"></i></a></li>
-					{{{end}}}
-				</ul>
+			{{{ if alternate_logins }}}
+			<div class="{{{ if allowLocalLogin }}}col-md-6<{{{ else }}}col-md-12{{{ end }}}">
+				<div class="alt-login-block">
+					<h4>[[login:alternative_logins]]</h4>
+					<ul class="alt-logins">
+						{{{each authentication}}}
+						<li class="{authentication.name}"><a rel="nofollow noopener noreferrer" target="_top" href="{config.relative_path}{authentication.url}"><i class="fa {authentication.icon} fa-3x"></i></a></li>
+						{{{end}}}
+					</ul>
+				</div>
 			</div>
+			{{{ end }}}
 		</div>
-		{{{ end }}}
 	</div>
 	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
 		{{{each widgets.sidebar}}}

package/templates/partials/chats-menu.tpl

@@ -1,11 +1,41 @@
-<!-- IF config.loggedIn -->
-<section class="menu-section" data-section="chats">
-	<h3 class="menu-section-title">
-		[[global:header.chats]]
-		<i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i>
-	</h3>
-	<ul class="menu-section-list chat-list" component="chat/list">
-		<a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a>
-	</ul>
-</section>
-<!-- ENDIF config.loggedIn -->
+{{{ if config.loggedIn }}}
+<ul class="nav nav-pills">
+	<li>
+		<a href="#notifications" data-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
+	</li>
+	{{{ if !config.disableChat }}}
+	<li>
+		<a href="#chats" data-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
+	</li>
+	{{{ end }}}
+	<li class="active">
+		<a href="#profile" data-toggle="tab">
+			{buildAvatar(user, "sm", true, "user-icon")}
+			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
+		</a>
+	</li>
+</ul>
+
+<div class="tab-content">
+	<div class="tab-pane fade active in" id="profile">
+		<section class="menu-section" data-section="profile">
+			<ul class="menu-section-list" component="header/usercontrol"></ul>
+		</section>
+	</div>
+	<div class="tab-pane fade" id="notifications">
+		<section class="menu-section" data-section="notifications">
+			<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
+			<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
+		</section>
+	</div>
+	{{{ if !config.disableChat }}}
+	<div class="tab-pane fade" id="chats">
+		<section class="menu-section" data-section="chats">
+			<ul class="menu-section-list chat-list" component="chat/list">
+				<a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a>
+			</ul>
+		</section>
+	</div>
+	{{{ end }}}
+</div>
+{{{ end }}}

package/templates/partials/menu.tpl

@@ -1,12 +1,28 @@
 			<div class="navbar-header">
 				<button type="button" class="navbar-toggle pull-left" id="mobile-menu">
-					<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></span>
 					<i class="fa fa-lg fa-fw fa-bars"></i>
 				</button>
-				<button type="button" class="navbar-toggle hidden" id="mobile-chats">
+				{{{ if config.loggedIn }}}
+				<button type="button" class="navbar-toggle" id="mobile-chats">
+					<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></span>
 					<span component="chat/icon" class="notification-icon fa fa-fw fa-comments unread-count" data-content="{unreadCount.chat}"></span>
-					<i class="fa fa-lg fa-comment-o"></i>
+					{buildAvatar(user, "md", true)}
 				</button>
+				{{{ end }}}
+
+				{{{ if config.searchEnabled }}}
+				<div class="navbar-search visible-xs pull-right">
+					<form action="{config.relative_path}/search" method="GET">
+						<button type="button" class="btn btn-link"><i class="fa fa-lg fa-fw fa-search" title="[[global:header.search]]"></i></button>
+						<input autocomplete="off" type="text" class="form-control hidden" name="term" placeholder="[[global:search]]"/>
+						<button class="btn btn-primary hidden" type="submit"></button>
+						<input type="text" class="hidden" name="in" value="{config.searchDefaultInQuick}" />
+					</form>
+					<div class="quick-search-container hidden">
+						<div class="quick-search-results-container"></div>
+					</div>
+				</div>
+				{{{ end }}}
 
 				<!-- IF brand:logo -->
 				<a href="<!-- IF brand:logo:url -->{brand:logo:url}<!-- ELSE -->{relative_path}/<!-- ENDIF brand:logo:url -->">

package/templates/partials/notifications_list.tpl

@@ -15,8 +15,8 @@
 
 	{{{ if ./nid }}}<div class="pull-right mark-read" aria-label="Mark Read"></div>{{{ end }}}
 	<a href="{notifications.path}" class="deco-none">
-		<span class="pull-right relTime">{notifications.timeago}</span>
 		<span class="text">{notifications.bodyShort}</span>
+		<span class="pull-right relTime">{notifications.timeago}</span>
 	</a>
 	<div class="clear"></div>
 </li>

package/templates/partials/slideout-menu.tpl

@@ -1,27 +1,5 @@
-<div class="menu-profile">
-	<!-- IF user.uid -->
-	{buildAvatar(user, "lg", true, "user-icon")}
-	<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
-	<!-- ENDIF user.uid -->
-</div>
-
 <section class="menu-section" data-section="navigation">
 	<h3 class="menu-section-title">[[global:header.navigation]]</h3>
 	<ul class="menu-section-list"></ul>
 </section>
 
-<!-- IF config.loggedIn -->
-<section class="menu-section" data-section="profile">
-	<h3 class="menu-section-title">[[global:header.profile]]</h3>
-	<ul class="menu-section-list" component="header/usercontrol"></ul>
-</section>
-
-<section class="menu-section" data-section="notifications">
-	<h3 class="menu-section-title">
-		[[global:header.notifications]]
-		<span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span>
-	</h3>
-	<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
-	<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
-</section>
-<!-- ENDIF config.loggedIn -->