From 2d9c722b3e76f54d88db19033f23564842a5d3e1 Mon Sep 17 00:00:00 2001 From: digitaldonkey Date: Mon, 30 Dec 2019 14:06:07 +0100 Subject: Fix mobile navi --- resources/assets/js/forms.js | 3 -- resources/assets/js/offcanvas.js | 13 ++++++ resources/assets/js/vendor.js | 1 + resources/assets/themes/base.less | 70 ++++++++++++++++++++++++++++++- resources/views/layouts/parts/navbar.twig | 17 ++++---- 5 files changed, 93 insertions(+), 11 deletions(-) create mode 100644 resources/assets/js/offcanvas.js diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js index 9970b907..ef81abbb 100644 --- a/resources/assets/js/forms.js +++ b/resources/assets/js/forms.js @@ -90,9 +90,6 @@ $(function () { return true; }); - $('.dropdown-menu').css('max-height', function () { - return ($(window).height() - 50) + 'px'; - }).css('overflow-y', 'scroll'); }); /* diff --git a/resources/assets/js/offcanvas.js b/resources/assets/js/offcanvas.js new file mode 100644 index 00000000..792cca7c --- /dev/null +++ b/resources/assets/js/offcanvas.js @@ -0,0 +1,13 @@ +;(function($, window, document, undefined) { + 'use strict'; + + $(document).ready(function () { + $('[data-toggle="offcanvas"]').click(function () { + var button = $(this); + button.toggleClass('is-open') + $(button.attr('data-target')).toggleClass('in'); + }); + }); + +}(jQuery, window, window.document)); + diff --git a/resources/assets/js/vendor.js b/resources/assets/js/vendor.js index b4b6487d..785dcdc1 100644 --- a/resources/assets/js/vendor.js +++ b/resources/assets/js/vendor.js @@ -6,6 +6,7 @@ require('imports-loader?this=>window&define=>false&exports=>false!moment'); require('imports-loader?this=>window&define=>false&exports=>false!moment/locale/de'); require('imports-loader?define=>false&exports=>false!eonasdan-bootstrap-datetimepicker'); require('imports-loader?this=>window!chart.js'); +require('./offcanvas'); require('./forms'); require('./sticky-headers'); require('./moment-countdown'); diff --git a/resources/assets/themes/base.less b/resources/assets/themes/base.less index 1335cd04..da505685 100644 --- a/resources/assets/themes/base.less +++ b/resources/assets/themes/base.less @@ -332,4 +332,72 @@ table a > .icon-icon_angel { a[href]:after { content: ""; } -} \ No newline at end of file +} + +.navbar-toggle { + transform: scale(1.25, 0.96); + padding: 2px 6px; + margin-top: 6px; + margin-bottom: 4px; + max-height: @navbar-height; + + .icon { + border-color: @brand-primary; + font-weight: bold; + color: @brand-primary; + font-size: 25px; + &-close { + padding: 0 3px; + display: none; + } + } + &.is-open .icon { + &-open { + display: none; + } + &-close { + display: block; + } + } +} + + +@media screen and (max-width: @grid-float-breakpoint-max) { + #navbar-offcanvas { + display: block; + position: absolute; + width: 90%; + height: calc( 100vh - @navbar-height); + max-height: unset; + left: 101%; + top: @navbar-height + 1; + + transition: left .3s ease-in-out; + -webkit-transition: left .3s ease-in-out; + + background: @navbar-default-bg; + margin: 0 !important; // Overridden in theme with high specifity: + // .container > .navbar-header, + // .container-fluid > .navbar-header, + // .container > .navbar-collapse, + // .container-fluid > .navbar-collapse + + // Is open + &.collapse.in { + left: 10%; + display: block; + overflow-y: auto; + box-shadow: -5px 20px 20px 0px rgba(0, 0, 0, 0.5), 5px 0 5px -5px rgba(0, 0, 0, 0.5); + } + + // Hide current page in nav. + .nav > li.active { + display: none; + } + .caret { + float: right; + margin-top: 7px; + } + } +} + diff --git a/resources/views/layouts/parts/navbar.twig b/resources/views/layouts/parts/navbar.twig index d5bd4fec..dc15e597 100644 --- a/resources/views/layouts/parts/navbar.twig +++ b/resources/views/layouts/parts/navbar.twig @@ -12,11 +12,12 @@ {% block navbar %}
@@ -25,7 +26,7 @@
{% block menu %} -