diff --git a/blueprints.yaml b/blueprints.yaml index 8a172ca..1525377 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -1,5 +1,5 @@ name: Reitanlage Oranienburg -version: 1.4.8 +version: 1.5.0 description: Design der Reitanlage Oranienburg icon: rebel author: diff --git a/package.json b/package.json index d16c518..a090007 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reitanlage-oranienburg", - "version": "1.4.8", + "version": "1.5.0", "description": "The Reitanlage Oranienburg Theme for Grav CMS.", "main": "index.js", "scripts": { diff --git a/src/css/sidebar.css b/src/css/sidebar.css index 0bd99ea..4a565b5 100644 --- a/src/css/sidebar.css +++ b/src/css/sidebar.css @@ -4,7 +4,11 @@ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE) */ -#wrapper, #sidebar-wrapper, #menu-toggle-icon { +#wrapper, +#sidebar-wrapper, +#menu-toggle-icon, +#menu-toggle, +.sidebar-nav { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; @@ -57,10 +61,6 @@ padding: 0.5em; text-align: center; color: #fff; - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; } .content-wrapper { @@ -82,10 +82,6 @@ padding: 0; padding-bottom: 3em; list-style: none; - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper .sidebar-nav { @@ -157,14 +153,11 @@ height: 3em; } -@media (min-width: 576px) { - .sidebar-nav { - width: 0; - } +@media (min-width: 768px) { #sidebar-wrapper { left: 250px; - width: 3em; + width: 250px; height: 100%; margin-left: -250px; @@ -173,7 +166,7 @@ #wrapper { padding-top: 0em; - padding-left: 3em; + padding-left: 250px !important; } .content-wrapper { @@ -181,28 +174,15 @@ position: relative; } - #wrapper.toggled #menu-toggle-icon { - -moz-transform: scale(-1, 1); - -webkit-transform: scale(-1, 1); - -o-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); - } - - #wrapper.toggled #sidebar-wrapper { - width: 250px; - } - - #wrapper.toggled { - padding-left: 250px; - } - - #wrapper.toggled #sidebar-wrapper .sidebar-nav { + #wrapper #sidebar-wrapper .sidebar-nav { width: 100%; } #menu-toggle { - width: auto; - text-align: right; + visibility: hidden; + } + + .sidebar-nav>.sidebar-spacer { + height: 0; } } diff --git a/src/js/app.js b/src/js/app.js index 769cbc1..f101b62 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -10,3 +10,17 @@ document.querySelector("#menu-toggle").onclick = function(e) { e.preventDefault(); document.querySelector("#wrapper").classList.toggle("toggled"); }; + +let min_width_query = window.matchMedia("(min-width: 768px)"); + +function check_and_open_navbar(mwq) { + if (mwq.matches) { + document.querySelector("#wrapper").classList.add("toggled"); + } +} + +min_width_query.addEventListener("change", function(e) { + check_and_open_navbar(e); +}); + +check_and_open_navbar(min_width_query); diff --git a/templates/partials/osm.html.twig b/templates/partials/osm.html.twig index 4f32b03..c62b253 100644 --- a/templates/partials/osm.html.twig +++ b/templates/partials/osm.html.twig @@ -4,8 +4,8 @@ <a target="_blank" rel="noopener" href="https://www.openstreetmap.org/way/203340031" data-umami-event="OSM button"> <img class="w-100" alt="Diese Karte zeigt unseren Hof" src="{{ url('theme://images/map.webp') }}"> </a> - <small class="d-block position-absolute bottom-0 start-0"> - <a class="bg-white text-black p-1" target="_blank" rel="noopener" href="https://goo.gl/maps/WFYcPCQVA5u2vegy8" data-umami-event="Google-Maps button"> + <small class="d-block position-absolute bottom-0 start-0 mb-3"> + <a class="bg-white text-black p-3 border border-white" target="_blank" rel="noopener" href="https://goo.gl/maps/WFYcPCQVA5u2vegy8" data-umami-event="Google-Maps button"> Auf Google Maps öffnen </a> </small>