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

Add various bug fixes and improvements

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-21 23:39:31 +01:00
parent 15a9441b1d
commit 6c4b15e33d
18 changed files with 99 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

18
UI/Base/ScrollableFullScreen.ts
View file

@ -8,25 +8,27 @@ import Ornament from "./Ornament";
* Wraps some contents into a panel that scrolls the content _under_ the title
*/
export default class ScrollableFullScreen extends UIElement {
private _component: Combine;
private _component: UIElement;
constructor(title: UIElement, content: UIElement) {
super();
const returnToTheMap = Svg.back_svg().onClick(() => {
const returnToTheMap = Svg.back_ui().onClick(() => {
State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined);
}).SetClass("featureinfobox-back-to-the-map only-on-mobile mb-2")
}).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
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("sm:hidden")
this._component = new Combine([
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 pb-0 sm:p-0 flex overflow-hidden"),
new Combine([returnToTheMap, title])
.AddClass("border-b-2 border-black shadow sm:shadow-none z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
new Combine(["<span>", content, "</span>", ornament])
.SetClass("block relative pt-16 sm:pt-4 w-full max-h-screen sm:max-h-65vh landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
.SetClass("block p-2 sm:pt-4 w-full max-h-screen landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
])
this.SetClass("block flex flex-col");
]).SetClass("block flex flex-col fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
}