From e1a4c753911fc973eb60b13d3721c5474613c016 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 24 Jan 2021 18:33:16 +0100 Subject: [PATCH] Halfway removing the fullscreenmessage --- AllTranslationAssets.ts | 4 +- InitUiElements.ts | 19 +++++----- Svg.ts | 2 +- UI/Base/LazyElement.ts | 1 - UI/Base/ScrollableFullScreen.ts | 47 ++++++++++++++++++----- UI/BigComponents/LayerControlPanel.ts | 4 +- css/tagrendering.css | 54 +-------------------------- index.css | 47 ++++++++++++++++------- index.html | 2 +- 9 files changed, 88 insertions(+), 92 deletions(-) diff --git a/AllTranslationAssets.ts b/AllTranslationAssets.ts index 7d3bae079..490c5796d 100644 --- a/AllTranslationAssets.ts +++ b/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":"

More thematic maps?

Do you enjoy collecting geodata?
There are more themes available.","ca":"

Més peticions

T'agrada captar dades?
Hi ha més capes disponibles.","es":"

Más peticiones

Te gusta captar datos?
Hay más capas disponibles.","fr":"

Plus de thèmes

Vous aimez collecter des données?
Il y a plus de thèmes disponibles.","nl":"

Meer thematische kaarten

Vind je het leuk om geodata te verzamelen?
Hier vind je meer kaartthemas.","gl":"

Máis tarefas

Góstache captar datos?
Hai máis capas dispoñíbeis.","de":"

Weitere Quests

Sammeln Sie gerne Geodaten?
Es sind weitere Themen verfügbar."} ), - requestATheme: new Translation( {"en":"If you want a custom-built quest, request it here","ca":"Si vols que et fem una petició pròpia , demana-la aquí","es":"Si quieres que te hagamos una petición propia , pídela aquí","nl":"Wil je een eigen kaartthema, vraag dit hier aan","fr":"Si vous voulez une autre carte thématique, demande-la ici","gl":"Se queres que che fagamos unha tarefa propia , pídea aquí","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen hier anfragen"} ), - streetcomplete: new Translation( {"en":"Another, similar application is StreetComplete","ca":"Una altra aplicació similar és StreetComplete","es":"Otra aplicación similar es StreetComplete","fr":"Une autre application similaire est StreetComplete","nl":"Een andere, gelijkaardige Android-applicatie is StreetComplete","gl":"Outra aplicación semellante é StreetComplete","de":"Eine andere, ähnliche Anwendung ist StreetComplete"} ), + requestATheme: new Translation( {"en":"If you want a custom-built quest, request it here.","ca":"Si vols que et fem una petició pròpia , demana-la aquí.","es":"Si quieres que te hagamos una petición propia , pídela aquí.","nl":"Wil je een eigen kaartthema, vraag dit hier aan.","fr":"Si vous voulez une autre carte thématique, demande-la ici.","gl":"Se queres que che fagamos unha tarefa propia , pídea aquí.","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen hier anfragen."} ), + streetcomplete: new Translation( {"en":"Another, similar application is StreetComplete..","ca":"Una altra aplicació similar és StreetComplete.","es":"Otra aplicación similar es StreetComplete.","fr":"Une autre application similaire est StreetComplete.","nl":"Een andere, gelijkaardige Android-applicatie is StreetComplete.","gl":"Outra aplicación semellante é StreetComplete.","de":"Eine andere, ähnliche Anwendung ist StreetComplete."} ), 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"} ), diff --git a/InitUiElements.ts b/InitUiElements.ts index 49c4cbd7d..c34a36000 100644 --- a/InitUiElements.ts +++ b/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)) - .SetStyle("display:block;padding:0.75em;border-radius:1em;"); - const closeButton = Svg.close_svg().SetClass("layer-selection-toggle").SetStyle(" background: var(--subtle-detail-color);") + const layerControlPanel = new LayerControlPanel( + () => State.state.layerControlIsOpened.setData(false)) + .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;") - .SetClass("hidden-on-mobile") + layerControlPanel]) + .SetClass("flex flex-row") , Svg.layers_svg().SetClass("layer-selection-toggle"), State.state.layerControlIsOpened - ); - - checkbox.AttachTo("layer-selection"); + ).AttachTo("layer-selection"); State.state.locationControl diff --git a/Svg.ts b/Svg.ts index d3f302be1..2505dc81c 100644 --- a/Svg.ts +++ b/Svg.ts @@ -255,7 +255,7 @@ export default class Svg { public static ring_ui() { return new FixedUiElement(Svg.ring_img);} public static search = " " - 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);} diff --git a/UI/Base/LazyElement.ts b/UI/Base/LazyElement.ts index 9796a6c5c..2f1bb925a 100644 --- a/UI/Base/LazyElement.ts +++ b/UI/Base/LazyElement.ts @@ -28,5 +28,4 @@ export default class LazyElement extends UIElement { return this._content.InnerRender(); } - } \ No newline at end of file diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts index 00c742063..63248de7f 100644 --- a/UI/Base/ScrollableFullScreen.ts +++ b/UI/Base/ScrollableFullScreen.ts @@ -9,33 +9,62 @@ import Ornament from "./Ornament"; */ export default class ScrollableFullScreen extends UIElement { private _component: UIElement; - + private elementsToRestore: Set = new Set(); constructor(title: UIElement, content: UIElement, onClose: (() => void)) { super(); + this.dumbMode = false; const returnToTheMap = Svg.back_svg().onClick(() => { - onClose(); - }) .SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5") + console.log("Clicked back!"); + 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(["", content, "", 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") + ); + + } } \ No newline at end of file diff --git a/UI/BigComponents/LayerControlPanel.ts b/UI/BigComponents/LayerControlPanel.ts index 7f25339eb..a55c2912e 100644 --- a/UI/BigComponents/LayerControlPanel.ts +++ b/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, () => { - onClose - }); + this._panel = new ScrollableFullScreen(title, layerControlPanel, onClose); } InnerRender(): string { diff --git a/css/tagrendering.css b/css/tagrendering.css index fe03c34b8..8629a250f 100644 --- a/css/tagrendering.css +++ b/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; } diff --git a/index.css b/index.css index 108783841..bdd1220d0 100644 --- a/index.css +++ b/index.css @@ -3,18 +3,44 @@ @tailwind utilities; @layer utilities { - @variants responsive { - .max-h-65vh { - max-height: 65vh; + @variants responsive { + .max-h-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); diff --git a/index.html b/index.html index 8450e33db..ade7bfd32 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@
-
+