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

Added compact sidebar. Added tag sections and posters.

Browse Source
This commit is contained in:
ThePendulum
2020-03-25 02:48:54 +01:00
parent d724f96728
commit 15a386ad05
48 changed files with 466 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
assets/components/container/container.vue
View File

@@ -3,7 +3,12 @@
class="container"
:class="theme"
>
<Header />
<Sidebar
v-if="showSidebar"
:toggle-sidebar="toggleSidebar"
/>
<Header :toggle-sidebar="toggleSidebar" />
<div class="content">
<!-- key forces rerender when new and old path use same component -->
@@ -15,21 +20,45 @@
<script>
import { mapState } from 'vuex';
import EventBus from '../../js/event-bus';
import Header from '../header/header.vue';
import Sidebar from '../sidebar/sidebar.vue';
function theme(state) {
return state.ui.theme;
}
function toggleSidebar(state) {
this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
}
function mounted() {
document.addEventListener('click', () => {
EventBus.$emit('blur');
this.showSidebar = false;
});
}
export default {
components: {
Header,
Sidebar,
},
data() {
return {
showSidebar: false,
};
},
computed: {
...mapState({
theme,
}),
},
mounted,
methods: {
toggleSidebar,
},
};
</script>
@@ -37,11 +66,12 @@ export default {
@import 'theme';
.container {
background: var(--background-dim);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--background-dim);
}
.content {

85
assets/components/header/header.vue
View File

@@ -1,6 +1,12 @@
<template>
<header class="header">
<div class="header-nav">
<Icon
icon="menu"
class="sidebar-toggle"
@click.native.stop="toggleSidebar"
/>
<router-link
to="/home"
class="logo-link"
@@ -8,11 +14,6 @@
<Icon
icon="logo"
/>
<Icon
icon="logo_t"
class="logo-compact"
/>
</h1></router-link>
<nav class="nav">
@@ -148,6 +149,12 @@ export default {
components: {
Search,
},
props: {
toggleSidebar: {
type: Function,
default: null,
},
},
data() {
return {
searching: false,
@@ -170,6 +177,7 @@ export default {
@import 'theme';
.header {
height: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
@@ -182,6 +190,7 @@ export default {
.header-nav {
display: flex;
align-items: center;
height: 100%;
}
.header-section {
@@ -191,6 +200,19 @@ export default {
flex-direction: row;
}
.sidebar-toggle {
display: none;
fill: var(--shadow);
padding: 0 1rem;
width: 1.75rem;
height: 100%;
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
.logo-link {
color: inherit;
display: inline-block;
@@ -198,18 +220,15 @@ export default {
}
.logo {
height: 100%;
display: inline-block;
padding: .75rem 0 .75rem 1rem;
padding: 0 0 0 1rem;
margin: 0 1rem 0 0;
.icon {
width: 6rem;
height: 1.5rem;
}
.logo-compact {
display: none;
}
}
.nav {
@@ -264,21 +283,29 @@ export default {
}
}
.search-compact {
display: none;
height: 100%;
}
.search-button {
height: 100%;
padding: 0 1rem;
padding: .25rem 1rem 0 1rem;
background: none;
border: none;
outline: none;
margin: .2rem 0 0 0;
.icon {
fill: var(--shadow);
}
}
.search-compact {
display: none;
&:hover {
cursor: pointer;
.icon {
fill: var(--shadow-strong);
}
}
}
@media(max-width: $breakpoint2) {
@@ -289,33 +316,19 @@ export default {
.search-compact {
display: flex;
}
.header-toggles {
margin: 0;
}
}
@media(max-width: $breakpoint0) {
.nav-label {
.nav {
display: none;
}
.nav .nolist {
display: flex;
}
.nav,
.nav-item {
flex-grow: 1;
}
.logo {
margin: 0 .5rem 0 0;
.icon {
display: none;
}
.icon.logo-compact {
width: 1.5rem;
display: inline-block;
}
.sidebar-toggle {
display: inline-block;
}
}
</style>

197
assets/components/sidebar/sidebar.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div
class="sidebar"
@click.stop
>
<div class="sidebar-header">
<Icon
icon="cross"
class="sidebar-close"
@click.native="toggleSidebar(false)"
/>
<router-link
to="/home"
class="logo-link"
@click.native="toggleSidebar(false)"
>
<h1 class="sidebar-logo">
<div
class="logo logo-primary"
v-html="logoPrimary"
/>
<div
class="logo logo-light"
v-html="logoLight"
/>
</h1>
</router-link>
</div>
<nav class="nav">
<ul class="nolist">
<li class="nav-item">
<router-link
v-slot="{ href, isActive, navigate }"
to="/actors"
@click.native="toggleSidebar(false)"
>
<a
class="nav-link"
:href="href"
:class="{ active: isActive }"
@click="navigate"
>Actors</a>
</router-link>
</li>
<li class="nav-item">
<router-link
v-slot="{ href, isActive, navigate }"
to="/networks"
@click.native="toggleSidebar(false)"
>
<a
class="nav-link"
:href="href"
:class="{ active: isActive }"
@click="navigate"
>Networks</a>
</router-link>
</li>
<li class="nav-item">
<router-link
v-slot="{ href, isActive, navigate }"
to="/tags"
@click.native="toggleSidebar(false)"
>
<a
class="nav-link"
:href="href"
:class="{ active: isActive }"
@click="navigate"
>Tags</a>
</router-link>
</li>
</ul>
</nav>
</div>
</template>
<script>
import logoPrimary from '../../img/logo.svg';
import logoLight from '../../img/logo-light.svg';
export default {
props: {
toggleSidebar: {
type: Function,
default: null,
},
},
data() {
return {
logoPrimary,
logoLight,
};
}
};
</script>
<style lang="scss" scoped>
.sidebar {
display: flex;
flex-direction: column;
width: 15rem;
height: 100%;
position: absolute;
z-index: 10;
color: var(--text-light);
background: var(--primary);
box-shadow: 0 0 3px var(--darken);
}
.sidebar-header {
display: flex;
justify-content: space-between;
height: 3rem;
border-bottom: solid 1px var(--shadow-hint);
margin: 0 0 .5rem 0;
}
.sidebar-close {
width: 1.25rem;
height: 100%;
padding: 0 1.25rem;
fill: var(--lighten);
&:hover {
fill: var(--text-light);
cursor: pointer;
}
}
.sidebar-logo {
height: 100%;
display: flex;
align-items: center;
margin: 0;
}
.logo-link {
display: block;
height: 100%;
padding: 0 1rem;
}
.logo {
width: 6rem;
display: flex;
align-items: center;
margin: 0;
}
.logo-primary {
display: none;
}
.nav-item {
display: block;
}
.nav-link {
color: var(--lighten-strong);
display: block;
padding: 1rem;
text-decoration: none;
font-weight: bold;
&:hover,
&.active {
background: var(--shadow-hint);
}
&.active {
color: var(--text-light);
}
}
.dark .sidebar {
background: var(--profile);
.nav-link.active {
color: var(--primary);
background: var(--shadow-hint);
}
.logo-primary {
display: flex;
}
.logo-light {
display: none;
}
}
</style>

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

@@ -1,11 +1,18 @@
<template>
<div class="tags">
<div class="tiles">
<Tag
v-for="tag in popularTags"
:key="`tag-${tag.id}`"
:tag="tag"
/>
<div
v-for="(tags, category) in categories"
:key="category"
>
<h3 class="heading">{{ category }}</h3>
<div class="tiles">
<Tag
v-for="tag in tags"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
</div>
</div>
</template>
@@ -14,63 +21,76 @@
import Tag from '../tile/tag.vue';
async function mounted() {
const tags = await this.$store.dispatch('fetchTags', {
slugs: [
'airtight',
const tagSlugsByCategory = {
popular: [
'anal',
'asian',
'blonde',
'blowjob',
'brunette',
'caucasian',
'creampie',
'deepthroat',
'double-penetration',
'ebony',
'facefucking',
'facial',
'gangbang',
'interracial',
'latina',
'lesbian',
'maid',
'mff',
'mfm',
'orgy',
'redhead',
'schoolgirl',
'teen',
'milf',
'orgy',
'gangbang',
'double-penetration',
'airtight',
'facial',
'creampie',
'blowjob',
'interracial',
],
extreme: [
'double-anal',
'double-vaginal',
'da-tp',
'dv-tp',
],
oral: [
'deepthroat',
'facefucking',
'double-blowjob',
'blowbang',
'pussy-eating',
'ass-eating',
'ass-to-mouth',
],
cumshot: [
'facial',
'bukkake',
'creampie',
'anal-creampie',
'cum-in-mouth',
],
appearance: [
'asian',
'ebony',
'latina',
'caucasian',
'blonde',
'brunette',
'redhead',
],
roleplay: [
'family',
'schoolgirl',
'maid',
],
tricks: [
'gaping',
],
};
const tags = await this.$store.dispatch('fetchTags', {
slugs: Object.values(tagSlugsByCategory).flat(),
});
const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});
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.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => ({
...acc,
[category]: tagSlugs.map(tagSlug => tagsBySlug[tagSlug]),
}), {});
console.log(this.categories);
this.pageTitle = 'Tags';
}
@@ -81,7 +101,7 @@ export default {
},
data() {
return {
popularTags: [],
categories: {},
pageTitle: null,
};
},
@@ -99,11 +119,13 @@ export default {
.tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
grid-gap: 2rem;
grid-gap: 1rem;
margin: 0 0 1.5rem 0;
}
.heading {
font-size: 1.3rem;
text-transform: capitalize;
}
@media(max-width: $breakpoint3) {

13
assets/components/tile/tag.vue
View File

@@ -37,28 +37,27 @@ export default {
@import 'theme';
.tile {
color: var(--text);
background: var(--background);
color: var(--text-light);
background: var(--profile);
display: flex;
flex-direction: column;
align-items: center;
align-items: left;
justify-content: flex-end;
box-sizing: border-box;
box-shadow: 0 0 3px rgba(0, 0, 0, .25);
text-align: center;
text-decoration: none;
box-shadow: inset 0 0 3px var(--darken);
}
.poster {
width: 100%;
height: 14rem;
object-fit: cover;
box-shadow: 0 0 3px var(--darken);
}
.title {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
padding: .5rem 1rem;
font-weight: bold;

12
assets/css/_theme.scss
View File

@@ -29,7 +29,7 @@ $logo-highlight: drop-shadow(0 0 1px var(--highlight));
$profile: #222;
$tile: #2a2a2a;
$link: #cc4466;
$link: #dd6688;
$empty: #333;
$male: #0af;
@@ -42,10 +42,16 @@ $female: #f0a;
--text-light: #fff;
--darken: rgba(0, 0, 0, .5);
--darken-strong: rgba(0, 0, 0, .7);
--darken-extreme: rgba(0, 0, 0, .9);
--darken-weak: rgba(0, 0, 0, .2);
--darken-hint: rgba(0, 0, 0, .1);
--lighten: rgba(255, 255, 255, .5);
--lighten-strong: rgba(255, 255, 255, .7);
--lighten-extreme: rgba(255, 255, 255, .9);
--lighten-weak: rgba(255, 255, 255, .2);
--lighten-hint: rgba(255, 255, 255, .1);
--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);
@@ -61,7 +67,7 @@ $female: #f0a;
--profile: #222;
--tile: #2a2a2a;
--link: #cc4466;
--link: #dd6688;
--empty: #333;
--male: #0af;
@@ -90,7 +96,7 @@ $female: #f0a;
--profile: #222;
--tile: #2a2a2a;
--link: #cc4466;
--link: #dd6688;
--empty: #333;
--male: #0af;

60
assets/img/logo-light.svg Normal file
View File

@@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
viewBox="0 0 31.051453 7.9586663"
height="7.9586663mm"
width="31.051453mm">
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-77.20239,-97.922958)"
id="layer1">
<g
id="text4520"
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff6c88;fill-opacity:1;stroke:none;stroke-width:0.26458332"
aria-label="traxxx">
<path
id="path828"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
d="m 77.890306,105.74404 h 1.407584 v -4.58258 h 0.846666 V 99.880875 H 79.29789 v -1.957917 h -1.407584 v 1.957917 H 77.20239 v 1.280585 h 0.687916 z" />
<path
id="path830"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
d="M 80.917117,105.74404 H 82.3247 v -3.25967 c -0.03175,-0.86783 0.41275,-1.35466 1.259417,-1.38641 v -1.354668 h -0.105834 c -0.60325,0 -0.899583,0.169333 -1.27,0.709078 v -0.571495 h -1.291166 z" />
<path
id="path832"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
d="m 90.071688,99.880875 h -1.291166 v 0.783165 c -0.486833,-0.64558 -1.068917,-0.920748 -1.915583,-0.920748 -1.735667,0 -2.9845,1.301748 -2.9845,3.090328 0,1.76742 1.23825,3.048 2.95275,3.048 0.8255,0 1.386416,-0.254 1.947333,-0.89958 v 0.762 h 1.291166 z m -3.058583,1.153585 c 1.005417,0 1.725084,0.75141 1.725084,1.82033 0,0.42333 -0.169334,0.91017 -0.423334,1.2065 -0.28575,0.34925 -0.740833,0.52917 -1.280583,0.52917 -1.026583,0 -1.735667,-0.6985 -1.735667,-1.72509 0,-1.06891 0.709084,-1.83091 1.7145,-1.83091 z" />
<path
id="path834"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
d="m 90.558521,105.74404 h 1.693333 l 1.227667,-2.01083 1.227666,2.01083 h 1.693334 l -2.084917,-3.02683 1.788583,-2.836335 h -1.5875 l -1.037166,1.767415 -1.058334,-1.767415 h -1.5875 l 1.799167,2.836335 z" />
<path
id="path836"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
d="m 96.485181,105.74404 h 1.693334 l 1.227666,-2.01083 1.227669,2.01083 h 1.69333 l -2.08492,-3.02683 1.78859,-2.836335 h -1.5875 l -1.037169,1.767415 -1.058333,-1.767415 h -1.5875 l 1.799167,2.836335 z" />
<path
id="path838"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
d="m 102.41184,105.74404 h 1.69334 l 1.22766,-2.01083 1.22767,2.01083 h 1.69333 l -2.08491,-3.02683 1.78858,-2.836335 h -1.5875 l -1.03717,1.767415 -1.05833,-1.767415 h -1.5875 l 1.79917,2.836335 z" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

5
assets/img/menu.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>menu</title>
<path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

5
assets/js/event-bus.js Normal file
View File

@@ -0,0 +1,5 @@
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;