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

Compare commits

base: DebaucheryLibrarian:2125a9152433347710bae2504bb06955bd62b021
Branches Tags
DebaucheryLibrarian:main
..
compare: DebaucheryLibrarian:d9a126e32f9d8c3ca4374b7f48faed4f161cc4e1
Branches Tags
DebaucheryLibrarian:main

No commits in common. "2125a9152433347710bae2504bb06955bd62b021" and "d9a126e32f9d8c3ca4374b7f48faed4f161cc4e1" have entirely different histories.
2125a91524 ... d9a126e32f

4 changed files with 84 additions and 131 deletions
Show Stats Expand all files Collapse all files

9
components/header/header.vue
View File

@ -14,7 +14,6 @@
<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>
@ -22,7 +21,6 @@
<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>
@ -30,7 +28,6 @@
<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>
@ -38,7 +35,6 @@
<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>
@ -46,7 +42,6 @@
<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>
@ -70,7 +65,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, inject } from 'vue'; import { ref, 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
@ -78,8 +73,6 @@ 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 });
} }

4
package-lock.json generated
View File

@ -1,11 +1,11 @@
{ {
"name": "traxxx-web", "name": "traxxx-web",
"version": "0.7.1", "version": "0.7.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"version": "0.7.1", "version": "0.7.0",
"dependencies": { "dependencies": {
"@brillout/json-serializer": "^0.5.8", "@brillout/json-serializer": "^0.5.8",
"@floating-ui/dom": "^1.5.3", "@floating-ui/dom": "^1.5.3",

2
package.json
View File

@ -57,5 +57,5 @@
"postcss-custom-media": "^10.0.2", "postcss-custom-media": "^10.0.2",
"postcss-nesting": "^12.0.2" "postcss-nesting": "^12.0.2"
}, },
"version": "0.7.1" "version": "0.7.0"
} }

200
pages/movies/+Page.vue
View File

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