From 882bf773c88c8616b3ccccbfd45127b0a83c3fff Mon Sep 17 00:00:00 2001 From: Artem Anufrij Date: Fri, 16 Jun 2017 23:09:00 +0200 Subject: [PATCH] Toggle navigation bar on mobile and desktop devices Signed-off-by: Artem Anufrij --- css/style.css | 74 ++++++++++++++++++------------- js/app/Run.js | 20 +++++++++ js/controller/AppController.js | 4 -- templates/main.php | 5 ++- templates/part.board.mainView.php | 11 +++-- templates/part.boardlist.php | 14 +++--- 6 files changed, 78 insertions(+), 50 deletions(-) diff --git a/css/style.css b/css/style.css index fce9324a1..364ba8fba 100644 --- a/css/style.css +++ b/css/style.css @@ -118,48 +118,66 @@ button.button-inline:hover { } #board { - position: relative; - height: 100%; + position: absolute; 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 { - background-image: url('../../../core/img/breadcrumb.svg?v=1'); - background-size: auto 24px; - background-position: right center; - background-repeat: no-repeat; - padding: 7px 14px; +#controls .crumb, #controls a { + top: 12px; } -#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; - top: 0px; - width: 44px; - height: 44px; + width: 45px; + height: 40px; 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; -} - -#stack-add input { - padding: 4px 5px; - border: 0px none transparent; - min-height: initial; - background-color: transparent; + align-content: center; } #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%; - overflow: scroll; + bottom: 0px; + 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 */ diff --git a/js/app/Run.js b/js/app/Run.js index 7d5294c28..c32bc6758 100644 --- a/js/app/Run.js +++ b/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'); + } + } + }); }); diff --git a/js/controller/AppController.js b/js/controller/AppController.js index b60a2c8bf..bc3242e0d 100644 --- a/js/controller/AppController.js +++ b/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; }); \ No newline at end of file diff --git a/templates/main.php b/templates/main.php index e5084a3f0..d1e7426ad 100644 --- a/templates/main.php +++ b/templates/main.php @@ -60,11 +60,12 @@ if(!\OC::$server->getConfig()->getSystemValue('debug', false)) {
-
+
inc('part.navigation')); ?> inc('part.settings')); */ ?>
-
+
+
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php index d0019b4bc..2cbc9a35d 100644 --- a/templates/part.board.mainView.php +++ b/templates/part.board.mainView.php @@ -5,12 +5,11 @@

{{ statusservice.text }}

-
-
- - - t('All Boards')); ?> - +
+
+ + +

{{ boardservice.getCurrent().title }}

diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php index a1514dd87..e6cbff4a4 100644 --- a/templates/part.boardlist.php +++ b/templates/part.boardlist.php @@ -1,9 +1,11 @@ -