Hiding header nav bar on small screens. Improved scene and movie tile scaling, added thumbnail placeholder. Added pagination to movies page.
This commit is contained in:
parent
da5e02be3d
commit
c7f8391e43
|
|
@ -218,6 +218,7 @@ async function logout() {
|
|||
box-shadow: inset 0 0 3px var(--shadow-weak-40);
|
||||
|
||||
.input {
|
||||
width: 14rem;
|
||||
padding: .5rem 0 .5rem 1rem;
|
||||
border: none;
|
||||
margin: 0;
|
||||
|
|
@ -317,4 +318,16 @@ async function logout() {
|
|||
fill: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small) {
|
||||
.search .input {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-10) {
|
||||
.nav-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div
|
||||
v-if="currentPage === pageTotal && total > env.maxMatches"
|
||||
class="more"
|
||||
>Results are truncated, apply a filter to find more.</div>
|
||||
>Can't find what you're looking for? Narrow down the results using a filter.</div>
|
||||
|
||||
<nav class="pagination">
|
||||
<ul class="pages nolist">
|
||||
|
|
|
|||
|
|
@ -293,7 +293,7 @@ function updateFilter(prop, value, reload = true) {
|
|||
|
||||
.scenes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: .75rem .5rem;
|
||||
padding: .5rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
|
@ -330,4 +330,16 @@ function updateFilter(prop, value, reload = true) {
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-10) {
|
||||
.scenes {
|
||||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-20) {
|
||||
.scenes {
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,11 @@
|
|||
loading="lazy"
|
||||
class="thumbnail"
|
||||
>
|
||||
|
||||
<Icon
|
||||
v-else
|
||||
icon="clapboard"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<Icon
|
||||
|
|
@ -166,19 +171,31 @@ async function unstash() {
|
|||
|
||||
.poster-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.poster {
|
||||
display: block;
|
||||
height: 14rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
overflow: hidden;
|
||||
background: var(--background-dark-20);
|
||||
|
||||
.icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
fill: var(--shadow-weak-40);
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue