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

Refactoring of Attribute Images, fix more or less decent slideshow. Turns out a few lines of css can get us there!

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-18 01:25:13 +02:00
parent 6ba4cb18c6
commit 1609c63f3b
20 changed files with 363 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

14
UI/Image/SlideShow.ts
View file

@ -11,23 +11,27 @@ export class SlideShow extends BaseUIElement {
constructor(embeddedElements: UIEventSource<BaseUIElement[]>) {
super()
this.embeddedElements =embeddedElements;
}
this.SetStyle("scroll-snap-type: x mandatory; overflow-x: scroll")
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("div")
el.style.overflowX = "auto"
el.style.width = "min-content"
el.style.minWidth = "min-content"
el.style.display = "flex"
el.style.justifyContent = "center"
this.embeddedElements.addCallbackAndRun(elements => {
if(elements.length > 1){
el.style.justifyContent = "unset"
}
while (el.firstChild) {
el.removeChild(el.lastChild)
}
elements = Utils.NoNull(elements).map(el => new Combine([el])
.SetClass("block relative ml-1 bg-gray-200 m-1 rounded slideshow-item")
.SetStyle("min-width: 150px; width: max-content; height: var(--image-carousel-height);max-height: var(--image-carousel-height);")
.SetStyle("min-width: 150px; width: max-content; height: var(--image-carousel-height);max-height: var(--image-carousel-height);scroll-snap-align: start;")
)
for (const element of elements ?? []) {