style: better design on mobile

Author: vanaigr

src/index.css

@@ -24,18 +24,6 @@ body {
     flex-grow: 1;
     position: relative;
 }
-#root {
-    flex-grow: 1;
-    display: grid;
-    grid-template-columns: 1fr 20rem;
-}
-
-#menu {
-    min-height: 0;
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-}
 
 .regions {
     padding: 0.5rem;
@@ -71,7 +59,6 @@ body {
 }
 #layers {
     padding: 0.5rem;
-    min-height: 5rem;
     display: flex;
     flex-direction: column;
     & > * {
@@ -165,6 +152,31 @@ body {
     display: none !important;
 }
 
+.tabs {
+    display: flex;
+    flex-direction: row;
+    & > * {
+        flex: 1 1 5rem;
+        padding: 0.5rem 1rem;
+        text-align: center;
+        background: #80808010;
+        & > input {
+            display: none;
+        }
+        &:has(> input:checked) {
+            background: #80808020;
+        }
+    }
+    & > *:first-child {
+        border-top-left-radius: 0.5rem;
+        border-bottom-left-radius: 0.5rem;
+    }
+    & > *:last-child {
+        border-top-right-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
+    }
+}
+
 .unhide {
     padding: 0.5rem;
     gap: 0.5rem;
@@ -195,22 +207,78 @@ body {
     }
 }
 
+#root {
+    flex-grow: 1;
+    display: grid;
+    grid-template-columns: 1fr 20rem;
+    grid-template-rows: auto auto 1fr;
+    & > .map {
+        grid-column: 1;
+        grid-row: 1 / -1;
+    }
+}
+
+.tabs {
+    display: none;
+}
+
 @media screen and (orientation: portrait) {
-    #root {
+    #root:not(:has(#tab-regions:checked)) {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr min(30%, 10rem) auto;
+        & > .layers {
+            grid-row: 4;
+            flex-direction: row;
+            gap: 1rem;
+            & > .title {
+                align-self: center;
+            }
+            & > #layers {
+                flex-grow: 1;
+                padding-bottom: 0;
+            }
+        }
+        & > .tabs {
+            display: flex;
+            grid-row: 1;
+        }
+        & > .map {
+            grid-row: 2;
+        }
+        & > .element {
+            border-top: 1px solid gray;
+        }
+        & > .regions {
+            display: none;
+        }
+    }
+    #root:has(#tab-regions:checked) {
         grid-template-columns: 1fr;
-        grid-template-rows: 1fr 30%;
+        grid-template-rows: auto 1fr;
+        & > .layers {
+            display: none;
+        }
+        & > .tabs {
+            display: flex;
+            grid-row: 1;
+        }
+        & > .map {
+            display: none;
+        }
+        & > .element {
+            display: none;
+        }
+        & > .regions {
+            display: flex;
+        }
     }
-    #menu {
-        border-top: 1px solid gray;
+    .element {
         overflow-y: scroll;
     }
-    .regions {
-        overflow: unset;
-    }
-    #regions {
-        overflow-y: unset;
+    .regions > .title {
+        display: none;
     }
-    .unhide {
-        overflow-y: unset;
+    .regions > #regions {
+        padding-top: 0;
     }
 }

src/index.html

@@ -26,23 +26,31 @@
                     </div>
                 </div>
             </div>
-            <div id="menu">
-                <div class='element'>
-                    <span class='title'>Seleted:</span>
-                    <div id="element">
-                    </div>
+            <form class='tabs'>
+                <label>
+                    <input id='tab-map' type='radio' name='tab' value='map' checked>
+                    <span>Map</span>
+                </label>
+                <label>
+                    <input id='tab-regions' type='radio' name='tab' value='regions'>
+                    <span>Regions</span>
+                </label>
+            </form>
+            <div class='element'>
+                <span class='title'>Seleted:</span>
+                <div id="element">
                 </div>
+            </div>
 
-                <div class='layers'>
-                    <span class='title'>Layers:</span>
-                    <div id="layers">
-                    </div>
-                </div>
-                <div class="regions">
-                    <span class='title'>Regions:</span>
-                    $$$REGIONS$$$
+            <div class='layers'>
+                <span class='title'>Layers:</span>
+                <div id="layers">
                 </div>
             </div>
+            <div class="regions">
+                <span class='title'>Regions:</span>
+                $$$REGIONS$$$
+            </div>
         </div>
     </body>
 </html>