traxxx/assets/components/home/home.vue

<template>
    <div class="content-inner">
        <h2 class="heading">Latest releases</h2>

        <ul class="scenes nolist">
            <li
                v-for="release in releases"
                :key="release.id"
                class="scene"
            >
                <span class="scene-banner">
                    <span class="scene-details">
                        <a
                            :href="`/site/${release.site.id}`"
                            :title="release.network.name"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="scene-site site-link"
                        >{{ release.site.name }}</a>

                        <a
                            :href="release.url"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="scene-date"
                        >{{ formatDate(release.date, 'MMM D, YYYY') }}</a>
                    </span>

                    <a
                        :href="`/scene/${release.id}`"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="scene-link"
                    >
                        <img
                            v-if="release.photos > 0"
                            :src="`/${release.site.id}/${release.id}/1.jpg`"
                            :alt="release.title"
                            class="scene-thumbnail"
                        >

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

                <div class="scene-info">
                    <a
                        :href="`/scene/${release.id}`"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="scene-row scene-link"
                    >
                        <h3 class="scene-title">{{ release.title }}</h3>
                    </a>

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

                    <span
                        :title="release.tags.map(tag => tag.tag).join(', ')"
                        class="scene-row"
                    >
                        <ul class="scene-tags nolist">
                            <li
                                v-for="tag in release.tags"
                                :key="tag.tag"
                                class="scene-tag"
                            >
                                <a
                                    :href="`/tag/${tag.tag}`"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="tag-link"
                                >{{ tag.tag }}</a>
                            </li>
                        </ul>
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
async function mounted() {
    this.releases = await this.$store.dispatch('fetchReleases');
}

export default {
    data() {
        return {
            releases: [],
        };
    },
    mounted,
};
</script>

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

.scenes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap: 1rem;
}

.scene {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 0 .5rem 0;;
    border-radius: .25rem;
    overflow: hidden;
    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
}

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

.scene-thumbnail {
    width: 100%;
    height: 200px;
    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;
}

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

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

.scene-site,
.scene-date {
    color: #fff;
    background: rgba(0, 0, 0, .5);
    font-size: .8rem;
    padding: .25rem;
    text-decoration: none;
}

.scene-site {
    border-radius: 0 0 .25rem 0;
    font-weight: bold;
}

.scene-date {
    border-radius: 0 0 0 .25rem;
}

.scene-info {
    flex-grow: 1;
}

.scene-link {
    text-decoration: none;
}

.scene-title {
    color: #000;
    margin: 0;
    font-size: 1rem;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 3rem;
    line-height: 1.5rem;
}

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

.scene-tags {
    word-wrap: break-word;
    overflow: hidden;
    max-height: 2.5rem;
    line-height: 1.25rem;
}

.scene-actor,
.scene-tag {
    margin: 0 .25rem 0 0;
}

.scene-actor {
    font-size: .9rem;
}

.scene-tag {
    font-size: .75rem;
}

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

.actor-link,
.tag-link {
    color: #000;
}

.thumbnail {
    width: 300px;
}
</style>