Add ornament

UI/Base/Ornament.ts

@@ -1,18 +1,25 @@
 import {UIElement} from "../UIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import Svg from "../../Svg";
+import State from "../../State";
 
 export default class Ornament extends UIElement {
     private static readonly ornamentsCount = Ornament.countOrnaments();
-    private readonly _index = new UIEventSource<number>(0)
+    private readonly _index = new UIEventSource<string>("0")
 
-    constructor(index = new UIEventSource<number>(0)) {
+    constructor(index = undefined) {
-        super(index);
+        super();
+        index = index ?? State.state.osmConnection.GetPreference("ornament");
+        this.ListenTo(index);
         this._index = index;
         this.SetClass("ornament")
         const self = this;
         this.onClick(() => {
-            self._index.setData((self._index.data + 1) % (Ornament.ornamentsCount + 1));
+            let c = Number(index.data);
+            if(isNaN(c)){
+                c = 0;
+            }
+            self._index.setData(""+ ((c + 1) % (Ornament.ornamentsCount + 1)));
 
         })
     }
@@ -28,10 +35,11 @@ export default class Ornament extends UIElement {
     }
 
     InnerRender(): string {
-        if(this._index.data == 0){
+        if(this._index.data == "0"){
             return "<svg></svg>"
         }
-        return Svg.All[`Ornament-Horiz-${this._index.data - 1}.svg`]
+        console.log(this._index.data)
+        return Svg.All[`Ornament-Horiz-${Number(this._index.data) - 1}.svg`]
     }
 
 }

UI/Base/ScrollableFullScreen.ts

@@ -7,9 +7,9 @@ import Ornament from "./Ornament";
 /**
  * Wraps some contents into a panel that scrolls the content _under_ the title
  */
-export default class ScrollableFullScreen extends UIElement{
+export default class ScrollableFullScreen extends UIElement {
     private _component: Combine;
-   
+
 
     constructor(title: UIElement, content: UIElement) {
         super();
@@ -19,16 +19,17 @@ export default class ScrollableFullScreen extends UIElement{
         }).SetClass("only-on-mobile")
             .SetClass("featureinfobox-back-to-the-map")
         title.SetClass("featureinfobox-title")
+        const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
+
         this._component = new Combine([
             new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
-            new Combine([content]).SetClass("featureinfobox-content"),
+            new Combine(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"),
-         new Combine([  new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
             // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
         ])
         this.SetClass("featureinfobox");
-        
+
     }
-    
+
     InnerRender(): string {
         return this._component.Render();
     }

css/fullscreenmessagebox.css

@@ -15,12 +15,15 @@
 .fullscreenmessage-content .featureinfobox-content {
     padding: 1em;
     top: var(--variable-title-height);
-    /* 2em extra: padding from the title */
     max-height: calc(100vh - var(--variable-title-height)) !important;
-    display: block;
+    min-height: calc(100vh - var(--variable-title-height)) !important;
     position: absolute;
     overflow-y: auto;
     box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between
 }
 
 .fullscreenmessage-content .featureinfobox-titlebar {
@@ -32,7 +35,7 @@
     padding: 0.5em;
     width: 100%;
     box-sizing: border-box;
- 
+
 }
 
 .fullscreenmessage-content .featureinfobox-tail {