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 });
} }

46
pages/movies/+Page.vue
View File

@ -33,6 +33,26 @@
/> />
</Filters> </Filters>
<div class="movies-container">
<div class="movies-header">
<div class="meta">{{ total }} results</div>
<select
v-model="scope"
class="input"
@change="search({ autoScope: false })"
>
<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>
<ul class="movies nolist"> <ul class="movies nolist">
<li <li
v-for="movie in movies" v-for="movie in movies"
@ -59,7 +79,7 @@
> >
</a> </a>
<div class="meta"> <div class="tile-meta">
<div class="channel"> <div class="channel">
<Link <Link
:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`" :href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
@ -123,6 +143,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
@ -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;