From 7a2f4fa44a97bc76c6321102fc527b0d9897b1e6 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 21 Jan 2021 05:05:10 +0100 Subject: [PATCH] Migrate featureinfobox to Tailwind - migrate featureinfobox to Tailwind - migrate featureinfobox-content to Tailwind - migrate fullscreenmessage-content to Tailwind so we can delete css/fullscreenmessagebox.css The landscape-mode is somethign that Tailwind does not support AFAIK. Instead, I migrated the one css-definition that was left over but required to a tailwind-like class name `.landscape\:max-h-screen`. Note the escaped colon with is required so css supports colon based class names. --- UI/Base/ScrollableFullScreen.ts | 10 +++---- UI/BigComponents/FullWelcomePaneWithTabs.ts | 2 +- UI/FullScreenMessageBoxHandler.ts | 2 +- css/fullscreenmessagebox.css | 32 --------------------- css/tagrendering.css | 30 ++----------------- index.html | 2 +- 6 files changed, 10 insertions(+), 68 deletions(-) delete mode 100644 css/fullscreenmessagebox.css diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts index d3e7af0..7369c63 100644 --- a/UI/Base/ScrollableFullScreen.ts +++ b/UI/Base/ScrollableFullScreen.ts @@ -16,17 +16,17 @@ export default class ScrollableFullScreen extends UIElement { const returnToTheMap = Svg.back_svg().onClick(() => { State.state.fullScreenMessage.setData(undefined); State.state.selectedElement.setData(undefined); - }).SetClass("only-on-mobile") - .SetClass("featureinfobox-back-to-the-map") + }).SetClass("featureinfobox-back-to-the-map only-on-mobile mb-2") title.SetClass("block w-full") const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile") this._component = new Combine([ - new Combine([returnToTheMap, title]).SetClass("border-b-2 border-black shadow sm:shadow-none fixed sm:relative top-0 left-0 right-0 z-50 bg-white p-2 sm:p-0 flex overflow-hidden"), - new Combine(["",content,"", ornament]).SetClass("featureinfobox-content"), + new Combine([returnToTheMap, title]).SetClass("border-b-2 border-black shadow sm:shadow-none fixed sm:relative top-0 left-0 right-0 z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-hidden"), + new Combine(["", content, "", ornament]) + .SetClass("block relative pt-16 sm:pt-4 w-full max-h-screen sm:max-h-65vh landscape:max-h-screen 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 ]) - this.SetClass("featureinfobox"); + this.SetClass("block flex flex-col"); } diff --git a/UI/BigComponents/FullWelcomePaneWithTabs.ts b/UI/BigComponents/FullWelcomePaneWithTabs.ts index d6e8985..ab9bea5 100644 --- a/UI/BigComponents/FullWelcomePaneWithTabs.ts +++ b/UI/BigComponents/FullWelcomePaneWithTabs.ts @@ -74,7 +74,7 @@ export default class FullWelcomePaneWithTabs extends UIElement { const backButton = new Combine([ new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")]) .SetClass("to-the-map-inner") - + ]).SetClass("only-on-mobile") .onClick(() => State.state.fullScreenMessage.setData(undefined)); diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts index 109105b..8a8c7eb 100644 --- a/UI/FullScreenMessageBoxHandler.ts +++ b/UI/FullScreenMessageBoxHandler.ts @@ -20,7 +20,7 @@ export default class FullScreenMessageBox extends UIElement { return ""; } this._content = State.state.fullScreenMessage.data.content; - return new Combine([this._content]).SetClass("fullscreenmessage-content").Render(); + return new Combine([this._content]).SetClass("block max-h-screen h-screen overflow-x-hidden overflow-y-auto bg-white p-2").Render(); } protected InnerUpdate(htmlElement: HTMLElement) { diff --git a/css/fullscreenmessagebox.css b/css/fullscreenmessagebox.css deleted file mode 100644 index cf527cd..0000000 --- a/css/fullscreenmessagebox.css +++ /dev/null @@ -1,32 +0,0 @@ -.fullscreenmessage-content { - max-height: calc(100vh); - height: 100%; - overflow-y: auto; - overflow-x: hidden; - background-color: var(--background-color); - display: block; -} - -.fullscreenmessage-content .featureinfobox { - padding-top: 1em; - position: relative; -} - -.fullscreenmessage-content .featureinfobox-content { - padding: 1em; - top: var(--variable-title-height); - max-height: calc(100vh - var(--variable-title-height)) !important; - 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-tail { - /*THe ornament to give the URL bar some room...*/ -} - diff --git a/css/tagrendering.css b/css/tagrendering.css index ac6c077..779a755 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -1,9 +1,4 @@ -.featureinfobox { - display: flex; - flex-direction: column; -} - .featureinfobox-back-to-the-map { padding: 0.5em; border-radius: 999em; @@ -25,31 +20,10 @@ stroke: var(--subtle-detail-color-contrast) !important; } -.featureinfobox-content { - display: block; - max-height: 75vh; - overflow-y: auto; - padding-top: 1em; - width:100%; - overflow-x: hidden; -} - -@media only screen and (max-width: 600px), only screen and (max-height: 600px) { - .featureinfobox-content { - display: block; - max-height: unset !important; - overflow-y: auto; - } -} - @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*/ - .featureinfobox-content { - position: relative; - width: 100% !important; - max-width: unset !important; - max-height: unset !important; - height: 100vh; + .landscape\:max-h-screen { + max-height: 100vh; } .answer { diff --git a/index.html b/index.html index 00f9e5d..8450e33 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - +