traxxx/assets/components/release/release.vue

<template>
    <div v-if="release">
        <div
            class="banner"
            @wheel.prevent="scrollBanner"
        >
            <a
                v-for="photo in photos"
                :key="`banner-${photo.index}`"
                :href="`/${photo.file}`"
                target="_blank"
                rel="noopener noreferrer"

            >
                <img
                    :src="`/${photo.file}`"
                    :alt="`Photo ${photo.index}`"
                    class="banner-item"
                >
            </a>
        </div>

        <h2 class="row title">{{ release.title }}</h2>

        <span class="row">
            <a
                :href="release.url"
                :title="release.shootId || release.entryId"
                target="_blank"
                rel="noopener noreferrer"
                class="date"
            >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
        </span>

        <ul class="row actors">
            <li
                v-for="actor in release.actors"
                :key="actor.id"
                class="actor"
            >
                <a
                    :href="`/actor/${actor.slug}`"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="actor-link"
                >{{ actor.name }}</a>
            </li>
        </ul>

        <span class="row site">
            <a
                :href="release.site.url"
                target="_blank"
                rel="noopener noreferrer"
            >{{ release.site.name }}</a>

            (<a
                :href="release.network.url"
                target="_blank"
                rel="noopener noreferrer"
            >{{ release.network.name }}</a>)
        </span>

        <p class="row description">{{ release.description }}</p>

        <ul class="row tags">
            <li
                v-for="tag in release.tags"
                :key="tag.tag"
                class="tag"
            >
                <a
                    :href="`/tag/${tag.slug}`"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="tag-link"
                >{{ tag.tag }}</a>
            </li>
        </ul>
    </div>
</template>

<script>
function pageTitle() {
    return this.release && this.release.title;
}

function scrollBanner(event) {
    event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}

function photos() {
    if (this.release && this.release.photos.length) {
        if (this.release.photos[0].role === 'poster') {
            return this.release.photos.slice(1);
        }

        return this.release.photos;
    }

    return [];
}

async function mounted() {
    [this.release] = await this.$store.dispatch('fetchReleases', this.$route.params.releaseId);
}

export default {
    data() {
        return {
            release: null,
        };
    },
    computed: {
        pageTitle,
        photos,
    },
    mounted,
    methods: {
        scrollBanner,
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.banner {
    white-space: nowrap;
    overflow-x: auto;
    margin: 0 0 1rem 0;
    scrollbar-width: none;
    box-shadow: 0 0 3px $shadow;

    &::-webkit-scrollbar {
        display: none;
    }
}

.banner-item {
    height: 20rem;
    vertical-align: middle;
}

.row {
    display: block;
    padding: 0 1rem;
    margin: 0 0 .5rem 0;
}

.actors,
.tags {
    list-style: none;
}

.actor,
.tag {
    display: inline-block;
    text-transform: capitalize;

    &:not(:last-child)::after {
        content: ',';
        display: inline-block;
        width: .6rem;
    }
}
</style>