Merge branch 'mobile-menu'

less/header.less

@@ -1,3 +1,113 @@
+#menu, .header {
+	#notif-list {
+		overflow-x: hidden;
+		overflow-y: auto;
+		max-height: 250px;
+		padding: 0;
+
+		li {
+			font-size: 12px;
+			width: 300px;
+			text-align: left;
+			margin-bottom: 5px;
+			margin-right: 5px;
+			margin-left: 5px;
+			list-style-type: none;
+			padding: 0.5em;
+			clear: both;
+
+			img {
+				max-width: 32px;
+				max-height: 32px;
+				float: left;
+				border-radius: 50%;
+			}
+
+			a {
+				color: @text-color;
+				white-space: normal;
+				overflow: hidden;
+				margin: 0;
+				// padding: 3px 5px 3px 20px;
+				text-overflow: ellipsis;
+
+				.text {
+					margin-left: 40px;
+					margin-right: 50px;
+					display: block;
+					min-height: 32px;
+				}
+			}
+
+			&.unread {
+				.bg-variant(@state-warning-bg);
+
+				.mark-read:after {
+					content: "\f111";
+				}
+
+				.mark-read:hover:after {
+					content: "\f10c";
+				}
+			}
+
+			.mark-read {
+				color: @text-muted;
+
+				&:after {
+					font-family: "FontAwesome";
+					content: "\f10c";
+					padding: 4px 1rem;
+					position: relative;
+					top: 1px;
+				}
+
+				&:hover {
+					color: @gray-dark;
+					.pointer;
+
+					&:after {
+						content: "\f111";
+					}
+				}
+			}
+		}
+	}
+	
+	.chat-list {
+		#notif-list;
+
+		li {
+			.pointer;
+			width: 200px;
+			font-size: 16px;
+
+			a {
+				white-space: nowrap;
+				line-height: 30px;
+
+				position: relative;
+
+				i {
+					position: absolute;
+					left: -26px;
+				}
+
+				img {
+					width: 32px;
+					margin-right: 1em;
+					border-radius: 50%;
+				}
+			}
+
+			&.no_active a {
+				text-align: center;
+				white-space: normal;
+			}
+		}
+	}
+}
+
 .header {
 
 	[component="navbar/title"] {
@@ -108,81 +218,6 @@
 		}
 	}
 
-	#notif-list {
-		overflow-x: hidden;
-		overflow-y: auto;
-		max-height: 250px;
-		padding: 0;
-
-		li {
-			font-size: 12px;
-			width: 300px;
-			text-align: left;
-			margin-bottom: 5px;
-			margin-right: 5px;
-			margin-left: 5px;
-			list-style-type: none;
-			padding: 0.5em;
-			clear: both;
-
-			img {
-				max-width: 32px;
-				max-height: 32px;
-				float: left;
-				border-radius: 50%;
-			}
-
-			a {
-				color: @text-color;
-				white-space: normal;
-				overflow: hidden;
-				margin: 0;
-				// padding: 3px 5px 3px 20px;
-				text-overflow: ellipsis;
-
-				.text {
-					margin-left: 40px;
-					margin-right: 50px;
-					display: block;
-					min-height: 32px;
-				}
-			}
-
-			&.unread {
-				.bg-variant(@state-warning-bg);
-
-				.mark-read:after {
-					content: "\f111";
-				}
-
-				.mark-read:hover:after {
-					content: "\f10c";
-				}
-			}
-
-			.mark-read {
-				color: @text-muted;
-
-				&:after {
-					font-family: "FontAwesome";
-					content: "\f10c";
-					padding: 4px 1rem;
-					position: relative;
-					top: 1px;
-				}
-
-				&:hover {
-					color: @gray-dark;
-					.pointer;
-
-					&:after {
-						content: "\f111";
-					}
-				}
-			}
-		}
-	}
-
 	.notif-dropdown-link {
 		// margin-top: 1em;
 		border-top: 1px solid rgba(163, 163, 163, 0.5);
@@ -194,34 +229,8 @@
 			font-weight: 600;
 		}
 	}
-
-	#chat-list {
-		#notif-list;
-
-		li {
-			.pointer;
-			width: 200px;
-
-			a {
-				white-space: nowrap;
-				line-height: 30px;
-
-				img {
-					width: 32px;
-					margin-right: 1em;
-					border-radius: 50%;
-				}
-			}
-
-			&.no_active a {
-				text-align: center;
-				white-space: normal;
-			}
-		}
-	}
 }
 
