Filtering undefined scenes property from movies. Added movie page scraper to Elegant Angel.

assets/components/movies/movies.vue

@@ -43,6 +43,7 @@ export default {
 
 .tiles {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, 15rem);
+	grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
+	grid-gap: 1rem;
 }
 </style>

assets/components/movies/tile.vue

@@ -1,21 +1,27 @@
 <template>
 	<div class="tile">
-		<div class="cover">
-			<img
-				v-if="movie.covers[0]"
-				:src="`/media/${movie.covers[0].thumbnail}`"
-				class="front"
+		<div class="movie">
+			<router-link
+				:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+				class="cover"
 			>
+				<img
+					v-if="movie.covers[0]"
+					:src="`/media/${movie.covers[0].thumbnail}`"
+				>
+			</router-link>
 
-			<img
-				v-if="movie.covers[1]"
-				:src="`/media/${movie.covers[1].thumbnail}`"
-				class="back"
-			>
+			<div class="info">
+				<router-link
+					:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+					class="title-link"
+				>
+					<h3 class="title">{{ movie.title }}</h3>
+				</router-link>
+			</div>
 		</div>
 
 		<div class="details">{{ movie.entity.name }}</div>
-		<h3 class="title">{{ movie.title }}</h3>
 	</div>
 </template>
 
@@ -39,6 +45,15 @@ export default {
 	font-size: 0;
 }
 
+.movie {
+	display: flex;
+}
+
+.title-link {
+	color: var(--text);
+	text-decoration: none;
+}
+
 .details {
 	color: var(--text-light);
 	background: var(--profile);
@@ -48,23 +63,11 @@ export default {
 }
 
 .cover {
+	width: 12rem;
+
 	img {
 		width: 100%;
 	}
-
-	.back {
-		display: none;
-	}
-
-	&:hover {
-		.back {
-			display: block;
-		}
-
-		.front {
-			display: none;
-		}
-	}
 }
 
 .title {

assets/js/router.js

@@ -48,7 +48,7 @@ const routes = [
 		name: 'scene',
 	},
 	{
-		path: '/movie/:releaseId/:releaseSlug?',
+		path: '/movie/:movieId/:movieSlug?',
 		component: Release,
 		name: 'movie',
 	},