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

46
pages/movies/+Page.vue
View File

@ -33,6 +33,26 @@
/>
</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">
<li
v-for="movie in movies"
@ -59,7 +79,7 @@
>
</a>
<div class="meta">
<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}`"
@ -123,6 +143,7 @@
</li>
</ul>
</div>
</div>
</template>
<script setup>
@ -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;