forked from DebaucheryLibrarian/traxxx
Using scroll component for release banner, adding expand button.
This commit is contained in:
parent
8f9eb91b13
commit
b22fdd841b
|
|
@ -105,16 +105,11 @@ export default {
|
|||
}
|
||||
|
||||
.photo {
|
||||
width: 10rem;
|
||||
height: 15rem;
|
||||
box-shadow: 0 0 3px $shadow-weak;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.expand {
|
||||
border-bottom: solid 1px var(--darken-hint);
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
.photos {
|
||||
&.empty.avatar {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<template>
|
||||
<div
|
||||
class="banner"
|
||||
@wheel.prevent="scrollBanner"
|
||||
>
|
||||
<div class="banner">
|
||||
<div class="trailer">
|
||||
<video
|
||||
v-if="release.trailer"
|
||||
|
|
@ -110,10 +107,6 @@ function photos() {
|
|||
return this.release.photos;
|
||||
}
|
||||
|
||||
function scrollBanner(event) {
|
||||
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
release: {
|
||||
|
|
@ -131,9 +124,6 @@ export default {
|
|||
photos,
|
||||
sfw,
|
||||
},
|
||||
methods: {
|
||||
scrollBanner,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -141,14 +131,20 @@ export default {
|
|||
@import 'theme';
|
||||
|
||||
.banner {
|
||||
background: var(--empty);
|
||||
background: var(--background-dim);
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
box-shadow: 0 0 3px var(--shadow);
|
||||
scroll-behavior: smooth;
|
||||
font-size: 0;
|
||||
|
||||
&.expanded {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -187,6 +183,8 @@ export default {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: .5rem;
|
||||
box-shadow: 0 0 3px var(--shadow-weak);
|
||||
|
||||
.warning {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
v-if="release"
|
||||
class="content"
|
||||
>
|
||||
<Banner :release="release" />
|
||||
|
||||
<div class="details">
|
||||
<div class="column">
|
||||
<a
|
||||
|
|
@ -94,9 +92,21 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Scroll class="scroll-light">
|
||||
<Banner :release="release" />
|
||||
|
||||
<template v-slot:expanded>
|
||||
<Banner
|
||||
:release="release"
|
||||
class="expanded"
|
||||
/>
|
||||
</template>
|
||||
</Scroll>
|
||||
|
||||
<div class="info column">
|
||||
<h2 class="row title">{{ release.title }}</h2>
|
||||
|
||||
<span class="row-label">Actors</span>
|
||||
<div class="row associations">
|
||||
<ul
|
||||
v-lazy-container="{ selector: '.lazy' }"
|
||||
|
|
@ -129,12 +139,12 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<span class="row-label">Tags</span>
|
||||
|
||||
<div
|
||||
v-if="release.tags.length > 0"
|
||||
class="row"
|
||||
>
|
||||
<Icon icon="price-tags3" />
|
||||
|
||||
<ul class="tags nolist">
|
||||
<li
|
||||
v-for="tag in release.tags"
|
||||
|
|
@ -163,11 +173,12 @@
|
|||
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
|
||||
</div>
|
||||
|
||||
<span class="row-label">Description</span>
|
||||
|
||||
<p
|
||||
v-if="release.description"
|
||||
class="row description"
|
||||
>
|
||||
<Icon icon="info2" />
|
||||
{{ release.description }}
|
||||
</p>
|
||||
|
||||
|
|
@ -201,9 +212,8 @@
|
|||
>{{ release.shootId }}</a>
|
||||
</div>
|
||||
|
||||
<span class="row-label">Added</span>
|
||||
<span class="row">
|
||||
<Icon icon="drawer-in" />
|
||||
|
||||
<a
|
||||
:href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
|
||||
:title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
|
||||
|
|
@ -224,6 +234,7 @@ import Banner from './banner.vue';
|
|||
import Actor from '../tile/actor.vue';
|
||||
import Release from '../tile/release.vue';
|
||||
import Releases from './releases.vue';
|
||||
import Scroll from '../scroll/scroll.vue';
|
||||
|
||||
function pageTitle() {
|
||||
return this.release && this.release.title;
|
||||
|
|
@ -248,6 +259,7 @@ export default {
|
|||
Banner,
|
||||
Release,
|
||||
Releases,
|
||||
Scroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -296,6 +308,18 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.row-label {
|
||||
display: block;
|
||||
margin: 0 0 .5rem 0;
|
||||
color: var(--shadow);
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
margin: 0 .5rem 0 0;
|
||||
fill: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
background: var(--profile);
|
||||
color: var(--text-light);
|
||||
|
|
@ -397,9 +421,6 @@ export default {
|
|||
margin: 0 1rem .5rem 0;
|
||||
}
|
||||
|
||||
.movies {
|
||||
}
|
||||
|
||||
.filename {
|
||||
width: 100%;
|
||||
padding: .5rem;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ function mounted() {
|
|||
});
|
||||
|
||||
window.addEventListener('resize', this.updateScroll);
|
||||
this.updateScroll();
|
||||
setTimeout(() => this.updateScroll(), 500); // allow CSS to calculate
|
||||
}
|
||||
|
||||
function beforeDestroy() {
|
||||
|
|
@ -135,6 +135,10 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.expand-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scroll-light {
|
||||
background: var(--background-dim);
|
||||
|
||||
|
|
@ -164,6 +168,10 @@ export default {
|
|||
.expand-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.expand-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-dark {
|
||||
|
|
@ -195,6 +203,10 @@ export default {
|
|||
.expand-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.expand-dark {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-button {
|
||||
|
|
@ -205,6 +217,7 @@ export default {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
|
||||
&.scroll-start,
|
||||
&.scroll-end {
|
||||
|
|
|
|||
Loading…
Reference in New Issue