Added tag filters to all URLs. Improved tag filter styling.
This commit is contained in:
parent
88a88227c4
commit
9903423caf
|
|
@ -26,15 +26,11 @@
|
|||
/>
|
||||
|
||||
<span class="tags">
|
||||
<span class="filters-container">
|
||||
<Icon icon="filter" />
|
||||
|
||||
<Filters
|
||||
class="filters-block"
|
||||
:filter="filter"
|
||||
@set-filter="setFilter"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<v-popover class="filters-compact">
|
||||
<Icon icon="filter" />
|
||||
|
|
@ -148,10 +144,6 @@ export default {
|
|||
margin: 0 0 -1px 0;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.filters-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -166,7 +158,7 @@ export default {
|
|||
.range-button {
|
||||
color: var(--shadow);
|
||||
display: inline-block;
|
||||
padding: .75rem 1rem;
|
||||
padding: .75rem 1rem 1rem 1rem;
|
||||
border: none;
|
||||
font-size: .8rem;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,18 @@
|
|||
<template>
|
||||
<v-popover class="filters">
|
||||
<div class="applied">Anal</div>
|
||||
<v-popover class="filters-container">
|
||||
<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">
|
||||
<ul class="tags nolist">
|
||||
|
|
@ -8,9 +20,9 @@
|
|||
v-for="tag in tags"
|
||||
:key="`tag-${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="checkmark"
|
||||
class="include"
|
||||
|
|
@ -18,7 +30,7 @@
|
|||
</router-link>
|
||||
|
||||
<router-link
|
||||
:to="{ params: { range: tag } }"
|
||||
:to="{ params: { tags: selectedTags.length === 1 && selectedTags.includes(tag) ? 'all-tags' : tag } }"
|
||||
class="name"
|
||||
>{{ tag }}</router-link>
|
||||
</li>
|
||||
|
|
@ -42,17 +54,19 @@ const tags = [
|
|||
];
|
||||
|
||||
function getNewRange(tag) {
|
||||
const selected = new Set(this.selectedTags).add(tag);
|
||||
|
||||
if (this.selectedTags.has(tag)) {
|
||||
selected.delete(tag);
|
||||
if (this.selectedTags.includes(tag)) {
|
||||
if (this.selectedTags.length === 1) {
|
||||
return 'all-tags';
|
||||
}
|
||||
|
||||
return Array.from(selected).join('+');
|
||||
return this.selectedTags.filter(selectedTag => selectedTag !== tag).join('+');
|
||||
}
|
||||
|
||||
return this.selectedTags.concat(tag).join('+');
|
||||
}
|
||||
|
||||
function selectedTags() {
|
||||
return new Set(this.$route.params.range.split('+'));
|
||||
return this.$route.params.tags.split('+').filter(selectedTag => selectedTag !== 'all-tags');
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -83,9 +97,29 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.filters {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.applied {
|
||||
padding: .5rem 1rem;
|
||||
width: 12rem;
|
||||
background: var(--background);
|
||||
padding: .5rem;
|
||||
border: solid 1px var(--shadow-hint);
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.empty {
|
||||
color: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
|
|
@ -95,17 +129,11 @@ export default {
|
|||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .5rem;
|
||||
|
||||
.icon:hover,
|
||||
.name:hover {
|
||||
background: var(--darken-hint);
|
||||
}
|
||||
|
||||
.icon {
|
||||
.include {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
padding: .5rem;
|
||||
padding: .5rem .75rem .5rem 1rem;
|
||||
fill: var(--darken-hint);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -113,14 +141,11 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.include:hover,
|
||||
&.selected .include {
|
||||
fill: var(--success);
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
padding: .5rem;
|
||||
padding: .5rem 1rem .5rem .75rem;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -129,5 +154,15 @@ export default {
|
|||
background: var(--darken-hint);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.include:hover,
|
||||
.name:hover {
|
||||
background: var(--darken-hint);
|
||||
}
|
||||
|
||||
.include:hover,
|
||||
&.selected .include {
|
||||
fill: var(--success);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,17 +19,29 @@ const routes = [
|
|||
{
|
||||
path: '/',
|
||||
redirect: {
|
||||
name: 'home',
|
||||
name: 'updates',
|
||||
params: {
|
||||
range: 'latest',
|
||||
tags: 'all-tags',
|
||||
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,
|
||||
name: 'home',
|
||||
name: 'updates',
|
||||
},
|
||||
{
|
||||
path: '/scene/:releaseId/:releaseSlug?',
|
||||
|
|
@ -42,19 +54,20 @@ const routes = [
|
|||
name: 'movie',
|
||||
},
|
||||
{
|
||||
path: '/actor/:actorId/:actorSlug?',
|
||||
path: '/actor/:actorId/:actorSlug',
|
||||
name: 'actor',
|
||||
redirect: from => ({
|
||||
name: 'actorRange',
|
||||
params: {
|
||||
...from.params,
|
||||
range: 'latest',
|
||||
tags: 'all-tags',
|
||||
pageNumber: 1,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/actor/:actorId/:actorSlug/:range/:pageNumber?',
|
||||
path: '/actor/:actorId/:actorSlug/:tags/:range/:pageNumber',
|
||||
component: Actor,
|
||||
name: 'actorRange',
|
||||
},
|
||||
|
|
@ -67,12 +80,13 @@ const routes = [
|
|||
params: {
|
||||
...from.params,
|
||||
range: 'latest',
|
||||
tags: 'all-tags',
|
||||
pageNumber: 1,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/site/:siteSlug/:range/:pageNumber?',
|
||||
path: '/site/:siteSlug/:tags/:range/:pageNumber',
|
||||
component: Site,
|
||||
name: 'siteRange',
|
||||
},
|
||||
|
|
@ -85,12 +99,13 @@ const routes = [
|
|||
params: {
|
||||
...from.params,
|
||||
range: 'latest',
|
||||
tags: 'all-tags',
|
||||
pageNumber: 1,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/network/:networkSlug/:range/:pageNumber?',
|
||||
path: '/network/:networkSlug/:tags/:range/:pageNumber',
|
||||
component: Network,
|
||||
name: 'networkRange',
|
||||
},
|
||||
|
|
@ -103,16 +118,17 @@ const routes = [
|
|||
params: {
|
||||
...from.params,
|
||||
range: 'latest',
|
||||
tags: 'all-tags',
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/tag/:tagSlug/:range',
|
||||
path: '/tag/:tagSlug/:tags/:range',
|
||||
component: Tag,
|
||||
name: 'tagRange',
|
||||
},
|
||||
{
|
||||
path: '/actors/:gender?/:letter?/:pageNumber?',
|
||||
path: '/actors/:gender?/:letter?/:pageNumber',
|
||||
component: Actors,
|
||||
name: 'actors',
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue