Lots of styling, mobile friendliness, better UI flows

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/ImageSearcher.ts

@@ -15,7 +15,7 @@ export class ImageSearcher extends UIEventSource<string[]> {
     private readonly _wdItem = new UIEventSource<string>("");
     private readonly _commons = new UIEventSource<string>("");
     private _activated: boolean = false;
-
+    
     constructor(tags: UIEventSource<any>) {
         super([]);
 

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