99 lines
2.0 KiB
JavaScript
99 lines
2.0 KiB
JavaScript
import { LitElement, html, css, unsafeCSS } from 'lit'
|
|
|
|
import MainCSS from '../assets/styles/main.scss?inline'
|
|
|
|
class VerticalCard extends LitElement {
|
|
static properties = {
|
|
details: { type: Object },
|
|
selected: { type: Boolean }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.details = {}
|
|
this.selected = false
|
|
}
|
|
|
|
select() {
|
|
const event = new CustomEvent('video-select', {
|
|
bubbles: true, composed: true,
|
|
detail: {
|
|
...this.details
|
|
}
|
|
})
|
|
|
|
this.dispatchEvent(event)
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div @click=${this.select} class=${this.selected ? 'selected' : ''}>
|
|
<picture>
|
|
<img src="/media/documentaries_interviews/thumbs/girlchild.png">
|
|
</picture>
|
|
<aside>
|
|
<p class="title">${this.details?.title}</p>
|
|
<p class="detail">${this.details?.detail}</p>
|
|
</aside>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
:host {
|
|
--background-color: lightgrey;
|
|
--font-color: black;
|
|
--image-placeholder: lightgrey;
|
|
--color: black;
|
|
}
|
|
|
|
div {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: auto 0.2fr;
|
|
background: lightgrey;
|
|
line-height: 1;
|
|
overflow: hidden;
|
|
border-radius: var(--border-radius, 0.75em);
|
|
background: var(--background-color);
|
|
color: var(--font-color);
|
|
align-content: start;
|
|
}
|
|
|
|
.selected {
|
|
outline: 2px solid var(--color);
|
|
}
|
|
|
|
picture {
|
|
display: block;
|
|
background: var(--image-placeholder);
|
|
aspect-ratio: 1 / 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
picture > img {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
aside {
|
|
padding: 0.5em;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.detail {
|
|
font-size: 0.7em;
|
|
line-height: 1.2;
|
|
margin-block-start: 0.125em;
|
|
}
|
|
` ]
|
|
}
|
|
|
|
customElements.define('mm-vcard', VerticalCard)
|