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

assets/components/actors/actor.vue

@@ -319,15 +319,14 @@
 				v-if="showAlbum"
 				:items="actor.photos"
 				:title="actor.name"
-				class="portrait"
+				:portrait="true"
-				@close="showAlbum = false"
+				@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;

assets/components/album/album.vue

@@ -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));

assets/components/entities/entity.vue

@@ -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"

assets/components/releases/release.vue

@@ -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,

assets/components/scroll/scroll.vue

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

assets/components/tags/photos.vue

@@ -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;

assets/components/tags/tag.vue

@@ -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,

assets/css/_inputs.scss

@@ -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;
+	}
+}