traxxx-web/pages/search/+Page.vue

<template>
	<div class="page">
		<div class="row">
			<div
				v-if="actors.length > 0"
				class="results"
			>
				<span class="results-meta">
					Found {{ actorTotal }} {{ actorTotal > 1 ? 'actors' : 'actor' }}

					<a
						:href="`/actors/?q=${query}&order=results.desc`"
						class="link"
					>Full actor results</a>
				</span>

				<div class="results-container">
					<div class="actors">
						<ActorTile
							v-for="actor in actors"
							:key="`actor-${actor.id}`"
							:actor="actor"
						/>
					</div>
				</div>
			</div>

			<div
				v-if="movies.length > 0"
				class="results"
			>
				<span class="results-meta">
					Found {{ movieTotal }} {{ movieTotal > 1 ? 'movies' : 'movie' }}

					<a
						:href="`/movies/results/?q=${query}`"
						class="link"
					>Full movie results</a>
				</span>

				<div class="results-container">
					<div class="movies">
						<MovieTile
							v-for="movie in movies"
							:key="`movie-${movie.id}`"
							:movie="movie"
							:show-details="false"
						/>
					</div>
				</div>
			</div>
		</div>

		<div
			v-if="scenes.length > 0"
			class="results"
		>
			<span class="results-meta">
				Found {{ sceneTotal }} {{ sceneTotal > 1 ? 'scenes' : 'scene' }}

				<a
					:href="`/updates/results/?q=${query}`"
					class="link"
				>Full scene results</a>
			</span>

			<div class="scenes">
				<SceneTile
					v-for="scene in scenes"
					:key="`scene-${scene.id}`"
					:scene="scene"
				/>
			</div>
		</div>

		<span
			v-if="actors.length === 0 && scenes.length === 0"
			class="results-meta"
		>No results for '{{ query }}'</span>
	</div>
</template>

<script setup>
import { inject } from 'vue';

import ActorTile from '#/components/actors/tile.vue';
import SceneTile from '#/components/scenes/tile.vue';
import MovieTile from '#/components/movies/tile.vue';

const pageContext = inject('pageContext');

const {
	actors,
	scenes,
	movies,
	actorTotal,
	sceneTotal,
	movieTotal,
} = pageContext.pageProps;

const query = pageContext.urlParsed.search.q;
</script>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
}

.row {
	width: 100%;
	display: flex;
	overflow: hidden;
}

.results {
	display: flex;
	flex: auto;
	flex-direction: column;
}

.results-container {
	max-height: 19rem;
	overflow-y: auto;
}

.actors {
	min-width: 10rem;
	display: grid;
	flex-grow: 1;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: .25rem;
	padding: 1rem;
}

.movies {
	min-width: 15rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 1rem;
	padding: 1rem;
}

.scenes {
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: .5rem;
	padding: 1rem;
}

.results-meta {
	box-sizing: border-box;
	padding: 1rem 1rem 0 1rem;
	color: var(--shadow);
	font-weight: bold;

	.link {
		margin-left: .5rem;
		font-weight: normal;
	}
}

@media(--small-10) {
	.row {
		flex-direction: column;
	}

	.scenes {
		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	}

	.actors,
	.movies {
		display: flex;
		overflow-x: auto;

		.tile,
		.movie-tile {
			width: 9rem;
			min-width: 9rem;
		}
	}
}
</style>