Added 'clear all' button to tag filter. Tag name never removes tag. Added actor scene scraping to LegalPorno.
This commit is contained in:
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<v-popover class="filters-container">
|
||||
<div class="filters">
|
||||
<Icon icon="price-tag4" />
|
||||
|
||||
<div
|
||||
v-if="selectedTags.length > 0"
|
||||
class="applied"
|
||||
>{{ selectedTags.length }} selected</div>
|
||||
>{{ selectedTags.length }} tag filters</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="applied empty"
|
||||
>Filter by tags</div>
|
||||
|
||||
<Icon icon="filter" />
|
||||
</div>
|
||||
|
||||
<div slot="popover">
|
||||
@@ -30,6 +30,12 @@
|
||||
>match any selected</option>
|
||||
</select>
|
||||
|
||||
<router-link
|
||||
v-if="selectedTags.length > 1"
|
||||
class="reset"
|
||||
:to="{}"
|
||||
><Icon icon="cross2" />clear all</router-link>
|
||||
|
||||
<ul class="tags nolist">
|
||||
<li
|
||||
v-for="tag in availableTags"
|
||||
@@ -37,15 +43,24 @@
|
||||
class="tag"
|
||||
:class="{ selected: selectedTags.includes(tag.slug) }"
|
||||
>
|
||||
<router-link :to="{ query: { ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }">
|
||||
<router-link
|
||||
:to="{ query: { ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
|
||||
class="include"
|
||||
:class="{ selected: selectedTags.includes(tag.slug) }"
|
||||
>
|
||||
<Icon
|
||||
icon="checkmark"
|
||||
class="include"
|
||||
class="add"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="remove"
|
||||
/>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }), mode }, params: { pageNumber: 1 } }"
|
||||
:to="{ query: { tags: tag.slug, mode }, params: { pageNumber: 1 } }"
|
||||
class="name"
|
||||
>{{ tag.name }}</router-link>
|
||||
</li>
|
||||
@@ -104,12 +119,13 @@ export default {
|
||||
@import 'theme';
|
||||
|
||||
.filters {
|
||||
color: var(--shadow);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
margin: 0 .5rem 0 0;
|
||||
margin: -.1rem 0 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -143,27 +159,39 @@ export default {
|
||||
width: 100%;
|
||||
background: none;
|
||||
padding: .75rem;
|
||||
margin: 0 0 .5rem 0;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
|
||||
.tags {
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.include {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
padding: .5rem .75rem .5rem 1rem;
|
||||
fill: var(--darken-hint);
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
padding: .5rem .75rem .5rem 1rem;
|
||||
fill: var(--darken-hint);
|
||||
}
|
||||
|
||||
.remove {
|
||||
display: none;
|
||||
fill: var(--alert);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&.selected .add {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.selected .remove {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -187,11 +215,32 @@ export default {
|
||||
background: var(--darken-hint);
|
||||
}
|
||||
|
||||
&.selected .include {
|
||||
&.selected .include .add {
|
||||
fill: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.reset {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .25rem 0;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
|
||||
.icon {
|
||||
fill: var(--darken-weak);
|
||||
padding: .5rem 1.5rem .5rem 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--darken-hint);
|
||||
|
||||
.icon {
|
||||
fill: var(--alert);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint0) {
|
||||
.applied {
|
||||
display: none;
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
>
|
||||
<router-link
|
||||
class="pagination-button cursor"
|
||||
:to="{ params: { pageNumber: 1 } }"
|
||||
:to="{ params: { pageNumber: 1 }, query: $route.query }"
|
||||
><Icon icon="first2" /></router-link>
|
||||
|
||||
<router-link
|
||||
class="pagination-button cursor"
|
||||
:to="{ params: { pageNumber: pageNumber - 1 } }"
|
||||
:to="{ params: { pageNumber: pageNumber - 1 }, query: $route.query }"
|
||||
><Icon icon="arrow-left" /></router-link>
|
||||
</span>
|
||||
|
||||
@@ -30,14 +30,14 @@
|
||||
<router-link
|
||||
v-for="pageX in pageNumber - 1"
|
||||
:key="`page-${pageX}`"
|
||||
:to="{ params: { pageNumber: pageNumber - pageX } }"
|
||||
:to="{ params: { pageNumber: pageNumber - pageX }, query: $route.query }"
|
||||
class="pagination-button page"
|
||||
> {{ pageNumber - pageX }} </router-link>
|
||||
</span>
|
||||
|
||||
<router-link
|
||||
:key="`page-${pageNumber}`"
|
||||
:to="{ params: { pageNumber } }"
|
||||
:to="{ params: { pageNumber }, query: $route.query }"
|
||||
class="pagination-button page active"
|
||||
> {{ pageNumber }} </router-link>
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<router-link
|
||||
v-for="pageX in (pageCount - pageNumber)"
|
||||
:key="`page-${pageX + pageNumber}`"
|
||||
:to="{ params: { pageNumber: pageX + pageNumber } }"
|
||||
:to="{ params: { pageNumber: pageX + pageNumber }, query: $route.query }"
|
||||
class="pagination-button page"
|
||||
> {{ pageX + pageNumber }} </router-link>
|
||||
</span>
|
||||
@@ -56,12 +56,12 @@
|
||||
>
|
||||
<router-link
|
||||
class="pagination-button cursor"
|
||||
:to="{ params: { pageNumber: pageNumber + 1 } }"
|
||||
:to="{ params: { pageNumber: pageNumber + 1 }, query: $route.query }"
|
||||
><Icon icon="arrow-right" /></router-link>
|
||||
|
||||
<router-link
|
||||
class="pagination-button cursor"
|
||||
:to="{ params: { pageNumber: pageCount } }"
|
||||
:to="{ params: { pageNumber: pageCount }, query: $route.query }"
|
||||
><Icon icon="last2" /></router-link>
|
||||
</span>
|
||||
|
||||
|
||||
@@ -145,7 +145,6 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 .5rem 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 3px var(--darken-weak);
|
||||
height: 100%;
|
||||
@@ -212,7 +211,7 @@ export default {
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 .25rem .25rem 0;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
@@ -226,12 +225,6 @@ export default {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
.network {
|
||||
color: #555;
|
||||
margin: 0 .25rem 0 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.actors {
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
@@ -255,18 +248,21 @@ export default {
|
||||
}
|
||||
|
||||
.labels {
|
||||
padding: 0 .5rem 1rem .25rem;
|
||||
padding: .1rem .5rem 1.5rem .5rem;
|
||||
max-height: .5rem;
|
||||
overflow-y: hidden;
|
||||
font-size: 0;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.shoot {
|
||||
display: inline;
|
||||
padding: .25rem .5rem .25rem .25rem;
|
||||
border-right: solid 1px var(--shadow-hint);
|
||||
color: var(--shadow-strong);
|
||||
font-size: 0.8rem;
|
||||
padding: .25rem .5rem;
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
box-shadow: inset 0 0 3px var(--shadow-weak);
|
||||
}
|
||||
|
||||
.tags {
|
||||
@@ -275,17 +271,19 @@ export default {
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0 0 .25rem 0;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.tag-link {
|
||||
background: var(--background);
|
||||
color: var(--shadow);
|
||||
display: inline-block;
|
||||
padding: .25rem;
|
||||
padding: .25rem .5rem;
|
||||
font-size: .75rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
box-shadow: 0 0 3px var(--shadow-weak);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
|
||||
@@ -158,9 +158,9 @@ export default {
|
||||
|
||||
.heading {
|
||||
display: inline-block;
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
padding: .5rem;
|
||||
color: var(--primary);
|
||||
padding: 0 .5rem;
|
||||
margin: .5rem 0 1rem 0;
|
||||
font-size: 1rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,12 @@
|
||||
v-if="tag.poster"
|
||||
class="tile"
|
||||
>
|
||||
<router-link
|
||||
class="title"
|
||||
:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
|
||||
:title="tag.name"
|
||||
>{{ tag.name }}</router-link>
|
||||
|
||||
<router-link
|
||||
:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
|
||||
:title="tag.name"
|
||||
@@ -42,12 +48,6 @@
|
||||
class="poster"
|
||||
>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
class="title"
|
||||
:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
|
||||
:title="tag.name"
|
||||
>{{ tag.name }}</router-link>
|
||||
</div>
|
||||
|
||||
<span
|
||||
@@ -85,6 +85,16 @@ export default {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
.title {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.poster {
|
||||
box-shadow: 0 0 3px var(--darken);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poster {
|
||||
@@ -95,7 +105,7 @@ export default {
|
||||
.title {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: .25rem .5rem .25rem 1rem;
|
||||
padding: .25rem 1rem .25rem .5rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: var(--shadow-strong);
|
||||
@@ -104,13 +114,4 @@ export default {
|
||||
text-transform: capitalize;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.poster-link:hover + .title,
|
||||
.title:hover {
|
||||
color: var(--primary)
|
||||
}
|
||||
|
||||
.poster-link:hover .poster {
|
||||
box-shadow: 0 0 3px var(--darken);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user