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

Add professional html page

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-11-25 22:16:00 +01:00
parent 537966f282
commit e8fb457596
4 changed files with 81 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

34
UI/Base/Toggleable.ts
View file

@ -20,42 +20,26 @@ export class Accordeon extends Combine {
}
export default class Toggleable extends BaseUIElement {
export default class Toggleable extends Combine {
public readonly isVisible = new UIEventSource(false)
private readonly title: BaseUIElement;
private readonly content: BaseUIElement;
constructor(title: BaseUIElement, content: BaseUIElement) {
super()
this.title = title;
this.content = content;
this.content.SetClass("animate-height border-l-4 border-gray-300 pl-2")
this.title.SetClass("background-subtle rounded-lg")
super([title, content])
content.SetClass("animate-height border-l-4 border-gray-300 pl-2")
title.SetClass("background-subtle rounded-lg")
const self = this
this.onClick(() => self.isVisible.setData(!self.isVisible.data))
}
protected InnerConstructElement(): HTMLElement {
const title = this.title.ConstructElement()
const content = this.content.ConstructElement()
const contentElement = content.ConstructElement()
this.isVisible.addCallbackAndRun(isVisible => {
if (isVisible) {
content.style.maxHeight = "100vh"
content.style["-webkit-mask-image"] = "unset"
contentElement.style.maxHeight = "100vh"
contentElement.style["-webkit-mask-image"] = "unset"
} else {
content.style["-webkit-mask-image"] = "-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))"
content.style.maxHeight = "2rem"
contentElement.style["-webkit-mask-image"] = "-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))"
contentElement.style.maxHeight = "2rem"
}
})
const div = document.createElement("div")
div.appendChild(title)
div.appendChild(content)
return div;
}
}