diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index daa2afd75f..dedad0d236 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -1,6 +1,6 @@ /* Created on : 17.02.2016, 23:55:45 - Author : rabuzarus + Author : rabuzarus and contributors */ body { @@ -383,6 +383,86 @@ header #banner #logo-img, color: $nav_icon_color; } +/* offcanvas section */ + +/* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active + .offcanvas-right and .offcanvas-right-overlay */ +.off-canvas { + width: 300px; + position: fixed; + left: 0; + top: 0; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + background-color: #333; + transform: translateX(-100%); + transition: 0.4s ease-in-out; + z-index: 1060; +} +#offcanvasUsermenu { + width: 300px; + position: fixed; + right: 0px; + top: 50px; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + background-color: #333; + transform: translateX(100%); + transition: 0.4s ease-in-out; + z-index: 1060; +} +.offcanvas-active .off-canvas { + transform: translateX(0); +} +.offcanvas-right-active #offcanvasUsermenu { + transform: translateX(0); +} +.navbar-fixed-top { + transition: 0.4s ease-in-out; + width: 100%; +} +.page-wrapper { + padding-top: 50px; + transition: 0.4s ease-in-out; +} +.offcanvas-active .page-wrapper, +.offcanvas-active .navbar-fixed-top { + transform: translateX(300px); +} + +.offcanvas-overlay { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1050; + visibility: hidden; + opacity: 0; + transition: 0.4s ease-in-out; +} +.offcanvas-right-overlay { + position: fixed; + right: 0; + top: 50px; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1050; + visibility: hidden; + opacity: 0; + transition: 0.4s ease-in-out; +} +.offcanvas-active .offcanvas-overlay, +.offcanvas-right-active .offcanvas-right-overlay { + opacity: 1; + visibility: visible; +} +/* offcanvas section ends */ + /* NavBar */ .topbar { position: fixed; @@ -470,7 +550,8 @@ nav.navbar .nav > li > button { #topbar-first .nav > li > button:not(#main-menu):hover, #topbar-first .nav > li > button:not(#main-menu):focus, nav.navbar .nav > li > a:hover, -nav.navbar .nav > li > a:focus nav.navbar .nav > li > button:hover, +nav.navbar .nav > li > a:focus, +nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: $nav_icon_hover_color; } @@ -663,34 +744,43 @@ nav.navbar .nav > li > button:focus { right: -2px; background-color: #ff8989; } -#myNavmenu { +#offcanvasUsermenu { top: 50px; background-color: $background_color; border-top: 0; border-right: 0; border-bottom: 0; border-left-color: $nav_icon_color; - box-shadow: 0 0 3px black; + box-shadow: -3px 0 3px -3px black; } -#myNavmenu ul, -#myNavmenu ul li:first-child, -#myNavmenu ul, -#myNavmenu ul li:last-child { +#offcanvasUsermenu .nav-container { + /* required to compensate for moving the container below the topnav bar */ + margin-bottom: 50px; +} +#offcanvasUsermenu li.divider { + background-color: transparent; + height: 3px; +} + +#offcanvasUsermenu ul, +#offcanvasUsermenu ul li:first-child, +#offcanvasUsermenu ul, +#offcanvasUsermenu ul li:last-child { border-radius: 0; } -#myNavmenu li, -#myNavmenu a { +#offcanvasUsermenu li, +#offcanvasUsermenu a { background-color: $nav_bg; color: $nav_icon_color; } -#myNavmenu li.list-group-item { +#offcanvasUsermenu li.list-group-item { border-color: $background_color; } -#myNavmenu a { +#offcanvasUsermenu a { display: block; } -#myNavmenu li.nav-sitename { +#offcanvasUsermenu li.nav-sitename { font-weight: bold; } #topbar-first .dropdown.account li#nav-sitename { diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index c335df181c..fcf99dc5e6 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -373,6 +373,29 @@ $(document).ready(function () { $body.removeClass("aside-out"); }); + // Right offcanvas elements + let $offcanvas_right_toggle = $(".offcanvas-right-toggle"); + let $offcanvas_right_container = $("#offcanvasUsermenu"); // Use ID for faster lookup, class is .offcanvas-right + + $offcanvas_right_toggle.on("click", function (event) { + event.preventDefault(); + $("body").toggleClass("offcanvas-right-active"); + }); + + // Close the right offcanvas menu when clicking somewhere + $(document).on("mouseup touchend", function (event) { + if ( + // Clicked element is not inside the menu + !$offcanvas_right_container.is(event.target) && + $offcanvas_right_container.has(event.target).length === 0 && + // Clicked element is not the toggle button (taken care by the toggleClass above) + !$offcanvas_right_toggle.is(event.target) && + $offcanvas_right_toggle.has(event.target).length === 0 + ) { + $("body").removeClass("offcanvas-right-active"); + } + }); + // Event listener for 'Show & hide event map' button in the network stream. $body.on("click", ".event-map-btn", function () { showHideEventMap(this); diff --git a/view/theme/frio/templates/nav.tpl b/view/theme/frio/templates/nav.tpl index e448313ea8..8e1b25757b 100644 --- a/view/theme/frio/templates/nav.tpl +++ b/view/theme/frio/templates/nav.tpl @@ -7,7 +7,7 @@