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"
                >
                    <ReleaseTile :release="release" />
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import ReleaseTile from '../tile/release.vue';

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

    this.pageTitle = '';
}

export default {
    components: {
        ReleaseTile,
    },
    data() {
        return {
            showStraight: true,
            showLesbian: true,
            showGay: false,
            showTrans: false,
            releases: [],
            networks: [],
            pageTitle: null,
        };
    },
    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;
}
</style>