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

Optimizing the layout for small screens

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-02-21 01:36:31 +01:00
parent f4f7ae8f93
commit 4deb095943
12 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Popup/EditableTagRendering.ts
View file

@ -29,7 +29,7 @@ export default class EditableTagRendering extends UIElement {
this.ListenTo(State.state?.osmConnection?.userDetails)
this._answer = new TagRenderingAnswer(tags, configuration);
this._answer.SetStyle("width:100%;")
this._answer.SetClass("w-full")
this._question = this.GenerateQuestion();
this.dumbMode = false;

12
UI/Popup/FeatureInfoBox.ts
View file

@ -46,14 +46,16 @@ export default class FeatureInfoBox extends UIElement {
private static GenerateTitleBar(tags: UIEventSource<any>,
layerConfig: LayerConfig): UIElement {
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
.SetClass("text-2xl break-words font-bold p-2");
.SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2");
const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)
.SetClass("block w-8 h-8 align-baseline box-content p-0.5")))
.SetClass("flex flex-row flex-wrap pt-1 items-center mr-2");
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon,
"block w-8 h-8 align-baseline box-content sm:p-0.5", "width: 2rem !important;")
.HideOnEmpty(true)
))
.SetClass("flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2")
return new Combine([
new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between")
new Combine([title, titleIcons]).SetClass("flex flex-col sm:flex-row flex-grow justify-between")
])
}

12
UI/Popup/TagRenderingAnswer.ts
View file

@ -13,15 +13,20 @@ export default class TagRenderingAnswer extends UIElement {
private readonly _tags: UIEventSource<any>;
private _configuration: TagRenderingConfig;
private _content: UIElement;
private readonly _contentClass: string;
private _contentStyle: string;
constructor(tags: UIEventSource<any>, configuration: TagRenderingConfig) {
constructor(tags: UIEventSource<any>, configuration: TagRenderingConfig, contentClasses: string = "", contentStyle: string = "") {
super(tags);
this._tags = tags;
this._configuration = configuration;
this._contentClass = contentClasses;
this._contentStyle = contentStyle;
if (configuration === undefined) {
throw "Trying to generate a tagRenderingAnswer without configuration..."
}
this.SetClass("flex items-center flex-row text-lg")
this.SetStyle("word-wrap: anywhere;");
}
InnerRender(): string {
@ -58,16 +63,15 @@ export default class TagRenderingAnswer extends UIElement {
])
}
return this._content.Render();
return this._content.SetClass(this._contentClass).SetStyle(this._contentStyle).Render();
}
}
const tr = this._configuration.GetRenderValue(tags);
if (tr !== undefined) {
this._content = SubstitutedTranslation.construct(tr, this._tags);
return this._content.Render();
return this._content.SetClass(this._contentClass).SetStyle(this._contentStyle).Render();
}
return "";