CSS: Improve rules for mobile devices.

Place control icons in a row near the top.

1 files changed, 46 insertions, 21 deletions

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;
   }