Nedtonad bakgrund karta diff --git a/main.js b/main.js index b70ff56..3b6d2ec 100644 --- a/main.js +++ b/main.js @@ -134,20 +134,30 @@ const map = new Map({ source: baseMapSource }), ], - target: document.getElementById('map'), }); +map.setTarget(document.getElementById('map')); (function() { - const element = document.getElementById('layer-selection-btn'); + const menu = document.getElementById('map-menu'); + map.getViewport().append(menu); map.addControl(new Control({ - element: element, + element: menu, })); - element.onclick = function(event) { - document.getElementById('layer-selection-panel').classList.toggle('map-panel-hidden'); - element.classList.toggle('map-panel-expanded'); - }; + menu.classList.remove('d-none'); })(); +document.getElementById('layer-selection-btn').onclick = function(event) { + const btn = document.getElementById('layer-selection-btn'); + const panel = document.getElementById('layer-selection-panel'); + if (btn.ariaExpanded === 'true') { + panel.classList.add('d-none'); + btn.ariaExpanded = 'false'; + } else { + panel.classList.remove('d-none'); + btn.ariaExpanded = 'true'; + } +}; + document.getElementById('layer-topowebb_nedtonad').onchange = function(event) { const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb'; baseMapSource.setUrl('https://minkarta.lantmateriet.se/map/topowebbcache?LAYER=' + layer); diff --git a/style.css b/style.css index a173a7e..7840390 100644 --- a/style.css +++ b/style.css @@ -5,12 +5,23 @@ html, body { margin: 0; height: 100%; - --ol-partial-background-color: rgba(255, 255, 255, .95); - --ol-control-factor-size: 1; - --ol-control-border-width: 10px; - --ol-control-border-radius: 40px; - --ol-control-border-color: var(--ol-subtle-background-color); - --ol-control-button-size: 3em; + --ol-partial-background-color: rgba(255, 255, 255, .9); + --ol-background-color: var(--bs-body-bg); + --ol-foreground-color: var(--bs-body-color); + --menu-factor-size: 1.75; + --menu-border-width: 2px; + --menu-border-radius: 4px; + --menu-border-color: var(--ol-subtle-background-color); + --menu-button-size: 1.75em; + --menu-spacing: .5em; + --menu-spacing-interline: .25em; +} +@media screen and (max-width: 500px) { + html, body { + --menu-factor-size: 1; + --menu-border-width: 1px; + --menu-border-radius: 2px; + } } #map { position: absolute; @@ -26,90 +37,103 @@ html, body { text-decoration: none; outline: none; } -@media screen and (min-width: 501px) { - .ol-control { - --ol-control-factor-size: 1.75; - } -} -.ol-control { - font-size: calc(100% * var(--ol-control-factor-size)); +.ol-control, #map-menu { + font-size: calc(100% * var(--menu-factor-size)); background-color: transparent; - /* border-radius: var(--ol-control-border-radius); */ } -.ol-control button { - border: var(--ol-control-border-width) solid var(--ol-control-border-color); - background-color: var(--ol-partial-background-color); +.ol-control button, +#map-menu button, +#layer-selection-panel { + border: var(--menu-border-width) solid var(--menu-border-color); + background-color: var(--ol-background-color); background-clip: padding-box; - border-radius: var(--ol-control-border-radius); - width: var(--ol-control-button-size); - height: var(--ol-control-button-size); + border-radius: var(--menu-border-radius); + color: var(--ol-subtle-foreground-color); +} +.ol-control button, #map-menu button { + width: var(--menu-button-size); + height: var(--menu-button-size); + font-size: inherit; + text-align: center; + font-weight: bold; + text-decoration: none; + display: block; + line-height: .4em; + padding: 0; } .ol-control button:hover, -.ol-control button:focus { +.ol-control button:focus, +#map-menu button:hover, +#map-menu button:focus { outline: none; } .ol-control button:hover, -.ol-control button:focus-visible { - --ol-control-border-color: var(--ol-subtle-foreground-color); +.ol-control button:focus-visible, +#map-menu button:hover, +#map-menu button:focus-visible { + --menu-border-color: var(--ol-subtle-foreground-color); + color: var(--ol-foreground-color); } .ol-zoom > .ol-zoom-in, .ol-zoom > .ol-zoom-out { margin: 0; - height: calc(var(--ol-control-button-size) - var(--ol-control-border-width) * .5); + --menu-button-size: 1.375em; + height: calc(var(--menu-button-size) - var(--menu-border-width) * .5) !important; } .ol-zoom > button.ol-zoom-in:hover, .ol-zoom > button.ol-zoom-in:focus-visible, .ol-zoom > button.ol-zoom-out:hover, .ol-zoom > button.ol-zoom-out:focus-visible { - height: var(--ol-control-button-size); + position: relative; + z-index: 1; + height: var(--menu-button-size) !important; } .ol-zoom > .ol-zoom-in { - border-radius: var(--ol-control-border-radius) var(--ol-control-border-radius) 0 0; - border-bottom-width: calc(var(--ol-control-border-width) * .5); + border-radius: var(--menu-border-radius) var(--menu-border-radius) 0 0; + border-bottom-width: calc(var(--menu-border-width) * .5); } .ol-zoom > button.ol-zoom-in:hover, .ol-zoom > button.ol-zoom-in:focus-visible { - border-bottom-width: var(--ol-control-border-width); - margin-bottom: calc(-.5 * var(--ol-control-border-width)); + border-bottom-width: var(--menu-border-width); + margin-bottom: calc(-.5 * var(--menu-border-width)); } .ol-zoom > .ol-zoom-out { - border-radius: 0 0 var(--ol-control-border-radius) var(--ol-control-border-radius); - border-top-width: calc(var(--ol-control-border-width) * .5); + border-radius: 0 0 var(--menu-border-radius) var(--menu-border-radius); + border-top-width: calc(var(--menu-border-width) * .5); } .ol-zoom > button.ol-zoom-out:hover, .ol-zoom > button.ol-zoom-out:focus-visible { - border-top-width: var(--ol-control-border-width); - margin-top: calc(-.5 * var(--ol-control-border-width)); -} -#layer-selection-btn { - right: .5em; - top: .5em; + border-top-width: var(--menu-border-width); + margin-top: calc(-.5 * var(--menu-border-width)); } -.map-panel { - border-radius: 4px; +#map-menu { + position: absolute; + right: var(--menu-spacing); + top: var(--menu-spacing); + margin: 0; } -.map-panel.map-panel-hidden { - display: none; +#map-menu button { + margin-top: var(--menu-spacing-interline); } -.map-panel { - position: absolute; - top: calc(.5em * var(--ol-control-factor-size)); - right: calc((.5em + 1.375em) * var(--ol-control-factor-size) + 1px - + .2em * var(--ol-control-factor-size)); - background-color: var(--ol-subtle-background-color); -} -.map-panel > div { - background-color: var(--ol-partial-background-color); - margin: 10px; - padding: .75ex; +#map-menu button:first-child { + margin-top: 0; } -#layer-selection-btn.map-panel-expanded button { + +#map-menu button[aria-expanded="true"] { background-color: var(--ol-subtle-foreground-color); color: var(--ol-background-color); } -#layer-selection-btn.map-panel-expanded button:hover, -#layer-selection-btn.map-panel-expanded button:focus-visible { +#map-menu button[aria-expanded="true"]:hover, +#map-menu button[aria-expanded="true"]:focus-visible { background-color: var(--ol-foreground-color); + border-color: var(--ol-foreground-color); +} +#layer-selection-panel { + position: absolute; + top: calc(var(--menu-spacing) * var(--menu-factor-size)); + right: calc((var(--menu-spacing) + var(--menu-button-size) + var(--menu-spacing-interline)) * var(--menu-factor-size)); + padding: .75ex; + color: var(--ol-foreground-color); } @media screen and (max-width: 500px) { #layer-selection-btn { -- cgit v1.2.3