Toggle navigation bar on mobile and desktop devices

Signed-off-by: Artem Anufrij <artem.anufrij@live.de>

css/style.css

@@ -118,48 +118,66 @@ button.button-inline:hover {
 }
 
 #board {
-	position: relative;
+	position: absolute;
-	height: 100%;
 	white-space: nowrap;
 	overflow: auto;
 	z-index: 100;
 	width: 100%;
+	bottom: 0px;
+	top: 44px;
 }
 
 #board #innerBoard {
 	padding: 10px;
 }
 
-#board-header {
+#controls {
 	width: inherit;
-	color: #333333;
-	position: relative;
 	z-index: 120;
-	min-height: 44px;
 	display: flex;
 	align-items: center;
 	font-size: 14pt;
+	position: inherit;
+	width: 100% !important;
+    padding-left: 44px;
 }
 
-#board-header .crumb {
+#controls .crumb, #controls a {
-	background-image: url('../../../core/img/breadcrumb.svg?v=1');
+	top: 12px;
-	background-size: auto 24px;
-	background-position: right center;
-	background-repeat: no-repeat;
-	padding: 7px 14px;
 }
 
-#board-header > h1 {
+#controls > h1 {
 	white-space: nowrap;
 	padding: 7px;
 }
 
+#controls button {
+	height: inherit;
+}
+
+#controls input[type='text'] {
+	padding: 4px 5px;
+	margin: 3px 3px 3px 0px;
+	border: 0px none transparent;
+	min-height: initial;
+	background-color: transparent;
+	height: inherit;
+}
+
+#controls #button-home {
+	background-image: url(../../../core/img/places/home.svg);
+	background-position: 8px center;
+	background-repeat: no-repeat;
+	padding: 10px 24px 10px 14px;
+}
+
 #app-navigation-toggle {
-	position: relative;
+	width: 45px;
-	top: 0px;
+	height: 40px;
-	width: 44px;
-	height: 44px;
 	cursor: pointer;
+	opacity: 1;
+	display: inline-block !important;
+	position: fixed;
 }
 
 .board-header-controls {
@@ -210,17 +228,13 @@ button.button-inline:hover {
 	background-color: rgba(240,240,240,.9);
 	border-radius: 3px;
 	margin: 3px;
+	display: flex;
+	align-content: center;
 }
 
 #stack-add > form {
 	display: flex;
-}
+	align-content: center;
-
-#stack-add input {
-	padding: 4px 5px;
-	border: 0px none transparent;
-	min-height: initial;
-	background-color: transparent;
 }
 
 #stack-add input:invalid {
@@ -707,9 +721,11 @@ button.button-inline:hover {
  * Board list main screen area
  */
 #boardlist {
+	position: absolute;
+	overflow: auto;
 	width: 100%;
-	height: 100%;
+	bottom: 0px;
-	overflow: scroll;
+	top: 44px;
 }
 
 #boardlist thead td {
@@ -965,12 +981,6 @@ button.button-inline:hover {
 	}
 }
 
-@media (max-width: 768px) {
-	#app-navigation-toggle {
-		display: none !important;
-	}
-}
-
 /**
  * Markdown rendering
  */

js/app/Run.js

@@ -53,4 +53,24 @@ app.run(function ($document, $rootScope, $transitions, BoardService) {
         OC.filePath('deck', 'img', 'app-512.png')
     );
 
+    $('#app-navigation-toggle').off('click');
+    // App sidebar on mobile
+    var snapper = new Snap({
+        element: document.getElementById('app-content'),
+        disable: 'right',
+        maxPosition: 250,
+        minDragDistance: 100
+    });
+
+    $('#app-navigation-toggle').click(function(){
+        if($(window).width() > 768) {
+            $('#app-navigation').toggle('hidde');
+        } else {
+            if(snapper.state().state == 'left'){
+                snapper.close();
+            } else {
+                snapper.open('left');
+            }
+        }
+    });
 });

js/controller/AppController.js

@@ -24,10 +24,6 @@ app.controller('AppController', function ($scope, $location, $http, $route, $log
     $rootScope.sidebar = {
         show: false
     };
-    $rootScope.navibar = {
-        show: true
-    };
     $scope.sidebar = $rootScope.sidebar;
-    $scope.navibar = $rootScope.navibar;
     $scope.user = oc_current_user;
 });

templates/main.php

@@ -60,11 +60,12 @@ if(!\OC::$server->getConfig()->getSystemValue('debug', false)) {
 
 <div id="app" class="app-deck" data-ng-app="Deck" ng-controller="AppController" ng-cloak>
 
-	<div id="app-navigation" data-ng-controller="ListController" ng-init="initSidebar()" ng-if="navibar.show">
+	<div id="app-navigation" data-ng-controller="ListController" ng-init="initSidebar()">
 		<?php print_unescaped($this->inc('part.navigation')); ?>
 		<?php /* print_unescaped($this->inc('part.settings')); */ ?>
 	</div>
-	<div id="app-content" ng-class="{ 'details-visible': sidebar.show }" ui-view>
+	<div id="app-content" ng-class="{ 'details-visible': sidebar.show }">
+		<div ui-view></div>
 	</div>
 	<route-loading-indicator></route-loading-indicator>
 

templates/part.board.mainView.php

@@ -5,12 +5,11 @@
 		<p>{{ statusservice.text }}</p></div>
 </div>
 
-<div id="board-header">
+<div id="controls">
-	<div id="app-navigation-toggle" class="icon-menu" ng-click="navibar.show=!navibar.show"></div>
+	<div class="crumb svg last">
-	<a class="crumb" href="#" title="<?php p($l->t('All Boards')); ?>">
+		<a href="#" id="button-home" title="<?php p($l->t('All Boards')); ?>">
-		<i class="icon icon-home"></i>
+		</a>
-		<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
+	</div>
-	</a>
 	<h1 class="title" style="border-bottom: 2px solid #{{boardservice.getCurrent().color }};">
 		{{ boardservice.getCurrent().title }}
 	</h1>

templates/part.boardlist.php

@@ -1,9 +1,11 @@
-<div id="board-header">
+<div id="controls">
-	<div id="app-navigation-toggle" class="icon-menu" ng-click="navibar.show=!navibar.show"></div>
+	<div class="breadcrumb">
-	<a class="crumb" href="#" title="<?php p($l->t('All Boards')); ?>">
+		<div class="crumb svg last">
-		<i class="icon icon-home"></i>
+			<a href="#" id="button-home" title="<?php p($l->t('All Boards')); ?>">
-		<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
+			</a>
-	</a>
+			<span style="display: none;"></span>
+		</div>
+	</div>
 </div>
 <div id="boardlist">
 	<table width="100%">