-
 .breadcrumb {
 	li {
 		max-width: 100%;

less/mobile.less

@@ -0,0 +1,143 @@
+@media (max-width: 980px) {
+	html {
+		height: 100%;
+		overflow-y: hidden;
+	}
+
+	body {
+		height: 100%;
+		padding-top: 0;
+		padding-bottom: 0;
+		overflow-y: scroll;
+		overflow-x: hidden;
+	}
+
+	#panel {
+		background: @body-bg;
+		min-height: 100%;
+		padding-top: 80px;
+	}
+
+	#menu {
+		padding-top: 100px;
+		background-color: #1D1F20;
+		background-image: linear-gradient(145deg, #1D1F20, #404348);
+
+		a {
+			color: #fff;
+			text-decoration: none;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+
+		.chat-list li {
+			width: auto;
+
+			a {
+				color: white;
+
+				i {
+					left: 42px;
+				}
+			}
+		}
+	}
+
+	.menu-header-title {
+		font-weight: 400;
+		letter-spacing: 0.5px;
+		margin: 0;
+	}
+
+	.menu-section {
+		margin: 25px 0;
+	}
+
+	.menu-section-title {
+		text-transform: uppercase;
+		color: #85888d;
+		font-weight: 200;
+		font-size: 13px;
+		letter-spacing: 1px;
+		padding: 0 20px;
+		margin:0;
+	}
+
+	.menu-section-list {
+		padding:0;
+		margin: 10px 0;
+		list-style:none;
+
+		a {
+			display: block;
+			padding: 10px 20px;
+		}
+
+		a:hover {
+			background-color: rgba(255, 255, 255, 0.1);
+			text-decoration: none;
+		}
+	}
+
+	.slideout-menu {
+		position: fixed;
+		left: auto;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		z-index: 0;
+		width: 256px;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+		display: none;
+	}
+
+	.slideout-panel {
+		position: relative;
+		z-index: 1;
+	}
+
+	.slideout-open,
+	.slideout-open body,
+	.slideout-open .slideout-panel {
+		overflow: hidden;
+		overflow-y: hidden !important;
+	}
+
+	.slideout-open .slideout-menu {
+		display: block;
+	}
+	
+	.slideout-open {
+		overflow-y: hidden;
+		height: 100%;
+	}
+
+	.menu-profile {
+		text-align: center;
+		background: #101010;
+		position: fixed;
+		height: 75px;
+		width: 100%;
+		top: 0px;
+		z-index: 1;
+
+		img {
+			position: absolute;
+			bottom: -22px;
+			left: 93px;
+			width: 70px;
+			height: 70px;
+			border-radius: 50%;
+		}
+
+		i {
+			position: absolute;
+			left: 145px;
+			font-size: 21px;
+			top: 28px;
+		}
+	}
+}

less/persona.less

@@ -18,7 +18,7 @@
 @import "posts_list";
 @import "register";
 
-@import "slide-menu";
+@import "mobile";
 
 @import "helpers";
 @import "keyframes";

less/slide-menu.less

@@ -1,50 +0,0 @@
-@media (max-width: @screen-xs-max) {
-	#header-menu #nav-dropdown.navbar-slide-in {
-		width: 45%;
-		background: @gray-dark;
-		right: -45%;
-		min-height: 1000px;
-		position: fixed;
-		margin-top: -20px;
-		padding: 20px;
-		box-shadow: inset 2px 0px 12px black;
-		top: 0px;
-
-		a, a:hover, a:focus, a:active {
-			color: @gray-lighter;
-		}
-
-		> ul {
-			overflow: hidden;
-			
-			> li {
-				.transition(.40s ease-in-out transform);
-				transform: translate3d(-50px, 0, 0);
-				-webkit-transform: translate3d(-50px, 0, 0);
-			}
-
-			border-bottom: 1px solid lighten(@gray-dark, 10%);
-		}
-	}
-
-	#header-menu .navbar-nav>.active>a,
-	#header-menu .navbar-nav>.active>a:focus,
-	#header-menu .navbar-nav>.open>a,
-	#header-menu .navbar-nav>.open>a:focus {
-		background: inherit;
-	}
-
-	body {
-		.transition(.40s ease-in-out transform);
-
-		&.slide-in {
-			transform: translate3d(-45%, 0, 0);
-			-webkit-transform: translate3d(-45%, 0, 0);
-
-			#header-menu #nav-dropdown.navbar-slide-in > ul > li {
-				transform: translate3d(0, 0, 0);
-				-webkit-transform: translate3d(0, 0, 0);
-			}
-		}
-	}
-}

