From 1f070d9d14134073f575ed2316e32401590777ee Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sun, 26 Apr 2020 21:32:59 +0200
Subject: [PATCH] Adding external ids to the identify tab

---
 .../metadata-edit.component.html              |  4 +--
 .../show-details/show-details.component.html  |  2 +-
 .../show-details/show-details.component.scss  | 32 +++++++++++++------
 src/app/show-grid/show-grid.component.html    |  5 +++
 src/app/show-grid/show-grid.component.scss    | 32 ++++++++++++++++++-
 5 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/src/app/metadata-edit/metadata-edit.component.html b/src/app/metadata-edit/metadata-edit.component.html
index d3c3eebd..7ecee13e 100644
--- a/src/app/metadata-edit/metadata-edit.component.html
+++ b/src/app/metadata-edit/metadata-edit.component.html
@@ -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">
diff --git a/src/app/show-details/show-details.component.html b/src/app/show-details/show-details.component.html
index 63116065..8532fbaf 100644
--- a/src/app/show-details/show-details.component.html
+++ b/src/app/show-details/show-details.component.html
@@ -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>
diff --git a/src/app/show-details/show-details.component.scss b/src/app/show-details/show-details.component.scss
index bc0dccef..13cd2360 100644
--- a/src/app/show-details/show-details.component.scss
+++ b/src/app/show-details/show-details.component.scss
@@ -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;
+		}
+	}
 }
\ No newline at end of file
diff --git a/src/app/show-grid/show-grid.component.html b/src/app/show-grid/show-grid.component.html
index 0b68f724..785cd911 100644
--- a/src/app/show-grid/show-grid.component.html
+++ b/src/app/show-grid/show-grid.component.html
@@ -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>
diff --git a/src/app/show-grid/show-grid.component.scss b/src/app/show-grid/show-grid.component.scss
index 89f42092..5609ab4e 100644
--- a/src/app/show-grid/show-grid.component.scss
+++ b/src/app/show-grid/show-grid.component.scss
@@ -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;
+		}
+	}
+}
\ No newline at end of file