Finetuning of various features

InitUiElements.ts

@@ -1,19 +1,19 @@
-import { CenterFlexedElement } from "./UI/Base/CenterFlexedElement";
-import { FixedUiElement } from "./UI/Base/FixedUiElement";
+import {CenterFlexedElement} from "./UI/Base/CenterFlexedElement";
+import {FixedUiElement} from "./UI/Base/FixedUiElement";
 import Toggle from "./UI/Input/Toggle";
-import { Basemap } from "./UI/BigComponents/Basemap";
+import {Basemap} from "./UI/BigComponents/Basemap";
 import State from "./State";
 import LoadFromOverpass from "./Logic/Actors/OverpassFeatureSource";
-import { UIEventSource } from "./Logic/UIEventSource";
-import { QueryParameters } from "./Logic/Web/QueryParameters";
+import {UIEventSource} from "./Logic/UIEventSource";
+import {QueryParameters} from "./Logic/Web/QueryParameters";
 import StrayClickHandler from "./Logic/Actors/StrayClickHandler";
 import SimpleAddUI from "./UI/BigComponents/SimpleAddUI";
 import CenterMessageBox from "./UI/CenterMessageBox";
 import UserBadge from "./UI/BigComponents/UserBadge";
 import SearchAndGo from "./UI/BigComponents/SearchAndGo";
 import GeoLocationHandler from "./Logic/Actors/GeoLocationHandler";
-import { LocalStorageSource } from "./Logic/Web/LocalStorageSource";
-import { Utils } from "./Utils";
+import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
+import {Utils} from "./Utils";
 import Svg from "./Svg";
 import Link from "./UI/Base/Link";
 import * as personal from "./assets/themes/personal/personal.json"
@@ -34,7 +34,7 @@ import MapControlButton from "./UI/MapControlButton";
 import Combine from "./UI/Base/Combine";
 import SelectedFeatureHandler from "./Logic/Actors/SelectedFeatureHandler";
 import LZString from "lz-string";
-import { LayoutConfigJson } from "./Customizations/JSON/LayoutConfigJson";
+import {LayoutConfigJson} from "./Customizations/JSON/LayoutConfigJson";
 import AttributionPanel from "./UI/BigComponents/AttributionPanel";
 import ContributorCount from "./Logic/ContributorCount";
 import FeatureSource from "./Logic/FeatureSource/FeatureSource";
@@ -43,7 +43,6 @@ import LayerConfig from "./Customizations/JSON/LayerConfig";
 import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
 import {TagsFilter} from "./Logic/Tags/TagsFilter";
 import FilterView from "./UI/BigComponents/FilterView";
-import ExportPDF from "./Logic/Actors/ExportPDF";
 
 export class InitUiElements {
     static InitAll(
@@ -59,7 +58,8 @@ export class InitUiElements {
                 `Error: incorrect layout <i>${layoutName}</i><br/><a href='https://${window.location.host}/'>Go back</a>`
             )
                 .AttachTo("centermessage")
-        .onClick(() => {});
+                .onClick(() => {
+                });
             throw "Incorrect layout";
         }
 
@@ -187,7 +187,7 @@ export class InitUiElements {
                     iconSize: [30, 30],
                     iconAnchor: [15, 15],
                 });
-        const marker = L.marker([home.lat, home.lon], { icon: icon });
+                const marker = L.marker([home.lat, home.lon], {icon: icon});
                 marker.addTo(State.state.leafletMap.data);
             });
 
@@ -222,9 +222,7 @@ export class InitUiElements {
         });
 
         new Combine(
-      [plus, min, geolocationButton].map((el) =>
-        el.SetClass("m-0.5 md:m-1")
-      )
+            [plus, min, geolocationButton]
         )
             .SetClass("flex flex-col")
             .AttachTo("bottom-right");
@@ -372,10 +370,18 @@ export class InitUiElements {
         );
 
 
-    const filterView = new FilterView(State.state.filteredLayers).SetClass(
+        const filterView = 
+            new ScrollableFullScreen(
+                () => Translations.t.general.layerSelection.title.Clone(),
+                () => 
+                    new FilterView(State.state.filteredLayers).SetClass(
                         "block p-1 rounded-full"
+                    ),
+                "filter",
+                State.state.filterIsOpened
             );
             
+
         const filterMapControlButton = new MapControlButton(
             new CenterFlexedElement(
                 Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem")
@@ -385,18 +391,18 @@ export class InitUiElements {
         const filterButton = new Toggle(
             filterView,
             filterMapControlButton,
-      State.state.FilterIsOpened
+            State.state.filterIsOpened
         ).ToggleOnClick();
 
         const filterControl = new Toggle(
             filterButton,
-      "",
+            undefined,
             State.state.featureSwitchFilter
         );
 
-    new Combine([copyrightButton, layerControl, filterControl]).AttachTo(
-      "bottom-left"
-    );
+        new Combine([copyrightButton, layerControl, filterControl])
+            .SetClass("flex flex-col")
+            .AttachTo("bottom-left");
 
         State.state.locationControl.addCallback(() => {
             // Close the layer selection when the map is moved

State.ts

@@ -137,11 +137,11 @@ export default class State {
             (b) => "" + b
         );
 
-    public FilterIsOpened: UIEventSource<boolean> =
+    public filterIsOpened: UIEventSource<boolean> =
         QueryParameters.GetQueryParameter(
             "filter-toggle",
             "false",
-            "Whether or not the filter is shown"
+            "Whether or not the filter view is shown"
         ).map<boolean>(
             (str) => str !== "false",
             [],

UI/BigComponents/LayerControlPanel.ts

@@ -6,7 +6,6 @@ import Translations from "../i18n/Translations";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import BaseUIElement from "../BaseUIElement";
 import Toggle from "../Input/Toggle";
-import FilterView from "./FilterView";
 import {DownloadPanel} from "./DownloadPanel";
 
 export default class LayerControlPanel extends ScrollableFullScreen {
@@ -31,15 +30,6 @@ export default class LayerControlPanel extends ScrollableFullScreen {
             });
             elements.push(backgroundSelector)
         }
-        elements.push(
-            new Toggle(
-                new FilterView(State.state.filteredLayers),
-                undefined,
-                State.state.filteredLayers.map(
-                    (layers) => layers.length > 1 || layers[0].layerDef.filters.length > 0
-                )
-            )
-        );
 
         elements.push(new Toggle(
             new DownloadPanel(),

UI/MapControlButton.ts

@@ -8,7 +8,7 @@ export default class MapControlButton extends Combine {
   constructor(contents: BaseUIElement) {
     super([contents]);
     this.SetClass(
-      "relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background"
+      "relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background m-0.5 md:m-1"
     );
     this.SetStyle("box-shadow: 0 0 10px var(--shadow-color);");
   }