midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Migrate featurebox-title (…) to Tailwind

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
UI/Base/ScrollableFullScreen.ts
View file

@ -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(["<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
])

2
UI/BigComponents/LayerControlPanel.ts
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);
}

3
UI/FullScreenMessageBoxHandler.ts
View file

@ -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")
}

8
UI/Popup/FeatureInfoBox.ts
View file

@ -13,7 +13,7 @@ export default class FeatureInfoBox extends UIElement {
private _component: UIElement;
public title: UIElement ;
constructor(
tags: UIEventSource<any>,
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)