Added filter presets to consent warning. Updating scenes when tag filter changes.

This commit is contained in:
DebaucheryLibrarian 2021-01-04 01:30:39 +01:00
parent ab83a42dfb
commit 62ef041b35
8 changed files with 153 additions and 52 deletions

View File

@ -384,10 +384,6 @@ function sfw() {
return this.$store.state.ui.sfw; return this.$store.state.ui.sfw;
} }
async function route() {
await this.fetchActor();
}
async function mounted() { async function mounted() {
await this.fetchActor(); await this.fetchActor();
@ -422,7 +418,8 @@ export default {
sfw, sfw,
}, },
watch: { watch: {
$route: route, $route: fetchActor,
'$store.state.ui.tagFilter': fetchActor,
}, },
mounted, mounted,
methods: { methods: {

View File

@ -3,7 +3,7 @@
<Warning <Warning
v-if="showWarning" v-if="showWarning"
class="warning-container" class="warning-container"
@enter="setConsent(true)" @enter="(includeQueer) => setConsent(true, includeQueer)"
@leave="setConsent(false)" @leave="setConsent(false)"
/> />
@ -46,11 +46,18 @@ function toggleFilters(state) {
this.showSidebar = false; this.showSidebar = false;
} }
async function setConsent(consent) { async function setConsent(consent, includeQueer) {
if (consent) { if (consent) {
this.showWarning = false; this.showWarning = false;
localStorage.setItem('consent', window.env.sessionId); localStorage.setItem('consent', window.env.sessionId);
} }
if (includeQueer) {
this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.filter(tag => !['gay', 'bisexual', 'transsexual'].includes(tag)));
return;
}
this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.concat(['gay', 'bisexual', 'transsexual']));
} }
function blur(event) { function blur(event) {

View File

@ -3,6 +3,7 @@
title="filters" title="filters"
@close="$emit('close')" @close="$emit('close')"
> >
<div class="filters">
<h3 class="form-heading">Show me</h3> <h3 class="form-heading">Show me</h3>
<ul class="tags nolist"> <ul class="tags nolist">
@ -19,6 +20,9 @@
/> />
</li> </li>
</ul> </ul>
<p class="disclaimer">You may incidentally see filtered content</p>
</div>
</Dialog> </Dialog>
</template> </template>
@ -57,13 +61,24 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-item { .filters {
width: 20rem; width: 20rem;
max-width: 100%; max-width: 100%;
}
.tags-item {
display: block; display: block;
} }
.tag { .tag {
padding: .5rem 0; padding: .5rem 0;
} }
.disclaimer {
margin: 1rem 0 0 0;
line-height: 1.5;
text-align: center;
font-size: .9rem;
color: var(--shadow);
}
</style> </style>

View File

@ -8,7 +8,7 @@
<strong class="title">This website contains sexually explicit content</strong> <strong class="title">This website contains sexually explicit content</strong>
<span class="copy">By entering, you agree to the following</span> <span class="copy agree">By entering, you agree to the following</span>
<ul class="rules"> <ul class="rules">
<li class="rule">You are at least 18 years old, and legally permitted to view adult material in your jurisdiction.</li> <li class="rule">You are at least 18 years old, and legally permitted to view adult material in your jurisdiction.</li>
@ -22,13 +22,26 @@
href="https://www.google.com" href="https://www.google.com"
class="button leave" class="button leave"
@click="$emit('leave')" @click="$emit('leave')"
>Leave</a> ><Icon icon="arrow-left16" />Leave</a>
<button <button
class="button enter" class="button enter queer"
@click="$emit('enter')" @click="$emit('enter', true)"
>Enter</button> >
<span class="button-title">Enter</span>
<span class="button-sub">I like gay, bi and trans content</span>
</button>
<button
class="button enter straight"
@click="$emit('enter', false)"
>
<span class="button-title">Enter</span>
<span class="button-sub">I prefer straight content</span>
</button>
</div> </div>
<span class="preferences">You can adjust your content preferences after entering</span>
</div> </div>
</div> </div>
</template> </template>
@ -42,6 +55,7 @@ export default {
logo, logo,
}; };
}, },
emits: ['enter'],
}; };
</script> </script>
@ -68,6 +82,13 @@ export default {
margin: 1rem; margin: 1rem;
} }
.logo {
width: 8rem;
display: flex;
fill: var(--primary);
margin: 1rem auto 0 auto;
}
.title, .title,
.copy, .copy,
.rules { .rules {
@ -98,52 +119,106 @@ export default {
line-height: 1.5; line-height: 1.5;
} }
.preferences {
color: var(--lighten);
display: block;
padding: .5rem 0 1rem 0;
text-align: center;
font-size: .9rem;
}
.actions { .actions {
display: flex; display: flex;
text-align: center; text-align: center;
padding: 1rem 1rem 2rem 1rem; padding: 1rem 0;
} }
.button { .button {
display: inline-block; display: inline-block;
padding: 1rem;
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
padding: 0;
background: none;
border: solid 2px transparent;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: var(--lighten-strong); flex-basis: 0;
&.leave { &.leave {
background: var(--darken-strong); display: inline-flex;
padding: 1rem 3rem; align-items: center;
justify-content: center;
color: var(--lighten-strong);
padding: 1rem;
.icon {
width: 1.5rem;
height: 1.5rem;
margin: 0 1rem 0 0;
fill: var(--lighten);
}
} }
&.enter { &.enter {
background: var(--primary);
font-weight: bold;
flex-grow: 1; flex-grow: 1;
&:hover { &:hover {
.button-title,
.button-sub {
color: var(--text-light); color: var(--text-light);
} }
} }
}
&.straight {
border-color: var(--primary);
}
&.queer {
border-image: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff) 1;
}
&:not(:last-child) {
margin: 0 2rem 0 0;
}
&:hover { &:hover {
color: var(--text-light); color: var(--text-light);
.icon {
fill: var(--text-light);
}
} }
} }
.logo { .button-title,
width: 8rem; .button-sub {
display: flex; width: 100%;
fill: var(--primary); display: block;
margin: 1rem auto 0 auto; box-sizing: border-box;
}
.button-title {
font-size: 1.5rem;
padding: .5rem .5rem .15rem .5rem;
color: var(--lighten-strong);
font-weight: bold;
}
.button-sub {
font-size: .75rem;
padding: .15rem .5rem .75rem .5rem;
color: var(--lighten);
} }
@media(max-width: $breakpoint) { @media(max-width: $breakpoint) {
.title { .title {
font-size: 1.5rem; font-size: 1.5rem;
} }
.button:not(:last-child) {
margin: 0 1rem 0 0;
}
} }
@media(max-width: $breakpoint-micro) { @media(max-width: $breakpoint-micro) {

View File

@ -170,6 +170,7 @@ export default {
}, },
watch: { watch: {
$route: route, $route: route,
'$store.state.ui.tagFilter': fetchEntity,
}, },
mounted, mounted,
methods: { methods: {

View File

@ -44,10 +44,6 @@ async function fetchReleases() {
this.$refs.content.scrollTop = 0; this.$refs.content.scrollTop = 0;
} }
async function route() {
await this.fetchReleases();
}
async function mounted() { async function mounted() {
this.pageTitle = ''; this.pageTitle = '';
@ -71,7 +67,8 @@ export default {
}; };
}, },
watch: { watch: {
$route: route, $route: fetchReleases,
'$store.state.ui.tagFilter': fetchReleases,
}, },
mounted, mounted,
methods: { methods: {

View File

@ -75,10 +75,6 @@ async function fetchReleases() {
this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description)); this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
} }
async function route() {
await this.fetchReleases();
}
async function mounted() { async function mounted() {
await this.fetchReleases(); await this.fetchReleases();
this.pageTitle = this.tag.name; this.pageTitle = this.tag.name;
@ -105,7 +101,8 @@ export default {
}; };
}, },
watch: { watch: {
$route: route, $route: fetchReleases,
'$store.state.ui.tagFilter': fetchReleases,
}, },
mounted, mounted,
methods: { methods: {

View File

@ -27,6 +27,7 @@ function initActorActions(store, router) {
$orderBy:[ReleasesOrderBy!] $orderBy:[ReleasesOrderBy!]
$selectableTags: [String], $selectableTags: [String],
$includedTags: [String!], $includedTags: [String!],
$exclude: [String!],
$mode: String!, $mode: String!,
$includedEntities: [ReleaseFilter!], $includedEntities: [ReleaseFilter!],
$includedActors: [ReleaseFilter!] $includedActors: [ReleaseFilter!]
@ -203,6 +204,17 @@ function initActorActions(store, router) {
{ {
or: $includedActors or: $includedActors
} }
{
releasesTagsConnection: {
none: {
tag: {
slug: {
in: $exclude
}
}
}
}
}
] ]
} }
selectedTags: $includedTags selectedTags: $includedTags
@ -228,7 +240,7 @@ function initActorActions(store, router) {
beforeTime: store.getters.before, beforeTime: store.getters.before,
selectableTags: config.selectableTags, selectableTags: config.selectableTags,
orderBy, orderBy,
excludeTags: store.state.ui.filter, exclude: store.state.ui.tagFilter,
includedTags, includedTags,
includedEntities: getIncludedEntities(router), includedEntities: getIncludedEntities(router),
includedActors: getIncludedActors(router), includedActors: getIncludedActors(router),