Toggle navigation bar on mobile and desktop devices
Signed-off-by: Artem Anufrij <artem.anufrij@live.de>
This commit is contained in:
Artem Anufrij
committed by
Julius Härtl
Julius Härtl
parent
42f3f5c1dd
commit
882bf773c8
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -5,12 +5,11 @@
|
||||
<p>{{ statusservice.text }}</p></div>
|
||||
</div>
|
||||
|
||||
<div id="board-header">
|
||||
<div id="app-navigation-toggle" class="icon-menu" ng-click="navibar.show=!navibar.show"></div>
|
||||
<a class="crumb" href="#" title="<?php p($l->t('All Boards')); ?>">
|
||||
<i class="icon icon-home"></i>
|
||||
<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
|
||||
</a>
|
||||
<div id="controls">
|
||||
<div class="crumb svg last">
|
||||
<a href="#" id="button-home" title="<?php p($l->t('All Boards')); ?>">
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="title" style="border-bottom: 2px solid #{{boardservice.getCurrent().color }};">
|
||||
{{ boardservice.getCurrent().title }}
|
||||
</h1>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<div id="board-header">
|
||||
<div id="app-navigation-toggle" class="icon-menu" ng-click="navibar.show=!navibar.show"></div>
|
||||
<a class="crumb" href="#" title="<?php p($l->t('All Boards')); ?>">
|
||||
<i class="icon icon-home"></i>
|
||||
<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
|
||||
</a>
|
||||
<div id="controls">
|
||||
<div class="breadcrumb">
|
||||
<div class="crumb svg last">
|
||||
<a href="#" id="button-home" title="<?php p($l->t('All Boards')); ?>">
|
||||
</a>
|
||||
<span style="display: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="boardlist">
|
||||
<table width="100%">
|
||||
|
||||
Reference in New Issue
Block a user