Make UI work properly on mobile (#52)

![image](https://github.com/hiddewie/OpenRailwayMap-vector/assets/1073881/84c0c7b4-2f66-4994-9a7d-14c2c5a22e13) Move search control. Fix attribution and legend visibility. Make layer selection more prominent.
hiddewie · May 12, 2024 · 71311be · 71311be
1 parent 311bb94
commit 71311be
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 26 deletions.
diff --git a/proxy/css/ui.css b/proxy/css/ui.css
@@ -101,27 +101,28 @@ body {
 
 .maplibregl-ctrl-style {
   font-size: 1rem;
-  padding: .5rem;
 }
-.maplibregl-ctrl-style .form-check.form-check-inline label {
-  cursor: pointer;
-}
-.maplibregl-ctrl-style .form-check.form-check-inline:last-child {
-  margin-right: 0;
-}
-button.maplibregl-ctrl-edit {
-  padding: 2px;
+.maplibregl-ctrl-style label.btn:has(input[type="radio"]:checked) {
+  color: #fff;
+  background-color: #1e7e34;
+  border-color: #1c7430;
 }
 .maplibregl-ctrl-edit .maplibregl-ctrl-icon {
   background-size: contain;
   background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z' fill='%23000000'/%3E%3C/svg%3E");
 }
-button.maplibregl-ctrl-search {
+.maplibregl-ctrl-group button.maplibregl-ctrl-search {
   padding: 4px;
+  width: auto;
 }
-.maplibregl-ctrl-search .maplibregl-ctrl-icon {
+.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon {
   background-size: contain;
   background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%23000000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position-x: left;
+}
+.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon span {
+  margin-left: 1.5rem;
+  font-size: 16px;
 }
 
 .maplibregl-ctrl-group button.maplibregl-ctrl-legend {
@@ -136,4 +137,8 @@ button.maplibregl-ctrl-search {
 .maplibregl-ctrl-group button.maplibregl-ctrl-legend .maplibregl-ctrl-icon span {
   margin-left: 1.5rem;
   font-size: 16px;
-}
+}
+
+.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact {
+  margin-left: 100px;
+}
diff --git a/proxy/js/ui.js b/proxy/js/ui.js
@@ -4546,23 +4546,20 @@ class StyleControl {
   onAdd(map) {
     this._map = map;
     this._container = createDomElement('div', 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-style');
-    const form = createDomElement('form', 'form form-inline', this._container);
-    const span = createDomElement('span', '', form);
-    span.innerHTML = 'Style:&nbsp;'
+    const buttonGroup = createDomElement('div', 'btn-group-vertical btn-group-toggle', this._container);
 
     Object.entries(knownStyles).forEach(([name, styleLabel]) => {
       const id = `style-${name}`
-      const wrapper = createDomElement('div', 'form-check form-check-inline', form);
-      const button = createDomElement('input', 'form-check-input', wrapper);
-      button.id = id
-      button.type = 'radio'
-      button.name = 'style'
-      button.value = name
-      button.onclick = () => this.options.onStyleChange(name)
-      button.checked = (this.options.initialSelection === name)
-      const label = createDomElement('label', 'form-check-label', wrapper);
+      const label = createDomElement('label', 'btn btn-light', buttonGroup);
       label.htmlFor = id
       label.innerText = styleLabel
+      const radio = createDomElement('input', '', label);
+      radio.id = id
+      radio.type = 'radio'
+      radio.name = 'style'
+      radio.value = name
+      radio.onclick = () => this.options.onStyleChange(name)
+      radio.checked = (this.options.initialSelection === name)
     });
 
     return this._container;
@@ -4582,7 +4579,9 @@ class SearchControl {
     button.type = 'button';
     button.title = 'Search for places'
     button.onclick = _ => showSearch();
-    createDomElement('span', 'maplibregl-ctrl-icon', button);
+    const icon = createDomElement('span', 'maplibregl-ctrl-icon', button);
+    const text = createDomElement('span', '', icon);
+    text.innerText = 'Search'
 
     return this._container;
   }
@@ -4654,7 +4653,6 @@ map.addControl(new maplibregl.NavigationControl({
   showCompass: false,
   visualizePitch: false,
 }));
-map.addControl(new SearchControl());
 map.addControl(
   new maplibregl.GeolocateControl({
     positionOptions: {
@@ -4668,6 +4666,8 @@ map.addControl(
 map.addControl(new maplibregl.FullscreenControl());
 map.addControl(new EditControl());
 
+map.addControl(new SearchControl(), 'top-left');
+
 map.addControl(new maplibregl.ScaleControl({
   maxWidth: 150,
   unit: 'metric',