diff options
author | digitaldonkey <email@donkeymedia.eu> | 2019-12-30 14:06:07 +0100 |
---|---|---|
committer | Igor Scheller <igor.scheller@igorshp.de> | 2020-01-02 03:34:55 +0100 |
commit | 2d9c722b3e76f54d88db19033f23564842a5d3e1 (patch) | |
tree | 862aca8cc3013431a7119d1312cabe3fdb366a9f | |
parent | 61977f5da92ac35185c2622597d8e2251e0431d4 (diff) |
Fix mobile navi
-rw-r--r-- | resources/assets/js/forms.js | 3 | ||||
-rw-r--r-- | resources/assets/js/offcanvas.js | 13 | ||||
-rw-r--r-- | resources/assets/js/vendor.js | 1 | ||||
-rw-r--r-- | resources/assets/themes/base.less | 70 | ||||
-rw-r--r-- | resources/views/layouts/parts/navbar.twig | 17 |
5 files changed, 93 insertions, 11 deletions
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 %} <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" - data-toggle="collapse" data-target="#navbar-collapse-1"> + data-toggle="offcanvas" data-target="#navbar-offcanvas"> <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> + <span class="icon icon-open">☰</span> + <span class="icon icon-close">×</span> + + </button> <a class="navbar-brand" href="{{ url('/') }}"> <span class="icon-icon_angel"></span> @@ -25,7 +26,7 @@ </div> {% block menu %} - <div class="collapse navbar-collapse" id="navbar-collapse-1"> + <div class="collapse navbar-collapse" id="navbar-offcanvas"> {% block menu_items %} {{ menu() }} @@ -65,7 +66,7 @@ {{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }} {% endif %} - <li class="dropdown"> + <li class="hidden-xs"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </a> @@ -73,7 +74,9 @@ {{ menuUserSubmenu()|join(" ")|raw }} </ul> </li> - + </ul> + <ul class="nav navbar-nav navbar-mobile hidden-sm hidden-md hidden-lg"> + {{ menuUserSubmenu()|join(" ")|raw }} </ul> {% endblock %} </div> |