diff --git a/www/Themes/Centreon-2/MobileMenu/css/material_icons.css b/www/Themes/Centreon-2/MobileMenu/css/material_icons.css new file mode 100644 index 00000000000..c7c37efe7f6 --- /dev/null +++ b/www/Themes/Centreon-2/MobileMenu/css/material_icons.css @@ -0,0 +1,22 @@ +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(../fonts/material_icons.woff2) format('woff2'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} \ No newline at end of file diff --git a/www/Themes/Centreon-2/MobileMenu/css/menu.css b/www/Themes/Centreon-2/MobileMenu/css/menu.css new file mode 100644 index 00000000000..b993daa43bf --- /dev/null +++ b/www/Themes/Centreon-2/MobileMenu/css/menu.css @@ -0,0 +1,141 @@ +.nav-top { + box-sizing: border-box; + display: flex; + align-items: center; + position: fixed; + z-index: 101; + padding: 10px 20px; + width: 100%; + height: 50px; + background-color: #0072ce; +} + +.nav-top .logo { + display: flex; + position: fixed; + z-index: 102; + right:20px; + width: 150px; + height: 50px; + background-image: url("/centreon/img/centreon_white.png"); + background-position: 98% center; + background-repeat: no-repeat; + background-size: 150px; +} + +.nav-top .hamburger { + margin-left: 0px; + color: #fff; + cursor: pointer; +} + +.nav-drill { + font-family: "Fira Sans", Arial, sans-serif; + font-size: 16px; + line-height: 1.875em; + margin-top: 50px; + -webkit-transform: translateX(0%); + transform: translateX(0%); +} + +.nav-is-toggled .nav-drill { + -webkit-transform: translateX(100%); + transform: translateX(100%); +} + +.nav-is-toggled::after { + opacity: 1; + visibility: visible; +} + +.nav-drill { + display: flex; + position: fixed; + z-index: 100; + top: 0; + left: -250px; + width: 250px; + height: 100vh; + background-color: #fff; + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + transition: 0.45s; +} + +.nav-items { + width: 250px; +} + +.nav-items a { + text-decoration: none; +} + +.nav-level-1 { + border-right: 1px solid #0072ce; +} + +.nav-item:not(:last-child) { + border-bottom: solid 1px #cee9ff; +} + +.nav-link { + display: block; + padding: 0.875em 1em; + background-color: #fff; + color: #0072ce; + font-size: 1rem; + line-height: 1.5em; + font-weight: 300; +} + +.nav-expand-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-transform: translateX(100%); + transform: translateX(100%); + background-color: #cee9ff; + transition: 0.3s; + visibility: hidden; +} + +.nav-expand-content .nav-item:not(:last-child) { + border-bottom: solid 1px #0072ce; +} + +.nav-expand-content .nav-link { + background-color: #cee9ff; +} + +.nav-expand-content .nav-back-link { + display: flex; + align-items: center; + background-color: #0072ce !important; + color: #fff; +} + +.nav-expand-content .nav-back-link::before { + content: "chevron_left"; + margin-right: 0.5em; + font-family: "Material Icons"; +} + +.nav-expand-link { + display: flex; + justify-content: space-between; +} + +.nav-expand-link::after { + content: "chevron_right"; + flex: 0 1 auto; + font-family: "Material Icons"; +} + +.nav-expand.active > .nav-expand-content { + -webkit-transform: translateX(0); + transform: translateX(0); + visibility: visible; +} \ No newline at end of file diff --git a/www/Themes/Centreon-2/MobileMenu/fonts/material_icons.woff2 b/www/Themes/Centreon-2/MobileMenu/fonts/material_icons.woff2 new file mode 100644 index 00000000000..5ef5555c5d2 Binary files /dev/null and b/www/Themes/Centreon-2/MobileMenu/fonts/material_icons.woff2 differ diff --git a/www/Themes/Centreon-2/MobileMenu/js/menu.js b/www/Themes/Centreon-2/MobileMenu/js/menu.js new file mode 100644 index 00000000000..0389ce22242 --- /dev/null +++ b/www/Themes/Centreon-2/MobileMenu/js/menu.js @@ -0,0 +1,32 @@ +var isMobile = true; + +$(document).ready(function() { + var navExpand = [].slice.call(document.querySelectorAll('.nav-expand')); + var backLink = + '
  • \n\t' + + '' + + '\n\t\t' + text_back + '\n\t' + + '\n
    • '; + + navExpand.forEach(function (item) { + item.querySelector('.nav-expand-content') + .insertAdjacentHTML('afterbegin', backLink); + item.querySelector('.nav-link') + .addEventListener('click', function () { + return item.classList.add('active'); + }); + item.querySelector('.nav-back-link') + .addEventListener('click', function () { + return item.classList.remove('active'); + }); + }); + + document.getElementById('ham') + .addEventListener('click', function () { + document.body.classList.toggle('nav-is-toggled'); + }); + $('nav.nav-drill').on('click', function(event) { + event.stopImmediatePropagation(); + }); + $('section.main').css({'padding-top': '50px'}); +}); \ No newline at end of file diff --git a/www/img/centreon_white.png b/www/img/centreon_white.png new file mode 100644 index 00000000000..7f6c8ddb19d Binary files /dev/null and b/www/img/centreon_white.png differ diff --git a/www/include/common/mobile_menu.php b/www/include/common/mobile_menu.php new file mode 100644 index 00000000000..567d75505b5 --- /dev/null +++ b/www/include/common/mobile_menu.php @@ -0,0 +1,31 @@ +
    + menu + +
    + \ No newline at end of file diff --git a/www/include/core/footer/footerPart.php b/www/include/core/footer/footerPart.php index f3a14d107b0..4c726717fd5 100644 --- a/www/include/core/footer/footerPart.php +++ b/www/include/core/footer/footerPart.php @@ -293,8 +293,8 @@ function parentHrefUpdate(href) { function(e) { var href = jQuery(this).attr('href'); var isHandled = jQuery(this).is('[onload]') || - jQuery(this).is('[onclick]') || - (href.match(/^javascript:/) !== null) + jQuery(this).is('[onclick]') || + (href.match(/^javascript:/) !== null) ; // if it's a relative path, we can use the default redirection @@ -311,7 +311,10 @@ function(e) { window.open(href); // If it's an internal link, we remove header to avoid inception } else { - href = href.replace('main.php', 'main.get.php'); + // isMobile is declared in the menu.js file + if (typeof isMobile === 'undefined' || isMobile !== true) { + href = href.replace('main.php', 'main.get.php'); + } window.location.href = href; } diff --git a/www/include/core/header/htmlHeader.php b/www/include/core/header/htmlHeader.php index 79d1f3e598c..fa6dfc1168a 100644 --- a/www/include/core/header/htmlHeader.php +++ b/www/include/core/header/htmlHeader.php @@ -43,13 +43,15 @@ - Centreon - IT & Network Monitoring - + + + + @@ -117,6 +119,12 @@ + + + + + - \ No newline at end of file + + +user); + $treeMenu = $menu->getMenu(); + require_once 'main.get.php'; +} else { + include('./index.html'); +}