diff options
-rw-r--r-- | index.html | 2 | ||||
-rw-r--r-- | main.js | 19 | ||||
-rw-r--r-- | style.css | 99 |
3 files changed, 110 insertions, 10 deletions
@@ -12,7 +12,7 @@ <i class="bi bi-stack"></i> </button> </div> - <div id="layer-selection-dialog" class="ol-control map-dialog map-dialog-hidden"> + <div id="layer-selection-panel" class="map-panel map-panel-hidden"> <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> @@ -95,12 +95,27 @@ const map = new Map({ controls: [ new Zoom({ zoomInTipLabel: 'Zooma in', + zoomInLabel: (function() { + const label = document.createElement('i'); + label.classList.add('bi', 'bi-plus'); + return label; + })(), zoomOutTipLabel: 'Zooma ut', + zoomOutLabel: (function() { + const label = document.createElement('i'); + label.classList.add('bi', 'bi-dash'); + return label; + })(), }), new Attribution({ collapsible: true, collapsed: true, tipLabel: 'Information', + label: (function() { + const label = document.createElement('i'); + label.classList.add('bi', 'bi-info'); + return label; + })(), }), ], view: new View({ @@ -128,8 +143,8 @@ const map = new Map({ element: element, })); element.onclick = function(event) { - document.getElementById('layer-selection-dialog').classList.toggle('map-dialog-hidden'); - element.classList.toggle('map-dialog-expanded'); + document.getElementById('layer-selection-panel').classList.toggle('map-panel-hidden'); + element.classList.toggle('map-panel-expanded'); }; })(); @@ -5,6 +5,12 @@ 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; } #map { position: absolute; @@ -12,19 +18,98 @@ html, body { bottom: 0; width: 100%; } +.form-check-input:focus:not(:focus-visible, :hover) { + box-shadow: none; +} +.ol-control button:focus:not(:focus-visible, :hover) { + color: var(--ol-subtle-foreground-color); + 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)); + 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); + background-clip: padding-box; + border-radius: var(--ol-control-border-radius); + width: var(--ol-control-button-size); + height: var(--ol-control-button-size); +} +.ol-control button:hover, +.ol-control button:focus { + outline: none; +} +.ol-control button:hover, +.ol-control button:focus-visible { + --ol-control-border-color: var(--ol-subtle-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); +} +.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); +} +.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); +} +.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)); +} +.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); +} +.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; } -.map-dialog-hidden { +.map-panel { + border-radius: 4px; +} +.map-panel.map-panel-hidden { display: none; } -.map-dialog { - top: .5em; - right: calc(.5em + 1.375em + 2px + .2em); - background: var(--ol-partial-background-color); - border: 1px solid var(--ol-subtle-background-color); - padding: 1ex; +.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; +} +#layer-selection-btn.map-panel-expanded button { + 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 { + background-color: var(--ol-foreground-color); } @media screen and (max-width: 500px) { #layer-selection-btn { |