Fix ways: they show up again

Logic/FilteredLayer.ts

@@ -128,52 +128,45 @@ export class FilteredLayer {
         let self = this;
         console.log(data);
         this._geolayer = L.geoJSON(data, {
-           /* style: feature => {
+                style: feature =>
-                self.layerDef.GenerateLeafletStyle(feature.properties);
+                    self.layerDef.GenerateLeafletStyle(feature.properties),
-                return {
+                pointToLayer: function (feature, latLng) {
-                    color: "#f00",
+                    // Point to layer converts the 'point' to a layer object - as the geojson layer natively cannot handle points
-                    weight: 4
+                    // Click handling is done in the next step
-                }
-            },*/
-            /*
-            pointToLayer: function (feature, latLng) {
-                // Point to layer converts the 'point' to a layer object - as the geojson layer natively cannot handle points
-                // Click handling is done in the next step
 
-                const style = self.layerDef.GenerateLeafletStyle(feature.properties);
+                    const style = self.layerDef.GenerateLeafletStyle(feature.properties);
-                let marker;
+                    let marker;
-                if (style.icon === undefined) {
+                    if (style.icon === undefined) {
-                    marker = L.circle(latLng, {
+                        marker = L.circle(latLng, {
-                        radius: 25,
+                            radius: 25,
-                        color: style.color
+                            color: style.color
-                    });
+                        });
-                } else if (style.icon.iconUrl.startsWith("$circle")) {
+                    } else if (style.icon.iconUrl.startsWith("$circle")) {
-                    marker = L.circle(latLng, {
+                        marker = L.circle(latLng, {
-                        radius: 25,
+                            radius: 25,
-                        color: style.color
+                            color: style.color
-                    });
+                        });
-                } else {
+                    } else {
-                    if (style.icon.iconSize === undefined) {
+                        if (style.icon.iconSize === undefined) {
-                        style.icon.iconSize = [50, 50]
+                            style.icon.iconSize = [50, 50]
+                        }
+
+                        marker = L.marker(latLng, {
+                            icon: L.icon(style.icon)
+                        });
                     }
+                    return marker;
+                },
+                onEachFeature: function (feature, layer: Layer) {
 
-                    marker = L.marker(latLng, {
+                    layer.on("click", (e) => {
-                        icon: L.icon(style.icon)
+                        if (layer.getPopup() === undefined
-                    });
+                            && (window.screen.availHeight > 600 || window.screen.availWidth > 600) // We DON'T trigger this code on small screens! No need to create a popup
-                }
+                        ) {
-                return marker;
+                            const popup = L.popup({
-            },*/
+                                autoPan: true,
-/*
+                                closeOnEscapeKey: true,
-            onEachFeature: function (feature, layer:Layer) {
+                            }, layer);
-
-                layer.on("click", (e) => {
-                    if (layer.getPopup() === undefined
-                        && (window.screen.availHeight > 600 || window.screen.availWidth > 600) // We DON'T trigger this code on small screens! No need to create a popup
-                    ) {
-                        const popup = L.popup({
-                            autoPan: true,
-                            closeOnEscapeKey: true,
-                        }, layer);
 
                         // @ts-ignore
                         popup.setLatLng(e.latlng)
@@ -196,7 +189,6 @@ export class FilteredLayer {
                     L.DomEvent.stop(e);
                 });
             }
-        */
         }
         )
         ;

UI/Image/ImageUploadFlow.ts

@@ -103,20 +103,7 @@ export class ImageUploadFlow extends UIElement {
         const label = new Combine([
             Svg.camera_plus_svg().SetStyle("width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;display:block"),
             Translations.t.image.addPicture
-                .SetStyle("width:max-content;font-size: 28px;" +
+        ]).SetClass("image-upload-flow-button")
-                    "font-weight: bold;" +
-                    "float: left;" +
-                    "margin-top: 4px;" +
-                    "padding-top: 4px;" +
-                    "padding-bottom: 4px;" +
-                    "padding-left: 13px;"),
-
-        ]).SetStyle(" display: flex;" +
-            "cursor:pointer;" +
-            "padding: 0.5em;" +
-            "border-radius: 1em;" +
-            "border: 3px solid var(--foreground-color);" +
-            "box-sizing:border-box;")
     
         const actualInputElement =
             `<input style='display: none' id='fileselector-${this.id}' type='file' accept='image/*' name='picField' multiple='multiple' alt=''/>`;
@@ -131,7 +118,8 @@ export class ImageUploadFlow extends UIElement {
         return new Combine([
             form,
             extraInfo
-        ]).SetStyle("margin-top: 1em;margin-bottom: 2em;text-align: center;")
+        ]).SetClass("image-upload-flow")
+            .SetStyle("margin-top: 1em;margin-bottom: 2em;text-align: center;")
             .Render();
     }
 

css/imageUploadFlow.css

@@ -0,0 +1,23 @@
+.image-upload-flow-button span {
+    width: max-content;
+    font-size: 28px;
+    font-weight: bold;
+    margin-top: 4px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 13px;
+}
+
+.image-upload-flow-button {
+    display: flex;
+    cursor: pointer;
+    padding: 0.5em;
+    border-radius: 1em;
+    border: 3px solid var(--foreground-color);
+    box-sizing: border-box;
+}
+
+.image-upload-flow svg {
+    fill: var(--foreground-color);
+    stroke: var(--foreground-color);
+}

css/userbadge.css

@@ -46,7 +46,7 @@
 .userstats svg {
     width: 1em;
     height: 1em;
-     border-radius: 0;
+    border-radius: 0;
     display: block;
 }
 

index.css

@@ -25,14 +25,12 @@ a {
     color: var(--foreground-color)
 }
 
-svg {
+#topleft-tools svg {
     fill: var(--foreground-color) !important;
     stroke: var(--foreground-color) !important;
-    width: 100%;
-    height: 100%;
 }
 
-svg path {
+#topleft-tools svg path {
     fill: var(--foreground-color) !important;
     stroke: var(--foreground-color) !important;
 }

index.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="./css/mobile.css"/>
     <link rel="stylesheet" href="./css/openinghourstable.css"/>
     <link rel="stylesheet" href="./css/tagrendering.css"/>
+    <link rel="stylesheet" href="./css/imageUploadFlow.css"/>
     <!-- $$$CUSTOM-CSS -->
     <link rel="manifest" href="./manifest.manifest">
     <link rel="icon" href="assets/svg/add.svg" sizes="any" type="image/svg+xml">