Halfway removing the fullscreenmessage

AllTranslationAssets.ts

@@ -85,8 +85,8 @@ export default class AllTranslationAssets {
       fsIncludeCurrentLocation: new Translation( {"en":"Include current location","es":"Incluir localización actual","ca":"Incloure localització actual","nl":"Start op de huidige locatie","fr":"Inclure l'emplacement actuel","de":"Aktuelle Position einbeziehen"} ),
 },
     morescreen: {      intro: new Translation( {"en":"<h3>More thematic maps?</h3>Do you enjoy collecting geodata? <br/>There are more themes available.","ca":"<h3>Més peticions</h3>T'agrada captar dades? <br/>Hi ha més capes disponibles.","es":"<h3>Más peticiones</h3>Te gusta captar datos? <br/>Hay más capas disponibles.","fr":"<h3>Plus de thèmes </h3>Vous aimez collecter des données? <br/>Il y a plus de thèmes disponibles.","nl":"<h3>Meer thematische kaarten</h3>Vind je het leuk om geodata te verzamelen? <br/> Hier vind je meer kaartthemas.","gl":"<h3>Máis tarefas</h3>Góstache captar datos? <br/>Hai máis capas dispoñíbeis.","de":"<h3>Weitere Quests</h3>Sammeln Sie gerne Geodaten? <br/>Es sind weitere Themen verfügbar."} ),
-      requestATheme: new Translation( {"en":"If you want a custom-built quest, request it <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>here</a>","ca":"Si vols que et fem una petició pròpia , demana-la <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>aquí</a>","es":"Si quieres que te hagamos una petición propia , pídela <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>aquí</a>","nl":"Wil je een eigen kaartthema, vraag dit <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>hier aan</a>","fr":"Si vous voulez une autre carte thématique, demande-la <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>ici</a>","gl":"Se queres que che fagamos unha tarefa propia , pídea <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>aquí</a>","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>hier</a> anfragen"} ),
+      requestATheme: new Translation( {"en":"If you want a custom-built quest, request it <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>here</a>.","ca":"Si vols que et fem una petició pròpia , demana-la <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>aquí</a>.","es":"Si quieres que te hagamos una petición propia , pídela <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>aquí</a>.","nl":"Wil je een eigen kaartthema, vraag dit <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>hier aan</a>.","fr":"Si vous voulez une autre carte thématique, demande-la <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>ici</a>.","gl":"Se queres que che fagamos unha tarefa propia , pídea <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>aquí</a>.","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen <a href='https://github.com/pietervdvn/MapComplete/issues' class='underline hover:text-blue-800' target='_blank'>hier</a> anfragen."} ),
-      streetcomplete: new Translation( {"en":"Another, similar application is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","ca":"Una altra aplicació similar és <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","es":"Otra aplicación similar es <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","fr":"Une autre application similaire est <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","nl":"Een andere, gelijkaardige Android-applicatie is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","gl":"Outra aplicación semellante é <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>","de":"Eine andere, ähnliche Anwendung ist <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>"} ),
+      streetcomplete: new Translation( {"en":"Another, similar application is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>..","ca":"Una altra aplicació similar és <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","es":"Otra aplicación similar es <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","fr":"Une autre application similaire est <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","nl":"Een andere, gelijkaardige Android-applicatie is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","gl":"Outra aplicación semellante é <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>.","de":"Eine andere, ähnliche Anwendung ist <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' class='underline hover:text-blue-800' target='_blank'>StreetComplete</a>."} ),
       createYourOwnTheme: new Translation( {"en":"Create your own MapComplete theme from scratch","ca":"Crea la teva pròpia petició completa de MapComplete des de zero.","es":"Crea tu propia petición completa de MapComplete desde cero.","nl":"Maak je eigen MapComplete-kaart","fr":"Créez votre propre MapComplete carte","gl":"Crea o teu propio tema completo do MapComplete dende cero.","de":"Erstellen Sie Ihr eigenes MapComplete-Thema von Grund auf neu"} ),
 },
     readYourMessages: new Translation( {"en":"Please, read all your OpenStreetMap-messages before adding a new point.","ca":"Llegeix tots els teus missatges d'OpenStreetMap abans d'afegir nous punts.","es":"Lee todos tus mensajes de OpenStreetMap antes de añadir nuevos puntos.","nl":"Gelieve eerst je berichten op OpenStreetMap te lezen alvorens nieuwe punten toe te voegen.","fr":"Merci de lire tous vos messages sur OpenStreetMap avant d'ajouter un nouveau point.","gl":"Le todos a túas mensaxes do OpenStreetMap antes de engadir novos puntos.","de":"Bitte lesen Sie alle Ihre OpenStreetMap-Nachrichten, bevor Sie einen neuen Punkt hinzufügen"} ),

