70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
import { LitElement, css, html } from "lit";
|
|
|
|
import '../components/Header.js'
|
|
import '../components/Footer.js'
|
|
import '../components/HorizontalScroller.js'
|
|
import '../components/VerticalCard.js'
|
|
import '../components/ImageViewer.js'
|
|
|
|
class ImageView extends LitElement {
|
|
static properties = {}
|
|
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<mm-header></mm-header>
|
|
<main>
|
|
<div class="image">
|
|
<mm-imageviewer src="https://picsum.photos/${parseInt((Math.random() * 400) + 300)}/${parseInt((Math.random() * 400) + 400)}"></mm-imageviewer>
|
|
</div>
|
|
|
|
<mm-hscroller>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
<mm-vcard .details=${{'title': 'Image'}}></mm-vcard>
|
|
</mm-hscroller>
|
|
</main>
|
|
<mm-footer></mm-footer>
|
|
`
|
|
}
|
|
|
|
static styles = css`
|
|
:host {
|
|
display: grid;
|
|
grid-template-rows: min-content 1fr min-content;
|
|
gap: 0.25em;
|
|
height: 100vh;
|
|
}
|
|
|
|
mm-hscroller {
|
|
--col-width: 7.5em;
|
|
--gap: 0.75em;
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.image {
|
|
position: relative;
|
|
inline-margin: auto;
|
|
height: 100%;
|
|
}
|
|
`
|
|
}
|
|
|
|
customElements.define('mm-images', ImageView)
|