Adding external ids to the identify tab

This commit is contained in:
Zoe Roux 2020-04-26 21:32:59 +02:00
parent 5ac1dbd615
commit 1f070d9d14
5 changed files with 62 additions and 13 deletions

View File

@ -1,12 +1,12 @@
<h2 mat-dialog-title>Editing metadata of {{this.show.title}}</h2>
<div matDialogContent class="pb-2">
<div matDialogContent class="pb-4">
<mat-accordion>
<mat-expansion-panel expanded="true">
<mat-expansion-panel-header>
<mat-panel-title>Edit metadata</mat-panel-title>
<mat-panel-description>Manually edit each property</mat-panel-description>
</mat-expansion-panel-header>
<form #showForm="ngForm">
<form #showForm="ngForm" class="pt-3">
<mat-form-field class="w-100">
<mat-label>Title</mat-label>
<input matInput [(ngModel)]="this.show.title" name="title">

View File

@ -58,7 +58,7 @@
<p class="text-justify overview">{{this.show.overview}}</p>
<ul>
<li class="provider" *ngFor="let id of this.show.externalIDs">
<a [href]="id.link"><img class="provider-icon" [src]="id.provider.logo" [alt]="id.provider.name"/></a>
<a [href]="id.link"><img [src]="id.provider.logo" [alt]="id.provider.name"/></a>
</li>
</ul>
</div>

View File

@ -153,14 +153,28 @@ hr
.provider
{
display: inline;
width: 4rem;
height: 4rem;
display: inline-block;
width: 3rem;
height: 3rem;
margin: .5rem;
}
.provider-icon
{
max-width: 4rem;
max-height: 4rem;
> a
{
width: 3rem;
height: 3rem;
position: relative;
display: inline-block;
> img
{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
max-width: 3rem;
max-height: 3rem;
}
}
}

View File

@ -10,6 +10,11 @@
<p class="date" *ngIf="show.endYear && show.startYear != show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</p>
<ng-template #elseBlock><p class="date">{{show.startYear}}</p></ng-template>
<p class="overview">{{show.overview}}</p>
<ul>
<li class="provider" *ngFor="let id of this.show.externalIDs">
<a [href]="id.link"><img [src]="id.provider.logo" [alt]="id.provider.name"/></a>
</li>
</ul>
</div>
</a>
</mat-card>

View File

@ -100,9 +100,10 @@ button
> .overview
{
overflow-y: auto;
height: calc(100% - 2rem);
height: calc(100% - 4rem);
text-align: justify;
padding-right: .5rem;
margin-bottom: 0;
}
&:host-context(.hoverEnabled) &:hover
@ -112,3 +113,32 @@ button
}
}
}
.provider
{
display: inline-block;
width: 2.5rem;
height: 2.5rem;
margin: .25rem;
> a
{
width: 2.5rem;
height: 2.5rem;
position: relative;
display: inline-block;
> img
{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
max-width: 2.5rem;
max-height: 2.5rem;
}
}
}