Add ios fixes

Logic/GeoLocationHandler.ts

@@ -82,13 +82,13 @@ export class GeoLocationHandler extends UIElement {
 
     InnerRender(): string {
         if (this.currentLocation.data) {
-            return "<img src='./assets/crosshair-blue.svg' alt='locate me'>";
+            return "<img src='assets/crosshair-blue.png' alt='locate me'>";
         }
         if (this._isActive.data) {
-            return "<img src='./assets/crosshair-blue-center.svg' alt='locate me'>";
+            return "<img src='assets/crosshair-blue-center.png' alt='locate me'>";
         }
 
-        return "<img src='./assets/crosshair.svg' alt='locate me'>";
+        return "<img src='assets/crosshair.png' alt='locate me'>";
     }
 
     

Logic/LayerUpdater.ts

@@ -71,12 +71,12 @@ export class LayerUpdater {
 
     private _failCount = 0;
     private handleFail(reason: any) {
-        console.log("QUERY FAILED (retrying in 1 sec)", reason);
+        console.log("QUERY FAILED (retrying in 5 sec)", reason);
         this.previousBounds = undefined;
         const self = this;
         this._failCount++;
         window?.setTimeout(
-            function(){self.update()}, this._failCount * 1000
+            function(){self.update()}, this._failCount * 5000
         )
     }
 

UI/ImageUploadFlow.ts

@@ -81,12 +81,13 @@ export class ImageUploadFlow extends UIElement {
             uploadingMessage +
 
             "</label>" +
-
+            "<form id='fileselector-form-" + this.id + "'>" +
             "<input id='fileselector-" + this.id + "' " +
             "type='file' " +
             "class='imageflow-file-input' " +
             "accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
             "/>" +
+            "</form>" +
 
             "</div>"
             ;
@@ -102,32 +103,43 @@ export class ImageUploadFlow extends UIElement {
             }
         }
 
+        this._licensePicker.Update()
+        const form = document.getElementById('fileselector-form-' + this.id) as HTMLFormElement
+        const selector = document.getElementById('fileselector-' + this.id)
+        const self = this
 
-        this._licensePicker.Update();
+        function submitHandler() {
-        const selector = document.getElementById('fileselector-' + this.id);
+            const files = $(selector).prop('files');
-        const self = this;
+            self._isUploading.setData(files.length);
-        if (selector != null) {
+
+            const opts = self._uploadOptions(self._selectedLicence.data);
+
+            Imgur.uploadMultiple(opts.title, opts.description, files,
+                function (url) {
+                    console.log("File saved at", url);
+                    self._isUploading.setData(self._isUploading.data - 1);
+                    opts.handleURL(url);
+                },
+                function () {
+                    console.log("All uploads completed")
+                    opts.allDone();
+                },
+                function(failReason) {
+                
+                },0
+            )
+        }
+
+        if (selector != null && form != null) {
             selector.onchange = function () {
-                const files = $(this).get(0).files;
+                submitHandler()
-                self._isUploading.setData(files.length);
-
-                const opts = self._uploadOptions(self._selectedLicence.data);
-
-                Imgur.uploadMultiple(opts.title, opts.description, files,
-                    function (url) {
-                        console.log("File saved at", url);
-                        self._isUploading.setData(self._isUploading.data - 1);
-                        opts.handleURL(url);
-                    },
-                    function () {
-                        console.log("All uploads completed")
-                        opts.allDone();
-                    },
-                    function(failReason) {
-                    
-                    },0
-                )
             }
+            form.addEventListener('submit', e => {
+                console.log(e)
+                alert('wait')
+                e.preventDefault()
+                submitHandler()
+            })
         }
     }
 }

index.css

@@ -16,41 +16,34 @@ form {
     box-shadow: 0 0 10px #ff5353;
 }
 
-.shadow {
-    box-shadow: 0 0 10px #00000066;
-}
-
-
-
-
 #leafletDiv {
     height: 100%;
 }
 
 #geolocate-button {
     position: absolute;
-    bottom: 25px;
+    bottom: 27px;
-    right: 50px;
+    right: 65px;
     z-index: 999; /*Just below leaflets zoom*/
     background-color: white;
     border-radius: 5px;
-    border: solid 2px #0005;
+    border: solid 2px rgba(0, 0, 0, 0.2);
     cursor: pointer;
     width: 43px;
     height: 43px;
     display: none; /*Hidden by default, only visible on mobile*/
 }
 
-#help-button-mobile {
-    display: none;
-}
-
 #geolocate-button img{
     width: 31px;
     height:31px;
     margin: 6px;
 }
 
