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

Using navigation for toggling album. Using album for tag photos. Fixed portrait albums.

This commit is contained in:
DebaucheryLibrarian 2021-02-03 19:21:47 +01:00
parent e3dc989798
commit 11ad5f8bad
8 changed files with 146 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -319,15 +319,14 @@
v-if="showAlbum"
:items="actor.photos"
:title="actor.name"
class="portrait"
@close="showAlbum = false"
:portrait="true"
@close="$router.go(-1)"
/>
<div class="actor-content">
<Scroll
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
v-slot="scroll"
:expandable="false"
>
<Photos
:actor="actor"
@ -339,7 +338,7 @@
<button
v-if="actor.photos && actor.photos.length > 2"
class="album-toggle"
@click="showAlbum = true"
@click="$router.push({ hash: '#album' })"
><Icon icon="grid3" />View album</button>
<FilterBar
@ -398,6 +397,16 @@ function sfw() {
return this.$store.state.ui.sfw;
}
function showAlbum() {
return this.actor.photos?.length > 0 && this.$route.hash === '#album';
}
async function watchRoute(to, from) {
if (to.params.pageNumber !== from.params.pageNumber) {
await this.fetchActor();
}
}
async function mounted() {
await this.fetchActor();
@ -423,7 +432,6 @@ export default {
actor: null,
releases: null,
totalCount: 0,
showAlbum: false,
limit: 20,
pageTitle: null,
bioExpanded: false,
@ -432,9 +440,10 @@ export default {
},
computed: {
sfw,
showAlbum,
},
watch: {
$route: fetchActor,
$route: watchRoute,
'$store.state.ui.tagFilter': fetchActor,
},
mounted,
@ -710,30 +719,6 @@ export default {
border-bottom: solid 1px var(--shadow-hint);
}
.album-toggle {
height: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
padding: .5rem 1rem;
border: none;
border-bottom: solid 1px var(--shadow-hint);
color: var(--shadow);
background: var(--background-dim);
font-size: 1rem;
font-weight: bold;
.icon {
fill: var(--shadow);
margin: -.1rem .5rem 0 0;
}
&:hover {
background: var(--shadow-hint);
cursor: pointer;
}
}
@media(max-width: $breakpoint4) {
.descriptions-container {
display: none;

74
assets/components/album/album.vue
View File

@ -11,22 +11,31 @@
/>
</div>
<div class="album-items">
<div
class="album-items"
:class="{ portrait }"
>
<div
v-for="item in items"
:key="item.id"
class="item-container"
>
<a
:href="`/media/${item.path}`"
:href="`${path}/${item.path}`"
class="item-link"
target="_blank"
>
<img
:src="`/media/${item.thumbnail}`"
:src="`${path}/${item.thumbnail}`"
:title="item.comment"
loading="lazy"
class="item image"
>
<span
v-if="comments && item.comment"
class="item-comment"
>{{ item.comment }}</span>
</a>
</div>
</div>
@ -45,6 +54,18 @@ export default {
type: String,
default: null,
},
path: {
type: String,
default: '/media',
},
portrait: {
type: Boolean,
default: false,
},
comments: {
type: Boolean,
default: true,
},
},
emits: ['close'],
};
@ -82,6 +103,7 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
text-transform: capitalize;
}
.close {
@ -105,6 +127,10 @@ export default {
padding: 1rem;
margin: auto 0;
overflow-y: auto;
&.portrait {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
}
.item-container {
@ -114,14 +140,50 @@ export default {
}
.item-link {
position: relative;
height: 100%;
width: 100%;
margin: 0 0 1rem 0;
overflow: hidden;
&:hover .item-comment {
transform: translateY(0);
}
}
.item {
width: 100%;
}
.item-comment {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
padding: .5rem;
color: var(--text-light);
background: var(--shadow);
font-size: .9rem;
text-shadow: 0 0 3px var(--shadow);
white-space: normal;
line-height: 1.25;
transform: translateY(100%);
transition: transform .25s ease;
}
@media(max-width: $breakpoint-giga) {
.album-items.portrait {
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
}
@media(max-width: $breakpoint-mega) {
.album-items.portrait {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
}
@media(max-width: $breakpoint-kilo) {
.album-items {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
@ -134,12 +196,6 @@ export default {
}
}
@media(max-width: $breakpoint-small) {
.album-items.portrait {
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
}
@media(max-width: $breakpoint-micro) {
.album-items {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

1
assets/components/entities/entity.vue
View File

@ -79,6 +79,7 @@
<Scroll
v-if="entity.children.length > 0"
v-slot="scroll"
:expandable="true"
:expanded="expanded"
class="scroll-light"
@expand="(state) => expanded = state"

10
assets/components/releases/release.vue
View File

@ -22,14 +22,14 @@
<button
v-if="release.photos.length > 0"
class="album-toggle"
@click="showAlbum = true"
@click="$router.push({ hash: '#album' })"
><Icon icon="grid3" />View album</button>
<Album
v-if="showAlbum"
:items="release.photos"
:title="release.title"
@close="showAlbum = false"
@close="$router.go(-1)"
/>
<div class="info column">
@ -233,6 +233,10 @@ function pageTitle() {
|| (this.release.actors.length > 0 ? `${this.release.actors.map(actor => actor.name).join(', ')} for ${this.release.entity.name}` : null));
}
function showAlbum() {
return this.release.photos?.length > 0 && this.$route.hash === '#album';
}
export default {
components: {
Actor,
@ -247,12 +251,12 @@ export default {
data() {
return {
release: null,
showAlbum: false,
};
},
computed: {
pageTitle,
bannerBackground,
showAlbum,
},
watch: {
$route: fetchRelease,

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

@ -111,7 +111,7 @@ export default {
},
expandable: {
type: Boolean,
default: true,
default: false,
},
expanded: {
type: Boolean,

3
assets/components/tags/photos.vue
View File

@ -83,10 +83,11 @@ export default {
<style lang="scss" scoped>
.photos {
width: 100%;
padding: .5rem 1rem 0 1rem;
padding: .5rem 1rem;
box-sizing: border-box;
white-space: nowrap;
font-size: 0;
border-bottom: solid 1px var(--shadow-hint);
&::-webkit-scrollbar {
display: none;

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

@ -20,9 +20,7 @@
<Scroll
v-if="hasMedia"
v-slot="scroll"
:expanded="expanded"
class="scroll-dark"
@expand="(state) => expanded = state"
>
<Photos
:tag="tag"
@ -31,6 +29,21 @@
/>
</Scroll>
<button
v-if="tag.photos && tag.photos.length > 2"
class="album-toggle"
@click="$router.push({ hash: '#album' })"
><Icon icon="grid3" />View album</button>
<Album
v-if="showAlbum"
:items="[tag.poster, ...tag.photos]"
:title="tag.name"
path="/img"
class="portrait"
@close="$router.go(-1)"
/>
<FilterBar
ref="filter"
:fetch-releases="fetchReleases"
@ -57,6 +70,7 @@ import escapeHtml from '../../../src/utils/escape-html';
import FilterBar from '../filters/filter-bar.vue';
import Photos from './photos.vue';
import Album from '../album/album.vue';
import Releases from '../releases/releases.vue';
import Pagination from '../pagination/pagination.vue';
import Scroll from '../scroll/scroll.vue';
@ -83,6 +97,16 @@ async function fetchReleases() {
}
}
function showAlbum() {
return this.tag.photos?.length > 0 && this.$route.hash === '#album';
}
async function watchRoute(to, from) {
if (to.params.pageNumber !== from.params.pageNumber) {
await this.fetchReleases();
}
}
async function mounted() {
await this.fetchReleases();
this.pageTitle = this.tag.name;
@ -92,6 +116,7 @@ export default {
components: {
FilterBar,
Releases,
Album,
Photos,
Pagination,
Scroll,
@ -108,8 +133,11 @@ export default {
expanded: false,
};
},
computed: {
showAlbum,
},
watch: {
$route: fetchReleases,
$route: watchRoute,
'$store.state.ui.tagFilter': fetchReleases,
},
mounted,

24
assets/css/_inputs.scss
View File

@ -6,3 +6,27 @@
border: solid 1px var(--shadow-weak);
cursor: pointer;
}
.album-toggle {
height: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
padding: .5rem 1rem;
border: none;
border-bottom: solid 1px var(--shadow-hint);
color: var(--shadow);
background: var(--background-dim);
font-size: 1rem;
font-weight: bold;
.icon {
fill: var(--shadow);
margin: -.1rem .5rem 0 0;
}
&:hover {
background: var(--shadow-hint);
cursor: pointer;
}
}