midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add ios fixes

Browse source
This commit is contained in:
Pieter Fiers 2020-07-27 13:04:38 +02:00
parent c26b037ca5
commit 5123c3836e
8 changed files with 136 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Logic/GeoLocationHandler.ts
View file

@ -82,13 +82,13 @@ export class GeoLocationHandler extends UIElement {
InnerRender(): string { InnerRender(): string {
if (this.currentLocation.data) { 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) { 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'>";
} }

4
Logic/LayerUpdater.ts
View file

@ -71,12 +71,12 @@ export class LayerUpdater {
private _failCount = 0; private _failCount = 0;
private handleFail(reason: any) { 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; this.previousBounds = undefined;
const self = this; const self = this;
this._failCount++; this._failCount++;
window?.setTimeout( window?.setTimeout(
function(){self.update()}, this._failCount * 1000 function(){self.update()}, this._failCount * 5000
) )
} }

60
UI/ImageUploadFlow.ts
View file

@ -81,12 +81,13 @@ export class ImageUploadFlow extends UIElement {
uploadingMessage + uploadingMessage +
"</label>" + "</label>" +
"<form id='fileselector-form-" + this.id + "'>" +
"<input id='fileselector-" + this.id + "' " + "<input id='fileselector-" + this.id + "' " +
"type='file' " + "type='file' " +
"class='imageflow-file-input' " + "class='imageflow-file-input' " +
"accept='image/*' name='picField' size='24' multiple='multiple' alt=''" + "accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
"/>" + "/>" +
"</form>" +
"</div>" "</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 () { 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()
})
} }
} }
} }

BIN
assets/crosshair-blue-center.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
assets/crosshair-blue.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
assets/crosshair.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

256
index.css
View file

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

2
package.json
View file

@ -14,7 +14,7 @@
"scripts": { "scripts": {
"start": "parcel *.html UI/** Logic/** assets/**/* vendor/* vendor/*/*", "start": "parcel *.html UI/** Logic/** assets/**/* vendor/* vendor/*/*",
"generate": "ts-node createLayouts.ts", "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", "clean": "./clean.sh",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },