89 lines
2.2 KiB
HTML
89 lines
2.2 KiB
HTML
<style>
|
|
:host {
|
|
float: left;
|
|
}
|
|
.dashboard-card {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.size-medium {
|
|
width: 602px;
|
|
height: 402px;
|
|
}
|
|
.size-small {
|
|
width: 402px;
|
|
height: 302px;
|
|
}
|
|
img.render-img {
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.top-left {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.top-right {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.dashboard-card .editable-hovered {
|
|
visibility: hidden;
|
|
}
|
|
.dashboard-card:hover .editable-hovered {
|
|
visibility: visible;
|
|
}
|
|
|
|
.aborted-img {
|
|
flex-grow: 0.3;
|
|
opacity: 0.3;
|
|
}
|
|
.aborted-img img {
|
|
width: 100%;
|
|
}
|
|
|
|
.invader {
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kKGRAxBENShygAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAbUlEQVRIx9WVQQrAMAgEM6X///L2FCihYvRg7F416LCsQdKo0DWKZA4CBGzjev1lRHgezS0lkan3IYr485ZFdo5oJZkbWoRWfSWrJ8p6suvZucsgCS8THsHX+zKiO5uLaO763bpobvoS/e6HfQBzIE0PhAsDxgAAAABJRU5ErkJggg==);
|
|
width: 26px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
}
|
|
.spinner {
|
|
animation: wobble 2s linear infinite;
|
|
}
|
|
@keyframes wobble {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="dashboard-card" [ngClass]="{'size-medium' : true}">
|
|
<div class="editable-hovered top-right">
|
|
<button mat-icon-button (click)="edit()" ><img src="/assets/img/edit-outline.svg"/></button>
|
|
<button mat-icon-button (click)="delete()"><img src="/assets/img/recycle-bin-line.svg"/></button>
|
|
</div>
|
|
<div *ngIf="!hasRender('main') && !data?.error && !data.isAborted">
|
|
<button mat-button (click)="abort()"><span class="invader spinner"></span>Cancel</button>
|
|
</div>
|
|
<img *ngIf="hasRender('main')" [src]="getImageUrl('main')" (click)="showFullScreenImage()" class="render-img" />
|
|
<div *ngIf="data?.error && !data?.isAborted">
|
|
There was an error! This is a good time to panic!
|
|
</div>
|
|
<div *ngIf="data?.isAborted" class="aborted-img">
|
|
<img src="assets/img/image-aborted.svg" />
|
|
</div>
|
|
</div>
|
|
|