DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added meta header with sort input to movie page. Highlighting active page in header.

This commit is contained in:
DebaucheryLibrarian 2024-02-27 01:51:14 +01:00
parent d9a126e32f
commit b9578d86e3
2 changed files with 128 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/header/header.vue
View File

@ -14,6 +14,7 @@
<li class="nav-item"> <li class="nav-item">
<Link <Link
class="link" class="link"
:class="{ active: activePage === 'updates' }"
href="/updates" href="/updates"
>Updates</Link> >Updates</Link>
</li> </li>
@ -21,6 +22,7 @@
<li class="nav-item"> <li class="nav-item">
<Link <Link
class="link" class="link"
:class="{ active: activePage === 'actors' }"
href="/actors" href="/actors"
>Actors</Link> >Actors</Link>
</li> </li>
@ -28,6 +30,7 @@
<li class="nav-item"> <li class="nav-item">
<Link <Link
class="link" class="link"
:class="{ active: activePage === 'channels' }"
href="/channels" href="/channels"
>Channels</Link> >Channels</Link>
</li> </li>
@ -35,6 +38,7 @@
<li class="nav-item"> <li class="nav-item">
<Link <Link
class="link" class="link"
:class="{ active: activePage === 'tags' }"
href="/tags" href="/tags"
>Tags</Link> >Tags</Link>
</li> </li>
@ -42,6 +46,7 @@
<li class="nav-item"> <li class="nav-item">
<Link <Link
class="link" class="link"
:class="{ active: activePage === 'movies' }"
href="/movies" href="/movies"
>Movies</Link> >Movies</Link>
</li> </li>
@ -65,7 +70,7 @@
</template> </template>
<script setup> <script setup>
import { ref, inject } from 'vue'; import { ref, computed, inject } from 'vue';
import navigate from '#/src/navigate.js'; import navigate from '#/src/navigate.js';
import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved 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 pageContext = inject('pageContext');
const query = ref(pageContext.urlParsed.search.q || ''); const query = ref(pageContext.urlParsed.search.q || '');
const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
function search() { function search() {
navigate('/search', { q: query.value }, { redirect: true }); navigate('/search', { q: query.value }, { redirect: true });
} }

200
pages/movies/+Page.vue
View File

@ -33,95 +33,116 @@
/> />
</Filters> </Filters>
<ul class="movies nolist"> <div class="movies-container">
<li <div class="movies-header">
v-for="movie in movies" <div class="meta">{{ total }} results</div>
:key="`movie-${movie.id}`"
class="movie" <select
> v-model="scope"
<a class="input"
:href="`/movie/${movie.id}/${movie.slug}`" @change="search({ autoScope: false })"
:title="movie.title"
class="cover-container"
> >
<img <option value="likes">Likes</option>
v-if="movie.covers[0]" <option value="latest">Latest</option>
:src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`" <option value="upcoming">Upcoming</option>
:style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }" <option value="new">New</option>
class="cover" <option
loading="lazy" value="results"
> :disabled="!filters.search"
>Relevance</option>
</select>
</div>
<img <ul class="movies nolist">
v-else <li
src="/public/img/icons/movie.svg" v-for="movie in movies"
class="nocover" :key="`movie-${movie.id}`"
class="movie"
>
<a
:href="`/movie/${movie.id}/${movie.slug}`"
:title="movie.title"
class="cover-container"
> >
</a> <img
v-if="movie.covers[0]"
<div class="meta"> :src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
<div class="channel"> :style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }"
<Link class="cover"
:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`" loading="lazy"
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 <img
:href="`/${movie.channel.type}/${movie.channel.slug}`" v-else
class="nolink channel-link" src="/public/img/icons/movie.svg"
>{{ movie.channel.name }}</Link> 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> </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>
</div>
<a <ul
:href="`/movie/${movie.id}/${movie.slug}`" :title="movie.actors.map((actor) => actor.name).join(', ')"
:title="movie.title" class="actors nolist"
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 <li
:href="`/actor/${actor.id}/${actor.slug}`" v-for="actor in movie.actors"
class="actor nolink" :key="`actor-${movie.id}-${actor.slug}`"
>{{ actor.name }}</a> class="actor-item"
</li> >
</ul> <a
:href="`/actor/${actor.id}/${actor.slug}`"
class="actor nolink"
>{{ actor.name }}</a>
</li>
</ul>
<ul <ul
:title="movie.tags.map((tag) => tag.name).join(', ')" :title="movie.tags.map((tag) => tag.name).join(', ')"
class="tags nolist" class="tags nolist"
>
<li
v-for="tag in movie.tags"
:key="`tag-${movie.id}-${tag.slug}`"
> >
<a <li
:href="`/tag/${tag.slug}`" v-for="tag in movie.tags"
class="tag nolink" :key="`tag-${movie.id}-${tag.slug}`"
>{{ tag.name }}</a> >
</li> <a
</ul> :href="`/tag/${tag.slug}`"
</li> class="tag nolink"
</ul> >{{ tag.name }}</a>
</li>
</ul>
</li>
</ul>
</div>
</div> </div>
</template> </template>
@ -264,11 +285,30 @@ function updateFilter(prop, value, reload = true) {
background: var(--background-base-10); 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 { .movies {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 1rem; gap: 1rem;
padding: 1rem; padding: .5rem 1rem 1rem 1rem;
} }
.movie { .movie {
@ -307,7 +347,7 @@ function updateFilter(prop, value, reload = true) {
opacity: .1; opacity: .1;
} }
.meta { .tile-meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;