Fixed release banner, improved album layout.
This commit is contained in:
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div
|
||||
class="media"
|
||||
:class="{ center: release.photos.length < 2 }"
|
||||
>
|
||||
<div
|
||||
v-if="release.trailer || release.teaser"
|
||||
class="trailer-container"
|
||||
@@ -161,12 +164,16 @@ export default {
|
||||
@import 'breakpoints';
|
||||
|
||||
.media {
|
||||
height: 18rem;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.media.center {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.poster-link {
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
@@ -238,6 +245,7 @@ export default {
|
||||
|
||||
.item {
|
||||
max-width: 100%;
|
||||
height: 18rem;
|
||||
box-shadow: 0 0 3px var(--shadow-weak);
|
||||
background-size: cover;
|
||||
}
|
||||
@@ -269,23 +277,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-kilo) {
|
||||
.media.expanded {
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.media.expanded {
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-micro) {
|
||||
.media.expanded {
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
|
||||
.media:not(.expanded) .item,
|
||||
.trailer-container {
|
||||
height: 56vw; /* 16:9 ratio for full-width video */
|
||||
@@ -8,8 +8,9 @@
|
||||
class="scroll-light"
|
||||
:expandable="false"
|
||||
>
|
||||
<Media
|
||||
<Banner
|
||||
:release="release"
|
||||
class="media"
|
||||
@load="slotProps.loaded"
|
||||
/>
|
||||
</Scroll>
|
||||
@@ -17,6 +18,7 @@
|
||||
<Details :release="release" />
|
||||
|
||||
<button
|
||||
v-if="release.photos.length > 0"
|
||||
class="album-toggle"
|
||||
@click="showAlbum = true"
|
||||
><Icon icon="grid3" />View album</button>
|
||||
@@ -197,7 +199,7 @@
|
||||
|
||||
<script>
|
||||
import Details from './details.vue';
|
||||
import Media from './media.vue';
|
||||
import Banner from './banner.vue';
|
||||
import Album from '../album/album.vue';
|
||||
import Tags from './tags.vue';
|
||||
import Clips from './clips.vue';
|
||||
@@ -226,7 +228,7 @@ export default {
|
||||
Actor,
|
||||
Album,
|
||||
Details,
|
||||
Media,
|
||||
Banner,
|
||||
Scroll,
|
||||
Releases,
|
||||
Clips,
|
||||
|
||||
Reference in New Issue
Block a user