Added filter presets to consent warning. Updating scenes when tag filter changes.
This commit is contained in:
parent
ab83a42dfb
commit
62ef041b35
|
@ -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: {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -170,6 +170,7 @@ export default {
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route: route,
|
$route: route,
|
||||||
|
'$store.state.ui.tagFilter': fetchEntity,
|
||||||
},
|
},
|
||||||
mounted,
|
mounted,
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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),
|
||||||
|
|
Loading…
Reference in New Issue