lib/persona.js

@@ -3,9 +3,11 @@
 /*globals ajaxify, config, utils, NProgress*/
 
 $(document).ready(function() {
-	setupSlideMenu();
+	setupNProgress();
+	setupTaskbar();
 	setupEditedByIcon();
 	setupPaginator();
+	setupMobileMenu();
 
 	var env = utils.findBootstrapEnvironment();
 
@@ -15,50 +17,17 @@ $(document).ready(function() {
 		});
 	}
 
-	function setupSlideMenu() {
+	function setupNProgress() {
-		$('[data-toggle="slide-in"]').on('click', function(ev) {
-			$('body').toggleClass('slide-in');
-
-			if ($('body').hasClass('slide-in')) {
-				var top = ($('html').scrollTop() || $('body').scrollTop()) + $('header-menu').height(),
-					transform = 'translate3d(0, ' + top + 'px, 0)';
-
-				$('#header-menu').css({
-					'-webkit-transform': transform,
-					'-moz-transform': transform,
-					'-ms-transform': transform,
-					'-o-transform': transform,
-					'transform': transform
-				});
-
-				$('html').css('overflow-y', 'hidden');
-			} else {
-				$('body').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
-					$('#header-menu').css({
-						'-webkit-transform': 'none',
-						'-moz-transform': 'none',
-						'-ms-transform': 'none',
-						'-o-transform': 'none',
-						'transform': 'none'
-					});
-
-					$('html').css('overflow-y', '');
-				});
-			}
-		});
-
 		$(window).on('action:ajaxify.start', function() {
-			if ($('body').hasClass('slide-in')) {
-				$('.navbar-header button').click();
-			}
-
 			NProgress.set(0.7);
 		});
 
 		$(window).on('action:ajaxify.end', function() {
 			NProgress.done();
 		});
+	}
 
+	function setupTaskbar() {
 		$(window).on('filter:taskbar.push', function(ev, data) {
 			data.options.className = 'taskbar-' + data.module;
 
@@ -189,5 +158,54 @@ $(document).ready(function() {
 		$(window).on('action:posts.loading', appendPageNumber);
 	}
 
+	function setupMobileMenu() {
+		var slideout = new Slideout({
+			'panel': document.getElementById('panel'),
+			'menu': document.getElementById('menu'),
+			'padding': 256,
+			'tolerance': 70,
+			'side': 'right'
+		});
 
+		$('#mobile-menu').on('click', function() {
+			if (!slideout.isOpen()) {
+				require(['chat', 'notifications'], function(chat, notifications) {
+					chat.loadChats($('#menu [data-section="chats"] ul'));
+					notifications.loadNotifications($('#menu [data-section="notifications"] ul'));
+				});
+			}
+
+			slideout.toggle();
+		});
+
+		$('#menu a').on('click', function() {
+			slideout.close();
+		});
+
+		$(window).on('resize', function() {
+			slideout.close();
+		});
+
+		function onOpeningMenu() {
+			$('#header-menu').css({
+				'top': $('#panel').position().top * -1 + 'px',
+				'position': 'absolute'
+			});
+		}
+
+		slideout.on('beforeopen', onOpeningMenu);
+		slideout.on('open', onOpeningMenu);
+		slideout.on('translate', onOpeningMenu);
+
+		slideout.on('close', function() {
+			$('#header-menu').css({
+				'top': '0px',
+				'position': 'fixed'
+			});
+		});
+
+		$('#menu [data-section="navigation"] ul').html($('#main-nav').html());
+		$('#menu [data-section="profile"] ul').html($('#user-control-list').html())
+			.find('[component="user/status"]').remove();
+	}
 });

package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "2.0.28",
+  "version": "2.1.0",
   "nbbpm": {
-    "compatibility": "^0.7.1"
+    "compatibility": "^0.7.4"
   },
   "description": "Persona theme for NodeBB",
   "main": "theme.less",

plugin.json

@@ -4,6 +4,7 @@
 	"scripts": [
 		"lib/persona.js",
 		"lib/modules/nprogress.js",
-		"lib/modules/autohidingnavbar.min.js"
+		"lib/modules/autohidingnavbar.min.js",
+		"lib/modules/slideout.min.js"
 	]
 }

templates/footer.tpl

@@ -1,4 +1,5 @@
-	</div><!--END container -->
+		</div><!--END container -->
+	</main>
 
 	<div class="hide tpl-500">
 	<!-- IMPORT 500.tpl -->

templates/header.tpl

@@ -38,10 +38,38 @@
 </head>
 
 <body>
-	<nav class="navbar navbar-default navbar-fixed-top header" role="navigation" id="header-menu" component="navbar">
+	<nav id="menu" class="visible-xs visible-sm">
-		<div class="container">
+		<section class="menu-profile">
-			<!-- IMPORT partials/menu.tpl -->
+			<img src="{user.picture}"/>
-		</div>
+			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i></span>
+		</section>
+
+		<section class="menu-section" data-section="navigation">
+			<h3 class="menu-section-title">[[global:header.navigation]]</h3>
+			<ul class="menu-section-list"></ul>
+		</section>
+
+		<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]]</h3>
+			<ul class="menu-section-list"></ul>
+		</section>
+
+		<section class="menu-section" data-section="chats">
+			<h3 class="menu-section-title">[[global:header.chats]]</h3>
+			<ul class="menu-section-list chat-list"></ul>
+		</section>
 	</nav>
