traxxx/assets/components/tile/release.vue

<template>
    <div class="tile">
        <span class="banner">
            <span class="details">
                <router-link
                    v-if="release.site.independent"
                    :to="`/network/${release.network.slug}`"
                    class="site site-link"
                >{{ release.network.name }}</router-link>

                <router-link
                    v-else
                    v-tooltip.bottom="`Part of ${release.network.name}`"
                    :title="`Part of ${release.network.name}`"
                    :to="`/site/${release.site.slug}`"
                    class="site site-link"
                >{{ release.site.name }}</router-link>

                <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="{ upcoming: isAfter(release.date, new Date()) }"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="date"
                >{{ formatDate(release.date, 'MMM D, YYYY') }}</a>

                <a
                    v-else
                    :href="release.url"
                    :class="{ upcoming: isAfter(release.date, new Date()) }"
                    title="Scene date N/A, showing date added"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="date"
                >{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}`</a>
            </span>

            <router-link
                :to="`/scene/${release.id}`"
                class="link"
            >
                <img
                    v-if="release.poster"
                    :src="`/media/${release.poster.thumbnail}`"
                    :alt="release.title"
                    class="thumbnail"
                >

                <img
                    v-else-if="release.photos.length > 0"
                    :src="`/media/${release.photos[0].thumbnail}`"
                    :alt="release.title"
                    class="thumbnail"
                >

                <div
                    v-else
                    :title="release.title"
                    class="thumbnail"
                >No thumbnail available</div>
            </router-link>
        </span>

        <div class="info">
            <router-link
                :to="`/scene/${release.id}`"
                class="row link"
            >
                <h3
                    v-tooltip.top="release.title"
                    :title="release.title"
                    class="title"
                >{{ release.title }}</h3>
            </router-link>

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

            <ul
                :title="release.tags.map(tag => tag.name).join(', ')"
                class="tags nolist"
            >
                <li
                    v-for="tag in release.tags"
                    :key="`tag-${tag.slug}`"
                    class="tag"
                >
                    <router-link
                        :to="`/tag/${tag.slug}`"
                        class="tag-link"
                    >{{ tag.name }}</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        release: {
            type: Object,
            default: null,
        },
    },
};
</script>

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

.tile {
    background: $background;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 0 .5rem 0;
    overflow: hidden;
    box-shadow: 0 0 3px $shadow-weak;
    height: 100%;
}

.banner {
    position: relative;
    margin: 0 0 .5rem 0;
}

.thumbnail {
    width: 100%;
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    background-color: $shadow-hint;
    color: $shadow;
    text-shadow: 1px 1px 0 $highlight;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .5rem;
    margin: 0 0 .25rem 0;
}

.details {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    font-size: 0;
}

.site,
.date {
    color: #fff;
    background: $shadow;
    position: relative;
    font-size: .8rem;
    padding: .25rem;
    text-decoration: none;
}

.date.upcoming:before {
    content: '';
    color: $text-contrast;
    background: $primary;
    width: .25rem;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -.75rem;
    padding: .25rem;
    font-size: .8rem;
    font-weight: bold;
}

.site {
    font-weight: bold;
}

.info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.link {
    text-decoration: none;
}

.title {
    color: $text;
    margin: 0 .25rem .25rem 0;
    font-size: 1rem;
    max-height: 3rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.network {
    color: #555;
    margin: 0 .25rem 0 0;
    font-size: .8rem;
}

.actors {
    word-wrap: break-word;
    overflow: hidden;
    max-height: 2.75rem;
    line-height: 1.5rem;
}

.tags {
    max-height: 2.5rem;
    padding: .25rem .5rem 1rem .5rem;
    line-height: 1.5rem;
    word-wrap: break-word;
    overflow-y: hidden;
}

.actor {
    margin: 0 .25rem 0 0;
}

.tag {
    margin: 0 .25rem .25rem 0;
}

.actor:not(:last-of-type)::after {
    content: ",";
}

.actor-link {
    text-decoration: none;

    &:hover {
        color: $primary;
    }
}

.actor-link {
    color: $link;
}

.tag-link {
    color: $shadow;
    display: inline-block;
    padding: .25rem;
    font-size: .75rem;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
    border: solid 1px $shadow-hint;

    &:hover {
        color: $primary;
    }
}
</style>