summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authordigitaldonkey <email@donkeymedia.eu>2019-12-30 14:06:07 +0100
committerIgor Scheller <igor.scheller@igorshp.de>2020-01-02 03:34:55 +0100
commit2d9c722b3e76f54d88db19033f23564842a5d3e1 (patch)
tree862aca8cc3013431a7119d1312cabe3fdb366a9f
parent61977f5da92ac35185c2622597d8e2251e0431d4 (diff)
Fix mobile navi
-rw-r--r--resources/assets/js/forms.js3
-rw-r--r--resources/assets/js/offcanvas.js13
-rw-r--r--resources/assets/js/vendor.js1
-rw-r--r--resources/assets/themes/base.less70
-rw-r--r--resources/views/layouts/parts/navbar.twig17
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>