forked from DebaucheryLibrarian/traxxx
Generalized filters bar, added to network page.
This commit is contained in:
178
assets/components/header/filter-bar.vue
Normal file
178
assets/components/header/filter-bar.vue
Normal file
@@ -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>
|
||||
141
assets/components/header/filters.vue
Normal file
141
assets/components/header/filters.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div :class="{ compact }">
|
||||
<ul class="filters">
|
||||
<li class="filter">
|
||||
<label
|
||||
class="toggle"
|
||||
:class="{ active: !localFilter.includes('lesbian') }"
|
||||
>
|
||||
<input
|
||||
v-model="localFilter"
|
||||
value="lesbian"
|
||||
type="checkbox"
|
||||
class="check"
|
||||
@change="$emit('set-filter', localFilter)"
|
||||
>lesbian
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="filter">
|
||||
<label
|
||||
class="toggle"
|
||||
:class="{ active: !localFilter.includes('gay') }"
|
||||
>
|
||||
<input
|
||||
v-model="localFilter"
|
||||
value="gay"
|
||||
type="checkbox"
|
||||
class="check"
|
||||
@change="$emit('set-filter', localFilter)"
|
||||
>gay
|
||||
</label>
|
||||
</li>
|
||||
|
||||
<li class="filter">
|
||||
<label
|
||||
class="toggle"
|
||||
:class="{ active: !localFilter.includes('transsexual') }"
|
||||
>
|
||||
<input
|
||||
v-model="localFilter"
|
||||
value="transsexual"
|
||||
type="checkbox"
|
||||
class="check"
|
||||
@change="$emit('set-filter', localFilter)"
|
||||
>trans
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="filters">
|
||||
<li class="filter">
|
||||
<label
|
||||
class="toggle"
|
||||
:class="{ active: !localFilter.includes('anal') }"
|
||||
>
|
||||
<input
|
||||
v-model="localFilter"
|
||||
value="anal"
|
||||
type="checkbox"
|
||||
class="check"
|
||||
@change="$emit('set-filter', localFilter)"
|
||||
>anal
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
filter: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localFilter: this.filter,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.filters {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: .5rem;
|
||||
margin: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: solid 1px $shadow-hint;
|
||||
}
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.compact {
|
||||
.filters {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.filter {
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
color: $shadow-weak;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem;
|
||||
margin: 0 .25rem;
|
||||
border: solid 1px transparent;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
.check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $shadow;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
box-shadow: 0 0 2px $shadow-weak;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user