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

186 lines
3.1 KiB
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;
flex-grow: 1;
}
.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(--glass);
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>