Generalized filters bar, added to network page.

assets/components/header/filter-bar.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class="filter-bar noselect">
+        <span>
+            <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>
+
+            <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>
+        </span>
+
+        <span>
+            <Icon icon="filter" />
+
+            <Filters
+                class="filters-container"
+                :filter="filter"
+                @set-filter="setFilter"
+            />
+
+            <v-popover class="filters-compact">
+                <div>Filters</div>
+
+                <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;
+    padding: .5rem 1rem;
+    font-size: 0;
+    box-shadow: 0 0 3px $shadow;
+
+    .icon {
+        fill: $shadow;
+    }
+}
+
+.filters-container {
+    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>