diff options
| author | Guilhem Moulin <guilhem@fripost.org> | 2024-02-01 21:15:49 +0100 |
|---|---|---|
| committer | Guilhem Moulin <guilhem@fripost.org> | 2024-02-02 01:25:20 +0100 |
| commit | 21503e6100d4bb1eab56e22d33865229b909e086 (patch) | |
| tree | 1fc61eb642bda843631cf7cad2d9f3de239edf03 | |
| parent | 2dda892451fdc6cab3d4c8f394c597cb957f9e12 (diff) | |
CSS: Improve rules for mobile devices.
Place control icons in a row near the top.
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | main.js | 1 | ||||
| -rw-r--r-- | style.css | 67 |
3 files changed, 48 insertions, 22 deletions
@@ -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> @@ -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')); @@ -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; } |