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 "locate me"; + return "locate me"; } if (this._isActive.data) { - return "locate me"; + return "locate me"; } - return "locate me"; + return "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 + "" + - + "
" + "" + + "
" + "" ; @@ -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 0000000..31f28de Binary files /dev/null and b/assets/crosshair-blue-center.png differ diff --git a/assets/crosshair-blue.png b/assets/crosshair-blue.png new file mode 100644 index 0000000..a17ad79 Binary files /dev/null and b/assets/crosshair-blue.png differ diff --git a/assets/crosshair.png b/assets/crosshair.png new file mode 100644 index 0000000..104c960 Binary files /dev/null and b/assets/crosshair.png differ 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" },