boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Improved release media layout.

Browse Source
This commit is contained in:
ThePendulum
2020-06-30 01:07:48 +02:00
parent b22fdd841b
commit 08dc06c810
11 changed files with 515 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/components/releases/banner.vue → assets/components/releases/media.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="banner">
<div class="trailer">
<div class="media">
<div class="trailer-container">
<video
v-if="release.trailer"
:src="`/media/${release.trailer.path}`"
@@ -66,7 +66,7 @@
<a
v-for="photo in photos"
:key="`banner-${photo.index}`"
:key="`media-${photo.index}`"
:href="`/media/${photo.path}`"
:class="{ sfw }"
class="item-link"
@@ -101,9 +101,11 @@ function photos() {
}
if (this.release.poster) {
// no trailer, add poster to photos
return [this.release.poster].concat(this.release.photos);
}
// no poster available
return this.release.photos;
}
@@ -130,19 +132,31 @@ export default {
<style lang="scss" scoped>
@import 'theme';
.banner {
.media {
background: var(--background-dim);
flex-shrink: 0;
white-space: nowrap;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
padding: .5rem;
font-size: 0;
&.expanded {
display: flex;
flex-wrap: wrap;
justify-content: center;
.item-link,
.trailer {
margin: 0 .5rem .5rem 0;
max-width: 100%;
height: 18rem;
flex: 1;
}
.item {
height: 100%;
}
}
&::-webkit-scrollbar {
@@ -178,12 +192,12 @@ export default {
}
.item-link,
.trailer {
.trailer-container {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin: .5rem;
margin: 0 .5rem 0 0;
box-shadow: 0 0 3px var(--shadow-weak);
.warning {
@@ -221,15 +235,19 @@ export default {
.item {
height: 18rem;
vertical-align: middle;
object-fit: cover;
}
.trailer {
max-width: 100vw;
.trailer-container {
height: 18rem;
width: 32rem;
max-width: 100%;
}
.trailer-video {
max-width: 100%;
object-fit: cover;
width: 100%;
height: 100%;
object-fit: cover;
&.sfw {
filter: blur(2rem);
@@ -247,9 +265,10 @@ export default {
}
}
@media(max-width: $breakpoint2) {
.trailer-video {
object-fit: contain;
@media(max-width: $breakpoint0) {
.media:not(.expanded) .item,
.trailer-container {
height: 56vw; /* 16:9 ratio for full-width video */
}
}
</style>

296
assets/components/releases/release.vue
View File

@@ -5,68 +5,8 @@
>
<div class="details">
<div class="column">
<a
v-if="release.date"
v-tooltip.bottom="release.url && `View scene on ${release.entity.name}`"
:title="release.url && `View scene on ${release.entity.name}`"
:href="release.url"
:class="{ link: release.url }"
target="_blank"
rel="noopener noreferrer"
class="tidbit date"
>
<Icon
v-if="isAfter(new Date(), release.date)"
icon="calendar2"
/>
<Icon
v-else
v-tooltip.bottom="'To be released'"
icon="sun3"
/>
<span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
<span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
</a>
<span
v-if="release.shootId"
v-tooltip.bottom="`Shoot #`"
class="tidbit shoot hideable"
>
<Icon icon="clapboard-play" />
{{ release.shootId }}
</span>
<span
v-if="release.duration"
v-tooltip.bottom="`Duration`"
class="tidbit duration hideable"
>
<Icon icon="stopwatch" />
<span
v-if="release.duration >= 3600"
class="duration-segment"
>{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
</span>
<span class="tidbit site">
<div class="site">
<template v-if="release.entity.parent">
<a :href="`/network/${release.entity.parent.slug}`">
<img
:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
:title="release.entity.parent.name"
:alt="release.entity.parent.name"
class="logo logo-network"
>
</a>
<span class="chain">presents</span>
<a
:href="`/${release.entity.type}/${release.entity.slug}`"
>
@@ -76,6 +16,18 @@
class="logo logo-site"
>
</a>
<span class="chain">by</span>
<a :href="`/network/${release.entity.parent.slug}`">
<img
:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
:title="release.entity.parent.name"
:alt="release.entity.parent.name"
class="logo logo-network"
>
</a>
</template>
<a
@@ -88,15 +40,31 @@
class="logo logo-site"
>
</a>
</span>
</div>
<div class="tidbits">
<a
v-if="release.date"
v-tooltip.bottom="release.url && `View scene on ${release.entity.name}`"
:title="release.url && `View scene on ${release.entity.name}`"
:href="release.url"
:class="{ link: release.url }"
target="_blank"
rel="noopener noreferrer"
class="tidbit date"
>
<span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
<span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
</a>
</div>
</div>
</div>
<Scroll class="scroll-light">
<Banner :release="release" />
<Media :release="release" />
<template v-slot:expanded>
<Banner
<Media
:release="release"
class="expanded"
/>
@@ -104,9 +72,15 @@
</Scroll>
<div class="info column">
<h2 class="row title">{{ release.title }}</h2>
<div class="row title-container">
<h2 class="title">{{ release.title }}</h2>
<span
v-if="release.shootId"
class="title-shoot"
>{{ release.shootId }}</span>
</div>
<span class="row-label">Actors</span>
<div class="row associations">
<ul
v-lazy-container="{ selector: '.lazy' }"
@@ -159,12 +133,12 @@
</ul>
</div>
<span class="row-label">Duration</span>
<div
v-if="release.duration"
class="row duration showable"
class="row duration"
>
<Icon icon="stopwatch" />
<span
v-if="release.duration >= 3600"
class="duration-segment"
@@ -199,7 +173,7 @@
<div
v-if="release.shootId"
class="row showable"
class="row"
>
<Icon icon="clapboard-play" />
@@ -230,8 +204,8 @@
// import config from 'config';
// import format from 'template-format';
import Banner from './banner.vue';
import Actor from '../tile/actor.vue';
import Media from './media.vue';
import Actor from '../actors/tile.vue';
import Release from '../tile/release.vue';
import Releases from './releases.vue';
import Scroll from '../scroll/scroll.vue';
@@ -256,7 +230,7 @@ async function mounted() {
export default {
components: {
Actor,
Banner,
Media,
Release,
Releases,
Scroll,
@@ -284,6 +258,82 @@ export default {
box-sizing: border-box;
}
.details {
background: var(--profile);
color: var(--text-light);
box-shadow: 0 0 3px var(--shadow-weak);
cursor: default;
.column {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
}
.link {
color: var(--text-light);
}
}
.tidbits {
flex-shrink: 0;
}
.tidbit {
display: inline-flex;
align-items: center;
height: 100%;
&:not(:last-child) {
border-right: solid 1px var(--lighten-hint);
}
.icon {
fill: var(--lighten-weak);
margin: 0 .25rem 0 0;
}
&.date {
flex-shrink: 0;
padding: 0 1rem;
font-weight: bold;
}
}
.site {
display: inline-flex;
align-items: center;
padding: .25rem 0;
font-size: 0;
}
.logo {
display: inline-block;
}
.logo-site {
height: 3rem;
width: 100%;
max-width: 15rem;
object-fit: contain;
object-position: 100% 50%;
}
.logo-network {
height: 1.5rem;
max-width: 10rem;
object-fit: contain;
object-position: 100% 50%;
}
.chain {
color: var(--lighten);
padding: 0 .5rem;
font-weight: bold;
font-size: .8rem;
}
.info {
padding: 1rem;
border-left: solid 1px var(--shadow-hint);
@@ -320,81 +370,20 @@ export default {
}
}
.details {
background: var(--profile);
color: var(--text-light);
box-shadow: 0 0 3px var(--shadow-weak);
cursor: default;
.column {
display: flex;
align-items: center;
padding: 0 1rem;
}
.link {
color: var(--text-light);
}
}
.tidbit {
display: inline-block;
height: 100%;
&:not(:last-child) {
border-right: solid 1px var(--lighten-hint);
}
.icon {
fill: var(--lighten-weak);
margin: 0 .25rem 0 0;
}
&.date,
&.duration,
&.shoot {
flex-shrink: 0;
padding: 1.25rem 1rem 1.25rem 0;
margin: 0 1rem 0 0;
}
}
.site {
display: inline-flex;
flex-grow: 1;
align-items: center;
justify-content: flex-end;
padding: .25rem 0;
font-size: 0;
}
.logo {
display: inline-block;
}
.logo-site {
height: 3rem;
max-width: 15rem;
object-fit: contain;
object-position: 100% 50%;
}
.logo-network {
height: 1.5rem;
max-width: 10rem;
object-fit: contain;
object-position: 100% 50%;
}
.chain {
color: var(--lighten);
padding: 0 .5rem;
font-weight: bold;
font-size: .8rem;
.title-container {
display: flex;
justify-content: space-between;
}
.title {
margin: 0 0 1.5rem 0;
margin: 0;
}
.title-shoot {
margin: 0 0 0 .5rem;
color: var(--shadow);
font-size: .9rem;
font-weight: bold;
}
.description {
@@ -409,18 +398,18 @@ export default {
font-size: 1rem;
}
.scroll {
border-bottom: solid 1px var(--shadow-hint);
}
.actors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
grid-gap: 1rem;
grid-gap: .5rem;
flex-grow: 1;
flex-wrap: wrap;
}
.actor {
margin: 0 1rem .5rem 0;
}
.filename {
width: 100%;
padding: .5rem;
@@ -481,10 +470,9 @@ export default {
display: inline-block;
}
.logo-site {
width: 15rem;
max-width: 100%;
}
.site {
max-width: 100%;
}
.actors {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));