DebaucheryLibrarian/traxxx
2
1
Fork 1
Code Issues 39 Pull Requests 1 Releases Wiki Activity

Move tag posters and photos to media database.

Browse Source
This commit is contained in:
ThePendulum
2019-12-04 21:58:08 +01:00
parent cf81aa99e0
commit 55e3130062
51 changed files with 861 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/components/actors/actor.vue
View File

@@ -188,7 +188,6 @@
<p
v-if="actor.description"
class="description"
@wheel.prevent="scrollDescription"
>{{ actor.description }}</p>
<li
@@ -268,10 +267,6 @@ function scrollPhotos(event) {
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
function scrollDescription(event) {
event.currentTarget.scrollTop += event.deltaY; // eslint-disable-line no-param-reassign
}
async function mounted() {
[this.actor] = await Promise.all([
this.$store.dispatch('fetchActors', { actorId: this.$route.params.actorSlug }),
@@ -305,7 +300,6 @@ export default {
mounted,
methods: {
fetchReleases,
scrollDescription,
scrollPhotos,
},
};

1
assets/components/actors/photos.vue
View File

@@ -58,7 +58,6 @@ export default {
}
.photo-link {
height: 15rem;
}
.photo {

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

@@ -13,7 +13,7 @@
class="nav-link"
:class="{ active: active === 'actors' }"
>
<Icon icon="stars" />Actors
<Icon icon="stars" /><span class="nav-label">Actors</span>
</router-link>
</li>
@@ -23,7 +23,7 @@
class="nav-link"
:class="{ active: active === 'networks' }"
>
<Icon icon="earth2" />Networks
<Icon icon="earth2" /><span class="nav-label">Networks</span>
</router-link>
</li>
@@ -33,7 +33,7 @@
class="nav-link"
:class="{ active: active === 'tags' }"
>
<Icon icon="price-tags" />Tags
<Icon icon="price-tags" /><span class="nav-label">Tags</span>
</router-link>
</li>
</ul>
@@ -83,8 +83,9 @@ export default {
}
.nav-link {
display: inline-flex;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-bottom: solid 5px transparent;
color: $shadow;
@@ -114,4 +115,24 @@ export default {
}
}
}
@media(max-width: $breakpoint0) {
.nav-label {
display: none;
}
.nav .nolist {
display: flex;
}
.nav,
.nav-item {
flex-grow: 1;
}
.nav-link {
}
}
</style>

2
assets/components/networks/networks.vue
View File

@@ -31,7 +31,7 @@ export default {
<style lang="scss" scoped>
.networks {
display: grid;
grid-template-columns: repeat(auto-fit, 15rem);
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
grid-gap: 1rem;
padding: 1rem;
}

120
assets/components/tags/tag.vue
View File

@@ -1,39 +1,72 @@
<template>
<div
v-if="tag"
class="content tag"
class="content"
>
<FilterBar :fetch-releases="fetchReleases" />
<div class="header">
<img
:src="`/img/tags/${tag.slug}.jpg`"
class="poster"
>
<div class="tag">
<div class="sidebar">
<a
v-if="tag.poster"
:href="`/media/${tag.poster.path}`"
:title="tag.poster.comment"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/media/${tag.poster.thumbnail}`"
class="poster"
>
</a>
<span>
<h2 class="title">
<Icon icon="price-tag4" />
{{ tag.name }}
</h2>
<span>
<h2 class="title">
<Icon icon="price-tag4" />
{{ tag.name }}
</h2>
<span class="description">{{ tag.description }}</span>
</span>
</div>
<p
class="description"
v-html="description"
/>
</span>
<div class="content-inner">
<Releases
:releases="releases"
:context="tag.name"
/>
<div class="photos">
<a
v-for="photo in tag.photos"
:key="`photo-${photo.id}`"
:title="photo.comment"
:href="`/media/${photo.path}`"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/media/${photo.thumbnail}`"
class="photo"
>
</a>
</div>
</div>
<div class="content-inner">
<Releases :releases="releases" />
</div>
</div>
</div>
</template>
<script>
/* eslint-disable no-v-html */
import { Converter } from 'showdown';
import escapeHtml from '../../../src/utils/escape-html';
import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue';
const converter = new Converter();
async function fetchReleases() {
this.releases = await this.$store.dispatch('fetchTagReleases', this.$route.params.tagSlug);
}
@@ -44,6 +77,8 @@ async function mounted() {
this.fetchReleases(),
]);
this.description = converter.makeHtml(escapeHtml(this.tag.description));
this.pageTitle = this.tag.name;
}
@@ -66,27 +101,62 @@ export default {
};
</script>
<style lang="scss">
@import 'theme';
.description a {
color: $link;
text-decoration: inherit;
&:hover {
color: $primary;
}
}
</style>
<style lang="scss" scoped>
@import 'theme';
.header {
.tag {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: stretch;
}
.sidebar {
background: $profile;
color: $text-contrast;
width: 25rem;
box-sizing: border-box;
padding: 1rem;
}
.poster {
width: 30rem;
height: 18rem;
width: 100%;
height: 15rem;
object-fit: cover;
}
.title {
display: inline-block;
padding: 1rem;
margin: 0 .5rem 0 0;
padding: 0;
margin: 1rem 0;
text-transform: capitalize;
.icon {
fill: $text-contrast;
width: 1.25rem;
height: 1.25rem;
}
}
.description {
padding: 0;
margin: 0 0 1rem 0;
line-height: 1.5;
}
.photo {
width: 100%;
}
</style>

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

@@ -1,10 +1,44 @@
<template>
<div class="tags">
<Tag
v-for="tag in tags"
:key="`tag-${tag.id}`"
:tag="tag"
/>
<h3>Penetration</h3>
<div class="tiles">
<Tag
v-for="tag in tags.penetration"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
<h3>Group</h3>
<div class="tiles">
<Tag
v-for="tag in tags.group"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
<h3>Ethnicity</h3>
<div class="tiles">
<Tag
v-for="tag in tags.ethnicity"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
<h3>Finish</h3>
<div class="tiles">
<Tag
v-for="tag in tags.finish"
:key="`tag-${tag.id}`"
:tag="tag"
/>
</div>
</div>
</template>
@@ -12,7 +46,42 @@
import Tag from '../tile/tag.vue';
async function mounted() {
this.tags = await this.$store.dispatch('fetchTags', { priority: [9] });
const tags = await this.$store.dispatch('fetchTags', {
slug: [
'airtight',
'anal',
'double-anal',
'double-penetration',
'double-vaginal',
'da-tp',
'dv-tp',
'triple-anal',
'blowbang',
'gangbang',
'mff',
'mfm',
'orgy',
'asian',
'caucasian',
'ebony',
'interracial',
'latina',
'anal-creampie',
'bukkake',
'creampie',
'facial',
'oral-creampie',
'swallowing',
],
});
this.tags = tags.reduce((acc, tag) => {
if (acc[tag.group.slug]) {
return { ...acc, [tag.group.slug]: [...acc[tag.group.slug], tag] };
}
return { ...acc, [tag.group.slug]: [tag] };
}, {});
}
export default {
@@ -21,7 +90,7 @@ export default {
},
data() {
return {
tags: [],
tags: {},
};
},
mounted,
@@ -30,9 +99,12 @@ export default {
<style lang="scss" scoped>
.tags {
padding: 1rem;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: .5rem;
padding: 1rem;
}
</style>

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

@@ -4,15 +4,14 @@
:title="tag.name"
class="tile"
>
<span class="title">{{ tag.name }}</span>
<img
v-if="imageAvailable"
:src="`/img/tags/${tag.slug}_thumb.jpg`"
v-if="tag.poster"
:src="`/media/${tag.poster.thumbnail}`"
:alt="tag.name"
class="poster"
@error="imageAvailable = false"
>
<span class="title">{{ tag.name }}</span>
</a>
</template>
@@ -24,11 +23,6 @@ export default {
default: null,
},
},
data() {
return {
imageAvailable: true,
};
},
};
</script>
@@ -36,7 +30,8 @@ export default {
@import 'theme';
.tile {
background: $background;
color: $text-contrast;
background: $profile;
display: flex;
flex-direction: column;
align-items: center;
@@ -53,20 +48,13 @@ export default {
}
.title {
color: $text;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: bold;
padding: .5rem 1rem;
}
.title {
color: $text;
height: 100%;
display: flex;
align-items: center;
margin: 0;
font-weight: bold;
text-transform: capitalize;
}
</style>