From 5123c3836e5ea58d41008bd90cb7b6dad8199863 Mon Sep 17 00:00:00 2001
From: Pieter Fiers <pieter@pfiers.net>
Date: Mon, 27 Jul 2020 13:04:38 +0200
Subject: [PATCH] Add ios fixes

---
 Logic/GeoLocationHandler.ts      |   6 +-
 Logic/LayerUpdater.ts            |   4 +-
 UI/ImageUploadFlow.ts            |  60 ++++---
 assets/crosshair-blue-center.png | Bin 0 -> 3799 bytes
 assets/crosshair-blue.png        | Bin 0 -> 3779 bytes
 assets/crosshair.png             | Bin 0 -> 3754 bytes
 index.css                        | 264 +++++++++++--------------------
 package.json                     |   2 +-
 8 files changed, 136 insertions(+), 200 deletions(-)
 create mode 100644 assets/crosshair-blue-center.png
 create mode 100644 assets/crosshair-blue.png
 create mode 100644 assets/crosshair.png

diff --git a/Logic/GeoLocationHandler.ts b/Logic/GeoLocationHandler.ts
index e84c3c1..29ae5c5 100644
--- a/Logic/GeoLocationHandler.ts
+++ b/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'>";
     }
 
     
diff --git a/Logic/LayerUpdater.ts b/Logic/LayerUpdater.ts
index 70c10d3..5739a27 100644
--- a/Logic/LayerUpdater.ts
+++ b/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
         )
     }
 
diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts
index 4906333..3bf9675 100644
--- a/UI/ImageUploadFlow.ts
+++ b/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();
-        const selector = document.getElementById('fileselector-' + this.id);
-        const self = this;
-        if (selector != null) {
+        function submitHandler() {
+            const files = $(selector).prop('files');
+            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
+            )
+        }
+
+        if (selector != null && form != null) {
             selector.onchange = function () {
-                const files = $(this).get(0).files;
-                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
-                )
+                submitHandler()
             }
+            form.addEventListener('submit', e => {
+                console.log(e)
+                alert('wait')
+                e.preventDefault()
+                submitHandler()
+            })
         }
     }
 }
\ No newline at end of file
diff --git a/assets/crosshair-blue-center.png b/assets/crosshair-blue-center.png
new file mode 100644
index 0000000000000000000000000000000000000000..31f28de29d11a5f8f0d508a6b1a97bb114e193fe
GIT binary patch
literal 3799
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
AcK`qY

literal 0
HcmV?d00001

diff --git a/assets/crosshair-blue.png b/assets/crosshair-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..a17ad79287c416bfad2238e15ea5af3e5baddef6
GIT binary patch
literal 3779
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

literal 0
HcmV?d00001

diff --git a/assets/crosshair.png b/assets/crosshair.png
new file mode 100644
index 0000000000000000000000000000000000000000..104c9603ac2f3da37e0c2e41d68d4c4f5486b060
GIT binary patch
literal 3754
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
A%>V!Z

literal 0
HcmV?d00001

diff --git a/index.css b/index.css
index 3bd5f51..11c2f5a 100644
--- a/index.css
+++ b/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;
-    right: 50px;
+    bottom: 27px;
+    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-height: 600px) and (not (max-width:700px)) {
-
-    /* Landscape and portrait */
-    #topleft-tools {
-        padding: 0.1em;
-        padding-left: unset;
+@media only screen and (max-width: 600px) {
+    /* Portrait */
+    #userbadge-and-search {
+        display: inline-block;
+        width: auto;
+        max-width: 100vw;
     }
 
+    #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;
-        padding-top: 0.3em !important;
+        margin: 0.5em;
     }
-
-    #userbadge {
-        margin-bottom: 0.3em;
+    
+    .collapse-button {
+        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%;
-    box-shadow: -10px 0 10px -10px #0006;
+    height:calc(100% - 8em);
 }
 
 .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;
-    box-shadow: none;
-    margin: 0;
-    
+    background-color: white; 
 }
 
 .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));
-    max-height: calc(100vh - 15em);
-    overflow-y: auto;
-    box-shadow: 0 0 10px #00000066;
+    width: 100%;
+    max-width: 35vw;
 }
 
 #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;
 }
 
-
-#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) {
+@media only screen and (max-width: 600px), only screen and (max-height: 300px) {
     #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: 3em;
+    height: 4em;
     
     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;
-    }
-    
-    #welcomeMessage{
-        box-shadow: unset;
-        max-height: 100vh;
+        overflow-y: auto;
     }
 
 }
 
-.logo {
-    float:right;
+#logo {
+    position: relative;
+    display: flex;
+    float: right;
     margin: 1em;
-    width: 10em;
-    height: auto;
+    margin-top: 0;
+    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;
 }
diff --git a/package.json b/package.json
index 3d163c7..24a4144 100644
--- a/package.json
+++ b/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"
   },