Using margin instead of padding for the browse view

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { MetadataEditComponent } from './metadata-edit/metadata-edit.component';
 import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatExpansionModule} from "@angular/material/expansion";
+import { ShowGridComponent } from './show-grid/show-grid.component';
 
 
 @NgModule({
@@ -57,7 +58,8 @@ import {MatExpansionModule} from "@angular/material/expansion";
 		FallbackDirective,
 		TrailerDialogComponent,
 		CollectionsListComponent,
-		MetadataEditComponent
+		MetadataEditComponent,
+		ShowGridComponent
 	],
 	imports: [
 		BrowserModule,

src/app/browse/browse.component.scss

@@ -20,24 +20,24 @@ button
 
 .show
 {
-	width: 33%;
+	width: 28%;
 	min-width: 120px;
-	max-width: 200px;
+	max-width: 168px;
 	list-style: none;
-	padding: .5em;
+	margin: .5em;
 	text-decoration: none;
 	color: inherit;
 	outline: none;
 
 	@include media-breakpoint-up(sm)
 	{
-		width: 25%;
+		width: 20%;
 	}
 
 	@include media-breakpoint-up(md)
 	{
-		width: 20%;
-		padding: 1em;
+		width: 18%;
+		margin: 1em;
 	}
 
 	@include media-breakpoint-up(lg)

src/app/metadata-edit/metadata-edit.component.html

@@ -84,7 +84,7 @@
                 <mat-panel-title>Identify show</mat-panel-title>
                 <mat-panel-description>Search on metadata providers</mat-panel-description>
             </mat-expansion-panel-header>
-            <app-browse [sortEnabled]="false" [shows]="this.identityShow(this.show.title) | async"></app-browse>
+            <app-show-grid [shows]="this.identityShow(this.show.title) | async"></app-show-grid>
         </mat-expansion-panel>
     </mat-accordion>
 </div>

src/app/show-grid/show-grid.component.html

@@ -0,0 +1,11 @@
+<div class="container-fluid">
+    <a class="show" *ngFor="let show of this.shows" href="/show/{{show.slug}}" routerLink="show/{{show.slug}}">
+        <mat-card>
+            <div matRipple [style.background-image]="getThumb(show.slug)" > </div>
+            <p class="title">{{show.title}}</p>
+            <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>
+        </mat-card>
+    </a>
+</div>

src/app/show-grid/show-grid.component.scss

@@ -0,0 +1,83 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins/breakpoints";
+
+button
+{
+	outline: none;
+}
+
+.arrow
+{
+	font-size: 12px;
+}
+
+.container-fluid
+{
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.show
+{
+	width: 100%;
+	min-width: 300px;
+	list-style: none;
+	margin: .5em;
+	text-decoration: none;
+	color: inherit;
+	outline: none;
+	
+	@include media-breakpoint-up(lg)
+	{
+		width: 50%;
+	}
+
+	@include media-breakpoint-up(xl)
+	{
+		width: 33%;
+	}
+
+	&:focus, &:hover
+	{
+		> div
+		{
+			outline: solid var(--accentColor);
+		}
+
+		> .title
+		{
+			text-decoration: underline;
+		}
+	}
+
+	> div
+	{
+		width: 100%;
+		height: 0;
+		padding-top: 147.0588%;
+		background-size: cover;
+		background-color: #333333;
+	}
+
+	> p
+	{
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: center;
+		margin-bottom: 0px;
+		opacity: 1;
+
+		&.date
+		{
+			opacity: 0.8;
+			font-size: 0.8em;
+		}
+	}
+
+	&:host-context(.hoverEnabled) &:hover
+	{
+		cursor: pointer;
+	}
+}

src/app/show-grid/show-grid.component.ts

@@ -0,0 +1,20 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Show} from "../../models/show";
+import {DomSanitizer} from "@angular/platform-browser";
+
+@Component({
+	selector: 'app-show-grid',
+	templateUrl: './show-grid.component.html',
+	styleUrls: ['./show-grid.component.scss']
+})
+export class ShowGridComponent
+{
+	@Input() shows: Show[]
+	
+	constructor(private sanitizer: DomSanitizer) { }
+
+	getThumb(slug: string)
+	{
+		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
+	}
+}