From 11ad5f8bad3f76bddb2974cdaf7341b6ffda4859 Mon Sep 17 00:00:00 2001 From: DebaucheryLibrarian Date: Wed, 3 Feb 2021 19:21:47 +0100 Subject: [PATCH] Using navigation for toggling album. Using album for tag photos. Fixed portrait albums. --- assets/components/actors/actor.vue | 45 ++++++---------- assets/components/album/album.vue | 74 ++++++++++++++++++++++---- assets/components/entities/entity.vue | 1 + assets/components/releases/release.vue | 10 ++-- assets/components/scroll/scroll.vue | 2 +- assets/components/tags/photos.vue | 3 +- assets/components/tags/tag.vue | 34 ++++++++++-- assets/css/_inputs.scss | 24 +++++++++ 8 files changed, 146 insertions(+), 47 deletions(-) diff --git a/assets/components/actors/actor.vue b/assets/components/actors/actor.vue index fed9053e..d0d0ac38 100644 --- a/assets/components/actors/actor.vue +++ b/assets/components/actors/actor.vue @@ -319,15 +319,14 @@ v-if="showAlbum" :items="actor.photos" :title="actor.name" - class="portrait" - @close="showAlbum = false" + :portrait="true" + @close="$router.go(-1)" />
View album 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; diff --git a/assets/components/album/album.vue b/assets/components/album/album.vue index 1a10c3d7..f97e38fa 100644 --- a/assets/components/album/album.vue +++ b/assets/components/album/album.vue @@ -11,22 +11,31 @@ />
-
+
+ + {{ item.comment }}
@@ -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)); diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue index aa6065a4..c5e3efa4 100644 --- a/assets/components/entities/entity.vue +++ b/assets/components/entities/entity.vue @@ -79,6 +79,7 @@ View album
@@ -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, diff --git a/assets/components/scroll/scroll.vue b/assets/components/scroll/scroll.vue index 5bfb108f..d18704ae 100644 --- a/assets/components/scroll/scroll.vue +++ b/assets/components/scroll/scroll.vue @@ -111,7 +111,7 @@ export default { }, expandable: { type: Boolean, - default: true, + default: false, }, expanded: { type: Boolean, diff --git a/assets/components/tags/photos.vue b/assets/components/tags/photos.vue index 4cabe0e2..3ec9b551 100644 --- a/assets/components/tags/photos.vue +++ b/assets/components/tags/photos.vue @@ -83,10 +83,11 @@ export default {