traxxx/assets/components/header/filter-bar.vue

<template>
    <div class="filter-bar noselect">
        <span>
            <label class="range">
                <input
                    :id="`${_uid}-new`"
                    :checked="range === 'new'"
                    type="radio"
                    class="range-input"
                    @click="setRange('new')"
                >
                <label
                    :for="`${_uid}-new`"
                    class="range-button"
                >New</label>
            </label>

            <label class="range">
                <input
                    :id="`${_uid}-upcoming`"
                    :checked="range === 'upcoming'"
                    type="radio"
                    class="range-input"
                    @click="setRange('upcoming')"
                >
                <label
                    :for="`${_uid}-upcoming`"
                    class="range-button"
                >Upcoming</label>
            </label>

            <label class="range">
                <input
                    :id="`${_uid}-all`"
                    :checked="range === 'all'"
                    type="radio"
                    class="range-input"
                    @click="setRange('all')"
                >
                <label
                    :for="`${_uid}-all`"
                    class="range-button"
                >All</label>
            </label>
        </span>

        <span>
            <span class="filters-container">
                <Icon icon="filter" />

                <Filters
                    class="filters-block"
                    :filter="filter"
                    @set-filter="setFilter"
                />
            </span>

            <v-popover class="filters-compact">
                <Icon icon="filter" />

                <div slot="popover">
                    <Filters
                        :compact="true"
                        :filter="filter"
                        @set-filter="setFilter"
                    />
                </div>
            </v-popover>
        </span>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import Filters from './filters.vue';

function filter(state) {
    return state.ui.filter;
}

function range(state) {
    return state.ui.range;
}

async function setFilter(newFilter) {
    this.$store.dispatch('setFilter', newFilter);

    await this.fetchReleases();
}

async function setRange(newRange) {
    this.$store.dispatch('setRange', newRange);

    await this.fetchReleases();
}

export default {
    components: {
        Filters,
    },
    props: {
        fetchReleases: {
            type: Function,
            default: null,
        },
    },
    computed: {
        ...mapState({
            filter,
            range,
        }),
    },
    methods: {
        setFilter,
        setRange,
    },
};
</script>

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

.filter-bar {
    background: $background;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    z-index: 1;
    font-size: 0;
    box-shadow: 0 0 3px $shadow;

    .icon {
        fill: $shadow;
    }
}

.filters-container {
    display: inline-block;
}

.filters-block {
    display: inline-block;
}

.filters-compact {
    font-size: 1rem;
    font-weight: bold;
    display: none;
    margin: 0 0 0 .5rem;
}

.range-button {
    color: $shadow;
    background: $background;
    display: inline-block;
    padding: .5rem 1rem;
    border: none;
    box-shadow: 0 0 2px $shadow-weak;
    font-size: .8rem;
    font-weight: bold;

    &:hover {
        color: $text;
        cursor: pointer;
    }
}

.range-input {
    display: none;

    &:checked + .range-button {
        color: $primary;
    }
}

@media(max-width: $breakpoint) {
    .filters-container {
        display: none;
    }

    .filters-compact {
        display: inline-block;
    }
}
</style>