midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Optimizing the layout for small screens

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

8
UI/Base/ScrollableFullScreen.ts
View file

@ -27,9 +27,9 @@ export default class ScrollableFullScreen extends UIElement {
} else {
console.error("WARNING: onClose is not defined")
}
}).SetClass("mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
}).SetClass("mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5 flex-shrink-0")
title.SetClass("block w-full text-2xl font-bold p-2 pl-4")
title.SetClass("block text-l sm:text-xl md:text-2xl w-full font-bold p-2 pl-4 max-h-20vh overflow-y-auto")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
.SetClass("md:hidden h-5")
@ -38,9 +38,9 @@ export default class ScrollableFullScreen extends UIElement {
new Combine([
new Combine([
new Combine([returnToTheMap, title])
.SetClass("border-b-2 border-black shadow md:shadow-none bg-white p-2 pb-0 md:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
.SetClass("border-b-2 border-black shadow md:shadow-none bg-white p-2 pb-0 md:p-0 flex flex-shrink-0"),
new Combine([content, ornament])
.SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto overflow-x-hidden md:max-h-65vh"),
.SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]).SetClass("flex flex-col h-full relative bg-white")
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative");

1
UI/Image/ImageCarousel.ts
View file

@ -33,6 +33,7 @@ export class ImageCarousel extends UIElement{
this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
this.SetClass("block w-full");
this.slideshow.SetClass("w-full");
}
/***

4
UI/Image/ImageUploadFlow.ts
View file

@ -35,7 +35,9 @@ export class ImageUploadFlow extends UIElement {
{value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs},
{value: "CC-BY 4.0", shown: Translations.t.image.ccb}
],
State.state.osmConnection.GetPreference("pictures-license")
State.state.osmConnection.GetPreference("pictures-license"),
"","",
"flex flex-col sm:flex-row"
);
licensePicker.SetStyle("float:left");

7
UI/Input/DropDown.ts
View file

@ -13,13 +13,16 @@ export class DropDown<T> extends InputElement<T> {
public IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _label_class: string;
private readonly _select_class: string;
private _form_style: string;
constructor(label: string | UIElement,
values: { value: T, shown: string | UIElement }[],
value: UIEventSource<T> = undefined,
label_class: string = "",
select_class: string = "") {
select_class: string = "",
form_style: string = "flex") {
super(undefined);
this._form_style = form_style;
this._value = value ?? new UIEventSource<T>(undefined);
this._label = Translations.W(label);
this._label_class = label_class || '';
@ -62,7 +65,7 @@ export class DropDown<T> extends InputElement<T> {
options += "<option value='" + i + "'>" + this._values[i].shown.InnerRender() + "</option>"
}
return `<form class="flex">` +
return `<form class="${this._form_style}">` +
`<label class='${this._label_class}' for='dropdown-${this.id}'>${this._label.Render()}</label>` +
`<select class='${this._select_class}' name='dropdown-${this.id}' id='dropdown-${this.id}'>` +
options +

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 "";

2
UI/SpecialVisualizations.ts
View file

@ -163,7 +163,7 @@ export default class SpecialVisualizations {
if (url === "") {
url = window.location.href
}
return new ShareButton(Svg.share_svg(), {
return new ShareButton(Svg.share_ui(), {
title: name,
url: url,
text: state.layoutToUse.data.shortDescription.txt

1
UI/SubstitutedTranslation.ts
View file

@ -30,7 +30,6 @@ export class SubstitutedTranslation extends UIElement {
self.Update();
});
this.SetClass("w-full")
}
public static construct(

4
UI/UIElement.ts
View file

@ -79,7 +79,7 @@ export abstract class UIElement extends UIEventSource<string> {
if (element.innerHTML === "") {
element.parentElement.style.display = "none";
} else {
element.parentElement.style.display = "block";
element.parentElement.style.display = "";
}
}
@ -129,7 +129,7 @@ export abstract class UIElement extends UIEventSource<string> {
if (this.clss.size > 0) {
clss = `class='${Array.from(this.clss).join(" ")}' `;
}
return `<span ${clss}${style}id='${this.id}'>${this.lastInnerRender}</span>`
return `<span ${clss}${style}id='${this.id}' gen="${this.constructor.name}">${this.lastInnerRender}</span>`
}
AttachTo(divId: string) {

4
css/userbadge.css
View file

@ -8,6 +8,8 @@
min-width: 20em;
pointer-events: all;
border-radius: 999em;
max-width: 100vw;
overflow-x: hidden;
}
#userbadge a {
@ -104,4 +106,6 @@
#userbadge-and-search {
display: inline-block;
width: min-content;
overflow-x: hidden;
max-width: 100vw;
}

2
index.css
View file

@ -119,7 +119,7 @@ svg, img {
a {
color: var(--foreground-color)
color: var(--foreground-color);
}
.slick-prev:before, .slick-next:before {