Styling: theme view buttons

Models/MenuState.ts

@@ -54,6 +54,17 @@ export class MenuState {
                 this.highlightedLayerInFilters.setData(undefined)
             }
         })
+
+        this.menuIsOpened.addCallbackAndRunD((opened) => {
+            if (opened) {
+                this.themeIsOpened.setData(false)
+            }
+        })
+        this.themeIsOpened.addCallbackAndRunD((opened) => {
+            if (opened) {
+                this.menuIsOpened.setData(false)
+            }
+        })
     }
     public openFilterView(highlightLayer?: LayerConfig | string) {
         this.themeIsOpened.setData(true)

UI/Base/Hotkeys.ts

@@ -123,7 +123,7 @@ export default class Hotkeys {
             new Table(
                 [t.key, t.action],
                 byKey.map(([key, doc]) => {
-                    return [new FixedUiElement(key).SetClass("code"), doc]
+                    return [new FixedUiElement(key).SetClass("literal-code"), doc]
                 })
             ),
         ])

UI/Base/MapControlButton.svelte

@@ -8,6 +8,6 @@
 </script>
 
 
-<div on:click={e => dispatch("click", e)} class="subtle-background rounded-full min-w-10 w-fit h-10 m-0.5 md:m-1 p-1 cursor-pointer">
+<div on:click={e => dispatch("click", e)} class="subtle-background rounded-full h-fit w-fit m-0.5 md:m-1 p-0.5 sm:p-1 cursor-pointer">
-  <slot class="m-4"></slot>
+  <slot/>
 </div>

UI/BigComponents/Geosearch.svelte

@@ -69,7 +69,7 @@
 
 </script>
 
-<div class="flex normal-background rounded-full pl-2">
+<div class="flex normal-background rounded-full pl-2 justify-between">
   <form>
 
     {#if isRunning}
@@ -89,7 +89,7 @@
     {/if}
 
   </form>
-  <div class="w-6 h-6" on:click={performSearch}>
+  <div class="w-6 h-6 self-end" on:click={performSearch}>
     <ToSvelte construct={Svg.search_ui}></ToSvelte>
   </div>
 </div>

UI/DefaultGuiState.ts

@@ -48,7 +48,7 @@ export class DefaultGuiState {
         }
     }
 
