2019-12-01 04:32:47 +00:00
|
|
|
<template>
|
2020-05-18 02:28:38 +00:00
|
|
|
<div class="tags">
|
2021-08-22 01:14:02 +00:00
|
|
|
<div class="content-inner">
|
2021-10-16 22:28:13 +00:00
|
|
|
<SearchBar
|
|
|
|
:placeholder="'Search tags'"
|
|
|
|
class="search"
|
|
|
|
/>
|
2020-03-25 01:48:54 +00:00
|
|
|
|
2020-05-18 02:28:38 +00:00
|
|
|
<div
|
2021-08-22 01:14:02 +00:00
|
|
|
v-for="(tags, category) in categories"
|
|
|
|
:key="category"
|
|
|
|
class="category"
|
2020-05-18 02:28:38 +00:00
|
|
|
>
|
2021-08-22 01:14:02 +00:00
|
|
|
<h3 class="heading">{{ category }}</h3>
|
|
|
|
|
|
|
|
<div
|
|
|
|
:key="sfw"
|
|
|
|
class="tiles"
|
|
|
|
>
|
|
|
|
<Tag
|
|
|
|
v-for="tag in tags"
|
|
|
|
:key="`tag-${tag.id}`"
|
|
|
|
:tag="tag"
|
|
|
|
:lazy="true"
|
|
|
|
/>
|
|
|
|
</div>
|
2020-05-18 02:28:38 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-08-15 17:04:33 +00:00
|
|
|
|
|
|
|
<Footer />
|
2020-05-18 02:28:38 +00:00
|
|
|
</div>
|
2019-12-01 04:32:47 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-06-28 01:19:09 +00:00
|
|
|
import Tag from './tile.vue';
|
2021-08-22 01:14:02 +00:00
|
|
|
import SearchBar from '../search/bar.vue';
|
|
|
|
|
|
|
|
const tagSlugsByCategory = {
|
|
|
|
popular: [
|
|
|
|
'anal',
|
|
|
|
'lesbian',
|
|
|
|
'interracial',
|
|
|
|
'mff',
|
|
|
|
'mfm',
|
|
|
|
'teen',
|
|
|
|
'milf',
|
|
|
|
'blowjob',
|
2022-02-08 23:19:54 +00:00
|
|
|
'gay',
|
|
|
|
'transsexual',
|
2021-08-22 01:14:02 +00:00
|
|
|
'dp',
|
|
|
|
'gangbang',
|
|
|
|
'facial',
|
|
|
|
'creampie',
|
|
|
|
'squirting',
|
|
|
|
],
|
|
|
|
appearance: [
|
|
|
|
'asian',
|
|
|
|
'black',
|
|
|
|
'latina',
|
|
|
|
'white',
|
|
|
|
'natural-boobs',
|
|
|
|
'enhanced-boobs',
|
|
|
|
'blonde',
|
|
|
|
'brunette',
|
|
|
|
'redhead',
|
|
|
|
'tattoos',
|
|
|
|
'piercings',
|
|
|
|
],
|
2022-02-07 23:19:34 +00:00
|
|
|
sexuality: [
|
|
|
|
'gay',
|
|
|
|
'bisexual',
|
|
|
|
'transsexual',
|
|
|
|
],
|
2021-08-22 01:14:02 +00:00
|
|
|
oral: [
|
|
|
|
'blowjob',
|
|
|
|
'pussy-eating',
|
|
|
|
'ass-eating',
|
|
|
|
'deepthroat',
|
|
|
|
'facefucking',
|
2021-10-16 22:28:13 +00:00
|
|
|
'69',
|
2021-08-22 01:14:02 +00:00
|
|
|
'atm',
|
|
|
|
],
|
|
|
|
manual: [
|
|
|
|
'handjob',
|
|
|
|
'fingering',
|
|
|
|
'anal-fingering',
|
|
|
|
'titty-fucking',
|
|
|
|
'fisting',
|
|
|
|
'anal-fisting',
|
|
|
|
],
|
|
|
|
group: [
|
|
|
|
'mfm',
|
|
|
|
'mff',
|
|
|
|
'orgy',
|
|
|
|
'gangbang',
|
|
|
|
'blowbang',
|
|
|
|
],
|
|
|
|
cumshot: [
|
|
|
|
'facial',
|
|
|
|
'creampie',
|
|
|
|
'cum-in-mouth',
|
|
|
|
'cum-on-boobs',
|
|
|
|
'cum-on-butt',
|
|
|
|
'cum-on-pussy',
|
|
|
|
'anal-creampie',
|
|
|
|
'oral-creampie',
|
2021-10-16 22:28:13 +00:00
|
|
|
'bukkake',
|
2021-08-22 01:14:02 +00:00
|
|
|
'fake-cum',
|
|
|
|
],
|
|
|
|
roleplay: [
|
|
|
|
'family',
|
|
|
|
'parody',
|
|
|
|
'schoolgirl',
|
|
|
|
'nurse',
|
|
|
|
'maid',
|
|
|
|
'nun',
|
|
|
|
],
|
2022-02-27 20:15:05 +00:00
|
|
|
extreme: [
|
|
|
|
'dp',
|
|
|
|
'airtight',
|
|
|
|
'dap',
|
|
|
|
'dvp',
|
|
|
|
'triple-penetration',
|
|
|
|
'tap',
|
|
|
|
'tvp',
|
|
|
|
],
|
2021-08-22 01:14:02 +00:00
|
|
|
fetish: [
|
|
|
|
'bdsm',
|
|
|
|
'femdom',
|
|
|
|
'bondage',
|
2021-09-28 18:45:22 +00:00
|
|
|
'free-use',
|
2021-08-22 01:14:02 +00:00
|
|
|
'latex',
|
|
|
|
'blindfold',
|
|
|
|
],
|
2022-02-27 20:15:05 +00:00
|
|
|
toys: [
|
|
|
|
'toys',
|
|
|
|
'toy-anal',
|
|
|
|
'toy-dp',
|
|
|
|
'double-dildo',
|
|
|
|
'double-dildo-blowjob',
|
|
|
|
'double-dildo-kiss',
|
|
|
|
'double-dildo-anal',
|
|
|
|
'double-dildo-dp',
|
2021-08-22 01:14:02 +00:00
|
|
|
],
|
|
|
|
misc: [
|
|
|
|
'gaping',
|
|
|
|
'squirting',
|
|
|
|
'oil',
|
|
|
|
'vr',
|
|
|
|
'bts',
|
|
|
|
],
|
|
|
|
};
|
2019-12-01 04:32:47 +00:00
|
|
|
|
2020-04-08 12:50:43 +00:00
|
|
|
function sfw() {
|
2020-05-18 02:28:38 +00:00
|
|
|
return this.$store.state.ui.sfw;
|
2020-04-08 12:50:43 +00:00
|
|
|
}
|
|
|
|
|
2021-08-22 01:14:02 +00:00
|
|
|
async function fetchTags() {
|
|
|
|
if (this.$route.query.query) {
|
|
|
|
await this.searchTags();
|
|
|
|
return;
|
|
|
|
}
|
2020-03-25 01:48:54 +00:00
|
|
|
|
2020-05-18 02:28:38 +00:00
|
|
|
const tags = await this.$store.dispatch('fetchTags', {
|
|
|
|
slugs: Object.values(tagSlugsByCategory).flat(),
|
|
|
|
});
|
2019-12-04 20:58:08 +00:00
|
|
|
|
2020-05-18 02:28:38 +00:00
|
|
|
const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});
|
2020-03-23 03:58:23 +00:00
|
|
|
|
2022-02-07 23:19:34 +00:00
|
|
|
this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => {
|
|
|
|
const categoryTags = tagSlugs.map((tagSlug) => tagsBySlug[tagSlug]).filter(Boolean);
|
|
|
|
|
|
|
|
if (categoryTags.length === 0) {
|
|
|
|
return acc;
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
...acc,
|
|
|
|
[category]: categoryTags,
|
|
|
|
};
|
|
|
|
}, {});
|
2021-08-22 01:14:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
async function searchTags() {
|
|
|
|
const tags = await this.$store.dispatch('searchTags', {
|
|
|
|
minLength: 1,
|
|
|
|
query: this.$route.query.query,
|
|
|
|
limit: 20,
|
|
|
|
});
|
2020-03-25 01:48:54 +00:00
|
|
|
|
2021-08-22 01:14:02 +00:00
|
|
|
this.categories = {
|
|
|
|
results: tags,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
async function mounted() {
|
2020-05-18 02:28:38 +00:00
|
|
|
this.pageTitle = 'Tags';
|
2021-08-22 01:14:02 +00:00
|
|
|
|
|
|
|
await this.fetchTags();
|
2019-12-01 04:32:47 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default {
|
2020-05-18 02:28:38 +00:00
|
|
|
components: {
|
|
|
|
Tag,
|
2021-08-22 01:14:02 +00:00
|
|
|
SearchBar,
|
2020-05-18 02:28:38 +00:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
categories: {},
|
|
|
|
pageTitle: null,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
sfw,
|
|
|
|
},
|
2021-08-22 01:14:02 +00:00
|
|
|
watch: {
|
|
|
|
$route: fetchTags,
|
2022-02-07 23:19:34 +00:00
|
|
|
'$store.state.ui.tagFilter': fetchTags,
|
2021-08-22 01:14:02 +00:00
|
|
|
},
|
2020-05-18 02:28:38 +00:00
|
|
|
mounted,
|
2021-08-22 01:14:02 +00:00
|
|
|
methods: {
|
|
|
|
fetchTags,
|
|
|
|
searchTags,
|
|
|
|
},
|
2019-12-01 04:32:47 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2021-10-30 22:31:18 +00:00
|
|
|
@import 'breakpoints';
|
2019-12-09 04:00:49 +00:00
|
|
|
|
2019-12-01 04:32:47 +00:00
|
|
|
.tags {
|
2021-08-22 01:14:02 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.content-inner {
|
2020-08-15 17:04:33 +00:00
|
|
|
padding: 1rem 1rem 0 1rem;
|
2019-12-04 20:58:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.tiles {
|
2019-12-01 04:32:47 +00:00
|
|
|
display: grid;
|
2020-10-07 01:40:19 +00:00
|
|
|
grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
|
2020-07-05 02:10:35 +00:00
|
|
|
grid-gap: 1rem;
|
2020-03-23 00:43:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.heading {
|
2020-03-25 01:48:54 +00:00
|
|
|
text-transform: capitalize;
|
2020-09-21 03:11:24 +00:00
|
|
|
padding: 0 0 0 .5rem;
|
2021-10-16 22:28:13 +00:00
|
|
|
margin: 1.25rem 0 1rem 0;
|
2020-09-21 03:11:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.category:first-child .heading {
|
|
|
|
margin: .5rem 0 1rem 0;
|
2019-12-01 04:32:47 +00:00
|
|
|
}
|
2020-02-19 03:41:53 +00:00
|
|
|
|
2021-10-16 22:28:13 +00:00
|
|
|
.search {
|
|
|
|
margin: 0 0 .25rem 0;
|
|
|
|
}
|
|
|
|
|
2021-10-30 22:31:18 +00:00
|
|
|
@media(max-width: $breakpoint-mega) {
|
2020-02-19 03:41:53 +00:00
|
|
|
.tiles {
|
2021-10-30 22:31:18 +00:00
|
|
|
grid-template-columns: repeat(auto-fill, minmax(17.75rem, .5fr));
|
2020-02-19 03:41:53 +00:00
|
|
|
}
|
2021-10-30 22:31:18 +00:00
|
|
|
|
|
|
|
::v-deep(.poster),
|
|
|
|
::v-deep(.blank) {
|
|
|
|
height: 12rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media(max-width: $breakpoint-kilo) {
|
|
|
|
.tiles {
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
|
|
|
grid-gap: .5rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.poster),
|
|
|
|
::v-deep(.blank) {
|
|
|
|
height: 14rem;
|
|
|
|
}
|
2020-02-19 03:41:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media(max-width: $breakpoint) {
|
|
|
|
.tiles {
|
2021-10-30 22:31:18 +00:00
|
|
|
grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
|
2020-07-05 02:10:35 +00:00
|
|
|
grid-gap: .5rem;
|
2020-06-28 01:19:09 +00:00
|
|
|
}
|
2021-10-30 22:31:18 +00:00
|
|
|
|
|
|
|
::v-deep(.poster),
|
|
|
|
::v-deep(.blank) {
|
|
|
|
height: 11rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media(max-width: $breakpoint-small) {
|
|
|
|
::v-deep(.poster),
|
|
|
|
::v-deep(.blank) {
|
|
|
|
height: 10rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media(max-width: $breakpoint-micro) {
|
|
|
|
.tiles {
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.poster),
|
|
|
|
::v-deep(.blank) {
|
|
|
|
height: 7.5rem;
|
|
|
|
}
|
2020-06-28 01:19:09 +00:00
|
|
|
}
|
|
|
|
|
2021-10-30 22:31:18 +00:00
|
|
|
@media(max-width: $breakpoint-mini) {
|
2020-06-28 01:19:09 +00:00
|
|
|
.tiles {
|
2021-10-30 22:31:18 +00:00
|
|
|
grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
|
2020-02-19 03:41:53 +00:00
|
|
|
}
|
2021-10-30 22:31:18 +00:00
|
|
|
|
|
|
|
::v-deep(.poster),
|
|
|
|
::v-deep(.blank) {
|
|
|
|
height: 12rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media(max-width: $breakpoint-nano) {
|
|
|
|
::v-deep(.poster),
|
|
|
|
::v-deep(.blank) {
|
|
|
|
height: 10rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media(max-width: $breakpoint-pico) {
|
|
|
|
::v-deep(.poster),
|
|
|
|
::v-deep(.blank) {
|
|
|
|
height: 8rem;
|
|
|
|
}
|
2020-02-19 03:41:53 +00:00
|
|
|
}
|
2019-12-01 04:32:47 +00:00
|
|
|
</style>
|