<template> <div v-if="release" class="content" > <Banner :release="release" /> <div class="details"> <div class="column"> <a v-if="release.date" v-tooltip.bottom="release.url && `View scene on ${release.site.name}`" :title="release.url && `View scene on ${release.site.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"> <a v-if="release.site.independent" :href="`/network/${release.network.slug}`" > <img :src="`/img/logos/${release.network.slug}/network.png`" :title="release.network.name" class="logo logo-site" > </a> <template v-else> <a :href="`/network/${release.network.slug}`"> <img :src="`/img/logos/${release.network.slug}/network.png`" :title="release.network.name" :alt="release.network.name" class="logo logo-network" > </a> <span class="chain">presents</span> <a :href="`/site/${release.site.slug}`" > <img :src="`/img/logos/${release.network.slug}/${release.site.slug}.png`" :title="release.site.name" class="logo logo-site" > </a> </template> </span> </div> </div> <div class="info column"> <h2 class="row title">{{ release.title }}</h2> <div class="row"> <ul class="actors nolist"> <li v-for="actor in release.actors" :key="actor.id" > <Actor :actor="actor" /> </li> </ul> </div> <div v-if="release.scenes && release.scenes.length > 0"> <h3>Scenes</h3> <Releases v-if="release.scenes && release.scenes.length > 0" :releases="release.scenes" class="row" /> </div> <div v-if="release.movie"> <h3>Movie</h3> <Release :release="release.movie" /> </div> <div v-if="release.tags.length > 0" class="row" > <Icon icon="price-tags3" /> <ul class="tags nolist"> <li v-for="tag in release.tags" :key="`tag-${tag.slug}`" class="tag" > <a :href="`/tag/${tag.slug}`" class="link" >{{ tag.name }}</a> </li> </ul> </div> <div v-if="release.duration" class="row duration showable" > <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> </div> <p v-if="release.description" class="row description" > <Icon icon="info2" /> {{ release.description }} </p> <div v-if="release.studio" class="row" > <Icon icon="video-camera2" /> <a v-if="release.studio" :href="release.studio.url" target="_blank" rel="noopener noreferrer" class="link" >{{ release.studio.name }}</a> </div> <div v-if="release.shootId" class="row showable" > <Icon icon="clapboard-play" /> <a :href="release.url" :title="`release.shootId`" target="_blank" rel="noopener noreferrer" class="link shoot" >{{ release.shootId }}</a> </div> <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')}`" target="_blank" rel="noopener noreferrer" class="link added" >{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a> </span> </div> </div> </template> <script> import Banner from './banner.vue'; import Actor from '../tile/actor.vue'; import Release from '../tile/release.vue'; import Releases from './releases.vue'; function pageTitle() { return this.release && this.release.title; } async function mounted() { this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId); } export default { components: { Actor, Banner, Releases, Release, }, data() { return { release: null, }; }, computed: { pageTitle, }, mounted, }; </script> <style lang="scss" scoped> @import 'theme'; .column { width: 1200px; max-width: 100%; padding: 0 1rem; margin: 0 auto; box-sizing: border-box; } .info { padding: 1rem; border-left: solid 1px $shadow-hint; border-right: solid 1px $shadow-hint; flex-grow: 1; } .row { display: flex; align-items: center; margin: 0 0 1rem 0; .icon { display: inline-block; width: 1rem; fill: $shadow-strong; margin: 0 1rem 0 0; } } .details { background: $profile; color: $text-contrast; box-shadow: 0 0 3px $shadow-weak; cursor: default; .column { display: flex; align-items: center; padding: 0 1rem; } .link { color: $text-contrast; } } .tidbit { display: inline-block; height: 100%; &:not(:last-child) { border-right: solid 1px $highlight-hint; } .icon { fill: $highlight-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; filter: $logo-highlight; } .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: $highlight; padding: 0 .5rem; font-weight: bold; font-size: .8rem; } .title { margin: 0 0 1.5rem 0; } .description { line-height: 1.25; } .duration { font-size: 0; } .duration-segment { font-size: 1rem; } .actors { display: flex; flex-wrap: wrap; } .actor { width: 10rem; margin: 0 1rem .5rem 0; } .link { display: inline-block; color: $link; text-decoration: none; &:hover { color: $primary; .icon { fill: $primary; } } } .tag .link { background: $background; display: inline-block; padding: .5rem; margin: 0 .25rem .25rem 0; box-shadow: 0 0 2px $shadow-weak; text-decoration: none; text-transform: capitalize; &:hover { color: $primary; } } .showable { display: none; } @media(max-width: $breakpoint3) { .logo-network, .chain { display: none; } } @media(max-width: $breakpoint) { .hideable { display: none; } .row .showable { display: block; } .tidbit .showable { display: inline-block; } .logo-site { width: 15rem; max-width: 100%; } } </style>