tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ui: Fix sidebar issues in minimal layout 

Was completely broken even prior the removal of `ui.fixControls()`..
This commit is contained in:
Johannes Meyer 2019-12-06 13:22:58 +01:00
parent 4af48c797d
commit e61eb6f160
3 changed files with 49 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
application/layouts/scripts/body.phtml
View File

@ -42,8 +42,11 @@ if ($this->layout()->inlineLayout) {
'id' => 'header-logo'
)
); ?>
<div id="mobile-menu-toggle">
<button type="button"><?= $this->icon('menu') ?><?= $this->icon('cancel') ?></button>
</div>
</div>
<?= $this->render('parts/navigation.phtml'); ?>
<?= $this->render('parts/navigation.phtml'); ?>
</div>
<?php endif ?>
<div id="main" role="main">

36
public/css/icinga/responsive.less
View File

@ -61,17 +61,37 @@
}
}
#layout:not(.minimal-layout) {
#mobile-menu-toggle {
display: none;
}
}
#layout.minimal-layout {
#main {
left: 0;
#sidebar {
width: 100%;
}
#sidebar {
top: 0 !important;
height: 32px;
padding-bottom: 2.5em;
width: 100%;
z-index: 3;
#header-logo-container {
width: auto;
height: 2.5em;
padding: 0;
background: inherit;
}
#header-logo {
float: left;
width: 6em;
height: 2em;
margin: .25em;
}
#mobile-menu-toggle {
float: right;
}
#sidebar:not(.expanded) #menu {
display: none;
}
#menu {

31
public/js/icinga/ui.js
View File

@ -44,6 +44,11 @@
this.enableTimeCounters();
this.triggerWindowResize();
this.fadeNotificationsAway();
$(document).on('click', '#mobile-menu-toggle', this.toggleMobileMenu);
$(document).on('keypress', '#search',{ self: this, type: 'key' }, this.closeMobileMenu);
$(document).on('mouseleave', '#sidebar', { self: this, type: 'leave' }, this.closeMobileMenu);
$(document).on('click', '#sidebar a', { self: this, type: 'navigate' }, this.closeMobileMenu);
},
fadeNotificationsAway: function() {
@ -489,28 +494,26 @@
* @param {object} e Event
*/
toggleMobileMenu: function(e) {
var $sidebar = $('#sidebar');
var $target = $(e.target);
var href = $target.attr('href');
if (href) {
if (href !== '#') {
$sidebar.removeClass('expanded');
}
} else if (! $target.is('input')) {
$sidebar.toggleClass('expanded');
}
$('#sidebar').toggleClass('expanded');
},
/**
* Close mobile menu when the enter key was pressed
* Close mobile menu when the enter key is pressed during search or the user leaves the sidebar
*
* @param {object} e Event
*/
closeMobileMenu: function(e) {
var $search = $('#search');
if (e.which === 13 && $search.is(':focus')) {
if (e.data.self.currentLayout !== 'minimal') {
return;
}
if (e.data.type === 'key') {
if (e.which === 13) {
$('#sidebar').removeClass('expanded');
$(e.target)[0].blur();
}
} else {
$('#sidebar').removeClass('expanded');
$search[0].blur();
}
},