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,69 +79,73 @@
 						>
 					</a>
 
-					<div class="tile-meta">
+					<div class="tile-info">
-						<div class="channel">
+						<div class="tile-meta">
-							<Link
+							<div class="channel">
-								:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
+								<Link
-								class="favicon-link"
+									:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
-							>
+									class="favicon-link"
-								<img
-									:src="movie.channel.isIndependent || !movie.network ? `/logos/${movie.channel.slug}/favicon.png` : `/logos/${movie.network.slug}/favicon.png`"
-									class="favicon"
 								>
-							</Link>
+									<img
+										:src="movie.channel.isIndependent || !movie.network ? `/logos/${movie.channel.slug}/favicon.png` : `/logos/${movie.network.slug}/favicon.png`"
+										class="favicon"
+									>
+								</Link>
 
-							<Link
+								<Link
-								:href="`/${movie.channel.type}/${movie.channel.slug}`"
+									:href="`/${movie.channel.type}/${movie.channel.slug}`"
-								class="nolink channel-link"
+									class="nolink channel-link"
-							>{{ movie.channel.name }}</Link>
+								>{{ movie.channel.name }}</Link>
+							</div>
+
+							<time
+								:datetime="movie.effectiveDate.toISOString()"
+								class="date"
+								:class="{ nodate: !movie.date }"
+							>{{ format(movie.effectiveDate, movie.effectiveDate.getFullYear() === currentYear ? 'MMM d' : 'MMM d, y') }}</time>
 						</div>
 
-						<time
+						<a
-							:datetime="movie.effectiveDate.toISOString()"
+							:href="`/movie/${movie.id}/${movie.slug}`"
-							class="date"
+							:title="movie.title"
-							:class="{ nodate: !movie.date }"
+							class="title nolink"
-						>{{ format(movie.effectiveDate, movie.effectiveDate.getFullYear() === currentYear ? 'MMM d' : 'MMM d, y') }}</time>
+						>{{ movie.title }}</a>
+
+						<ul
+							:title="movie.actors.map((actor) => actor.name).join(', ')"
+							class="actors nolist"
+						>
+							<li
+								v-for="actor in movie.actors"
+								:key="`actor-${movie.id}-${actor.slug}`"
+								class="actor-item"
+							>
+								<a
+									:href="`/actor/${actor.id}/${actor.slug}`"
+									class="actor nolink"
+								>{{ actor.name }}</a>
+							</li>
+						</ul>
+
+						<ul
+							:title="movie.tags.map((tag) => tag.name).join(', ')"
+							class="tags nolist"
+						>
+							<li
+								v-for="tag in movie.tags"
+								:key="`tag-${movie.id}-${tag.slug}`"
+							>
+								<a
+									:href="`/tag/${tag.slug}`"
+									class="tag nolink"
+								>{{ tag.name }}</a>
+							</li>
+						</ul>
 					</div>
-
-					<a
-						:href="`/movie/${movie.id}/${movie.slug}`"
-						:title="movie.title"
-						class="title nolink"
-					>{{ movie.title }}</a>
-
-					<ul
-						:title="movie.actors.map((actor) => actor.name).join(', ')"
-						class="actors nolist"
-					>
-						<li
-							v-for="actor in movie.actors"
-							:key="`actor-${movie.id}-${actor.slug}`"
-							class="actor-item"
-						>
-							<a
-								:href="`/actor/${actor.id}/${actor.slug}`"
-								class="actor nolink"
-							>{{ actor.name }}</a>
-						</li>
-					</ul>
-
-					<ul
-						:title="movie.tags.map((tag) => tag.name).join(', ')"
-						class="tags nolist"
-					>
-						<li
-							v-for="tag in movie.tags"
-							:key="`tag-${movie.id}-${tag.slug}`"
-						>
-							<a
-								:href="`/tag/${tag.slug}`"
-								class="tag nolink"
-							>{{ tag.name }}</a>
-						</li>
-					</ul>
 				</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>