Lots of styling, mobile friendliness, better UI flows

Layers/CommonTagMappings.ts

@@ -27,10 +27,34 @@ export class CommonTagMappings {
     public static osmLink = new TagMappingOptions({
         key: "id",
         mapping: {
-            "node/-1": "<span class='osmlink'>Over enkele momenten sturen we je punt naar OpenStreetMap</span>"
+            "node/-1": ""
         },
         template: "<span class='osmlink'><a href='https://osm.org/{id}' target='_blank'>" +
             Img.osmAbstractLogo +
             "</a></span>"
-    })
+    });
+
+    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 "<span class='wikipedialink'>" +
+                "<a href='" + link + "' target='_blank'>" +
+                "<img width='64px' src='./assets/wikipedia.svg' alt='wikipedia'" +
+                "</a></span>";
+        }
+    });
 }

Layers/KnownSet.ts

@@ -65,8 +65,8 @@ export class KnownSet {
         "\n" +
         "<p>De data komt van <b>OpenStreetMap</b> 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</p>\n" +
-        "<p>Je <b>privacy</b> 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. " +
+        "<p>Je <b>privacy</b> 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 coockie bij met je inloggegevens.</p>\n",
+        "Als je inlogt, komt er een tweede cookie bij met je inloggegevens.</p>\n",
         "  <p>Wil je meehelpen? <br/>\n" +
         "            Begin dan met <a href=\"https://www.openstreetmap.org/user/new\" target=\"_blank\">een account\n" +
         "            te maken</a> of\n" +

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;

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 () {

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)
         });
     }
 

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();
             }
         }
     }

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<any>;
     private _changeHandler: Changes;
     private _userdetails: UIEventSource<UserDetails>;
+    private _slideShow: SlideShow;
 
     constructor(tags: UIEventSource<any>,
                 userdetails: UIEventSource<UserDetails>,
-                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 () {

Quests.ts

@@ -55,7 +55,7 @@ export class Quests {
 
     static nameOf(name: string) : QuestionDefinition {
         return QuestionDefinition.noNameOrNameQuestion("<b>Wat is de <i>officiële</i> naam van dit " + name + "?</b><br />" +
-            "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");

README.md

@@ -57,3 +57,13 @@ 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
+
+
+
+
+# Attributions:
+
+Data from OpenStreetMap
+Images from Wikipedia/Wikimedia
+
+https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg

UI/DropDownUI.ts

@@ -0,0 +1,47 @@
+import {UIElement} from "./UIElement";
+import {UIEventSource} from "./UIEventSource";
+
+export class DropDownUI extends UIElement {
+
+    selectedElement: UIEventSource<string>
+    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<string>(values[0].value);
+
+    }
+
+
+    protected InnerRender(): string {
+
+        let options = "";
+        for (const value of this._values) {
+            options += "<option value='" + value.value + "'>" + value.shown + "</option>"
+        }
+
+        return "<form>" +
+            "<label for='dropdown-" + this.id + "'>" + this._label + "</label>" +
+            "<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
+            options +
+            "</select>" +
+            "</form>";
+    }
+
+    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);
+        }
+    }
+
+}

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<UserDetails>;
     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 "<div class='featureinfobox'>" +
             "<div class='featureinfoboxtitle'>" +
             "<span>" + this._title.Render() + "</span>" +
+            this._wikipedialink.Render() +
             this._osmLink.Render() +
             "</div>" +
 
             "<div class='infoboxcontents'>" +
 
             this._imageElement.Render() +
+            this._pictureUploader.Render() +
+
+            new VerticalCombine(this._infoElements, 'infobox-information').HideOnEmpty(true).Render() +
+
+            questions +
+
 
-            new VerticalCombine(this._infoElements).Render() +
-            "   <span class='infobox-questions'>" +
-            this._questions.Render() +
-            "   </span>" +
             "</div>" +
             "" +
             "</div>";
