boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Changed tags on tag overview.

Browse Source
This commit is contained in:
ThePendulum
2020-03-23 04:58:23 +01:00
parent 0e1a760eb3
commit aa488cc6e3
259 changed files with 779 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
assets/components/tags/tags.vue
View File

@@ -1,63 +1,8 @@
<template>
<div class="tags">
<h3 class="heading">Oral</h3>
<div class="tiles">
<Tag
v-for="tag in tags.oral"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
<h3 class="heading">Penetration</h3>
<div class="tiles">
<Tag
v-for="tag in tags.penetration"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
<h3 class="heading">Group</h3>
<div class="tiles">
<Tag
v-for="tag in tags.group"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
<h3 class="heading">Ethnicity</h3>
<div class="tiles">
<Tag
v-for="tag in tags.ethnicity"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
<h3 class="heading">Finish</h3>
<div class="tiles">
<Tag
v-for="tag in tags.finish"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
<h3 class="heading">Misc</h3>
<div
v-if="tags.misc"
class="tiles"
>
<Tag
v-for="tag in tags.misc.concat(tags.body)"
v-for="tag in popularTags"
:key="`tag-${tag.id}`"
:tag="tag"
/>
@@ -73,53 +18,59 @@ async function mounted() {
slugs: [
'airtight',
'anal',
'anal-creampie',
'asian',
'ass-eating',
'ass-to-mouth',
'bdsm',
'blowbang',
'blonde',
'blowjob',
'bukkake',
'brunette',
'caucasian',
'creampie',
'da-tp',
'deepthroat',
'double-anal',
'double-blowjob',
'double-penetration',
'double-vaginal',
'dv-tp',
'ebony',
'facefucking',
'facial',
'gangbang',
'gaping',
'interracial',
'latina',
'lesbian',
'maid',
'mff',
'mfm',
'oral-creampie',
'orgy',
'pussy-eating',
'swallowing',
'tattoo',
'trainbang',
'triple-anal',
'redhead',
'schoolgirl',
'teen',
],
});
this.tags = tags.reduce((acc, tag) => {
if (!tag.group) {
return { ...acc, misc: [...acc.misc, tag] };
}
const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});
if (acc[tag.group.slug]) {
return { ...acc, [tag.group.slug]: [...acc[tag.group.slug], tag] };
}
return { ...acc, [tag.group.slug]: [tag] };
}, { misc: [] });
this.popularTags = [
'anal',
'teen',
'lesbian',
'mff',
'mfm',
'orgy',
'double-penetration',
'gangbang',
'airtight',
'creampie',
'facial',
'interracial',
'blowjob',
'deepthroat',
'facefucking',
'asian',
'ebony',
'latina',
'caucasian',
'blonde',
'brunette',
'redhead',
'schoolgirl',
'maid',
].map(tagSlug => tagsBySlug[tagSlug]);
this.pageTitle = 'Tags';
}
@@ -130,7 +81,7 @@ export default {
},
data() {
return {
tags: {},
popularTags: [],
pageTitle: null,
};
},
@@ -148,8 +99,7 @@ export default {
.tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
grid-gap: .5rem;
margin: 0 0 1.5rem 0;
grid-gap: 2rem;
}
.heading {

12
assets/components/tile/network.vue
View File

@@ -3,6 +3,7 @@
:href="`/network/${network.slug}`"
:title="network.name"
class="tile"
:class="{ sfw }"
>
<img
:src="`/img/logos/${network.slug}/network.png`"
@@ -13,6 +14,10 @@
</template>
<script>
function sfw() {
return this.$store.state.ui.sfw;
}
export default {
props: {
network: {
@@ -20,6 +25,9 @@ export default {
default: null,
},
},
computed: {
sfw,
},
};
</script>
@@ -28,7 +36,7 @@ export default {
.tile {
height: 6rem;
background: $profile;
background: var(--profile);
display: flex;
flex-shrink: 0;
flex-direction: column;
@@ -57,7 +65,7 @@ export default {
}
.title {
color: $text;
color: var(--text);
height: 100%;
display: flex;
align-items: center;

14
assets/css/_theme.scss
View File

@@ -23,9 +23,8 @@ $highlight-strong: rgba(255, 255, 255, .7);
$highlight-weak: rgba(255, 255, 255, .2);
$highlight-hint: rgba(255, 255, 255, .075);
$logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
$logo-highlight: drop-shadow(0 0 1px $highlight);
$logo-shadow: drop-shadow(1px 0 0 var(--shadow-weak)) drop-shadow(-1px 0 0 var(--shadow-weak)) drop-shadow(0 1px 0 var(--shadow-weak)) drop-shadow(0 -1px 0 var(--shadow-weak));
$logo-highlight: drop-shadow(0 0 1px var(--highlight));
$profile: #222;
$tile: #2a2a2a;
@@ -47,11 +46,15 @@ $female: #f0a;
--lighten: rgba(255, 255, 255, .5);
--lighten-weak: rgba(255, 255, 255, .2);
--logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
--logo-highlight: drop-shadow(0 0 1px $highlight);
}
.light {
--text: #222;
--text-contrast: #fff;
--background: #fff;
--background-dim: #fafafa;
@@ -80,8 +83,9 @@ $female: #f0a;
.dark {
--text: #fff;
--text-contrast: #222;
--background: #333;
--background-dim: #222;
--background: #222;
--background-dim: #181818;
--profile: #222;
--tile: #2a2a2a;