Added 'clear all' button to tag filter. Tag name never removes tag. Added actor scene scraping to LegalPorno.

This commit is contained in:
DebaucheryLibrarian
2020-07-19 19:40:21 +02:00
parent 70bf00e844
commit 5291a87587
24 changed files with 111 additions and 71 deletions

View File

@@ -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;

View File

@@ -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>

View File

@@ -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);

View File

@@ -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;
}

View File

@@ -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>