aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--index.html6
-rw-r--r--main.js24
-rw-r--r--style.css134
3 files changed, 99 insertions, 65 deletions
diff --git a/index.html b/index.html
index 2e03554..79b7bae 100644
--- a/index.html
+++ b/index.html
@@ -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>
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 {