Using navigation for toggling album. Using album for tag photos. Fixed portrait albums.
This commit is contained in:
DebaucheryLibrarian
parent
e3dc989798
commit
11ad5f8bad
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ export default {
|
|||
},
|
||||
expandable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: false,
|
||||
},
|
||||
expanded: {
|
||||
type: Boolean,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue