closes #152

10 years ago · 561669fcb4
parent 5d1e3bd198
commit 561669fcb4
4 changed files with 508 additions and 30 deletions
--- a/less/mobile.less
+++ b/less/mobile.less
@ -1,8 +1,17 @@
-#menu {
+
+.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;
 }

-
@media (max-width: 980px) {
 	body {
 		padding-top: 0;
@ -20,6 +29,7 @@
 	}

 	#menu {
+
 		padding-top: 100px;
 		background-color: #1D1F20;
 		background-image: linear-gradient(145deg, #1D1F20, #404348);
@ -69,7 +79,7 @@

 		.counter {
 			font-style: normal;
-			
+
 			&:after {
 				left: 5px;
 				top: -1px;
@ -120,19 +130,6 @@
 		}
 	}

-	.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;
@ -148,7 +145,7 @@
 	.slideout-open .slideout-menu {
 		display: block;
 	}
-	
+
 	.slideout-open {
 		overflow-y: hidden;
 		height: 100%;
--- a/lib/modules/slideout.min.js
+++ b/lib/modules/slideout.min.js
--- a/lib/persona.js
+++ b/lib/persona.js
@ -92,6 +92,8 @@ $(document).ready(function() {
 			return;
 		}

+		$('#menu').removeClass('hidden');
+
 		var slideout = new Slideout({
 			'panel': document.getElementById('panel'),
 			'menu': document.getElementById('menu'),
@ -101,7 +103,6 @@ $(document).ready(function() {
 		});

 		$('#mobile-menu').on('click', function() {
-			$('#menu').show();
 			slideout.toggle();
 		});

@ -109,11 +110,7 @@ $(document).ready(function() {
 			slideout.close();
 		});

-		$(window).on('resize', function() {
-			slideout.close();
-		});
-
-		$(window).on('action:ajaxify.start', function() {
+		$(window).on('resize action:ajaxify.start', function() {
 			slideout.close();
 		});

@ -123,8 +120,6 @@ $(document).ready(function() {
 		}

 		function openingMenu() {
-			$('#menu').show();
-
 			$('#header-menu').css({
 				'top': $(window).scrollTop() + 'px',
 				'position': 'absolute'
@ -140,9 +135,12 @@ $(document).ready(function() {
 			});
 		}

-		slideout.on('beforeopen', openingMenuAndLoad);
 		slideout.on('open', openingMenuAndLoad);
-		slideout.on('translate', openingMenu);
+		slideout.on('touchmove', function(target) {
+			if (target && $(target).is('code')) {
+				slideout._preventOpen = true;
+			}
+		});

 		slideout.on('close', function() {
 			$('#header-menu').css({
@ -150,7 +148,6 @@ $(document).ready(function() {
 				'position': 'fixed'
 			});
 			$('.slideout-open').removeClass('slideout-open');
-			$('#menu').hide();
 		});

 		$('#menu [data-section="navigation"] ul').html($('#main-nav').html() + ($('#logged-out-menu').html() || ''));
--- a/templates/header.tpl
+++ b/templates/header.tpl
@ -38,7 +38,7 @@
 </head>

 <body>
-	<nav id="menu">
+	<nav id="menu" class="hidden">
 		<section class="menu-profile">
 			<img src="{user.picture}"/>
 			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>