Added meta header with sort input to movie page. Highlighting active page in header.
This commit is contained in:
parent
d9a126e32f
commit
b9578d86e3
|
|
@ -14,6 +14,7 @@
|
|||
<li class="nav-item">
|
||||
<Link
|
||||
class="link"
|
||||
:class="{ active: activePage === 'updates' }"
|
||||
href="/updates"
|
||||
>Updates</Link>
|
||||
</li>
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
<li class="nav-item">
|
||||
<Link
|
||||
class="link"
|
||||
:class="{ active: activePage === 'actors' }"
|
||||
href="/actors"
|
||||
>Actors</Link>
|
||||
</li>
|
||||
|
|
@ -28,6 +30,7 @@
|
|||
<li class="nav-item">
|
||||
<Link
|
||||
class="link"
|
||||
:class="{ active: activePage === 'channels' }"
|
||||
href="/channels"
|
||||
>Channels</Link>
|
||||
</li>
|
||||
|
|
@ -35,6 +38,7 @@
|
|||
<li class="nav-item">
|
||||
<Link
|
||||
class="link"
|
||||
:class="{ active: activePage === 'tags' }"
|
||||
href="/tags"
|
||||
>Tags</Link>
|
||||
</li>
|
||||
|
|
@ -42,6 +46,7 @@
|
|||
<li class="nav-item">
|
||||
<Link
|
||||
class="link"
|
||||
:class="{ active: activePage === 'movies' }"
|
||||
href="/movies"
|
||||
>Movies</Link>
|
||||
</li>
|
||||
|
|
@ -65,7 +70,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import navigate from '#/src/navigate.js';
|
||||
|
||||
import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
|
||||
|
|
@ -73,6 +78,8 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
|
|||
const pageContext = inject('pageContext');
|
||||
const query = ref(pageContext.urlParsed.search.q || '');
|
||||
|
||||
const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
|
||||
|
||||
function search() {
|
||||
navigate('/search', { q: query.value }, { redirect: true });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,95 +33,116 @@
|
|||
/>
|
||||
</Filters>
|
||||
|
||||
<ul class="movies nolist">
|
||||
<li
|
||||
v-for="movie in movies"
|
||||
:key="`movie-${movie.id}`"
|
||||
class="movie"
|
||||
>
|
||||
<a
|
||||
:href="`/movie/${movie.id}/${movie.slug}`"
|
||||
:title="movie.title"
|
||||
class="cover-container"
|
||||
<div class="movies-container">
|
||||
<div class="movies-header">
|
||||
<div class="meta">{{ total }} results</div>
|
||||
|
||||
<select
|
||||
v-model="scope"
|
||||
class="input"
|
||||
@change="search({ autoScope: false })"
|
||||
>
|
||||
<img
|
||||
v-if="movie.covers[0]"
|
||||
:src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
|
||||
:style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }"
|
||||
class="cover"
|
||||
loading="lazy"
|
||||
>
|
||||
<option value="likes">Likes</option>
|
||||
<option value="latest">Latest</option>
|
||||
<option value="upcoming">Upcoming</option>
|
||||
<option value="new">New</option>
|
||||
<option
|
||||
value="results"
|
||||
:disabled="!filters.search"
|
||||
>Relevance</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<img
|
||||
v-else
|
||||
src="/public/img/icons/movie.svg"
|
||||
class="nocover"
|
||||
<ul class="movies nolist">
|
||||
<li
|
||||
v-for="movie in movies"
|
||||
:key="`movie-${movie.id}`"
|
||||
class="movie"
|
||||
>
|
||||
<a
|
||||
:href="`/movie/${movie.id}/${movie.slug}`"
|
||||
:title="movie.title"
|
||||
class="cover-container"
|
||||
>
|
||||
</a>
|
||||
|
||||
<div class="meta">
|
||||
<div class="channel">
|
||||
<Link
|
||||
:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
|
||||
class="favicon-link"
|
||||
<img
|
||||
v-if="movie.covers[0]"
|
||||
:src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
|
||||
:style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }"
|
||||
class="cover"
|
||||
loading="lazy"
|
||||
>
|
||||
<img
|
||||
:src="movie.channel.isIndependent || !movie.network ? `/logos/${movie.channel.slug}/favicon.png` : `/logos/${movie.network.slug}/favicon.png`"
|
||||
class="favicon"
|
||||
>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
:href="`/${movie.channel.type}/${movie.channel.slug}`"
|
||||
class="nolink channel-link"
|
||||
>{{ movie.channel.name }}</Link>
|
||||
<img
|
||||
v-else
|
||||
src="/public/img/icons/movie.svg"
|
||||
class="nocover"
|
||||
>
|
||||
</a>
|
||||
|
||||
<div class="tile-meta">
|
||||
<div class="channel">
|
||||
<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>
|
||||
|
||||
<Link
|
||||
:href="`/${movie.channel.type}/${movie.channel.slug}`"
|
||||
class="nolink channel-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
|
||||
:datetime="movie.effectiveDate.toISOString()"
|
||||
class="date"
|
||||
:class="{ nodate: !movie.date }"
|
||||
>{{ format(movie.effectiveDate, movie.effectiveDate.getFullYear() === currentYear ? 'MMM d' : 'MMM d, y') }}</time>
|
||||
</div>
|
||||
<a
|
||||
:href="`/movie/${movie.id}/${movie.slug}`"
|
||||
:title="movie.title"
|
||||
class="title nolink"
|
||||
>{{ movie.title }}</a>
|
||||
|
||||
<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"
|
||||
<ul
|
||||
:title="movie.actors.map((actor) => actor.name).join(', ')"
|
||||
class="actors nolist"
|
||||
>
|
||||
<a
|
||||
:href="`/actor/${actor.id}/${actor.slug}`"
|
||||
class="actor nolink"
|
||||
>{{ actor.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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}`"
|
||||
<ul
|
||||
:title="movie.tags.map((tag) => tag.name).join(', ')"
|
||||
class="tags nolist"
|
||||
>
|
||||
<a
|
||||
:href="`/tag/${tag.slug}`"
|
||||
class="tag nolink"
|
||||
>{{ tag.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -264,11 +285,30 @@ function updateFilter(prop, value, reload = true) {
|
|||
background: var(--background-base-10);
|
||||
}
|
||||
|
||||
.movies-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.movies-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem 1rem .25rem 3rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.movies {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
padding: .5rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.movie {
|
||||
|
|
@ -307,7 +347,7 @@ function updateFilter(prop, value, reload = true) {
|
|||
opacity: .1;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.tile-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue