From 57c9fcc5aaa5ef28db4a6935aeec5158458b2a1d Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 28 Jun 2020 00:06:23 +0200 Subject: [PATCH] Lots of styling, mobile friendliness, better UI flows --- Layers/CommonTagMappings.ts | 28 ++++++- Layers/KnownSet.ts | 4 +- Layers/Park.ts | 5 +- Logic/Basemap.ts | 11 ++- Logic/ImageSearcher.ts | 2 +- Logic/Imgur.ts | 2 + Logic/OsmConnection.ts | 3 +- Logic/OsmImageUploadHandler.ts | 8 +- Quests.ts | 4 +- README.md | 12 ++- UI/DropDownUI.ts | 47 ++++++++++++ UI/FeatureInfoBox.ts | 36 +++++---- UI/Image/ImageCarousel.ts | 4 +- UI/ImageUploadFlow.ts | 67 ++++++++++++----- UI/MessageBoxHandler.ts | 4 +- UI/QuestionPicker.ts | 4 +- UI/SlideShow.ts | 30 ++++---- UI/TagMapping.ts | 15 +++- UI/VerticalCombine.ts | 20 +++-- assets/camera-centered.svg | 2 + assets/camera-plus.svg | 79 ++++++++++++++++++++ assets/test.json | 2 +- assets/wikipedia.svg | 3 + index.css | 130 ++++++++++++++++++++++++++------- index.html | 6 +- index.ts | 3 +- test.html | 2 +- test.ts | 24 +++++- 28 files changed, 440 insertions(+), 117 deletions(-) create mode 100644 UI/DropDownUI.ts create mode 100644 assets/camera-centered.svg create mode 100644 assets/camera-plus.svg create mode 100644 assets/wikipedia.svg diff --git a/Layers/CommonTagMappings.ts b/Layers/CommonTagMappings.ts index 6417bfc..f64b163 100644 --- a/Layers/CommonTagMappings.ts +++ b/Layers/CommonTagMappings.ts @@ -27,10 +27,34 @@ export class CommonTagMappings { public static osmLink = new TagMappingOptions({ key: "id", mapping: { - "node/-1": "Over enkele momenten sturen we je punt naar OpenStreetMap" + "node/-1": "" }, template: "" + Img.osmAbstractLogo + "" - }) + }); + + public static wikipediaLink = new TagMappingOptions({ + key: "wikipedia", + missing: "", + freeform: (value: string) => { + let link = ""; + // @ts-ignore + if (value.startsWith("https")) { + link = value; + } else { + + const splitted = value.split(":"); + const language = splitted[0]; + splitted.shift(); + const page = splitted.join(":"); + link = 'https://' + language + '.wikipedia.org/wiki/' + page; + + } + return "" + + "" + + "wikipedia"; + } + }); } \ No newline at end of file diff --git a/Layers/KnownSet.ts b/Layers/KnownSet.ts index 580e065..5deeb1e 100644 --- a/Layers/KnownSet.ts +++ b/Layers/KnownSet.ts @@ -65,8 +65,8 @@ export class KnownSet { "\n" + "

De data komt van OpenStreetMap en je antwoorden worden daar ook opgeslaan. " + "Omdat iedereen aan deze data bijdraagt, kunnen we geen garantie op correctheid bieden en heeft deze data geen juridische waarde

\n" + - "

Je privacy is belangrijk. We tellen wel hoeveel personen de website bezoeken. Om je niet dubbel te tellen wordt er één coockie bijgehouden waar geen persoonlijke informatie in staat. " + - "Als je inlogt, komt er een tweede coockie bij met je inloggegevens.

\n", + "

Je privacy is belangrijk. We tellen wel hoeveel personen de website bezoeken. Om je niet dubbel te tellen wordt er één cookie bijgehouden waar geen persoonlijke informatie in staat. " + + "Als je inlogt, komt er een tweede cookie bij met je inloggegevens.

\n", "

Wil je meehelpen?
\n" + " Begin dan met een account\n" + " te maken of\n" + diff --git a/Layers/Park.ts b/Layers/Park.ts index dbdb244..7263961 100644 --- a/Layers/Park.ts +++ b/Layers/Park.ts @@ -3,7 +3,7 @@ import {Quests} from "../Quests"; import {TagMappingOptions} from "../UI/TagMapping"; import L from "leaflet" import {CommonTagMappings} from "./CommonTagMappings"; -import {Tag} from "../Logic/TagsFilter"; +import {Or, Tag} from "../Logic/TagsFilter"; export class Park extends LayerDefinition { @@ -11,7 +11,8 @@ export class Park extends LayerDefinition { super(); this.name = "park"; this.icon = "./assets/tree_white_background.svg"; - this.overpassFilter = new Tag("leisure","park"); + this.overpassFilter = + new Or([new Tag("leisure","park"), new Tag("landuse","village_green")]); this.newElementTags = [new Tag("leisure", "park"), new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]; this.removeTouchingElements = true; diff --git a/Logic/Basemap.ts b/Logic/Basemap.ts index db53e48..0f4f3e6 100644 --- a/Logic/Basemap.ts +++ b/Logic/Basemap.ts @@ -62,22 +62,21 @@ export class Basemap { center: [location.data.lat, location.data.lon], zoom: location.data.zoom, layers: [this.osmLayer], - attributionControl: false }); - L.control.attribution({ - position: 'bottomleft' - }).addTo(this.map); this.Location = location; const layerControl = L.control.layers(this.baseLayers, null, { - position: 'bottomleft', + position: 'bottomright', hideSingleBase: true }) layerControl.addTo(this.map); + + + - this.map.zoomControl.setPosition("bottomleft"); + this.map.zoomControl.setPosition("bottomright"); const self = this; this.map.on("moveend", function () { diff --git a/Logic/ImageSearcher.ts b/Logic/ImageSearcher.ts index 84f3335..08a630e 100644 --- a/Logic/ImageSearcher.ts +++ b/Logic/ImageSearcher.ts @@ -15,7 +15,7 @@ export class ImageSearcher extends UIEventSource { private readonly _wdItem = new UIEventSource(""); private readonly _commons = new UIEventSource(""); private _activated: boolean = false; - + constructor(tags: UIEventSource) { super([]); diff --git a/Logic/Imgur.ts b/Logic/Imgur.ts index 5785a11..71118e5 100644 --- a/Logic/Imgur.ts +++ b/Logic/Imgur.ts @@ -60,6 +60,8 @@ export class Imgur { $.ajax(settings).done(function (response) { response = JSON.parse(response); handleSuccessfullUpload(response.data.link); + }).fail((reason) => { + console.log("Uploading to IMGUR failed", reason) }); } diff --git a/Logic/OsmConnection.ts b/Logic/OsmConnection.ts index 076ec66..078f4f4 100644 --- a/Logic/OsmConnection.ts +++ b/Logic/OsmConnection.ts @@ -90,12 +90,13 @@ export class OsmConnection { */ registerActivateOsmAUthenticationClass() { + const self = this; const authElements = document.getElementsByClassName("activate-osm-authentication"); for (let i = 0; i < authElements.length; i++) { let element = authElements.item(i); // @ts-ignore element.onclick = function () { - this.AttemptLogin(); + self.AttemptLogin(); } } } diff --git a/Logic/OsmImageUploadHandler.ts b/Logic/OsmImageUploadHandler.ts index bf6212c..51a0776 100644 --- a/Logic/OsmImageUploadHandler.ts +++ b/Logic/OsmImageUploadHandler.ts @@ -5,16 +5,20 @@ import {UIEventSource} from "../UI/UIEventSource"; import {ImageUploadFlow} from "../UI/ImageUploadFlow"; import {Changes} from "./Changes"; import {UserDetails} from "./OsmConnection"; +import {SlideShow} from "../UI/SlideShow"; export class OsmImageUploadHandler { private _tags: UIEventSource; private _changeHandler: Changes; private _userdetails: UIEventSource; + private _slideShow: SlideShow; constructor(tags: UIEventSource, userdetails: UIEventSource, - changeHandler: Changes + changeHandler: Changes, + slideShow : SlideShow ) { + this._slideShow = slideShow; // To move the slideshow (if any) to the last, just added element if (tags === undefined || userdetails === undefined || changeHandler === undefined) { throw "Something is undefined" } @@ -25,6 +29,7 @@ export class OsmImageUploadHandler { private generateOptions(license: string) { const tags = this._tags.data; + const self = this; const title = tags.name ?? "Unknown area"; const description = [ @@ -46,6 +51,7 @@ export class OsmImageUploadHandler { } console.log("Adding image:" + freeIndex, url); changes.addChange(tags.id, "image:" + freeIndex, url); + self._slideShow.MoveTo(-1); // set the last (thus newly added) image) to view }, allDone: function () { changes.uploadAll(function () { diff --git a/Quests.ts b/Quests.ts index 5b55993..e649fe0 100644 --- a/Quests.ts +++ b/Quests.ts @@ -55,7 +55,7 @@ export class Quests { static nameOf(name: string) : QuestionDefinition { return QuestionDefinition.noNameOrNameQuestion("Wat is de officiële naam van dit " + name + "?
" + - "Gelieve geen naam uit te vinden", + "Veel gebieden hebben geen naam. Duid dit dan ook zo aan.", "Dit " + name + " heeft geen naam", 20); } @@ -66,7 +66,7 @@ export class Quests { "operator", [{text: "Natuurpunt", value: "Natuurpunt"}, {text: "Het Agenschap voor Natuur en Bos", value: "Agentschap Natuur en Bos"}, - {text: "Een prive-eigenaar beheert dit", value: "private"} + {text: "Een prive-eigenaar", value: "private"} ] ).addUnrequiredTag("access", "private") .addUnrequiredTag("access", "no"); diff --git a/README.md b/README.md index 3d22e6e..59de3a0 100644 --- a/README.md +++ b/README.md @@ -56,4 +56,14 @@ Images are fetched from: Images are uplaoded to imgur, as their API was way easier to handle. The URL is written into the changes -The idea is that one in a while, the images are transfered to wikipedia \ No newline at end of file +The idea is that one in a while, the images are transfered to wikipedia + + + + +# Attributions: + +Data from OpenStreetMap +Images from Wikipedia/Wikimedia + +https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg diff --git a/UI/DropDownUI.ts b/UI/DropDownUI.ts new file mode 100644 index 0000000..b551eea --- /dev/null +++ b/UI/DropDownUI.ts @@ -0,0 +1,47 @@ +import {UIElement} from "./UIElement"; +import {UIEventSource} from "./UIEventSource"; + +export class DropDownUI extends UIElement { + + selectedElement: UIEventSource + private _label: string; + private _values: { value: string; shown: string }[]; + + constructor(label: string, values: { value: string, shown: string }[]) { + super(undefined); + this._label = label; + this._values = values; + this.selectedElement = new UIEventSource(values[0].value); + + } + + + protected InnerRender(): string { + + let options = ""; + for (const value of this._values) { + options += "" + } + + return "

" + + "" + + "" + + "
"; + } + + InnerUpdate(htmlElement: HTMLElement) { + super.InnerUpdate(htmlElement); + + const self = this; + const e = document.getElementById("dropdown-" + this.id); + e.onchange = function () { + // @ts-ignore + const selectedValue = e.options[e.selectedIndex].value; + + self.selectedElement.setData(selectedValue); + } + } + +} \ No newline at end of file diff --git a/UI/FeatureInfoBox.ts b/UI/FeatureInfoBox.ts index 1431da5..4444fa7 100644 --- a/UI/FeatureInfoBox.ts +++ b/UI/FeatureInfoBox.ts @@ -11,6 +11,7 @@ import {UserDetails} from "../Logic/OsmConnection"; import {Img} from "./Img"; import {CommonTagMappings} from "../Layers/CommonTagMappings"; import {Tag} from "../Logic/TagsFilter"; +import {ImageUploadFlow} from "./ImageUploadFlow"; export class FeatureInfoBox extends UIElement { @@ -27,6 +28,8 @@ export class FeatureInfoBox extends UIElement { private _changes: Changes; private _userDetails: UIEventSource; private _imageElement: ImageCarousel; + private _pictureUploader: UIElement; + private _wikipedialink: UIElement; constructor( @@ -66,27 +69,37 @@ export class FeatureInfoBox extends UIElement { this._infoElements = infoboxes; this._osmLink = new TagMapping(CommonTagMappings.osmLink, this._tagsES); + this._wikipedialink = new TagMapping(CommonTagMappings.wikipediaLink, this._tagsES); + this._pictureUploader = new OsmImageUploadHandler(tagsES, userDetails, changes, this._imageElement.slideshow).getUI(); } InnerRender(): string { + let questions = ""; + + if (this._userDetails.data.loggedIn) { + questions = this._questions.HideOnEmpty(true).Render(); + } return "
" + "
" + "" + this._title.Render() + "" + + this._wikipedialink.Render() + this._osmLink.Render() + "
" + - + "
" + this._imageElement.Render() + + this._pictureUploader.Render() + + + new VerticalCombine(this._infoElements, 'infobox-information').HideOnEmpty(true).Render() + + + questions + + - new VerticalCombine(this._infoElements).Render() + - " " + - this._questions.Render() + - " " + "
" + "" + "
"; @@ -95,21 +108,12 @@ export class FeatureInfoBox extends UIElement { Activate() { super.Activate(); this._imageElement.Activate(); + this._pictureUploader.Activate(); } Update() { super.Update(); this._imageElement.Update(); - } - - private generateInfoBox() { - var infoboxes: UIElement[] = []; - - infoboxes.push(new OsmImageUploadHandler( - this._tagsES, this._userDetails, this._changes - ).getUI()); - - - return new VerticalCombine(infoboxes); + this._pictureUploader.Update(); } } diff --git a/UI/Image/ImageCarousel.ts b/UI/Image/ImageCarousel.ts index 5200d58..6268565 100644 --- a/UI/Image/ImageCarousel.ts +++ b/UI/Image/ImageCarousel.ts @@ -18,7 +18,7 @@ export class ImageCarousel extends UIElement { */ private readonly searcher: ImageSearcher; - private readonly slideshow: SlideShow; + public readonly slideshow: SlideShow; constructor(tags: UIEventSource) { super(tags); @@ -32,8 +32,8 @@ export class ImageCarousel extends UIElement { } return uiElements; }); + this.slideshow = new SlideShow( - new FixedUiElement("Afbeeldingen"), uiElements, new FixedUiElement("")).HideOnEmpty(true); } diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts index 998807a..ea4c2c2 100644 --- a/UI/ImageUploadFlow.ts +++ b/UI/ImageUploadFlow.ts @@ -1,13 +1,14 @@ import {UIElement} from "./UIElement"; import {UIEventSource} from "./UIEventSource"; -import {UIRadioButton} from "./UIRadioButton"; import {VariableUiElement} from "./VariableUIElement"; import $ from "jquery" import {Imgur} from "../Logic/Imgur"; import {UserDetails} from "../Logic/OsmConnection"; +import {DropDownUI} from "./DropDownUI"; export class ImageUploadFlow extends UIElement { - private _licensePicker: UIRadioButton; + private _licensePicker: UIElement; + private _selectedLicence: UIEventSource; private _licenseExplanation: UIElement; private _isUploading: UIEventSource = new UIEventSource(0) private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) }; @@ -28,26 +29,32 @@ export class ImageUploadFlow extends UIElement { this.ListenTo(userInfo); this._uploadOptions = uploadOptions; this.ListenTo(this._isUploading); - this._licensePicker = UIRadioButton.FromStrings( + + const licensePicker = new DropDownUI("Jouw foto wordt gepubliceerd ", + [ - "CC-BY-SA", - "CC-BY", - "CC0" + {value: "CC0", shown: "in het publiek domein"}, + {value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"}, + {value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"} ] ); + this._licensePicker = licensePicker; + this._selectedLicence = licensePicker.selectedElement; + + const licenseExplanations = { - "CC-BY-SA": + "CC-BY-SA 4.0": "Creative Commonse met naamsvermelding en gelijk delen
" + "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden én ze afgeleide werken met deze licentie en attributie delen.", - "CC-BY": + "CC-BY 4.0": "Creative Commonse met naamsvermelding
" + "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden", "CC0": "Geen copyright
Je foto mag door iedereen voor alles gebruikt worden" } this._licenseExplanation = new VariableUiElement( - this._licensePicker.SelectedElementIndex.map((license) => { - return licenseExplanations[license?.value] + this._selectedLicence.map((license) => { + return licenseExplanations[license] }) ); } @@ -58,37 +65,57 @@ export class ImageUploadFlow extends UIElement { if (!this._userdetails.data.loggedIn) { return "
Gelieve je aan te melden om een foto toe te voegen
"; } - + if (this._isUploading.data == 1) { + return "Bezig met een foto te uploaden..." + } if (this._isUploading.data > 0) { return "Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan..." } - return "Foto's toevoegen
" + - 'Kies een licentie:
' + + return "" + + "
" + + + "" + + + "" + + + "
" ; } InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); const user = this._userdetails.data; - if(!user.loggedIn){ - htmlElement.onclick = function(){ + + htmlElement.onclick = function () { + if (!user.loggedIn) { user.osmConnection.AttemptLogin(); } } - + + this._licensePicker.Update(); const selector = document.getElementById('fileselector-' + this.id); const self = this; if (selector != null) { - selector.onchange = function (event) { + selector.onchange = function () { const files = $(this).get(0).files; self._isUploading.setData(files.length); - const opts = self._uploadOptions(self._licensePicker.SelectedElementIndex.data.value); + const opts = self._uploadOptions(self._selectedLicence.data); Imgur.uploadMultiple(opts.title, opts.description, files, function (url) { diff --git a/UI/MessageBoxHandler.ts b/UI/MessageBoxHandler.ts index b018822..ee528ef 100644 --- a/UI/MessageBoxHandler.ts +++ b/UI/MessageBoxHandler.ts @@ -15,9 +15,9 @@ export class MessageBoxHandler { this.listenTo(uielement); this.update(); - new VariableUiElement(new UIEventSource("

Naar de kaart >

"), + new VariableUiElement(new UIEventSource("

Naar de kaart

"), (htmlElement) => { - htmlElement.onclick = function () { + document.getElementById("to-the-map").onclick = function () { uielement.setData(undefined); onClear(); } diff --git a/UI/QuestionPicker.ts b/UI/QuestionPicker.ts index a550af6..16ecd57 100644 --- a/UI/QuestionPicker.ts +++ b/UI/QuestionPicker.ts @@ -39,7 +39,9 @@ export class QuestionPicker extends UIElement { return ""; } - return highestQ.CreateHtml(this.source).Render(); + return "
" + + highestQ.CreateHtml(this.source).Render() + + "
"; } InnerUpdate(htmlElement: HTMLElement) { } diff --git a/UI/SlideShow.ts b/UI/SlideShow.ts index 1810a2d..8ea57d9 100644 --- a/UI/SlideShow.ts +++ b/UI/SlideShow.ts @@ -9,7 +9,6 @@ export class SlideShow extends UIElement { private readonly _noimages: UIElement; constructor( - title: UIElement, embeddedElements: UIEventSource, noImages: UIElement) { super(embeddedElements); @@ -24,7 +23,9 @@ export class SlideShow extends UIElement { } if (this._embeddedElements.data.length == 1) { - return "
"+this._embeddedElements.data[0].Render()+"
"; + return "
" + + this._embeddedElements.data[0].Render() + + "
"; } const prevBtn = "
" @@ -46,26 +47,29 @@ export class SlideShow extends UIElement { + ""; } + public MoveTo(index: number) { + if (index < 0) { + index = this._embeddedElements.data.length - 1; + } + index = index % this._embeddedElements.data.length; + this._currentSlide.setData(index); + } + InnerUpdate(htmlElement) { - const nextButton = document.getElementById("nextbtn-"+this.id); - if(nextButton === undefined || nextButton === null){ + const nextButton = document.getElementById("nextbtn-" + this.id); + if (nextButton === undefined || nextButton === null) { return; } - - const prevButton = document.getElementById("prevbtn-"+this.id); + + const prevButton = document.getElementById("prevbtn-" + this.id); const self = this; nextButton.onclick = () => { const current = self._currentSlide.data; - const next = (current + 1) % self._embeddedElements.data.length; - self._currentSlide.setData(next); + self.MoveTo(current + 1); } prevButton.onclick = () => { const current = self._currentSlide.data; - let prev = (current - 1); - if (prev < 0) { - prev = self._embeddedElements.data.length - 1; - } - self._currentSlide.setData(prev); + self.MoveTo(current - 1); } } diff --git a/UI/TagMapping.ts b/UI/TagMapping.ts index 9185d44..547dd80 100644 --- a/UI/TagMapping.ts +++ b/UI/TagMapping.ts @@ -7,17 +7,20 @@ export class TagMappingOptions { mapping?: any;// dictionary for specific values, the values are substituted template?: string; // The template, where {key} will be substituted missing?: string// What to show when the key is not there + freeform?: ((string) => string) // Freeform template function, only applied on the value if nothing matches constructor(options: { key: string, mapping?: any, template?: string, missing?: string + freeform?: ((string) => string) }) { this.key = options.key; this.mapping = options.mapping; this.template = options.template; this.missing = options.missing; + this.freeform = options.freeform; } } @@ -60,12 +63,16 @@ export class TagMapping extends UIElement { } } - if (o.template === undefined) { - console.log("Warning: no match for " + o.key + "=" + v); - return v; + if (o.template !== undefined) { + return o.template.replace("{" + o.key + "}", v); } - return o.template.replace("{" + o.key + "}", v); + if(o.freeform !== undefined){ + return o.freeform(v); + } + + console.log("Warning: no match for " + o.key + "=" + v); + return v; } InnerUpdate(htmlElement: HTMLElement) { } diff --git a/UI/VerticalCombine.ts b/UI/VerticalCombine.ts index de28e0c..0d9b5a5 100644 --- a/UI/VerticalCombine.ts +++ b/UI/VerticalCombine.ts @@ -2,20 +2,28 @@ import {UIElement} from "./UIElement"; export class VerticalCombine extends UIElement { private _elements: UIElement[]; - - constructor(elements: UIElement[]) { + private _className: string; + + constructor(elements: UIElement[], className: string = undefined) { super(undefined); this._elements = elements; + this._className = className; } protected InnerRender(): string { let html = ""; - for (const element of this._elements){ + for (const element of this._elements) { if (!element.IsEmpty()) { - html += "
" + element.Render() + "

"; + html += "
" + element.Render() + "
"; } - } - return html; + } + if(html === ""){ + return ""; + } + if (this._className === undefined) { + return html; + } + return "
" + html + "
"; } InnerUpdate(htmlElement: HTMLElement) { for (const element of this._elements){ diff --git a/assets/camera-centered.svg b/assets/camera-centered.svg new file mode 100644 index 0000000..2ead819 --- /dev/null +++ b/assets/camera-centered.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/assets/camera-plus.svg b/assets/camera-plus.svg new file mode 100644 index 0000000..77201f2 --- /dev/null +++ b/assets/camera-plus.svg @@ -0,0 +1,79 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/assets/test.json b/assets/test.json index 3d707d0..bcd89e5 100644 --- a/assets/test.json +++ b/assets/test.json @@ -577,7 +577,7 @@ ], "tags": { "leisure": "park", - "name:etymology:wikidata": "Q12974", + "name:etymology:wikidata": "Q12974", "surface": "wood", "wikidata": "Q54817470", "wikipedia": "nl:Koning Albertpark (Brugge)" diff --git a/assets/wikipedia.svg b/assets/wikipedia.svg new file mode 100644 index 0000000..87876d4 --- /dev/null +++ b/assets/wikipedia.svg @@ -0,0 +1,3 @@ + + +Wikipedia logo version 2 \ No newline at end of file diff --git a/index.css b/index.css index 9402a8e..ed28323 100644 --- a/index.css +++ b/index.css @@ -144,7 +144,7 @@ img { #welcomeMessage { display: inline-block; - width: 30em; + max-width: 30em; } @@ -152,14 +152,6 @@ img { display: none; /*Only shown on small screens*/ } -#messagesboxmobile { - padding-left: 1.5em; - padding-right: 1.5em; - padding-top: 1em; - padding-bottom: 0; - height: 90%; -} - #messagesbox { /*Only shown on big screens*/ padding: 2em; @@ -192,12 +184,40 @@ img { width: 100%; height: 100%; display: block; - overflow-y: auto; background-color: white; + } + #messagesboxmobile-scroll { + display: block; + overflow-y: auto; + height: calc(100vh - 9em); + padding-top: 1em; + padding-bottom: 2em; + margin-bottom: 0; + } + #messagesboxmobile { + margin: 1em; + margin-bottom: 2em; } } + +#to-the-map { + margin: 0; + padding: 1em; + padding-right: 2em; + color: white; + background-color: #7ebc6f; + position: absolute; + bottom: 0; + right: 0; + text-align: right; + width: 100%; + height: 4em; + cursor: pointer; +} + + #logo { position: relative; display: flex; @@ -279,6 +299,7 @@ img { } .slides { + overflow: hidden; } .prev-button { @@ -380,6 +401,54 @@ img { color: white; } + +/**************** Image upload flow ***************/ + +.imageflow { + margin-top: 1em; + margin-bottom: 2em; + text-align: center; + +} + +.imageflow-file-input-wrapper { + display: flex; + flex-wrap: wrap; + padding: 0.5em; + border-radius: 1em; + border: 3px solid black; +} + +.imageflow-add-picture { + font-size: 28px; + font-weight: bold; + float: left; + margin-top: 4px; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 13px; +} + +.imageflow-file-input-wrapper img { + width: 36px; + height: 36px; + padding: 0.1em; + margin-top: 5px; + border-radius: 0; + float: left; +} + + +.license-picker { + background-color: orange; + float: left; +} + +.imageflow > input { + display: none; +} + + /***************** Info box (box containing features and questions ******************/ .featureinfobox { @@ -394,9 +463,21 @@ img { right: 0; } - .osm-logo path { - fill: #80cf36; + fill: #7ebc6f; +} + +.wikipedialink { + position: absolute; + right: 24px; + width: 24px; + height: 24px; + padding-right: 12px; +} + +.wikipedialink img { + width: 24px; + height: 24px; } @@ -412,24 +493,21 @@ img { .infoboxcontents { - + margin-top: 1em; + margin-bottom: 0.5em; } -.infboxcontents-left { - width: auto; - display: inline-block; - float: left; - padding: 0.1em; -} - -.infboxcontents-right { - padding: 0.1em; - overflow: hidden; - display: inline-block; +.infobox-information { + width: 100%; + margin-top: 1em; } .infobox-questions { - max-width: 25em; - display: inline-block; + margin-top: 1em; + background-color: #e5f5ff; + padding: 1em; + border-radius: 1em; + margin-right: 1em; + } \ No newline at end of file diff --git a/index.html b/index.html index 0bf6704..150f998 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + MapComplete
-
Return to map
+
+
+
Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is blocking it.
+ Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is blocking it.

diff --git a/index.ts b/index.ts index 8fa5aa5..5d5ba08 100644 --- a/index.ts +++ b/index.ts @@ -26,7 +26,7 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") { dryRun = true; // If you have a testfile somewhere, enable this to spoof overpass // This should be hosted independantly, e.g. with `cd assets; webfsd -p 8080` + a CORS plugin to disable cors rules - Overpass.testUrl = "http://127.0.0.1:8080/test.json"; + // Overpass.testUrl = "http://127.0.0.1:8080/test.json"; } @@ -124,7 +124,6 @@ addButton.Update(); * Show the questions and information for the selected element on the leftMessage */ selectedElement.addCallback((data) => { - console.log("Got selection"); // Which is the applicable set? for (const layer of questSetToRender.layers) { diff --git a/test.html b/test.html index e7381ba..5b263e0 100644 --- a/test.html +++ b/test.html @@ -5,7 +5,7 @@ -
Hello World
+
Hello World
diff --git a/test.ts b/test.ts index 7891377..a15f9bf 100644 --- a/test.ts +++ b/test.ts @@ -12,6 +12,8 @@ import {TagMapping, TagMappingOptions} from "./UI/TagMapping"; import {CommonTagMappings} from "./Layers/CommonTagMappings"; import {ImageCarousel} from "./UI/Image/ImageCarousel"; import {WikimediaImage} from "./UI/Image/WikimediaImage"; +import {OsmImageUploadHandler} from "./Logic/OsmImageUploadHandler"; +import {DropDownUI} from "./UI/DropDownUI"; const centerMessage = new UIEventSource(""); @@ -60,11 +62,25 @@ const tags ={ operator: "Natuurpunt Brugge", phone: "+32 50 82 26 97", website: "https://natuurpuntbrugge.be/schobbejakshoogte/", - wikidata: "Q4499623", - wikipedia: "nl:Schobbejakshoogte" + // wikidata: "Q4499623", + wikipedia: "nl:Schobbejakshoogte", }; const tagsES = allElements.addElement({properties: tags}); -new ImageCarousel(tagsES).AttachTo("maindiv").Activate(); -// new WikimediaImage(new UIEventSource("File:Brugge_cobblestone_path.jpg")).AttachTo("maindiv"); +/* +new OsmImageUploadHandler(tagsES, osmConnection.userDetails, changes) + .getUI().AttachTo("maindiv"); + +/*/ + +new FeatureInfoBox( + tagsES, + layer.elementsToShow, + layer.questions, + changes, + osmConnection.userDetails +).AttachTo("maindiv").Activate(); +//*/ + +