@@ -95,21 +108,12 @@ export class FeatureInfoBox extends UIElement {
     Activate() {
         super.Activate();
         this._imageElement.Activate();
+        this._pictureUploader.Activate();
     }
 
     Update() {
         super.Update();
         this._imageElement.Update();
-    }
+        this._pictureUploader.Update();
-
-    private generateInfoBox() {
-        var infoboxes: UIElement[] = [];
-
-        infoboxes.push(new OsmImageUploadHandler(
-            this._tagsES, this._userDetails, this._changes
-        ).getUI());
-
-
-        return new VerticalCombine(infoboxes);
     }
 }

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<any>) {
         super(tags);
@@ -32,8 +32,8 @@ export class ImageCarousel extends UIElement {
             }
             return uiElements;
         });
+        
         this.slideshow = new SlideShow(
-            new FixedUiElement("<b>Afbeeldingen</b>"),
             uiElements,
             new FixedUiElement("")).HideOnEmpty(true);
     }

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<string>;
     private _licenseExplanation: UIElement;
     private _isUploading: UIEventSource<number> = new UIEventSource<number>(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",
+                {value: "CC0", shown: "in het publiek domein"},
-                "CC-BY",
+                {value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"},
-                "CC0"
+                {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":
                 "<b>Creative Commonse met naamsvermelding en gelijk delen</b><br/>" +
                 "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":
                 "<b>Creative Commonse met naamsvermelding</b> <br/>" +
                 "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden",
             "CC0":
                 "<b>Geen copyright</b><br/> Je foto mag door iedereen voor alles gebruikt worden"
         }
         this._licenseExplanation = new VariableUiElement(
-            this._licensePicker.SelectedElementIndex.map((license) => {
+            this._selectedLicence.map((license) => {
-                return licenseExplanations[license?.value]
+                return licenseExplanations[license]
             })
         );
     }
@@ -58,37 +65,57 @@ export class ImageUploadFlow extends UIElement {
         if (!this._userdetails.data.loggedIn) {
             return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen</div>";
         }
-
+        if (this._isUploading.data == 1) {
+            return "<b>Bezig met een foto te uploaden...</b>"
+        }
         if (this._isUploading.data > 0) {
             return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>"
         }
 
-        return "<b>Foto's toevoegen</b><br/>" +
+        return "" +
-            'Kies een licentie:<br/>' +
+            "<div class='imageflow'>" +
+            
+            "<label for='fileselector-" + this.id + "'>" +
+            
+            "<div class='imageflow-file-input-wrapper'>" +
+            "<img src='./assets/camera-plus.svg' alt='upload image'/> " +
+            "<span class='imageflow-add-picture'>Voeg foto toe</span>" +
+            "<div class='break'></div>"+
+            "</div>" +
             this._licensePicker.Render() +
-            this._licenseExplanation.Render() + "<br/>" +
+            
-            '<input type="file" accept="image/*" name="picField" id="fileselector-' + this.id + '" size="24" multiple="multiple" alt=""/><br/>'
+            "</label>" +
+            
+            "<input id='fileselector-" + this.id + "' " +
+            "type='file' " +
+            "class='imageflow-file-input' " +
+            "accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
+            "/>" +
+            
+            "</div>"
             ;
     }
 
     InnerUpdate(htmlElement: HTMLElement) {
         super.InnerUpdate(htmlElement);
         const user = this._userdetails.data;
-        if(!user.loggedIn){
+
         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) {

UI/MessageBoxHandler.ts

@@ -15,9 +15,9 @@ export class MessageBoxHandler {
         this.listenTo(uielement);
         this.update();
 
-        new VariableUiElement(new UIEventSource<string>("<h2>Naar de kaart > </h2>"),
+        new VariableUiElement(new UIEventSource<string>("<h2>Naar de kaart</h2>"),
             (htmlElement) => {
-                htmlElement.onclick = function () {
+                document.getElementById("to-the-map").onclick = function () {
                     uielement.setData(undefined);
                     onClear();
                 }

UI/QuestionPicker.ts

@@ -39,7 +39,9 @@ export class QuestionPicker extends UIElement {
             return "";
         }
 
-        return highestQ.CreateHtml(this.source).Render();
+        return "<div class='infobox-questions'>" +
+            highestQ.CreateHtml(this.source).Render() +
+            "</div>";
     }
     InnerUpdate(htmlElement: HTMLElement) {
     }

UI/SlideShow.ts

@@ -9,7 +9,6 @@ export class SlideShow extends UIElement {
     private readonly _noimages: UIElement;
 
     constructor(
-        title: UIElement,
         embeddedElements: UIEventSource<UIElement[]>,
         noImages: UIElement) {
         super(embeddedElements);
@@ -24,7 +23,9 @@ export class SlideShow extends UIElement {
         }
 
         if (this._embeddedElements.data.length == 1) {
-            return "<div class='image-slideshow'>"+this._embeddedElements.data[0].Render()+"</div>";
+            return "<div class='image-slideshow'><div class='slides'><div class='slide'>" +
+                this._embeddedElements.data[0].Render() +
+                "</div></div></div>";
         }
 
         const prevBtn = "<div class='prev-button' id='prevbtn-"+this.id+"'></div>"
@@ -46,6 +47,14 @@ export class SlideShow extends UIElement {
             + "</div>";
     }
 
+    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) {
@@ -56,16 +65,11 @@ export class SlideShow extends UIElement {
         const self = this;
         nextButton.onclick = () => {
             const current = self._currentSlide.data;
-            const next = (current + 1) % self._embeddedElements.data.length;
+            self.MoveTo(current + 1);
-            self._currentSlide.setData(next);
         }
         prevButton.onclick = () => {
             const current = self._currentSlide.data;
-            let prev = (current - 1);
+            self.MoveTo(current - 1);
-            if (prev < 0) {
-                prev = self._embeddedElements.data.length - 1;
-            }
-            self._currentSlide.setData(prev);
         }
 
     }

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) {
+        if (o.template !== undefined) {
-            console.log("Warning: no match for " + o.key + "=" + v);
+            return o.template.replace("{" + o.key + "}", v);
-            return 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) {
     }

UI/VerticalCombine.ts

@@ -2,21 +2,29 @@ import {UIElement} from "./UIElement";
 
 export class VerticalCombine extends UIElement {
     private _elements: UIElement[];
+    private _className: string;
 
-    constructor(elements: UIElement[]) {
+    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) {
             if (!element.IsEmpty()) {
-                html += "<div>" + element.Render() + "</div><br />";
+                html += "<div>" + element.Render() + "</div>";
             }
         }
+        if(html === ""){
+            return "";
+        }
+        if (this._className === undefined) {
             return html;
         }
+        return "<div class='"+this._className+"'>" + html + "</div>";
+    }
     InnerUpdate(htmlElement: HTMLElement) {
         for (const element of this._elements){
             element.Update();

assets/camera-centered.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1950 1950"><path d="m975.19 549.05q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5m704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224m-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5"/></svg>

assets/camera-plus.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 -256 1950 1950"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="camera.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="1013"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="0.1711561"
+     inkscape:cx="1154.0868"
+     inkscape:cy="749.93142"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="m 881.19,449.05 c 79.33333,0 147.1667,28.16667 203.5,84.5 56.3333,56.33333 84.5,124.16667 84.5,203.5 0,79.33333 -28.1667,147.16667 -84.5,203.5 -56.3333,56.3333 -124.16667,84.5 -203.5,84.5 -79.33333,0 -147.16667,-28.1667 -203.5,-84.5 -56.33333,-56.33333 -84.5,-124.16667 -84.5,-203.5 0,-79.33333 28.16667,-147.16667 84.5,-203.5 56.33333,-56.33333 124.16667,-84.5 203.5,-84.5 m 798,-316 c 70.6667,0 131,25 181,75 50,50 75,110.33333 75,181 v 896 c 0,70.6667 -25,131 -75,181 -50,50 -110.3333,75 -181,75 h -1408 c -70.66667,0 -131,-25 -181,-75 -50,-50 -75,-110.3333 -75,-181 v -896 c 0,-70.66667 25,-131 75,-181 50,-50 110.33333,-75 181,-75 h 130 l 51,-136 c 12.66667,-32.666667 35.83333,-60.833333 69.5,-84.5 33.66667,-23.66667 68.16667,-35.5 103.5,-35.5 h 512 c 35.3333,0 69.8333,11.83333 103.5,35.5 33.6667,23.666667 56.8333,51.833333 69.5,84.5 l 51,136 h 318 m -798,1052 c 123.3333,0 228.8333,-43.8333 316.5,-131.5 87.6667,-87.6667 131.5,-193.16667 131.5,-316.5 0,-123.33333 -43.8333,-228.83333 -131.5,-316.5 -87.6667,-87.66667 -193.1667,-131.5 -316.5,-131.5 -123.33333,0 -228.83333,43.83333 -316.5,131.5 -87.66667,87.66667 -131.5,193.16667 -131.5,316.5 0,123.33333 43.83333,228.8333 131.5,316.5 87.66667,87.6667 193.16667,131.5 316.5,131.5"
+     id="path2"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="csssssssccsssssssssssccssssccccsssssssc" />
+  <g
+     id="g854"
+     transform="translate(259.86064,302.45965)">
+    <g
+       id="g847">
+      <circle
+         style="fill:#7ebc6f;fill-opacity:1;stroke:none;stroke-width:21.93531036;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path819"
+         cx="1351.3682"
+         cy="1044.5065"
+         r="335.30353" />
+    </g>
+    <g
+       id="g844">
+      <path
+         style="fill:none;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 1154.7797,1044.3443 h 389.1358"
+         id="path821"
+         inkscape:connector-curvature="0" />
+      <path
+         style="fill:none;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 1349.9206,849.36269 V 1238.4985"
+         id="path821-3"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

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 {
+.infobox-information {
-    width: auto;
+    width: 100%;
-    display: inline-block;
+    margin-top: 1em;
-    float: left;
-    padding: 0.1em;
-}
-
-.infboxcontents-right {
-    padding: 0.1em;
-    overflow: hidden;
-    display: inline-block;
 }
 
 .infobox-questions {
-    max-width: 25em;
+    margin-top: 1em;
-    display: inline-block;
+    background-color: #e5f5ff;
+    padding: 1em;
+    border-radius: 1em;
+    margin-right: 1em;
+    
 }

index.html

@@ -3,6 +3,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MapComplete</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
@@ -13,12 +14,15 @@
 </head>
 <body>
 <div id="messagesboxmobilewrapper">
-    <div id="to-the-map">Return to map</div>
+    <div id="messagesboxmobile-scroll">
     <div id="messagesboxmobile">    </div>
     </div>
+    <div id="to-the-map">Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is blocking it.</div>
+</div>
 
 <div id="topleft-tools">
     <div id="userbadge">
+        Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is blocking it.
     </div>
     <br/>
     <div id="messagesbox">

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) {
 

test.html

@@ -5,7 +5,7 @@
     <link href="index.css" rel="stylesheet"/>   
 </head>
 <body>
-<div id="maindiv" style="border: 5px dashed red">Hello World</div>
+<div id="maindiv"e>Hello World</div>
 <script src="./test.ts"></script>
 </body>
 </html>

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<string>("");
 
@@ -60,11 +62,25 @@ const tags ={
     operator: "Natuurpunt Brugge",
     phone: "+32 50 82 26 97",
     website: "https://natuurpuntbrugge.be/schobbejakshoogte/",
-    wikidata: "Q4499623",
+   // wikidata: "Q4499623",
-    wikipedia: "nl:Schobbejakshoogte"
+    wikipedia: "nl:Schobbejakshoogte",
 };
 const tagsES = allElements.addElement({properties: tags});
 
-new ImageCarousel(tagsES).AttachTo("maindiv").Activate();
 
-// new WikimediaImage(new UIEventSource<string>("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();
+//*/
+
+