+#geolocate-button > .uielement {
+    display: block;
+}
+
 /**************** GENERIC ****************/
 
 .uielement {
@@ -165,7 +158,7 @@ form {
     pointer-events: all;
     border-radius: 1.3em;
     margin: 0;
-    margin-bottom: 0.5em;
+    margin-bottom: 1em;
     width: 100%;
 }
 
@@ -218,15 +211,30 @@ form {
     padding-bottom: 0.2em;
 }
 
-
+@media only screen and (max-width: 600px) {
-@media only screen and (max-height: 600px) and (not (max-width:700px)) {
+    /* Portrait */
-
+    #userbadge-and-search {
-    /* Landscape and portrait */
+        display: inline-block;
-    #topleft-tools {
+        width: auto;
-        padding: 0.1em;
+        max-width: 100vw;
-        padding-left: unset;
     }
 
+    #topleft-tools {
+        margin: 0.5em;
+    }
+
+    #userbadge {
+        margin-bottom: 0.3em;
+    }
+
+}
+
+@media only screen and (max-height: 600px) {
+    /* Landscape */
+    #topleft-tools {
+        margin: 0.3em !important;
+    }
+    
     #userbadge-and-search {
         position: relative;
         display: inline-block;
@@ -244,25 +252,12 @@ form {
         padding: 0;
     }
 
-
-}
-
-
-@media only screen and (max-width: 600px) {
-    /* Portrait */
-    #userbadge-and-search {
-        display: inline-block;
-        width: auto;
-        max-width: 100vw;
-    }
-
     #topleft-tools {
-        padding: 0.2em !important;
+        margin: 0.5em;
-        padding-top: 0.3em !important;
     }
-
+    
-    #userbadge {
+    .collapse-button {
-        margin-bottom: 0.3em;
+        height: calc(100% - 3.5em) !important;
     }
 
 }
@@ -274,14 +269,13 @@ form {
 #topleft-tools {
     display: block;
     position: absolute;
+    margin: 1em;
+    margin-bottom: 0;
     padding: 0;
-    padding-top: 0.5em;
-    padding-left:0.5em;
     z-index: 5000;
     transition: all 500ms linear;
     overflow: hidden;
     pointer-events: none;
-    padding-right: 10px; /* Shadow offset */
 }
 
 #messagesboxmobilewrapper {
@@ -295,8 +289,7 @@ form {
     border-top-left-radius: 2em;
     border-bottom-left-radius: 2em;
     display: inline-block;
-    height:100%;
+    height:calc(100% - 8em);
-    box-shadow: -10px 0 10px -10px #0006;
 }
 
 .collapse-button .collapse-button-img{
@@ -307,16 +300,6 @@ form {
     width: 2em;
     border-top-left-radius: 2em;
     border-bottom-left-radius: 2em;
-    margin-bottom: 10px;
-}
-
-.open-button .collapse-button-img {
-    border-radius: 50%;
-    box-sizing: border-box;
-    display: inline-block;
-    padding: 1em;
-    background-color: white; 
-    box-shadow: 0 0 10px #0006;
 }
 
 .collapse-button-img {
@@ -324,10 +307,7 @@ form {
     box-sizing: border-box;
     display: inline-block;
     padding: 1em;
-    background-color: white;
+    background-color: white; 
-    box-shadow: none;
-    margin: 0;
-    
 }
 
 .collapse-button-img img{
@@ -347,15 +327,12 @@ form {
     border-radius: 2em;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    max-width: calc(max(35vw, 30em));
+    width: 100%;
-    max-height: calc(100vh - 15em);
+    max-width: 35vw;
-    overflow-y: auto;
-    box-shadow: 0 0 10px #00000066;
 }
 
 #messagesbox {
     /*Only shown on big screens*/
-    position: relative;
     padding: 0;
     pointer-events: all;
 }
@@ -409,7 +386,6 @@ form {
     font-weight: 600;
 }
 
-
 #filter__selection select {
     outline: none;
     background-color: #F0EFEF;
@@ -428,8 +404,6 @@ form {
     margin: 0;
     font-weight: 600;
     transform: translateY(75px);
-    max-height: calc(50vh - 10em);
-    overflow-y: auto;
 }
 
 #filter__selection ul li span > span {
@@ -459,34 +433,7 @@ form {
     border-radius: 15px 15px 0 0;
 }
 
-
+@media only screen and (max-width: 600px), only screen and (max-height: 300px) {
-#centermessage {
-    position: absolute;
-    top: 30%;
-    
-    left: 25%;
-    width: 50%;
-
-    font-size: large;
-
-    padding: 2em;
-    border-radius: 2em;
-    z-index: 4000;
-    pointer-events: none;
-
-    opacity: 1;
-    background-color: white;
-
-    transition: opacity 500ms linear;
-
-
-    text-align: center;
-    horiz-align: center;
-    font-weight: bold;
-}
-
-
-@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
     #messagesbox-wrapper {
         display: none;
     }
@@ -494,15 +441,6 @@ form {
     #messagesbox {
         display: none;
     }
-    
-    #help-button-mobile{
-        display: unset;
-    }
-    
-    #help-button-mobile div {
-        box-shadow: 0 0 10px #0006;
-        margin-bottom: 10px;
-    }
 
     #geolocate-button {
         display: block;
