From e3b7c7ddc6844d88bc461a608c94a7d5557b42fe Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Jan 2021 23:00:11 +0100 Subject: [PATCH] =?UTF-8?q?Migrate=20featurebox-title=20(=E2=80=A6)=20to?= =?UTF-8?q?=20Tailwind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- UI/Base/ScrollableFullScreen.ts | 4 ++-- UI/BigComponents/LayerControlPanel.ts | 2 +- UI/FullScreenMessageBoxHandler.ts | 3 --- UI/Popup/FeatureInfoBox.ts | 8 ++++---- css/fullscreenmessagebox.css | 12 ------------ css/tagrendering.css | 23 ----------------------- 6 files changed, 7 insertions(+), 45 deletions(-) diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts index 3d827b0..d3e7af0 100644 --- a/UI/Base/ScrollableFullScreen.ts +++ b/UI/Base/ScrollableFullScreen.ts @@ -18,11 +18,11 @@ export default class ScrollableFullScreen extends UIElement { State.state.selectedElement.setData(undefined); }).SetClass("only-on-mobile") .SetClass("featureinfobox-back-to-the-map") - title.SetStyle("width: 100%; display: block;") + 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("featureinfobox-titlebar"), + 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"), // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide ]) diff --git a/UI/BigComponents/LayerControlPanel.ts b/UI/BigComponents/LayerControlPanel.ts index 76f7ac4..24abef0 100644 --- a/UI/BigComponents/LayerControlPanel.ts +++ b/UI/BigComponents/LayerControlPanel.ts @@ -29,7 +29,7 @@ export default class LayerControlPanel extends UIElement { } - const title =Translations.t.general.layerSelection.title.SetClass("featureinfobox-title") + const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2") this._panel = new ScrollableFullScreen(title, layerControlPanel); } diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts index 9fa2493..109105b 100644 --- a/UI/FullScreenMessageBoxHandler.ts +++ b/UI/FullScreenMessageBoxHandler.ts @@ -25,9 +25,6 @@ export default class FullScreenMessageBox extends UIElement { protected InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); - // This is a bit out of place, and it is a fix specifically for the featureinfobox-titlebar - const height = htmlElement.getElementsByClassName("featureinfobox-titlebar")[0]?.clientHeight ?? 0; - htmlElement.style.setProperty("--variable-title-height", height + "px") } diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index b0b59d1..f203948 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -13,7 +13,7 @@ export default class FeatureInfoBox extends UIElement { private _component: UIElement; public title: UIElement ; - + constructor( tags: UIEventSource, layerConfig: LayerConfig @@ -25,11 +25,11 @@ export default class FeatureInfoBox extends UIElement { const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined)) - .SetClass("featureinfobox-title"); + .SetClass("text-2xl break-words font-bold p-2"); this.title = title; const titleIcons = new Combine( layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon))) - .SetClass("featureinfobox-icons"); + .SetClass("h-8 w-8 pt-2 box-content"); let questionBox: UIElement = undefined; if (State.state.featureSwitchUserbadge.data) { @@ -57,7 +57,7 @@ export default class FeatureInfoBox extends UIElement { ] ) const titleBar = new Combine([ - new Combine([title, titleIcons]).SetClass("featureinfobox-titlebar-title") + new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between") ]) this._component = new ScrollableFullScreen(titleBar, content) diff --git a/css/fullscreenmessagebox.css b/css/fullscreenmessagebox.css index 2c681b9..cf527cd 100644 --- a/css/fullscreenmessagebox.css +++ b/css/fullscreenmessagebox.css @@ -26,18 +26,6 @@ justify-content: space-between } -.fullscreenmessage-content .featureinfobox-titlebar { - position: fixed; - top: 0; - left: 0; - z-index: 10001; - background-color: var(--background-color); - padding: 0.5em; - width: 100%; - box-sizing: border-box; - -} - .fullscreenmessage-content .featureinfobox-tail { /*THe ornament to give the URL bar some room...*/ } diff --git a/css/tagrendering.css b/css/tagrendering.css index ce8624f..bf2589b 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -4,11 +4,6 @@ flex-direction: column; } -.featureinfobox-title { - font-size: xx-large; - word-break: break-word; -} - .featureinfobox-icons img { max-height: 1.5em; width: 1.5em; @@ -23,24 +18,6 @@ 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;