Added tag filter dialog.
This commit is contained in:
DebaucheryLibrarian
parent
f27af19670
commit
7bbb2f3557
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<teleport to="body">
|
||||
<div
|
||||
class="container"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<div
|
||||
class="dialog"
|
||||
@click.stop
|
||||
>
|
||||
<div
|
||||
v-if="title || $slots.header"
|
||||
class="header"
|
||||
>
|
||||
<slot name="header">
|
||||
<h2 class="header-title">{{ title }}</h2>
|
||||
</slot>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ['close'],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
background: var(--darken);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--darken-weak);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.close {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
fill: var(--lighten);
|
||||
|
||||
&:hover {
|
||||
fill: var(--lighten-strong);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 1rem;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<label class="check-container noselect">
|
||||
<span class="check-label">{{ label }}</span>
|
||||
|
||||
<input
|
||||
v-show="false"
|
||||
:id="`checkbox-${uid}`"
|
||||
:checked="checked"
|
||||
type="checkbox"
|
||||
class="check-checkbox"
|
||||
@change="$emit('change', $event.target.checked)"
|
||||
>
|
||||
|
||||
<label
|
||||
:for="`checkbox-${uid}`"
|
||||
class="check"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ['change'],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'breakpoints';
|
||||
|
||||
.check-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.check {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
background-color: var(--shadow-hint);
|
||||
cursor: pointer;
|
||||
transition: background .15s ease;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: .5rem;
|
||||
height: .3rem;
|
||||
border: solid 2px var(--text-light);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
margin: -.2rem 0 0 0;
|
||||
transform: rotateZ(-45deg) scaleX(0);
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.check-cross .check::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: url('/img/icons/cross3.svg') no-repeat center/80%;
|
||||
opacity: .15;
|
||||
transition: transform .1s ease;
|
||||
}
|
||||
|
||||
.check-checkbox:checked + .check {
|
||||
background: var(--primary);
|
||||
|
||||
&::after {
|
||||
transform: rotateZ(-45deg) scaleX(1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.check-label {
|
||||
overflow: hidden;
|
||||
text-transform: capitalize;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<Dialog
|
||||
title="filters"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<h3 class="form-heading">Show me</h3>
|
||||
|
||||
<ul class="tags nolist">
|
||||
<li
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
class="tags-item"
|
||||
>
|
||||
<Checkbox
|
||||
:checked="!tagFilter.includes(tag)"
|
||||
:label="tag"
|
||||
class="tag"
|
||||
@change="(state) => filterTag(tag, state)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Checkbox from '../form/checkbox.vue';
|
||||
|
||||
function tagFilter() {
|
||||
return this.$store.state.ui.tagFilter;
|
||||
}
|
||||
|
||||
function filterTag(tag, isChecked) {
|
||||
if (isChecked) {
|
||||
this.$store.dispatch('setTagFilter', this.tagFilter.filter(filteredTag => filteredTag !== tag));
|
||||
} else {
|
||||
this.$store.dispatch('setTagFilter', this.tagFilter.concat(tag));
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Checkbox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tags: ['anal', 'gay', 'transsexual', 'bisexual', 'pissing'],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagFilter,
|
||||
},
|
||||
emits: ['close'],
|
||||
methods: {
|
||||
filterTag,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-item {
|
||||
width: 20rem;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: .5rem 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -147,8 +147,8 @@
|
|||
</li>
|
||||
|
||||
<li
|
||||
class="menu-item disabled"
|
||||
@click.stop
|
||||
class="menu-item"
|
||||
@click="showFilters = true"
|
||||
>
|
||||
<Icon icon="filter" />Filters
|
||||
</li>
|
||||
|
|
@ -157,6 +157,11 @@
|
|||
</template>
|
||||
</Tooltip>
|
||||
|
||||
<Filters
|
||||
v-if="showFilters"
|
||||
@close="showFilters = false"
|
||||
/>
|
||||
|
||||
<Search class="search-full" />
|
||||
|
||||
<Tooltip
|
||||
|
|
@ -189,6 +194,7 @@
|
|||
import { mapState } from 'vuex';
|
||||
|
||||
import Search from './search.vue';
|
||||
import Filters from './filters.vue';
|
||||
|
||||
import logo from '../../img/logo.svg';
|
||||
|
||||
|
|
@ -211,6 +217,7 @@ function setSfw(enabled) {
|
|||
export default {
|
||||
components: {
|
||||
Search,
|
||||
Filters,
|
||||
},
|
||||
props: {
|
||||
toggleSidebar: {
|
||||
|
|
@ -222,6 +229,7 @@ export default {
|
|||
return {
|
||||
logo,
|
||||
searching: false,
|
||||
showFilters: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
.form-heading {
|
||||
margin: 0 0 .5rem 0;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import 'theme';
|
||||
@import 'forms';
|
||||
@import 'inputs';
|
||||
@import 'states';
|
||||
@import 'tooltip';
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ function initEntitiesActions(store, router) {
|
|||
orderBy,
|
||||
afterTime: store.getters.after,
|
||||
beforeTime: store.getters.before,
|
||||
exclude: store.state.ui.filter,
|
||||
exclude: store.state.ui.tagFilter,
|
||||
});
|
||||
|
||||
if (!entity) {
|
||||
|
|
|
|||
|
|
@ -15,8 +15,11 @@ import Container from '../components/container/container.vue';
|
|||
import Icon from '../components/icon/icon.vue';
|
||||
import Footer from '../components/footer/footer.vue';
|
||||
import Tooltip from '../components/tooltip/tooltip.vue';
|
||||
import Dialog from '../components/dialog/dialog.vue';
|
||||
|
||||
async function init() {
|
||||
let uid = 0;
|
||||
|
||||
const store = initStore(router);
|
||||
const app = createApp(Container);
|
||||
const events = mitt();
|
||||
|
|
@ -38,6 +41,7 @@ async function init() {
|
|||
Footer,
|
||||
Tooltip,
|
||||
'v-popover': Tooltip,
|
||||
Dialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -60,6 +64,10 @@ async function init() {
|
|||
isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
|
||||
isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
|
||||
},
|
||||
beforeCreate() {
|
||||
this.uid = uid;
|
||||
uid += 1;
|
||||
},
|
||||
});
|
||||
|
||||
app.directive('tooltip', {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ function initReleasesActions(store, router) {
|
|||
after,
|
||||
before,
|
||||
orderBy,
|
||||
exclude: store.state.ui.filter,
|
||||
exclude: store.state.ui.tagFilter,
|
||||
});
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ function initTagsActions(store, _router) {
|
|||
before,
|
||||
orderBy: orderBy === 'DATE_DESC' ? 'DATE_DESC' : 'DATE_ASC',
|
||||
offset: Math.max(0, (pageNumber - 1)) * limit,
|
||||
exclude: store.state.ui.filter,
|
||||
exclude: store.state.ui.tagFilter.filter(tagFilter => tagFilter !== tagSlug),
|
||||
});
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@ import { graphql } from '../api';
|
|||
import { curateRelease, curateActor } from '../curate';
|
||||
|
||||
function initUiActions(_store, _router) {
|
||||
function setFilter({ commit }, filter) {
|
||||
commit('setFilter', filter);
|
||||
localStorage.setItem('filter', filter);
|
||||
function setTagFilter({ commit }, filter) {
|
||||
const tagFilter = Array.from(new Set(filter));
|
||||
|
||||
commit('setTagFilter', tagFilter);
|
||||
localStorage.setItem('tagFilter', tagFilter);
|
||||
}
|
||||
|
||||
function setRange({ commit }, range) {
|
||||
|
|
@ -184,7 +186,7 @@ function initUiActions(_store, _router) {
|
|||
|
||||
return {
|
||||
search,
|
||||
setFilter,
|
||||
setTagFilter,
|
||||
setRange,
|
||||
setBatch,
|
||||
setSfw,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
function setFilter(state, filter) {
|
||||
state.filter = filter;
|
||||
function setTagFilter(state, tagFilter) {
|
||||
state.tagFilter = tagFilter;
|
||||
}
|
||||
|
||||
function setRange(state, range) {
|
||||
|
|
@ -19,7 +19,7 @@ function setTheme(state, theme) {
|
|||
}
|
||||
|
||||
export default {
|
||||
setFilter,
|
||||
setTagFilter,
|
||||
setRange,
|
||||
setBatch,
|
||||
setSfw,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
const storedFilter = localStorage.getItem('filter');
|
||||
const storedTagFilter = localStorage.getItem('tagFilter');
|
||||
const storedBatch = localStorage.getItem('batch');
|
||||
const storedSfw = localStorage.getItem('sfw');
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
|
||||
export default {
|
||||
filter: storedFilter ? storedFilter.split(',') : [],
|
||||
tagFilter: storedTagFilter ? storedTagFilter.split(',') : [],
|
||||
range: 'latest',
|
||||
batch: storedBatch || 'all',
|
||||
sfw: storedSfw === 'true' || false,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>cross</title>
|
||||
<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1018 B |
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>cross2</title>
|
||||
<path d="M13.957 3.457l-1.414-1.414-4.543 4.543-4.543-4.543-1.414 1.414 4.543 4.543-4.543 4.543 1.414 1.414 4.543-4.543 4.543 4.543 1.414-1.414-4.543-4.543z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 326 B |
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>cross3</title>
|
||||
<path d="M12.207 10.793l-1.414 1.414-2.793-2.793-2.793 2.793-1.414-1.414 2.793-2.793-2.793-2.793 1.414-1.414 2.793 2.793 2.793-2.793 1.414 1.414-2.793 2.793 2.793 2.793z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 339 B |
|
|
@ -709,7 +709,7 @@ const tags = [
|
|||
{
|
||||
name: 'pissing',
|
||||
slug: 'pissing',
|
||||
priority: 6,
|
||||
priority: 8,
|
||||
},
|
||||
{
|
||||
name: 'POV',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ function scrapeAll(scenes) {
|
|||
return scenes.map(({ query }) => {
|
||||
const release = {};
|
||||
|
||||
const href = query.url('.shoot-thumb-title a');
|
||||
const href = query.url('.shoot-thumb-info > a');
|
||||
release.url = `https://kink.com${href}`;
|
||||
|
||||
release.shootId = href.split('/').slice(-1)[0];
|
||||
|
|
|
|||
Loading…
Reference in New Issue