traxxx/assets/components/home/home.vue

<template>
    <div class="content">
        <div class="filters-bar noselect">
            <Icon icon="filter" />

            <ul class="filters">
                <li class="filter">
                    <label
                        class="toggle"
                        :class="{ active: showStraight }"
                    >
                        <input
                            v-model="showStraight"
                            type="checkbox"
                            class="check"
                        >straight
                    </label>
                </li>

                <li class="filter">
                    <label
                        class="toggle"
                        :class="{ active: showLesbian }"
                    >
                        <input
                            v-model="showLesbian"
                            type="checkbox"
                            class="check"
                        >lesbian
                    </label>
                </li>

                <li class="filter">
                    <label
                        class="toggle"
                        :class="{ active: showGay }"
                    >
                        <input
                            v-model="showGay"
                            type="checkbox"
                            class="check"
                        >gay
                    </label>
                </li>

                <li class="filter">
                    <label
                        class="toggle"
                        :class="{ active: showTrans }"
                    >
                        <input
                            v-model="showTrans"
                            type="checkbox"
                            class="check"
                        >trans
                    </label>
                </li>
            </ul>
        </div>

        <div class="content-inner">
            <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.poster"
                                :src="`/${release.poster.path}`"
                                :alt="release.title"
                                class="scene-thumbnail"
                            >

                            <img
                                v-else-if="release.photos.length > 0"
                                :src="`/${release.photos[0].path}`"
                                :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
                                :title="release.title"
                                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.slug}`"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="actor-link"
                                    >{{ actor.name }}</a>
                                </li>
                            </ul>
                        </span>

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

<script>
function pageTitle() {
    return '';
}

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

export default {
    data() {
        return {
            showStraight: true,
            showLesbian: true,
            showGay: false,
            showTrans: false,
            releases: [],
        };
    },
    computed: {
        pageTitle,
    },
    mounted,
};
</script>

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

.filters-bar {
    display: block;
    background: $shadow-hint;
    padding: .5rem 1rem;

    .icon {
        fill: $shadow;
    }
}

.filters {
    display: inline-block;
    list-style: none;
    padding: .5rem;
    margin: 0;

    .toggle {
        color: $shadow;
        background: $shadow-hint;
        box-sizing: border-box;
        padding: .5rem;
        border-radius: .5rem;
        font-size: .9rem;
        font-weight: bold;
        cursor: pointer;

        .check {
            display: none;
        }

        &.active {
            color: $text-contrast;
            background: $primary;
        }
    }
}

.filter {
    display: inline-block;
}

.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: $text;
    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-actors {
    word-wrap: break-word;
    overflow: hidden;
    max-height: 2.5rem;
    line-height: 1.25rem;
}

.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 {
    text-decoration: none;

    &:hover {
        color: $primary;
    }
}

.actor-link {
    color: $link;
}

.tag-link {
    color: $shadow-strong;
}

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