From 4ace40c2f35bd3f0cda391edceaa5f68f0f3491f Mon Sep 17 00:00:00 2001
From: pietervdvn <pietervdvn@posteo.net>
Date: Fri, 3 Sep 2021 17:00:36 +0200
Subject: [PATCH] Fix various small bugs (directionPicker is square and has a
 max width; fix welcome message, fix translations

---
 Logic/Osm/OsmObject.ts         | 6 +++---
 UI/Input/DirectionInput.ts     | 6 ++++--
 UI/Input/ValidatedTextField.ts | 2 +-
 UI/i18n/Translation.ts         | 5 +++--
 index.css                      | 1 -
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/Logic/Osm/OsmObject.ts b/Logic/Osm/OsmObject.ts
index 224e4ff37..a5c114f2c 100644
--- a/Logic/Osm/OsmObject.ts
+++ b/Logic/Osm/OsmObject.ts
@@ -292,7 +292,7 @@ export abstract class OsmObject {
                 const element = data.elements.pop();
 
                 let nodes = []
-                if (data.elements.length > 2) {
+                if (self.type === "way" && data.elements.length >= 0) {
                     nodes = OsmObject.ParseObjects(data.elements)
                 }
 
@@ -445,8 +445,8 @@ export class OsmWay extends OsmObject {
             }
             const cp = node.centerpoint();
             this.coordinates.push(cp);
-            latSum = cp[0]
-            lonSum = cp[1]
+            latSum += cp[0]
+            lonSum += cp[1]
         }
         let count = this.coordinates.length;
         this.lat = latSum / count;
diff --git a/UI/Input/DirectionInput.ts b/UI/Input/DirectionInput.ts
index 07b506490..365eb0bd9 100644
--- a/UI/Input/DirectionInput.ts
+++ b/UI/Input/DirectionInput.ts
@@ -53,9 +53,11 @@ export default class DirectionInput extends InputElement<string> {
                 `position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform:rotate(${this.value.data ?? 0}deg);`)
                 .SetClass("direction-svg relative")
                  .SetStyle("z-index: 1000"),
-            map.SetClass("w-full h-full block absolute top-0 left-O overflow-hidden"),
+            map.SetStyle(
+                `position: absolute;top: 0;left: 0;width: 100%;height: 100%;`)
+
         ])
-            .SetStyle("width: min(100%, 25em); height: min(100% , 25em);")
+            .SetStyle("width: min(100%, 25em); height: 0; padding-bottom: 100%") // A bit a weird CSS   , see https://stackoverflow.com/questions/13851940/pure-css-solution-square-elements#19448481
             .SetClass("relative block bg-white border border-black overflow-hidden rounded-full")
             .ConstructElement()
 
diff --git a/UI/Input/ValidatedTextField.ts b/UI/Input/ValidatedTextField.ts
index 3b45aa79e..dfbed09f0 100644
--- a/UI/Input/ValidatedTextField.ts
+++ b/UI/Input/ValidatedTextField.ts
@@ -95,7 +95,7 @@ export default class ValidatedTextField {
                     )
                 }
                 const di = new DirectionInput(options.mapBackgroundLayer, location, value)
-                di.SetStyle("height: 20rem;");
+                di.SetStyle("max-width: 25rem;");
 
                 return di;
             },
diff --git a/UI/i18n/Translation.ts b/UI/i18n/Translation.ts
index 0d23121b9..cb8d937f1 100644
--- a/UI/i18n/Translation.ts
+++ b/UI/i18n/Translation.ts
@@ -112,8 +112,9 @@ export class Translation extends BaseUIElement {
                 } else if (el.ConstructElement === undefined) {
                     console.error("ConstructElement is not defined", el);
                     throw "ConstructElement is not defined, you are working with a " + (typeof el) + ":" + (el.constructor.name)
-                }else if(el["translations"] !== undefined){
-                    rtext = el["translations"][lang]
+                }else if(el["textFor"] !== undefined){
+                    // @ts-ignore
+                    rtext = el.textFor(lang)
                 } else {
                     rtext = el.ConstructElement().innerHTML;
 
diff --git a/index.css b/index.css
index ee8420287..d7f2c268b 100644
--- a/index.css
+++ b/index.css
@@ -320,7 +320,6 @@ li::marker {
     position: absolute;
     z-index: 5000;
     transition: all 500ms linear;
-    pointer-events: none;
     left: 0;
     right: 0;
 }