forked from DebaucheryLibrarian/traxxx
Generalized filters bar, added to network page.
This commit is contained in:
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<div class="filter-bar noselect">
|
||||
<span>
|
||||
<label class="range">
|
||||
<input
|
||||
:id="`${_uid}-all`"
|
||||
:checked="range === 'all'"
|
||||
type="radio"
|
||||
class="range-input"
|
||||
@click="$emit('set-range', '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="$emit('set-range', '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="$emit('set-range', 'upcoming')"
|
||||
>
|
||||
<label
|
||||
:for="`${_uid}-upcoming`"
|
||||
class="range-button"
|
||||
>Upcoming</label>
|
||||
</label>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<Icon icon="filter" />
|
||||
|
||||
<Filters
|
||||
class="filters-container"
|
||||
:filter="filter"
|
||||
@set-filter="filter => $emit('set-filter', filter)"
|
||||
/>
|
||||
|
||||
<v-popover class="filters-compact">
|
||||
<div>Filters</div>
|
||||
|
||||
<div slot="popover">
|
||||
<Filters
|
||||
:compact="true"
|
||||
:filter="filter"
|
||||
@set-filter="filter => $emit('set-filter', filter)"
|
||||
/>
|
||||
</div>
|
||||
</v-popover>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Filters from './filters.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Filters,
|
||||
},
|
||||
props: {
|
||||
filter: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
range: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
@@ -1,141 +0,0 @@
|
||||
<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>
|
||||
@@ -1,11 +1,6 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<FilterBar
|
||||
:filter="filter"
|
||||
:range="range"
|
||||
@set-filter="setFilter"
|
||||
@set-range="setRange"
|
||||
/>
|
||||
<FilterBar :fetch-releases="fetchReleases" />
|
||||
|
||||
<div class="content-inner">
|
||||
<ul class="scenes nolist">
|
||||
@@ -22,30 +17,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FilterBar from './filter-bar.vue';
|
||||
import FilterBar from '../header/filter-bar.vue';
|
||||
import ReleaseTile from '../tile/release.vue';
|
||||
|
||||
import rangeDates from '../../js/range-dates';
|
||||
|
||||
async function fetchReleases() {
|
||||
this.releases = await this.$store.dispatch('fetchReleases', {
|
||||
filter: this.filter,
|
||||
...rangeDates(this.range),
|
||||
});
|
||||
}
|
||||
|
||||
async function setFilter(filter) {
|
||||
this.filter = filter;
|
||||
localStorage.setItem('filter', this.filter);
|
||||
|
||||
await this.fetchReleases();
|
||||
}
|
||||
|
||||
async function setRange(range) {
|
||||
this.range = range;
|
||||
localStorage.setItem('range', this.range);
|
||||
|
||||
await this.fetchReleases();
|
||||
this.releases = await this.$store.dispatch('fetchReleases');
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
@@ -60,12 +36,7 @@ export default {
|
||||
ReleaseTile,
|
||||
},
|
||||
data() {
|
||||
const storedFilter = localStorage.getItem('filter');
|
||||
const storedRange = localStorage.getItem('range');
|
||||
|
||||
return {
|
||||
filter: storedFilter ? storedFilter.split(',') : ['gay', 'transsexual'],
|
||||
range: storedRange || 'new',
|
||||
releases: [],
|
||||
networks: [],
|
||||
pageTitle: null,
|
||||
@@ -74,8 +45,6 @@ export default {
|
||||
mounted,
|
||||
methods: {
|
||||
fetchReleases,
|
||||
setFilter,
|
||||
setRange,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user