2019-11-14 00:18:19 +00:00
|
|
|
<template>
|
2020-05-24 01:54:29 +00:00
|
|
|
<div class="filter-bar noselect">
|
2020-07-20 02:20:33 +00:00
|
|
|
<div class="sort">
|
2020-05-24 01:54:29 +00:00
|
|
|
<router-link
|
2020-09-09 01:45:00 +00:00
|
|
|
:to="{ params: { range: 'latest', pageNumber: 1 }, query: $route.query }"
|
2020-05-24 01:54:29 +00:00
|
|
|
:class="{ active: $route.name === 'latest' || range === 'latest' }"
|
|
|
|
class="range range-button"
|
|
|
|
>Latest</router-link>
|
|
|
|
|
|
|
|
<router-link
|
2020-09-09 01:45:00 +00:00
|
|
|
:to="{ params: { range: 'upcoming', pageNumber: 1 }, query: $route.query }"
|
2020-05-24 01:54:29 +00:00
|
|
|
:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
|
|
|
|
class="range-button"
|
|
|
|
>Upcoming</router-link>
|
|
|
|
|
|
|
|
<router-link
|
2020-09-09 01:45:00 +00:00
|
|
|
:to="{ params: { range: 'new', pageNumber: 1 }, query: $route.query }"
|
2020-05-24 01:54:29 +00:00
|
|
|
:class="{ active: $route.name === 'new' || range === 'new' }"
|
|
|
|
class="range-button"
|
|
|
|
>New</router-link>
|
2020-07-20 02:20:33 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="filters">
|
2020-09-12 01:09:05 +00:00
|
|
|
<ActorFilter
|
|
|
|
class="filters-filter"
|
|
|
|
:filter="filter"
|
|
|
|
:available-actors="availableActors"
|
|
|
|
/>
|
|
|
|
|
2020-07-20 02:20:33 +00:00
|
|
|
<ChannelFilter
|
2020-07-21 02:04:07 +00:00
|
|
|
class="filters-filter"
|
2020-07-20 02:20:33 +00:00
|
|
|
:filter="filter"
|
|
|
|
:available-channels="availableChannels"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<TagFilter
|
2020-07-21 02:04:07 +00:00
|
|
|
class="filters-filter"
|
2020-07-20 02:20:33 +00:00
|
|
|
:filter="filter"
|
|
|
|
:available-tags="availableTags"
|
|
|
|
/>
|
|
|
|
</div>
|
2020-05-24 01:54:29 +00:00
|
|
|
</div>
|
2019-11-14 00:18:19 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-11-15 01:37:17 +00:00
|
|
|
import { mapState } from 'vuex';
|
2020-09-12 01:09:05 +00:00
|
|
|
|
|
|
|
import ActorFilter from './actor-filter.vue';
|
2020-07-20 02:20:33 +00:00
|
|
|
import ChannelFilter from './channel-filter.vue';
|
|
|
|
import TagFilter from './tag-filter.vue';
|
2019-11-14 00:18:19 +00:00
|
|
|
|
2019-11-15 01:37:17 +00:00
|
|
|
function filter(state) {
|
2020-05-24 01:54:29 +00:00
|
|
|
return state.ui.filter;
|
2019-11-15 01:37:17 +00:00
|
|
|
}
|
|
|
|
|
2020-05-07 01:20:51 +00:00
|
|
|
function range() {
|
2020-05-24 01:54:29 +00:00
|
|
|
return this.$route.params.range;
|
2019-11-15 01:37:17 +00:00
|
|
|
}
|
|
|
|
|
2020-03-02 02:41:41 +00:00
|
|
|
function batch(state) {
|
2020-05-24 01:54:29 +00:00
|
|
|
return state.ui.batch;
|
2020-03-02 02:41:41 +00:00
|
|
|
}
|
|
|
|
|
2019-11-15 01:37:17 +00:00
|
|
|
async function setRange(newRange) {
|
2020-05-24 01:54:29 +00:00
|
|
|
this.$store.dispatch('setRange', newRange);
|
2019-11-15 01:37:17 +00:00
|
|
|
|
2020-05-24 01:54:29 +00:00
|
|
|
await this.fetchReleases();
|
2019-11-15 01:37:17 +00:00
|
|
|
}
|
|
|
|
|
2020-03-02 02:41:41 +00:00
|
|
|
async function setBatch(newBatch) {
|
2020-05-24 01:54:29 +00:00
|
|
|
this.$store.dispatch('setBatch', newBatch);
|
2020-03-02 02:41:41 +00:00
|
|
|
|
2020-05-24 01:54:29 +00:00
|
|
|
await this.fetchReleases();
|
2020-03-02 02:41:41 +00:00
|
|
|
}
|
|
|
|
|
2019-11-14 00:18:19 +00:00
|
|
|
export default {
|
2020-05-24 01:54:29 +00:00
|
|
|
components: {
|
2020-09-12 01:09:05 +00:00
|
|
|
ActorFilter,
|
2020-07-20 02:20:33 +00:00
|
|
|
ChannelFilter,
|
|
|
|
TagFilter,
|
2020-05-24 01:54:29 +00:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
fetchReleases: {
|
|
|
|
type: Function,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
isHome: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
itemsTotal: {
|
|
|
|
type: Number,
|
|
|
|
default: 0,
|
|
|
|
},
|
|
|
|
itemsPerPage: {
|
|
|
|
type: Number,
|
|
|
|
default: 10,
|
|
|
|
},
|
2020-06-30 02:33:47 +00:00
|
|
|
availableTags: {
|
|
|
|
type: Array,
|
|
|
|
default: () => [],
|
|
|
|
},
|
2020-07-20 02:20:33 +00:00
|
|
|
availableChannels: {
|
|
|
|
type: Array,
|
|
|
|
default: () => [],
|
|
|
|
},
|
2020-09-12 01:09:05 +00:00
|
|
|
availableActors: {
|
|
|
|
type: Array,
|
|
|
|
default: () => [],
|
|
|
|
},
|
2020-05-24 01:54:29 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState({
|
|
|
|
filter,
|
|
|
|
range,
|
|
|
|
batch,
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setRange,
|
|
|
|
setBatch,
|
|
|
|
},
|
2019-11-14 00:18:19 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
2020-07-20 02:20:33 +00:00
|
|
|
<style lang="scss">
|
|
|
|
@import 'breakpoints';
|
|
|
|
|
|
|
|
.filter-mode {
|
|
|
|
width: 100%;
|
2021-03-23 19:37:20 +00:00
|
|
|
color: var(--shadow);
|
2020-07-20 02:20:33 +00:00
|
|
|
background: none;
|
|
|
|
padding: .75rem;
|
|
|
|
margin: 0 0 .5rem 0;
|
|
|
|
font-size: 1rem;
|
|
|
|
border: none;
|
|
|
|
border-bottom: solid 1px var(--shadow-hint);
|
2021-03-23 19:37:20 +00:00
|
|
|
|
|
|
|
option {
|
|
|
|
color: var(--text-dark);
|
|
|
|
}
|
2020-07-20 02:20:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.filter-clear {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: .5rem 1rem;
|
2021-03-23 19:37:20 +00:00
|
|
|
color: var(--shadow-weak);
|
2020-07-20 02:20:33 +00:00
|
|
|
text-decoration: none;
|
|
|
|
cursor: default;
|
|
|
|
|
|
|
|
.icon {
|
2021-03-23 19:37:20 +00:00
|
|
|
fill: var(--shadow-hint);
|
2020-07-20 02:20:33 +00:00
|
|
|
margin: 0 0 0 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
2021-03-23 19:37:20 +00:00
|
|
|
color: var(--shadow);
|
2020-07-20 02:20:33 +00:00
|
|
|
|
|
|
|
.icon {
|
2021-03-23 19:37:20 +00:00
|
|
|
fill: var(--shadow-weak);
|
2020-07-20 02:20:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: var(--text);
|
2021-03-23 19:37:20 +00:00
|
|
|
background: var(--shadow-hint);
|
2020-07-20 02:20:33 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--alert);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter-items .filter-item {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
&:hover {
|
2021-03-23 19:37:20 +00:00
|
|
|
background: var(--shadow-hint);
|
2020-07-20 02:20:33 +00:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2020-09-09 01:28:33 +00:00
|
|
|
&.selected {
|
|
|
|
.filter-include {
|
|
|
|
.filter-add {
|
|
|
|
fill: var(--success);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
.filter-add {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter-remove {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-20 02:20:33 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter-include {
|
|
|
|
.icon {
|
|
|
|
width: 1rem;
|
|
|
|
height: 1rem;
|
|
|
|
padding: .5rem 1rem;
|
2021-03-23 19:37:20 +00:00
|
|
|
fill: var(--shadow-hint);
|
2020-07-20 02:20:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.filter-remove {
|
|
|
|
display: none;
|
|
|
|
fill: var(--alert);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter-name {
|
|
|
|
min-width: 8rem;
|
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
padding: .5rem .75rem .5rem 1rem;
|
|
|
|
color: var(--text);
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter-include:hover,
|
|
|
|
.filter-name:hover {
|
2021-03-23 19:37:20 +00:00
|
|
|
background: var(--shadow-hint);
|
2020-07-20 02:20:33 +00:00
|
|
|
}
|
|
|
|
|
2020-09-12 01:09:05 +00:00
|
|
|
@media(max-width: $breakpoint-small) {
|
2020-07-20 02:20:33 +00:00
|
|
|
.filter-applied {
|
|
|
|
display: none;
|
|
|
|
}
|
2020-07-21 02:04:07 +00:00
|
|
|
|
|
|
|
.filters-filter:not(:last-child) .filter {
|
2020-07-22 22:55:55 +00:00
|
|
|
padding: .5rem;
|
2020-07-21 02:04:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.filters-filter:last-child .filter {
|
2020-07-22 22:55:55 +00:00
|
|
|
padding: .5rem 0 .5rem .5rem;
|
2020-07-21 02:04:07 +00:00
|
|
|
}
|
2020-07-20 02:20:33 +00:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2019-11-14 00:18:19 +00:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import 'theme';
|
|
|
|
|
|
|
|
.filter-bar {
|
2019-11-15 00:27:58 +00:00
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
2020-01-09 01:03:47 +00:00
|
|
|
align-items: center;
|
2020-05-25 00:02:28 +00:00
|
|
|
padding: .5rem 1rem 0 1rem;
|
2019-11-28 04:36:22 +00:00
|
|
|
z-index: 1;
|
2020-05-25 00:02:28 +00:00
|
|
|
background: var(--background-dim);
|
2019-11-14 00:18:19 +00:00
|
|
|
font-size: 0;
|
|
|
|
|
|
|
|
.icon {
|
2020-04-16 20:23:25 +00:00
|
|
|
margin: 0 .5rem 0 0;
|
2020-03-23 00:43:49 +00:00
|
|
|
fill: var(--shadow);
|
2019-11-14 00:18:19 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-28 02:38:54 +00:00
|
|
|
::v-deep(.filter) {
|
|
|
|
color: var(--shadow);
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.filter-applied {
|
|
|
|
flex-grow: 1;
|
|
|
|
padding: .75rem .5rem;
|
|
|
|
font-size: 1rem;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
&.empty {
|
|
|
|
color: var(--shadow);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--shadow);
|
|
|
|
margin: -.1rem 0 0 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
.applied {
|
|
|
|
color: var(--shadow-strong);
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--shadow-strong);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-11 20:45:44 +00:00
|
|
|
.filters {
|
|
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
|
2020-04-16 20:23:25 +00:00
|
|
|
.sort {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
2019-11-15 00:27:58 +00:00
|
|
|
.range-button {
|
2020-03-23 00:43:49 +00:00
|
|
|
color: var(--shadow);
|
2019-11-15 00:27:58 +00:00
|
|
|
display: inline-block;
|
2020-06-30 02:41:12 +00:00
|
|
|
padding: .8rem 1rem;
|
2019-11-15 00:27:58 +00:00
|
|
|
border: none;
|
2020-06-29 01:55:10 +00:00
|
|
|
position: relative;
|
2019-11-15 00:27:58 +00:00
|
|
|
font-size: .8rem;
|
|
|
|
font-weight: bold;
|
2020-05-07 01:20:51 +00:00
|
|
|
text-decoration: none;
|
2020-05-25 00:02:28 +00:00
|
|
|
border: solid 1px transparent;
|
|
|
|
border-bottom: none;
|
2019-11-15 00:27:58 +00:00
|
|
|
|
2020-05-07 01:20:51 +00:00
|
|
|
&:hover:not(.active) {
|
|
|
|
color: var(--shadow-strong);
|
2019-11-15 00:27:58 +00:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2020-05-07 01:20:51 +00:00
|
|
|
&.active {
|
2020-03-23 00:43:49 +00:00
|
|
|
color: var(--primary);
|
2020-05-25 00:02:28 +00:00
|
|
|
background: var(--background-soft);
|
|
|
|
border-color: var(--crease);
|
2020-06-29 01:55:10 +00:00
|
|
|
|
|
|
|
&::after {
|
|
|
|
/* hide grey border for tab effect, negative margin shows grey crease on mobile */
|
|
|
|
content: '';
|
|
|
|
width: 100%;
|
|
|
|
height: 2px;
|
|
|
|
background: var(--background-soft);
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
2020-07-02 02:04:28 +00:00
|
|
|
bottom: -2px;
|
2020-06-29 01:55:10 +00:00
|
|
|
}
|
2019-11-15 00:27:58 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-21 02:04:07 +00:00
|
|
|
.filters-filter {
|
2020-06-30 22:25:27 +00:00
|
|
|
display: inline-block;
|
2020-05-24 01:54:29 +00:00
|
|
|
flex-shrink: 0;
|
2020-07-20 02:20:33 +00:00
|
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
margin: 0 1rem 0 0;
|
|
|
|
}
|
2020-05-24 01:54:29 +00:00
|
|
|
}
|
2019-11-14 00:18:19 +00:00
|
|
|
</style>
|