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

Hiding header nav bar on small screens. Improved scene and movie tile scaling, added thumbnail placeholder. Added pagination to movies page.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-03-17 23:55:36 +01:00
parent da5e02be3d
commit c7f8391e43
5 changed files with 120 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
pages/movies/+Page.vue
View File

@@ -79,69 +79,73 @@
>
</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"
<div class="tile-info">
<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"
>
</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>
<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>
<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"
>
<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}`"
>
<a
:href="`/tag/${tag.slug}`"
class="tag nolink"
>{{ tag.name }}</a>
</li>
</ul>
</div>
<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"
>
<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}`"
>
<a
:href="`/tag/${tag.slug}`"
class="tag nolink"
>{{ tag.name }}</a>
</li>
</ul>
</li>
</ul>
<Pagination />
</div>
</div>
</template>
@@ -160,6 +164,7 @@ import Filters from '#/components/filters/filters.vue';
import ActorsFilter from '#/components/filters/actors.vue';
import TagsFilter from '#/components/filters/tags.vue';
import ChannelsFilter from '#/components/filters/channels.vue';
import Pagination from '#/components/pagination/pagination.vue';
const pageContext = inject('pageContext');
const { pageProps, routeParams, urlParsed } = pageContext;
@@ -312,7 +317,6 @@ function updateFilter(prop, value, reload = true) {
}
.movie {
max-height: 30rem;
display: flex;
flex-direction: column;
box-shadow: 0 0 3px var(--shadow-weak-30);
@@ -347,6 +351,11 @@ function updateFilter(prop, value, reload = true) {
opacity: .1;
}
.tile-info {
flex-shrink: 0;
font-size: 0;
}
.tile-meta {
display: flex;
justify-content: space-between;
@@ -399,6 +408,7 @@ function updateFilter(prop, value, reload = true) {
font-weight: bold;
padding: 0 .5rem;
margin-bottom: .25rem;
font-size: 1rem;
}
.actors {
@@ -441,4 +451,10 @@ function updateFilter(prop, value, reload = true) {
color: var(--primary);
}
}
@media(--compact) {
.movies {
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
}
</style>