Add ios fixes
This commit is contained in:
Pieter Fiers
parent
c26b037ca5
commit
5123c3836e
|
|
@ -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'>";
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
assets/crosshair-blue-center.png
Normal file
BIN
assets/crosshair-blue-center.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
assets/crosshair-blue.png
Normal file
BIN
assets/crosshair-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
assets/crosshair.png
Normal file
BIN
assets/crosshair.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
264
index.css
264
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue