aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--index.html2
-rw-r--r--main.js19
-rw-r--r--style.css99
3 files changed, 110 insertions, 10 deletions
diff --git a/index.html b/index.html
index d6be025..2e03554 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/main.js b/main.js
index dd365e3..b70ff56 100644
--- a/main.js
+++ b/main.js
@@ -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');
};
})();
diff --git a/style.css b/style.css
index d66db40..a173a7e 100644
--- a/style.css
+++ b/style.css
@@ -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 {