diff options
| -rw-r--r-- | index.html | 6 | ||||
| -rw-r--r-- | main.js | 24 | ||||
| -rw-r--r-- | style.css | 134 |
3 files changed, 99 insertions, 65 deletions
@@ -7,12 +7,12 @@ </head> <body> <div id="map"></div> - <div id="layer-selection-btn" class="ol-control ol-unselectable"> - <button type="button" aria-expanded="false" title="Byt kartlager"> + <div id="map-menu" class="d-none"> + <button id="layer-selection-btn" type="button" aria-expanded="false" title="Byt kartlager"> <i class="bi bi-stack"></i> </button> </div> - <div id="layer-selection-panel" class="map-panel map-panel-hidden"> + <div id="layer-selection-panel" class="d-none"> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="layer-topowebb_nedtonad"> <label class="form-check-label" for="layer-topowebb_nedtonad">Nedtonad bakgrund karta</label> @@ -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); @@ -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 { |