-    public closeAll() {
+    public closeAll(except) {
         for (const sourceKey in this.sources) {
             this.sources[sourceKey].setData(false)
         }

UI/ThemeViewGUI.svelte

@@ -64,27 +64,37 @@
 </script>
 
 
-<div class="h-screen w-screen absolute top-0 left-0 flex">
+<div class="h-screen w-screen absolute top-0 left-0 overflow-hidden">
   <MaplibreMap map={maplibremap}></MaplibreMap>
 </div>
 
-<div class="absolute top-0 left-0 mt-2 ml-2">
+<div class="absolute top-0 left-0 w-full ">
-  <MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
+  <!-- Top components -->
-    <div class="flex mr-2 items-center cursor-pointer">
+  <If condition={state.featureSwitches.featureSwitchSearch}>
-      <img class="w-8 h-8 block mr-2" src={layout.icon}>
+    <div class="sm:w-min float-right m-1 sm:m-2 max-[320px]:w-full">
-      <b>
+      <Geosearch bounds={state.mapProperties.bounds} perLayer={state.perLayer} {selectedElement}
-        <Tr t={layout.title}></Tr>
+                 {selectedLayer}></Geosearch>
-      </b>
     </div>
-  </MapControlButton>
+  </If>
-  <MapControlButton on:click={() =>state.guistate.menuIsOpened.setData(true)}>
+  <div class="float-left m-1 sm:m-2 md:m-4">
-    <MenuIcon class="w-8 h-8 cursor-pointer"></MenuIcon>
+    <MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
-  </MapControlButton>
+      <div class="flex m-0.5 mx-1 sm:mx-1 md:mx-2 items-center cursor-pointer">
-  <If condition={state.featureSwitchIsTesting}>
+        <img class="w-4 h-4 sm:w-6 sm:h-6 md:w-8 md:h-8 block mr-0.5 sm:mr-1 md:mr-2" src={layout.icon}>
+        <b class="mr-1">
+          <Tr t={layout.title}></Tr>
+        </b>
+      </div>
+    </MapControlButton>
+    <MapControlButton on:click={() =>state.guistate.menuIsOpened.setData(true)}>
+      <MenuIcon class="w-6 h-6 md:w-8 md:h-8 cursor-pointer"></MenuIcon>
+    </MapControlButton>
+    <If condition={state.featureSwitchIsTesting}>
     <span class="alert">
       Testmode
     </span>
-  </If>
+    </If>
+
+  </div>
 </div>
 
 <div class="absolute bottom-0 left-0 mb-4 ml-4">
@@ -93,26 +103,19 @@
 
 <div class="absolute bottom-0 right-0 mb-4 mr-4">
   <MapControlButton on:click={() => mapproperties.zoom.update(z => z+1)}>
-    <ToSvelte construct={Svg.plus_ui}></ToSvelte>
+    <img src="./assets/svg/plus.svg" class="w-6 h-6 md:w-8 md:h-8"/>
   </MapControlButton>
   <MapControlButton on:click={() => mapproperties.zoom.update(z => z-1)}>
-    <ToSvelte construct={Svg.min_ui}></ToSvelte>
+    <img src="./assets/svg/min.svg" class="w-6 h-6 md:w-8 md:h-8"/>
   </MapControlButton>
   <If condition={featureSwitches.featureSwitchGeolocation}>
     <MapControlButton>
       <ToSvelte
-        construct={new GeolocationControl(state.geolocation, mapproperties).SetClass("block w-8 h-8")}></ToSvelte>
+        construct={new GeolocationControl(state.geolocation, mapproperties).SetClass("block w-6 h-6 md:w-8 md:h-8")}></ToSvelte>
     </MapControlButton>
   </If>
 </div>
 
-<div class="absolute top-0 right-0 mt-4 mr-4">
-  <If condition={state.featureSwitches.featureSwitchSearch}>
-    <Geosearch bounds={state.mapProperties.bounds} perLayer={state.perLayer} {selectedElement}
-               {selectedLayer}></Geosearch>
-  </If>
-</div>
-
 <If condition={selectedViewElement.map(v => v !== undefined)}>
   <ModalRight on:close={() => {selectedElement.setData(undefined)}}>
     <ToSvelte construct={new VariableUiElement(selectedViewElement)}></ToSvelte>
@@ -166,7 +169,7 @@
             state={state.overlayLayerStates.get(tilesource.id)}
             highlightedLayer={state.guistate.highlightedLayerInFilters}
             zoomlevel={state.mapProperties.zoom}
-             />
+          />
         {/each}
         <If condition={state.featureSwitches.featureSwitchBackgroundSelection}>
           <RasterLayerPicker {availableLayers} value={mapproperties.rasterLayer}></RasterLayerPicker>

assets/layers/recycling/recycling.json

@@ -23,7 +23,7 @@
   "calculatedTags": [
     "_waste_amount=Object.values(Object.keys(feat.properties).filter((key) => key.startsWith('recycling:')).reduce((cur, key) => { return Object.assign(cur, { [key]: feat.properties[key] })}, {})).reduce((n, x) => n + (x == \"yes\"), 0);"
   ],
-  "minzoom": 12,
+  "minzoom": 11,
   "title": {
     "render": {
       "en": "Recycling facility",
@@ -36,12 +36,7 @@
       {
         "if": "name~*",
         "then": {
-          "*": "{name}",
+          "*": "{name}"
-          "en": "Recycling centre",
-          "nl": "Recyclingcentrum",
-          "de": "Wertstoffhof",
-          "es": "Centro de reciclaje",
-          "it": "Centro di riciclo rifiuti"
         }
       },
       {
@@ -1410,4 +1405,4 @@
     "enableRelocation": true,
     "enableImproveAccuracy": true
   }
-}
+}

css/index-tailwind-output.css

@@ -787,14 +787,14 @@ video {
   margin: 0.5rem;
 }
 
-.m-4 {
-  margin: 1rem;
-}
-
 .m-1 {
   margin: 0.25rem;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
 .m-6 {
   margin: 1.5rem;
 }
@@ -803,16 +803,16 @@ video {
   margin: 1px;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -833,10 +833,6 @@ video {
   margin-bottom: 0.75rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -857,18 +853,30 @@ video {
   margin-top: 1.5rem;
 }
 
-.mt-2 {
+.mr-0\.5 {
-  margin-top: 0.5rem;
+  margin-right: 0.125rem;
 }
 
-.ml-2 {
+.mr-0 {
-  margin-left: 0.5rem;
+  margin-right: 0px;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
 }
 
 .ml-4 {
   margin-left: 1rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mb-24 {
   margin-bottom: 6rem;
 }
@@ -877,6 +885,10 @@ video {
   margin-left: 0.25rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -889,10 +901,6 @@ video {
   margin-bottom: 2.5rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -917,10 +925,6 @@ video {
   margin-bottom: 0.25rem;
 }
 
-.mr-0 {
-  margin-right: 0px;
-}
-
 .-ml-6 {
   margin-left: -1.5rem;
 }
@@ -1025,6 +1029,12 @@ video {
   height: 0.75rem;
 }
 
+.h-fit {
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .h-11 {
   height: 2.75rem;
 }
@@ -1331,26 +1341,26 @@ video {
   word-break: break-all;
 }
 
-.rounded-xl {
+.rounded {
-  border-radius: 0.75rem;
+  border-radius: 0.25rem;
-}
-
-.rounded-lg {
-  border-radius: 0.5rem;
 }
 
 .rounded-3xl {
   border-radius: 1.5rem;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1505,10 +1515,6 @@ video {
   padding: 0.5rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .p-0\.5 {
   padding: 0.125rem;
 }
@@ -1517,6 +1523,10 @@ video {
   padding: 0px;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -2282,16 +2292,35 @@ input {
   color: var(--unsubtle-detail-color-contrast);
 }
 
+@media (max-width: 320px) {
+  .max-\[320px\]\:w-full {
+    width: 100%;
+  }
+}
+
 @media (min-width: 640px) {
+  .sm\:m-2 {
+    margin: 0.5rem;
+  }
+
   .sm\:m-6 {
     margin: 1.5rem;
   }
 
+  .sm\:mx-1 {
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
   .sm\:mx-auto {
     margin-left: auto;
     margin-right: auto;
   }
 
+  .sm\:mr-1 {
+    margin-right: 0.25rem;
+  }
+
   .sm\:mt-5 {
     margin-top: 1.25rem;
   }
@@ -2308,10 +2337,23 @@ input {
     height: 6rem;
   }
 
+  .sm\:h-6 {
+    height: 1.5rem;
+  }
+
   .sm\:w-24 {
     width: 6rem;
   }
 
+  .sm\:w-min {
+    width: -webkit-min-content;
+    width: min-content;
+  }
+
+  .sm\:w-6 {
+    width: 1.5rem;
+  }
+
   .sm\:max-w-xl {
     max-width: 36rem;
   }
@@ -2336,6 +2378,10 @@ input {
     padding: 1.5rem;
   }
 
+  .sm\:p-1 {
+    padding: 0.25rem;
+  }
+
   .sm\:p-2 {
     padding: 0.5rem;
   }
@@ -2364,6 +2410,10 @@ input {
     margin: 0.25rem;
   }
 
+  .md\:m-4 {
+    margin: 1rem;
+  }
+
   .md\:m-8 {
     margin: 2rem;
   }
@@ -2372,14 +2422,27 @@ input {
     margin: 0.5rem;
   }
 
-  .md\:mt-5 {
+  .md\:mx-2 {
-    margin-top: 1.25rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .md\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
+  .md\:mr-4 {
+    margin-right: 1rem;
   }
 
   .md\:mt-4 {
     margin-top: 1rem;
   }
 
+  .md\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -2388,10 +2451,18 @@ input {
     display: grid;
   }
 
+  .md\:h-8 {
+    height: 2rem;
+  }
+
   .md\:h-12 {
     height: 3rem;
   }
 
+  .md\:w-8 {
+    width: 2rem;
+  }
+
   .md\:w-2\/6 {
     width: 33.333333%;
   }