statuspage/ts_web/elements/lele-card.ts

182 lines
4.3 KiB
TypeScript
Raw Normal View History

2020-09-19 13:59:30 +00:00
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('lele-card')
export class LeleCard extends LitElement {
public static demo = () => html`
<lele-card
imgsrc="https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg"
.links="${[
{
text: 'Visit Website',
url: 'https://lossless.com'
}
]}"
.tabledata="${[
{
key: 'name',
value: 'Lossless GmbH'
},
{
key: 'domain',
value: 'https://lossless.com'
}
]}"
></lele-card>
`;
@property()
public heading: string = 'loading...';
@property()
public imgsrc: string = 'https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg';
@property({type: Array})
public links: {text: string; url: string}[] = [];
@property({type: Array})
public tabledata: {key: string, value: string}[] = [];
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host(:hover) .mainbox {
border-top: 1px solid var(--lelecv-color-accent, #e4002b);
}
:host(:hover) .mainbox .topimage img {
filter: grayscale(0%);
}
.mainbox {
display: block;
position: relative;
max-width: 400px;
max-height: 600px;
background: #212121;
transition: border-top 0.1s ease;
border-top: 1px solid #444;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
overflow: hidden;
min-height: 100px;
color: #ccc;
}
.topimage {
position: relative;
width: 100%;
}
.topimage img {
display: block;
width: 100%;
height: auto;
min-height: 20px;
transition: all 0.1s;
filter: grayscale(100%);
}
.heading {
font-size: 25px;
font-weight: 100;
position: absolute;
padding: 10px;
top: 55px;
left: 0px;
}
.content {
position: relative;
padding: 10px;
min-height: 100px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
border-top: 1px #444 dotted;
border-bottom: 1px #444 dotted;
}
.links {
position: relative;
height: 35px;
text-align: right;
}
.link {
display: inline-block;
padding: 0px 5px;
line-height: 35px;
height: 35px;
font-size: 15px;
}
a {
transition: color 0.1s ease;
text-decoration: none;
color: #888;
}
a:hover {
color: #CCC;
}
.tableline {
margin-left: -5px;
margin-right: -5px;
padding: 10px;
color: #cccccc;
font-size: 14px;
}
.tableline:hover {
color: #ffffff;
}
.tableline:nth-child(even) {
background: rgba(0,0,0,0.2);
}
.tableline .key {
font-family: 'Roboto Mono', monospace;
font-size: 12px;
color: #bbbbbb;
font-weight: bold;
}
.tableline .value {
font-family: 'Roboto Mono', monospace;
}
</style>
<div class="mainbox">
<div class="topimage"><img src="${this.imgsrc}" width="100" height="100" loading="lazy"></div>
<div class="content">
<slot>
${this.tabledata ? this.tabledata.map(datapoint => html`
<div class="tableline">
<div class="key">
${datapoint.key}:
</div>
<div class="value">
${datapoint.value}
</div>
</div>
`) : null}
</slot>
</div>
<div class="links">
${this.links.map(linkArg => {
return html`
<div class="link"><a target="_blank" href="${linkArg.url}">${linkArg.text}</a></div>
`;
})}
</div>
</div>
`;
}
}