400 lines
9.8 KiB
Vue
400 lines
9.8 KiB
Vue
<template>
|
|
<div
|
|
v-if="release"
|
|
class="content"
|
|
>
|
|
<Banner :release="release" />
|
|
|
|
<div class="info">
|
|
<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) }}:</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="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"
|
|
class="actor"
|
|
>
|
|
<Actor :actor="actor" />
|
|
</li>
|
|
</ul>
|
|
</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) }}:</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 Actor from '../tile/actor.vue';
|
|
import Banner from './banner.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,
|
|
},
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
background: $background;
|
|
margin: 0 0 1.5rem 0;
|
|
box-shadow: 0 0 3px $shadow-weak;
|
|
cursor: default;
|
|
|
|
.column {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
|
|
.tidbit {
|
|
display: inline-block;
|
|
height: 100%;
|
|
|
|
&:not(:last-child) {
|
|
border-right: solid 1px $shadow-hint;
|
|
}
|
|
|
|
.icon {
|
|
fill: $shadow-strong;
|
|
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: drop-shadow(0 0 1px $shadow);
|
|
}
|
|
|
|
.logo-site {
|
|
height: 3rem;
|
|
max-width: 15rem;
|
|
object-fit: contain;
|
|
object-position: 100% 50%;
|
|
filter: drop-shadow(0 0 1px $shadow);
|
|
}
|
|
|
|
.logo-network {
|
|
height: 1.5rem;
|
|
max-width: 10rem;
|
|
object-fit: contain;
|
|
object-position: 100% 50%;
|
|
}
|
|
|
|
.chain {
|
|
color: $shadow;
|
|
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;
|
|
}
|
|
|
|
.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>
|