More CSS improvements and minor refactoring.

author: Guilhem Moulin <guilhem@fripost.org> 2024-01-12 04:02:37 +0100
committer: Guilhem Moulin <guilhem@fripost.org> 2024-01-12 14:35:43 +0100
commit: 4a4750c3f6563a62fea050aa67c1f910195d1103 (patch)
tree: e5142efb44ffb7bacbe1b7b6aa7a4adb057c80cb
parent: 3194e8b8b30e0b5e17a5b5843aa04802927fd350 (diff)
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 {
author	Guilhem Moulin <guilhem@fripost.org>	2024-01-12 04:02:37 +0100
committer	Guilhem Moulin <guilhem@fripost.org>	2024-01-12 14:35:43 +0100
commit	4a4750c3f6563a62fea050aa67c1f910195d1103 (patch)
tree	e5142efb44ffb7bacbe1b7b6aa7a4adb057c80cb
parent	3194e8b8b30e0b5e17a5b5843aa04802927fd350 (diff)