aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--index.html2
-rw-r--r--main.js1
-rw-r--r--style.css67
3 files changed, 48 insertions, 22 deletions
diff --git a/index.html b/index.html
index 25ee9aa..801dbe4 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
</head>
<body>
<div id="map"></div>
+ <div id="zoom-control"></div>
<div id="map-control-container" aria-hidden="true">
- <div id="zoom-control"></div>
<div id="layer-selection-panel"></div>
<div id="map-legend-panel"></div>
<div id="map-menu"></div>
diff --git a/main.js b/main.js
index 15c82ed..f09ce31 100644
--- a/main.js
+++ b/main.js
@@ -157,6 +157,7 @@ const featureOverlaySource = new VectorSource();
const container = document.getElementById('map-control-container');
(function() {
const container0 = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0];
+ container0.appendChild(document.getElementById('zoom-control'));
container0.appendChild(container);
container0.appendChild(document.getElementById('modal-info'));
diff --git a/style.css b/style.css
index 5249cb8..4aebe87 100644
--- a/style.css
+++ b/style.css
@@ -21,10 +21,11 @@ html, body {
top: 0;
bottom: 0;
width: 100%;
+ --map-container-padding: 1rem;
}
#map-control-container {
- --map-container-padding: 1rem;
+ --map-menu-spacing: .5em;
position: absolute;
padding: var(--map-container-padding);
display: flex;
@@ -32,15 +33,16 @@ html, body {
width: 100%;
height: 100%;
}
-@media screen and (max-width: 576px) {
- #map-control-container {
+@media screen and (max-width: 767px), screen and (max-height: 767px) {
+ #map {
--map-container-padding: .5rem;
}
}
#zoom-control {
- display: block;
- margin-right: auto;
+ position: absolute;
+ margin-left: var(--map-container-padding);
+ margin-top: var(--map-container-padding);
}
#zoom-control .ol-zoom {
position: relative;
@@ -111,21 +113,29 @@ html, body {
margin: 0;
}
-#map-menu, #zoom-control {
+#map-menu {
position: relative;
}
+@media screen and (min-width: 576px) {
+ #map-menu > .ol-control > button {
+ font-size: 150%;
+ }
+}
@media screen and (min-width: 768px) {
#map-menu > .ol-control > button {
font-size: 200%;
}
+ #zoom-control > .ol-zoom > button {
+ font-size: 120%;
+ }
}
#map-menu > * {
- margin-bottom: .5rem;
+ margin-bottom: var(--map-menu-spacing);
pointer-events: auto;
}
@media screen and (max-width: 767px) {
- #map-menu > * {
- margin-bottom: .25rem;
+ #map-control-container {
+ --map-menu-spacing: .25rem;
}
.ol-scale-line-inner {
font-size: 70%;
@@ -189,11 +199,11 @@ html, body {
/*min-width: min-content;*/
/*max-width: 35%;*/
/*width: revert;*/
- width: 360px;
+ max-width: 360px;
margin-left: var(--map-container-padding);
margin-right: var(--map-container-padding);
font-size: medium;
- z-index: 0;
+ z-index: 11;
--bs-modal-color: var(--bs-body-color);
--bs-modal-padding: .75rem;
}
@@ -211,7 +221,29 @@ html, body {
display: block;
}
-@media screen and (max-width: 350px) {
+@media screen and (max-aspect-ratio: .75), screen and (max-width: 460px) {
+ /* 4/3 in portrait mode, likely mobile in portrait mode */
+ #map-control-container {
+ flex-direction: column-reverse;
+ }
+ #map-menu {
+ display: flex;
+ justify-content: flex-end;
+ }
+ #map-menu > * {
+ margin-bottom: 0;
+ margin-left: var(--map-menu-spacing);
+ }
+ #map-menu .ol-full-screen {
+ display: none;
+ }
+ #layer-selection-panel,
+ #map-legend-panel {
+ margin: var(--map-menu-spacing) 0 0 auto;
+ }
+}
+
+@media screen and (max-width: 200px) {
#layer-selection-button,
#map-legend-button,
#export-to-image,
@@ -221,19 +253,12 @@ html, body {
display: none;
}
}
-@media screen and (min-width: 350px) and (max-width: 576px) {
- #info-button {
- bottom: 0;
- right: 0;
- position: absolute;
- }
-}
-@media screen and (max-height: 576px), (max-width: 500px) {
+@media screen and (max-height: 576px), screen and (max-width: 500px) {
#zoom-control .ol-zoomslider {
display: none;
}
}
-@media screen and (max-height: 300px) {
+@media screen and (max-width: 300px), screen and (max-height: 300px) {
body {
--bs-body-font-size: .8rem;
}