forked from DebaucheryLibrarian/traxxx
Updated tag page layout. Added shoot date property. Showing parent favicon on compact entity page. Re-added 'new' indicator on tile. Added Family Sinner to Mile High Media. Various fixes and improvements.
This commit is contained in:
@@ -1,104 +1,105 @@
|
||||
<template>
|
||||
<div class="photos">
|
||||
<ul class="nolist photos-inner">
|
||||
<li>
|
||||
<a
|
||||
v-if="tag.poster"
|
||||
:href="`/img/${poster.path}`"
|
||||
:title="poster.comment"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="photo-link"
|
||||
>
|
||||
<img
|
||||
:src="`/img/${poster.thumbnail}`"
|
||||
:alt="tag.poster.comment"
|
||||
class="poster"
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<div class="photos">
|
||||
<a
|
||||
v-if="tag.poster"
|
||||
:href="`/img/${poster.path}`"
|
||||
:title="poster.comment"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="photo-link"
|
||||
>
|
||||
<img
|
||||
:src="`/img/${poster.thumbnail}`"
|
||||
:alt="tag.poster.comment"
|
||||
class="poster"
|
||||
>
|
||||
</a>
|
||||
|
||||
<li
|
||||
v-for="photo in photos"
|
||||
:key="`photo-${photo.id}`"
|
||||
>
|
||||
<a
|
||||
:title="photo.comment"
|
||||
:href="`/img/${photo.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="photo-link"
|
||||
>
|
||||
<img
|
||||
:src="`/img/${photo.thumbnail}`"
|
||||
:alt="photo.comment"
|
||||
class="photo"
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
v-for="photo in photos"
|
||||
:key="`photo-${photo.id}`"
|
||||
:title="photo.comment"
|
||||
:href="`/img/${photo.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="photo-link"
|
||||
>
|
||||
<img
|
||||
:src="`/img/${photo.thumbnail}`"
|
||||
:alt="photo.comment"
|
||||
class="photo"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function poster() {
|
||||
if (this.$store.state.ui.sfw) {
|
||||
return this.tag.poster.sfw;
|
||||
}
|
||||
if (this.$store.state.ui.sfw) {
|
||||
return this.tag.poster.sfw;
|
||||
}
|
||||
|
||||
return this.tag.poster;
|
||||
return this.tag.poster;
|
||||
}
|
||||
|
||||
function photos() {
|
||||
if (this.$store.state.ui.sfw) {
|
||||
return this.tag.photos.map(photo => photo.sfw);
|
||||
}
|
||||
if (this.$store.state.ui.sfw) {
|
||||
return this.tag.photos.map(photo => photo.sfw);
|
||||
}
|
||||
|
||||
return this.tag.photos;
|
||||
return this.tag.photos;
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
tag: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
poster,
|
||||
photos,
|
||||
},
|
||||
props: {
|
||||
tag: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
poster,
|
||||
photos,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.photos {
|
||||
background: $profile;
|
||||
display: flex;
|
||||
padding: 0 1rem;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
font-size: 0;
|
||||
|
||||
&.compact {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
padding: 0 1rem 0 1rem;
|
||||
overflow-x: auto;
|
||||
|
||||
.photos-inner {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.photo-link {
|
||||
display: inline-block;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 1rem;
|
||||
|
||||
.poster,
|
||||
.photo {
|
||||
height: 18rem;
|
||||
margin: 0 .5rem .5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-link:not(:last-child) {
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
|
||||
.poster,
|
||||
.photo {
|
||||
width: 100%;
|
||||
margin: 0 0 .5rem 0;
|
||||
height: 15rem;
|
||||
box-shadow: 0 0 3px var(--shadow-weak);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,41 +13,26 @@
|
||||
{{ tag.name }}
|
||||
</h2>
|
||||
|
||||
<p
|
||||
<div
|
||||
v-if="description"
|
||||
class="description header-description"
|
||||
v-html="description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<h2 class="title">
|
||||
<Icon icon="price-tag4" />
|
||||
{{ tag.name }}
|
||||
</h2>
|
||||
|
||||
<div class="sidebar-content">
|
||||
<p
|
||||
v-if="description"
|
||||
class="description"
|
||||
v-html="description"
|
||||
/>
|
||||
|
||||
<Photos
|
||||
v-if="hasMedia"
|
||||
:tag="tag"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Scroll
|
||||
v-if="hasMedia"
|
||||
:expanded="expanded"
|
||||
class="scroll-light"
|
||||
@expand="(state) => expanded = state"
|
||||
>
|
||||
<Photos
|
||||
:tag="tag"
|
||||
:class="{ expanded }"
|
||||
/>
|
||||
</Scroll>
|
||||
|
||||
<div class="content-inner">
|
||||
<Photos
|
||||
v-if="hasMedia"
|
||||
:tag="tag"
|
||||
class="compact"
|
||||
/>
|
||||
|
||||
<FilterBar :fetch-releases="fetchReleases" />
|
||||
<Releases :releases="tag.releases" />
|
||||
</div>
|
||||
@@ -64,6 +49,7 @@ import escapeHtml from '../../../src/utils/escape-html';
|
||||
import FilterBar from '../header/filter-bar.vue';
|
||||
import Photos from './photos.vue';
|
||||
import Releases from '../releases/releases.vue';
|
||||
import Scroll from '../scroll/scroll.vue';
|
||||
|
||||
const converter = new Converter();
|
||||
|
||||
@@ -89,8 +75,9 @@ async function mounted() {
|
||||
export default {
|
||||
components: {
|
||||
FilterBar,
|
||||
Photos,
|
||||
Releases,
|
||||
Photos,
|
||||
Scroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -99,6 +86,7 @@ export default {
|
||||
releases: null,
|
||||
pageTitle: null,
|
||||
hasMedia: false,
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -133,71 +121,14 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&.nomedia {
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: var(--profile);
|
||||
color: var(--text-light);
|
||||
display: none;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
.title {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: var(--profile);
|
||||
color: var(--text-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 25rem;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 0 1rem;
|
||||
margin: -1rem 0 0 0;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
text-transform: capitalize;
|
||||
@@ -210,33 +141,11 @@ export default {
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.releases {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dark .sidebar {
|
||||
border-right: solid 1px var(--shadow-hint);
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
.tag {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.photos.compact {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user