Added tag filters to all URLs. Improved tag filter styling.

This commit is contained in:
ThePendulum 2020-05-27 03:04:18 +02:00
parent 88a88227c4
commit 9903423caf
3 changed files with 91 additions and 48 deletions

View File

@ -26,15 +26,11 @@
/> />
<span class="tags"> <span class="tags">
<span class="filters-container">
<Icon icon="filter" />
<Filters <Filters
class="filters-block" class="filters-block"
:filter="filter" :filter="filter"
@set-filter="setFilter" @set-filter="setFilter"
/> />
</span>
<v-popover class="filters-compact"> <v-popover class="filters-compact">
<Icon icon="filter" /> <Icon icon="filter" />
@ -148,10 +144,6 @@ export default {
margin: 0 0 -1px 0; margin: 0 0 -1px 0;
} }
.filters-container {
display: inline-block;
}
.filters-block { .filters-block {
display: inline-block; display: inline-block;
} }
@ -166,7 +158,7 @@ export default {
.range-button { .range-button {
color: var(--shadow); color: var(--shadow);
display: inline-block; display: inline-block;
padding: .75rem 1rem; padding: .75rem 1rem 1rem 1rem;
border: none; border: none;
font-size: .8rem; font-size: .8rem;
font-weight: bold; font-weight: bold;

View File

@ -1,6 +1,18 @@
<template> <template>
<v-popover class="filters"> <v-popover class="filters-container">
<div class="applied">Anal</div> <div class="filters">
<Icon icon="filter" />
<div
v-if="selectedTags.length > 0"
class="applied"
>{{ selectedTags.join(', ') }}</div>
<div
v-else
class="applied empty"
>Filter by tags</div>
</div>
<div slot="popover"> <div slot="popover">
<ul class="tags nolist"> <ul class="tags nolist">
@ -8,9 +20,9 @@
v-for="tag in tags" v-for="tag in tags"
:key="`tag-${tag}`" :key="`tag-${tag}`"
class="tag" class="tag"
:class="{ selected: selectedTags.has(tag) }" :class="{ selected: selectedTags.includes(tag) }"
> >
<router-link :to="{ params: { range: getNewRange(tag) } }"> <router-link :to="{ params: { tags: getNewRange(tag) } }">
<Icon <Icon
icon="checkmark" icon="checkmark"
class="include" class="include"
@ -18,7 +30,7 @@
</router-link> </router-link>
<router-link <router-link
:to="{ params: { range: tag } }" :to="{ params: { tags: selectedTags.length === 1 && selectedTags.includes(tag) ? 'all-tags' : tag } }"
class="name" class="name"
>{{ tag }}</router-link> >{{ tag }}</router-link>
</li> </li>
@ -42,17 +54,19 @@ const tags = [
]; ];
function getNewRange(tag) { function getNewRange(tag) {
const selected = new Set(this.selectedTags).add(tag); if (this.selectedTags.includes(tag)) {
if (this.selectedTags.length === 1) {
if (this.selectedTags.has(tag)) { return 'all-tags';
selected.delete(tag);
} }
return Array.from(selected).join('+'); return this.selectedTags.filter(selectedTag => selectedTag !== tag).join('+');
}
return this.selectedTags.concat(tag).join('+');
} }
function selectedTags() { function selectedTags() {
return new Set(this.$route.params.range.split('+')); return this.$route.params.tags.split('+').filter(selectedTag => selectedTag !== 'all-tags');
} }
export default { export default {
@ -83,9 +97,29 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'theme'; @import 'theme';
.filters {
display: inline-flex;
align-items: center;
.icon {
fill: var(--shadow);
margin: 0 .5rem 0 0;
}
}
.applied { .applied {
padding: .5rem 1rem; width: 12rem;
background: var(--background);
padding: .5rem;
border: solid 1px var(--shadow-hint);
font-size: 1rem; font-size: 1rem;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
&.empty {
color: var(--shadow);
}
} }
.tags { .tags {
@ -95,17 +129,11 @@ export default {
.tag { .tag {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 .5rem;
.icon:hover, .include {
.name:hover {
background: var(--darken-hint);
}
.icon {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
padding: .5rem; padding: .5rem .75rem .5rem 1rem;
fill: var(--darken-hint); fill: var(--darken-hint);
&:hover { &:hover {
@ -113,14 +141,11 @@ export default {
} }
} }
.include:hover,
&.selected .include {
fill: var(--success);
}
.name { .name {
display: flex;
justify-content: space-between;
flex-grow: 1; flex-grow: 1;
padding: .5rem; padding: .5rem 1rem .5rem .75rem;
color: var(--text); color: var(--text);
text-decoration: none; text-decoration: none;
} }
@ -129,5 +154,15 @@ export default {
background: var(--darken-hint); background: var(--darken-hint);
cursor: pointer; cursor: pointer;
} }
.include:hover,
.name:hover {
background: var(--darken-hint);
}
.include:hover,
&.selected .include {
fill: var(--success);
}
} }
</style> </style>

View File

@ -19,17 +19,29 @@ const routes = [
{ {
path: '/', path: '/',
redirect: { redirect: {
name: 'home', name: 'updates',
params: { params: {
range: 'latest', range: 'latest',
tags: 'all-tags',
pageNumber: 1, pageNumber: 1,
}, },
}, },
}, },
{ {
path: '/:range/:pageNumber?', path: '/updates',
redirect: {
name: 'updates',
params: {
range: 'latest',
tags: 'all-tags',
pageNumber: 1,
},
},
},
{
path: '/updates/:tags/:range/:pageNumber',
component: Home, component: Home,
name: 'home', name: 'updates',
}, },
{ {
path: '/scene/:releaseId/:releaseSlug?', path: '/scene/:releaseId/:releaseSlug?',
@ -42,19 +54,20 @@ const routes = [
name: 'movie', name: 'movie',
}, },
{ {
path: '/actor/:actorId/:actorSlug?', path: '/actor/:actorId/:actorSlug',
name: 'actor', name: 'actor',
redirect: from => ({ redirect: from => ({
name: 'actorRange', name: 'actorRange',
params: { params: {
...from.params, ...from.params,
range: 'latest', range: 'latest',
tags: 'all-tags',
pageNumber: 1, pageNumber: 1,
}, },
}), }),
}, },
{ {
path: '/actor/:actorId/:actorSlug/:range/:pageNumber?', path: '/actor/:actorId/:actorSlug/:tags/:range/:pageNumber',
component: Actor, component: Actor,
name: 'actorRange', name: 'actorRange',
}, },
@ -67,12 +80,13 @@ const routes = [
params: { params: {
...from.params, ...from.params,
range: 'latest', range: 'latest',
tags: 'all-tags',
pageNumber: 1, pageNumber: 1,
}, },
}), }),
}, },
{ {
path: '/site/:siteSlug/:range/:pageNumber?', path: '/site/:siteSlug/:tags/:range/:pageNumber',
component: Site, component: Site,
name: 'siteRange', name: 'siteRange',
}, },
@ -85,12 +99,13 @@ const routes = [
params: { params: {
...from.params, ...from.params,
range: 'latest', range: 'latest',
tags: 'all-tags',
pageNumber: 1, pageNumber: 1,
}, },
}), }),
}, },
{ {
path: '/network/:networkSlug/:range/:pageNumber?', path: '/network/:networkSlug/:tags/:range/:pageNumber',
component: Network, component: Network,
name: 'networkRange', name: 'networkRange',
}, },
@ -103,16 +118,17 @@ const routes = [
params: { params: {
...from.params, ...from.params,
range: 'latest', range: 'latest',
tags: 'all-tags',
}, },
}), }),
}, },
{ {
path: '/tag/:tagSlug/:range', path: '/tag/:tagSlug/:tags/:range',
component: Tag, component: Tag,
name: 'tagRange', name: 'tagRange',
}, },
{ {
path: '/actors/:gender?/:letter?/:pageNumber?', path: '/actors/:gender?/:letter?/:pageNumber',
component: Actors, component: Actors,
name: 'actors', name: 'actors',
}, },