@@ -512,13 +450,6 @@ form {
         /* Popups are hidden on mobile */
         display: none;
     }
-    
-    #centermessage {
-        top: 30%;
-        left: 15%;
-        width: 60%;
-
-    }
 
     #messagesboxmobilewrapper {
         position: absolute;
@@ -536,11 +467,11 @@ form {
 
     #messagesboxmobile-scroll {
         display: block;
-        width: 100vw;
         overflow-y: auto;
+        width: 100vw;
         padding: 0;
         margin: 0;
-        height: calc(100% - 5em); /*Height of to-the-map is 5em*/
+        height: calc(100% - 5em); /*Height of to-the-map is 2em, padding is 2 * 0.5em*/
     }
 
     #messagesboxmobile {
@@ -549,23 +480,6 @@ form {
         border-radius: 1em;
         background-color: white;
     }
-
-    #welcomeMessage {
-        display: inline-block;
-        background-color: white;
-        padding: 1em;
-        border-radius: 0;
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        max-height: max-content;
-        box-shadow: unset;
-        overflow-y: unset;
-    }
-    
-
 }
 
 
@@ -573,36 +487,34 @@ form {
     position: relative;
 }
 
-#to-the-map > span{
+#to-the-map h2{
     
     position: absolute;
-    box-sizing: border-box;
+    height: 4em;
-    height: 3em;
     
     padding: 0.5em;
     margin: 0;
 
-    padding-top: 0.75em;
+    padding-right: 2em;
+    padding-top: 1em;
     text-align: center;
     width: 100%;
     color: white;
     background-color: #7ebc6f;
     cursor: pointer;
-    font-size: xx-large;
-    font-weight: bold;
 
 }
 
 
 @media only screen and (max-height: 400px) {
-    /* Landscape: small 'to the map' */
+    /* Landscape */
     #to-the-map {
         position: relative;
         height: 100%;
         width: 100%
     }
 
-    #to-the-map span {
+    #to-the-map h2 {
         width: auto;
         border-top-left-radius: 1.5em;
         position: absolute;
@@ -613,34 +525,65 @@ form {
         margin:0;
         padding: 1em;
         padding-bottom: 0.75em;
-        height: 3em;
+    }
-        font-size: x-large;
+
+    #to-the-map h2 span{
+        height: 100%;
+        
     }
 
     #messagesboxmobile {
-        padding-bottom: 5em;
+        padding-bottom: 4em;
     }
 
     #messagesboxmobile-scroll {
         position: absolute;
         z-index: 2;
-        width: 100vw;
         height: 100vh;
-        box-sizing: border-box;
+        overflow-y: auto;
-    }
-    
-    #welcomeMessage{
-        box-shadow: unset;
-        max-height: 100vh;
     }
 
 }
 
-.logo {
+#logo {
-    float:right;
+    position: relative;
+    display: flex;
+    float: right;
     margin: 1em;
-    width: 10em;
+    margin-top: 0;
-    height: auto;
+    margin-right: -0.5em;
+    padding: 0;
+    right: 1em;
+    top: 1em;
+    border-radius: 0;
+}
+
+#centermessage {
+    position: absolute;
+    display: block ruby;
+
+    margin: auto;
+    top: 30%;
+    left: 50%;
+    margin-left: -15%;
+    width: 30%;
+
+    font-size: large;
+
+    padding: 2em;
+    border-radius: 2em;
+    z-index: 5000;
+    pointer-events: none;
+
+    opacity: 1;
+    background-color: white;
+
+    transition: opacity 500ms linear;
+
+
+    text-align: center;
+    horiz-align: center;
+    font-weight: bold;
 }
 
 #bottomRight {
@@ -855,28 +798,9 @@ form {
     width: 40em !important;
 }
 
-#messagesboxmobile .featureinfobox {
-    max-height: unset;
-    overflow-y: unset;
-}
-
-#messagesboxmobile .featureinfobox > div {
-    width: 100%;
-    max-width: unset;
-    padding-left: unset;
-}
-
 .featureinfobox {
-    max-height: 80vh;
-    overflow-y: auto;
 }
 
-.featureinfobox > div {
-    width: calc(100% - 2em);
-    padding-left: 1em;
-}
-
-
 .featureinfoboxtitle {
     position: relative;
 }

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "start": "parcel *.html UI/** Logic/** assets/**/* vendor/* vendor/*/*",
     "generate": "ts-node createLayouts.ts",
-    "build": "rm -rf dist/ && parcel build --public-url ./ *.html assets/* assets/*/* vendor/* vendor/*/*",
+    "build": "rm -rf dist/ && parcel build --public-url ./ *.html assets/* assets/**/* vendor/* vendor/*/*",
     "clean": "./clean.sh",
     "test": "echo \"Error: no test specified\" && exit 1"
   },