Hiding header nav bar on small screens. Improved scene and movie tile scaling, added thumbnail placeholder. Added pagination to movies page.

components/header/header.vue

@@ -218,6 +218,7 @@ async function logout() {
 	box-shadow: inset 0 0 3px var(--shadow-weak-40);
 
 	.input {
+		width: 14rem;
 		padding: .5rem 0 .5rem 1rem;
 		border: none;
 		margin: 0;
@@ -317,4 +318,16 @@ async function logout() {
 		fill: var(--error);
 	}
 }
+
+@media(--small) {
+	.search .input {
+		width: 10rem;
+	}
+}
+
+@media(--small-10) {
+	.nav-list {
+		display: none;
+	}
+}
 </style>

components/pagination/pagination.vue

@@ -3,7 +3,7 @@
 		<div
 			v-if="currentPage === pageTotal && total > env.maxMatches"
 			class="more"
-		>Results are truncated, apply a filter to find more.</div>
+		>Can't find what you're looking for? Narrow down the results using a filter.</div>
 
 		<nav class="pagination">
 			<ul class="pages nolist">

components/scenes/scenes.vue

@@ -293,7 +293,7 @@ function updateFilter(prop, value, reload = true) {
 
 .scenes {
 	display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	gap: .75rem .5rem;
 	padding: .5rem 1rem 1rem 1rem;
 }
@@ -330,4 +330,16 @@ function updateFilter(prop, value, reload = true) {
 		display: flex;
 	}
 }
+
+@media(--small-10) {
+	.scenes {
+		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+	}
+}
+
+@media(--small-20) {
+	.scenes {
+		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	}
+}
 </style>

components/scenes/tile.vue

@@ -18,6 +18,11 @@
 					loading="lazy"
 					class="thumbnail"
 				>
+
+				<Icon
+					v-else
+					icon="clapboard"
+				/>
 			</Link>
 
 			<Icon
@@ -166,19 +171,31 @@ async function unstash() {
 
 .poster-container {
 	position: relative;
+	overflow: hidden;
+	font-size: 0;
 }
 
 .poster {
-	display: block;
+	display: flex;
-	height: 14rem;
+	justify-content: center;
+	align-items: center;
+	aspect-ratio: 16/9;
 	border-radius: .25rem .25rem 0 0;
 	overflow: hidden;
+	background: var(--background-dark-20);
+
+	.icon {
+		width: 3rem;
+		height: 3rem;
+		fill: var(--shadow-weak-40);
+	}
 }
 
 .thumbnail {
-	height: 100%;
 	width: 100%;
+	height: 100%;
 	object-fit: cover;
+	object-position: 50% 50%;
 	background-size: cover;
 	background-position: center;
 }

pages/movies/+Page.vue

@@ -79,6 +79,7 @@
 						>
 					</a>
 
+					<div class="tile-info">
 						<div class="tile-meta">
 							<div class="channel">
 								<Link
@@ -140,8 +141,11 @@
 								>{{ tag.name }}</a>
 							</li>
 						</ul>
+					</div>
 				</li>
 			</ul>
+
+			<Pagination />
 		</div>
 	</div>
 </template>
@@ -160,6 +164,7 @@ import Filters from '#/components/filters/filters.vue';
 import ActorsFilter from '#/components/filters/actors.vue';
 import TagsFilter from '#/components/filters/tags.vue';
 import ChannelsFilter from '#/components/filters/channels.vue';
+import Pagination from '#/components/pagination/pagination.vue';
 
 const pageContext = inject('pageContext');
 const { pageProps, routeParams, urlParsed } = pageContext;
@@ -312,7 +317,6 @@ function updateFilter(prop, value, reload = true) {
 }
 
 .movie {
-	max-height: 30rem;
 	display: flex;
 	flex-direction: column;
 	box-shadow: 0 0 3px var(--shadow-weak-30);
@@ -347,6 +351,11 @@ function updateFilter(prop, value, reload = true) {
 	opacity: .1;
 }
 
+.tile-info {
+	flex-shrink: 0;
+	font-size: 0;
+}
+
 .tile-meta {
 	display: flex;
 	justify-content: space-between;
@@ -399,6 +408,7 @@ function updateFilter(prop, value, reload = true) {
 	font-weight: bold;
 	padding: 0 .5rem;
 	margin-bottom: .25rem;
+	font-size: 1rem;
 }
 
 .actors {
@@ -441,4 +451,10 @@ function updateFilter(prop, value, reload = true) {
 		color: var(--primary);
 	}
 }
+
+@media(--compact) {
+	.movies {
+		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+	}
+}
 </style>