diff --git a/application/layouts/scripts/body.phtml b/application/layouts/scripts/body.phtml
index 097f108f3..d981fff93 100644
--- a/application/layouts/scripts/body.phtml
+++ b/application/layouts/scripts/body.phtml
@@ -42,8 +42,11 @@ if ($this->layout()->inlineLayout) {
'id' => 'header-logo'
)
); ?>
+
- = $this->render('parts/navigation.phtml'); ?>
+ = $this->render('parts/navigation.phtml'); ?>
diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
index 7380eb10a..e96009d84 100644
--- a/public/css/icinga/responsive.less
+++ b/public/css/icinga/responsive.less
@@ -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 {
diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js
index d91fd1124..782de5af6 100644
--- a/public/js/icinga/ui.js
+++ b/public/js/icinga/ui.js
@@ -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();
}
},