boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Added timerange filters. Refactored releases module for more efficient queries.

Browse Source
This commit is contained in:
ThePendulum
2019-11-15 01:27:58 +01:00
parent a089bf892c
commit 1c3f17ec82
13 changed files with 280 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
assets/components/home/filter-bar.vue
View File

@@ -1,24 +1,70 @@
<template>
<div class="filter-bar noselect">
<Icon icon="filter" />
<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>
<Filters
class="filters-container"
:filter="filter"
@set-filter="filter => $emit('set-filter', filter)"
/>
<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>
<v-popover class="filters-compact">
<div>Filters</div>
<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>
<div slot="popover">
<Filters
:compact="true"
:filter="filter"
@set-filter="filter => $emit('set-filter', filter)"
/>
</div>
</v-popover>
<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>
@@ -34,6 +80,10 @@ export default {
type: Array,
default: () => [],
},
range: {
type: String,
default: null,
},
},
};
</script>
@@ -43,7 +93,8 @@ export default {
.filter-bar {
background: $background;
display: block;
display: flex;
justify-content: space-between;
padding: .5rem 1rem;
font-size: 0;
box-shadow: 0 0 3px $shadow;
@@ -64,6 +115,30 @@ export default {
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;

36
assets/components/home/filters.vue
View File

@@ -1,25 +1,6 @@
<template>
<div :class="{ compact }">
<ul class="filters">
<li
v-tooltip.bottom="'Not yet available'"
class="filter"
>
<label
class="toggle"
:class="{ active: !localFilter.includes('straight') }"
>
<input
v-model="localFilter"
value="straight"
type="checkbox"
class="check"
disabled
@change="$emit('set-filter', localFilter)"
>straight
</label>
</li>
<li class="filter">
<label
class="toggle"
@@ -82,23 +63,6 @@
</label>
</li>
</ul>
<ul class="filters">
<li class="filter">
<label
class="toggle"
:class="{ active: !localFilter.includes('femdom') }"
>
<input
v-model="localFilter"
value="femdom"
type="checkbox"
class="check"
@change="$emit('set-filter', localFilter)"
>femdom
</label>
</li>
</ul>
</div>
</template>

15
assets/components/home/home.vue
View File

@@ -2,7 +2,9 @@
<div class="content">
<FilterBar
:filter="filter"
:range="range"
@set-filter="setFilter"
@set-range="setRange"
/>
<div class="content-inner">
@@ -23,9 +25,12 @@
import FilterBar from './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),
});
}
@@ -36,6 +41,13 @@ async function setFilter(filter) {
await this.fetchReleases();
}
async function setRange(range) {
this.range = range;
localStorage.setItem('range', this.range);
await this.fetchReleases();
}
async function mounted() {
this.pageTitle = '';
@@ -49,9 +61,11 @@ export default {
},
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,
@@ -61,6 +75,7 @@ export default {
methods: {
fetchReleases,
setFilter,
setRange,
},
};
</script>