InitUiElements.ts

@@ -227,7 +227,7 @@ export class InitUiElements {
                     .onClick(() => {/*Catch the click*/
                     })]),
             help
-            , true
+            , isOpened
         ).AttachTo("messagesbox");
         const openedTime = new Date().getTime();
         State.state.locationControl.addCallback(() => {
@@ -249,20 +249,21 @@ export class InitUiElements {
     private static InitLayerSelection() {
         InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
 
-            const layerControlPanel = new LayerControlPanel(() => State.state.layerControlIsOpened.setData(false))
+            const layerControlPanel = new LayerControlPanel(
-                .SetStyle("display:block;padding:0.75em;border-radius:1em;");
+                () => State.state.layerControlIsOpened.setData(false))
-            const closeButton = Svg.close_svg().SetClass("layer-selection-toggle").SetStyle("  background: var(--subtle-detail-color);")
+                .SetClass("block p-1 rounded-full");
+            const closeButton = Svg.close_svg()
+                .SetClass("layer-selection-toggle")
+                .SetStyle("  background: var(--subtle-detail-color);")
             const checkbox = new CheckBox(
                 new Combine([
                     closeButton,
-                    layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
+                    layerControlPanel])
-                    .SetClass("hidden-on-mobile")
+                    .SetClass("flex flex-row")
                 ,
                 Svg.layers_svg().SetClass("layer-selection-toggle"),
                 State.state.layerControlIsOpened
-            );
+            ).AttachTo("layer-selection");
-
-            checkbox.AttachTo("layer-selection");
 
 
             State.state.locationControl

Svg.ts

@@ -255,7 +255,7 @@ export default class Svg {
     public static ring_ui() { return new FixedUiElement(Svg.ring_img);}
 
     public static search = " <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"> <g id=\"search\"> <path id=\"magnifying-glass\" d=\"M1.63 9.474L4.006 7.1l.17-.1a3.45 3.45 0 0 1-.644-2.01A3.478 3.478 0 1 1 7.01 8.47 3.43 3.43 0 0 1 5 7.822l-.098.17-2.375 2.373c-.19.188-.543.142-.79-.105s-.293-.6-.104-.79zm5.378-2.27A2.21 2.21 0 1 0 4.8 4.994 2.21 2.21 0 0 0 7.01 7.21z\"/> </g> </svg>"
-    public static search_img = Img.AsImageElement(Svg.search, 'rounded-3xl')
+    public static search_img = Img.AsImageElement(Svg.search)
     public static search_svg() { return new FixedUiElement(Svg.search);}
     public static search_ui() { return new FixedUiElement(Svg.search_img);}
 

UI/Base/LazyElement.ts

@@ -28,5 +28,4 @@ export default class LazyElement extends UIElement {
         return this._content.InnerRender();
     }
 
-
 }

UI/Base/ScrollableFullScreen.ts

@@ -9,33 +9,62 @@ import Ornament from "./Ornament";
  */
 export default class ScrollableFullScreen extends UIElement {
     private _component: UIElement;
-
+    private elementsToRestore: Set<HTMLElement> = new Set<HTMLElement>();
 
     constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
         super();
+        this.dumbMode = false;
         const returnToTheMap = Svg.back_svg().onClick(() => {
-            onClose();
+            console.log("Clicked back!");
-        })  .SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
+            this.RestoreLeaflet();
+            if (onClose() !== undefined) {
+                console.error("WARNING: onClose is not defined")
+                onClose();
+            }
+        }).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
 
         title.SetClass("block w-full")
         const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
             .SetClass("block sm:hidden h-5")
 
-        
+
-       this._component = new Combine([
+        this._component =
+            new Combine([
+            new Combine([
             new Combine([returnToTheMap, title])
-                .AddClass("border-b-2 border-black shadow sm:shadow-none z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
+                .AddClass("border-b-2 border-black shadow sm:shadow-none bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
             new Combine(["<span>", content, "</span>", ornament])
-                .SetClass("block p-2 sm:pt-4 w-full max-h-screen landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
+                .SetClass("block p-2 sm:pt-4 w-full h-screen landscape:h-screen  sm:h-full sm:w-full overflow-y-auto overflow-x-hidden"),
             // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
-        ]).SetClass("block flex flex-col fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
+        ]).SetClass("block flex flex-col  relative bg-white")
+        ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen sm:max-h-65vh sm:w-auto");
 
     }
-    
 
     InnerRender(): string {
         return this._component.Render();
     }
+    
+    protected InnerUpdate(htmlElement: HTMLElement) {
+
+        do {
+            // A leaflet workaround: in order for fullscreen to work, we need to get the parent element which does a transform3d and remove/read the transform
+            if (htmlElement.style.transform !== "") {
+                this.elementsToRestore.add(htmlElement);
+                htmlElement.classList.add("no-transform")
+            }
+            htmlElement = htmlElement.parentElement;
+        } while (htmlElement != null)
+
+        super.InnerUpdate(htmlElement);
+    }
+
+    private RestoreLeaflet() {
+        this.elementsToRestore.forEach(
+            el => el.classList.remove("no-transform")
+        );
+
+    }
 
 
 }

UI/BigComponents/LayerControlPanel.ts

@@ -31,9 +31,7 @@ export default class LayerControlPanel extends UIElement {
 
         const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
 
-        this._panel = new ScrollableFullScreen(title, layerControlPanel, () => {
+        this._panel = new ScrollableFullScreen(title, layerControlPanel, onClose);
-            onClose
-        });
     }
 
     InnerRender(): string {

css/tagrendering.css

@@ -1,56 +1,4 @@
 
-<<<<<<< HEAD
-.featureinfobox {
-    display: flex;
-    flex-direction: column;
-}
-
-.featureinfobox-icons img {
-    max-height: 1.5em;
-    width: 1.5em;
-}
-
-.featureinfobox-icons {
-    margin-left: auto;
-}
-
-.featureinfobox-icons span {
-    display: inline-block;
-    padding-right: 0.1em;
-}
-
-.featureinfobox-titlebar {
-    border-bottom: 2px solid var(--foreground-color);
-    box-shadow: 0 10px 10px -10px var(--shadow-color);
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    overflow-x: hidden;
-}
-
-.featureinfobox-titlebar-title {
-    font-size: large;
-    font-weight: bold;
-    display: flex;
-    justify-content: space-between;
-    flex-grow: 2;
-    word-break: break-all;
-}
-
-.featureinfobox-back-to-the-map {
-    padding: 0.5em;
-    border-radius: 999em;
-    margin-right: 0.4em;
-    width: 2em;
-    height: 2em;
-    background: var(--subtle-detail-color);
-    flex-shrink: 0;
-}
-=======
->>>>>>> master
-
-
-
 @media only screen and (max-height: 600px) and (min-width: 600px) {
     /* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/
     .landscape\:max-h-screen {
@@ -127,7 +75,7 @@
     border-radius: 0.5em;
     display: block;
     width: 100%;
-    margin: 5px ​0;
+    margin: 5px;
     box-sizing: border-box;
     padding: 0.5em;
 }

index.css

@@ -3,18 +3,44 @@
 @tailwind utilities;
 
 @layer utilities {
-  @variants responsive {
+    @variants responsive {
-    .max-h-65vh {
+        .max-h-65vh {
-      max-height: 65vh;
+            max-height: 65vh;
+        }
+
+        .max-h-20vh {
+            max-height: 20vh;
+        }
+        
+        .z-above-map{
+            z-index: 10000
+        }
+        
+        .z-above-map-higher {
+            z-index: 10100
+        }
+        
+        .z-above-map-high {
+            z-index: 10200 !important;
+        }
+        
+        .z-above-map-highest{
+            z-index: 50000
+        }
+
     }
-      
-      .max-h-20vh {
-          max-height: 20vh;
-      }
-  }
 }
 
 
+@media only screen and (max-width: 640px), only screen and (max-height: 640px) {
+    .no-transform {
+        /*This is a workaround to let popup contents escape the popup on mobile*/
+        transform: none !important;
+    }
+}
+
+
+
 :root {
     --subtle-detail-color: #e5f5ff;
     --subtle-detail-color-contrast: black;
@@ -53,9 +79,6 @@ a {
 }
 
 
-
-
-
 #topleft-tools svg {
     fill: var(--foreground-color) !important;
     stroke: var(--foreground-color) !important;
@@ -109,8 +132,6 @@ a {
 }
 
 
-
-
 #layer-selection {
     z-index: 9000;
     background-color: var(--background-color);

index.html

@@ -48,7 +48,7 @@
     <div id="messagesboxmobile"></div>
 </div>
 
-<div id="topleft-tools">
+<div id="topleft-tools" class="z-index-above-map">
     <div id="userbadge-and-search" class="p-3">
         <div id="userbadge" class="shadow rounded-3xl overflow-hidden"></div>
         <div id="searchbox" class="shadow rounded-3xl overflow-hidden"></div>