Migrate featurebox-title (…) to Tailwind

This commit is contained in:
Tobias 2021-01-20 23:00:11 +01:00
parent d9040db12a
commit e3b7c7ddc6
6 changed files with 7 additions and 45 deletions

View file

@ -18,11 +18,11 @@ export default class ScrollableFullScreen extends UIElement {
State.state.selectedElement.setData(undefined); State.state.selectedElement.setData(undefined);
}).SetClass("only-on-mobile") }).SetClass("only-on-mobile")
.SetClass("featureinfobox-back-to-the-map") .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") const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
this._component = new Combine([ 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(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"), new Combine(["<span>",content,"</span>", 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 // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]) ])

View file

@ -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); this._panel = new ScrollableFullScreen(title, layerControlPanel);
} }

View file

@ -25,9 +25,6 @@ export default class FullScreenMessageBox extends UIElement {
protected InnerUpdate(htmlElement: HTMLElement) { protected InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(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")
} }

View file

@ -13,7 +13,7 @@ export default class FeatureInfoBox extends UIElement {
private _component: UIElement; private _component: UIElement;
public title: UIElement ; public title: UIElement ;
constructor( constructor(
tags: UIEventSource<any>, tags: UIEventSource<any>,
layerConfig: LayerConfig layerConfig: LayerConfig
@ -25,11 +25,11 @@ export default class FeatureInfoBox extends UIElement {
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined)) 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; this.title = title;
const titleIcons = new Combine( const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon))) layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
.SetClass("featureinfobox-icons"); .SetClass("h-8 w-8 pt-2 box-content");
let questionBox: UIElement = undefined; let questionBox: UIElement = undefined;
if (State.state.featureSwitchUserbadge.data) { if (State.state.featureSwitchUserbadge.data) {
@ -57,7 +57,7 @@ export default class FeatureInfoBox extends UIElement {
] ]
) )
const titleBar = new Combine([ 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) this._component = new ScrollableFullScreen(titleBar, content)

View file

@ -26,18 +26,6 @@
justify-content: space-between 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 { .fullscreenmessage-content .featureinfobox-tail {
/*THe ornament to give the URL bar some room...*/ /*THe ornament to give the URL bar some room...*/
} }

View file

@ -4,11 +4,6 @@
flex-direction: column; flex-direction: column;
} }
.featureinfobox-title {
font-size: xx-large;
word-break: break-word;
}
.featureinfobox-icons img { .featureinfobox-icons img {
max-height: 1.5em; max-height: 1.5em;
width: 1.5em; width: 1.5em;
@ -23,24 +18,6 @@
padding-right: 0.1em; 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 { .featureinfobox-back-to-the-map {
padding: 0.5em; padding: 0.5em;
border-radius: 999em; border-radius: 999em;