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)"
/>
+
@@ -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 @@
expanded = state"
diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue
index db467d61..c9030c81 100644
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@@ -22,14 +22,14 @@
@@ -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 {