-	<div class="container" id="content" component="header">
+
-	<!-- IMPORT partials/noscript/warning.tpl -->
+	<main id="panel">
+		<nav class="navbar navbar-default navbar-fixed-top header" role="navigation" id="header-menu" component="navbar">
+			<div class="container">
+				<!-- IMPORT partials/menu.tpl -->
+			</div>
+		</nav>
+		<div class="container" id="content" component="header">
+		<!-- IMPORT partials/noscript/warning.tpl -->

templates/partials/menu.tpl

@@ -1,5 +1,5 @@
 			<div class="navbar-header">
-				<button type="button" class="navbar-toggle" data-toggle="slide-in" data-target=".navbar-slide-in">
+				<button type="button" class="navbar-toggle" id="mobile-menu">
 					<span class="notification-icon fa fa-fw fa-bell-o" data-content="0"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
@@ -20,19 +20,19 @@
 				</div>
 			</div>
 
-			<div class="navbar-slide-in" id="nav-dropdown">
+			<div id="nav-dropdown" class="hidden-xs hidden-sm">
 				<!-- IF !maintenanceHeader -->
 				<!-- IF loggedIn -->
 
 				<ul id="logged-in-menu" class="nav navbar-nav navbar-right">
 					<li id="user_label" class="dropdown">
 						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]">
-							<img id="user-header-picture" src="{user.picture}"/> <span id="user-header-name" class="visible-xs-inline">{user.username}</span>
+							<img component="header/userpicture" src="{user.picture}"/> <span id="user-header-name" class="visible-xs-inline">{user.username}</span>
 						</a>
-						<ul id="user-control-list" class="dropdown-menu" aria-labelledby="user_dropdown">
+						<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown">
 							<li>
-								<a id="user-profile-link" href="{relative_path}/user/{user.userslug}">
+								<a component="header/profilelink" href="{relative_path}/user/{user.userslug}">
-									<i class="fa fa-fw fa-circle status {user.status}"></i> <span id="user-header-name">{user.username}</span>
+									<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i> <span component="header/username">{user.username}</span>
 								</a>
 							</li>
 							<li role="presentation" class="divider"></li>
@@ -88,13 +88,13 @@
 					</li>
 
 					<!-- IF !disableChat -->
-					<li class="chats dropdown hidden-xs">
+					<li class="chats dropdown">
-						<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown">
 							<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
 						</a>
 						<ul class="dropdown-menu" aria-labelledby="chat_dropdown">
 							<li>
-								<ul id="chat-list">
+								<ul component="chat/list" class="chat-list">
 									<li>
 										<a href="#"><i class="fa fa-refresh fa-spin"></i> [[global:chats.loading]]</a>
 									</li>
@@ -103,11 +103,6 @@
 							<li class="notif-dropdown-link"><a href="{relative_path}/chats">[[modules:chat.see_all]]</a></li>
 						</ul>
 					</li>
-					<li class="visible-xs">
-						<a href="{relative_path}/chats" id="chat_dropdown">
-							<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
-						</a>
-					</li>
 					<!-- ENDIF !disableChat -->
 				</ul>
 				<!-- ELSE -->