CSS: Improve rules for mobile devices.

2 files changed, 14 insertions, 24 deletions

diff --git a/main.js b/main.js
index 2b5e650..15c82ed 100644
--- a/main.js
+++ b/main.js
@@ -247,7 +247,7 @@ if (window.location !== window.parent.location) {
 }
 
 /* layer selection button and legend */
-(function() {
+if (window.location === window.parent.location) {
   const btn = (function() {
     const div = document.createElement('div');
     menu.appendChild(div);
@@ -321,10 +321,10 @@ if (window.location !== window.parent.location) {
       btn2.classList.replace('btn-light', 'btn-dark');
     }
   };
-})();
+}
 
 /* fullscreen control */
-(function() {
+if (window.location === window.parent.location) {
   const label = document.createElement('i');
   label.classList.add('bi', 'bi-fullscreen');
 
@@ -385,10 +385,10 @@ if (window.location !== window.parent.location) {
       exp.classList.remove('d-none');
     }
   })
-})();
+}
 
 /* export/download button */
-(function() {
+if (window.location === window.parent.location) {
   const div = document.createElement('div');
   div.classList.add('ol-unselectable', 'ol-control');
   div.id = 'export-to-image';
@@ -436,7 +436,7 @@ if (window.location !== window.parent.location) {
 
     map.renderSync();
   };
-})();
+}
 
 /* info button */
 (function() {
diff --git a/style.css b/style.css
index ab90869..5249cb8 100644
--- a/style.css
+++ b/style.css
@@ -120,16 +120,16 @@ html, body {
   }
 }
 #map-menu > * {
-  margin-top: .5rem;
+  margin-bottom: .5rem;
   pointer-events: auto;
 }
 @media screen and (max-width: 767px) {
   #map-menu > * {
-    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+  .ol-scale-line-inner {
+    font-size: 70%;
   }
-}
-#map-menu > *:first-child {
-  margin-top: 0;
 }
 
 #map-menu > .ol-control {
@@ -190,7 +190,8 @@ html, body {
   /*max-width: 35%;*/
   /*width: revert;*/
   width: 360px;
-  margin-right: 1rem;
+  margin-left: var(--map-container-padding);
+  margin-right: var(--map-container-padding);
   font-size: medium;
   z-index: 0;
   --bs-modal-color: var(--bs-body-color);
@@ -210,13 +211,7 @@ html, body {
   display: block;
 }
 
-@media screen and (max-width: 767px) {
-  #layer-selection-panel,
-  #map-legend-panel {
-    max-width: 100%;
-    margin-right: .5rem;
-    display: none;
-  }
+@media screen and (max-width: 350px) {
   #layer-selection-button,
   #map-legend-button,
   #export-to-image,
@@ -238,11 +233,6 @@ html, body {
     display: none;
   }
 }
-@media screen and (max-width: 900px) {
-  #map-legend-panel, #layer-selection-panel {
-    max-width: 60%;
-  }
-}
 @media screen and (max-height: 300px) {
   body {
     --bs-body-font-size: .8rem;