Using query instead of parameters for tag filter URI. Added generic scrolling component, using for actor photos and entity children. Removed pagination from filter bar.

assets/components/actors/actor.vue

@@ -283,10 +283,19 @@
 			</div>
 
 			<div class="actor-content">
-				<Photos
+				<Scroll
 					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
-					:actor="actor"
-				/>
+					class="scroll-light"
+				>
+					<Photos :actor="actor" />
+
+					<template v-slot:expanded>
+						<Photos
+							class="expanded"
+							:actor="actor"
+						/>
+					</template>
+				</Scroll>
 
 				<FilterBar
 					:fetch-releases="fetchActor"
@@ -307,10 +316,11 @@
 </template>
 
 <script>
-import Photos from './photos.vue';
 import Pagination from '../pagination/pagination.vue';
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
+import Photos from './photos.vue';
+import Scroll from '../scroll/scroll.vue';
 import Gender from './gender.vue';
 import Social from './social.vue';
 
@@ -348,6 +358,7 @@ export default {
 		FilterBar,
 		Pagination,
 		Photos,
+		Scroll,
 		Releases,
 		Gender,
 		Social,
@@ -637,9 +648,62 @@ export default {
     display: none;
 }
 
-.expand,
-.collapse-header {
+.expand {
     display: none;
+    justify-content: center;
+    align-items: center;
+    padding: .5rem .25rem;
+    font-weight: bold;
+    font-size: .9rem;
+    cursor: pointer;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        background: $shadow-hint;
+
+        .icon {
+            fill: $shadow-strong;
+        }
+    }
+}
+
+.expand-sidebar:hover {
+    background: $shadow-hint;
+}
+
+.expand-header {
+    display: none;
+
+    &:hover {
+        background: $shadow-hint;
+    }
+}
+
+.collapse-header {
+	display: none;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    background: $profile;
+
+    .icon {
+        width: 100%;
+        fill: $highlight;
+        padding: .5rem 0;
+    }
+
+    &:hover .icon {
+        background: $highlight-hint;
+        fill: $text-contrast;
+    }
+}
+
+.scroll {
+	border-bottom: solid 1px var(--shadow-hint);
 }
 
 @media(max-width: $breakpoint4) {

assets/components/actors/photos.vue

@@ -5,17 +5,17 @@
 		:class="{
 			avatar: !!actor.avatar,
 			empty: actor.photos.length === 0,
-			wide: actor.photos.length > 2
 		}"
 	>
 		<a
-			v-if="actor.avatar"
+			v-show="actor.avatar"
 			:href="`/media/${actor.avatar.path}`"
 			target="_blank"
 			rel="noopener noreferrer"
 			class="avatar-link photo-link"
 		>
 			<img
+				:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
 				:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
 				:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
 				:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
@@ -32,9 +32,10 @@
 			class="photo-link"
 		>
 			<img
+				:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
 				:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
 				:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
-				:title="photo.copyright && `© ${photo.copyright}`"
+				:title="`© ${photo.copyright || photo.entity.name}`"
 				class="photo"
 			>
 		</a>
@@ -63,15 +64,29 @@ export default {
 @import 'theme';
 
 .photos {
-	width: 100%;
     display: flex;
 	box-sizing: border-box;
-	padding: 1rem;
-	border-bottom: solid 1px var(--darken-hint);
+	padding: .5rem 1rem;
     font-size: 0;
 	overflow-x: scroll;
+	scroll-behavior: smooth;
 	scrollbar-width: none;
 
+	&.expanded {
+		display: grid;
+		grid-gap: .5rem;
+		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+
+		.photo-link {
+			margin: 0;
+		}
+
+		.photo {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
 	&.empty {
 		display: none;
 	}
@@ -86,14 +101,18 @@ export default {
 }
 
 .photo-link {
-	height: 16rem;
-	flex-shrink: 0;
 	margin: 0 .5rem 0 0;
 }
 
 .photo {
-    height: 100%;
+	width: 10rem;
+    height: 15rem;
     box-shadow: 0 0 3px $shadow-weak;
+	object-fit: cover;
+}
+
+.expand {
+	border-bottom: solid 1px var(--darken-hint);
 }
 
 @media(max-width: $breakpoint3) {
@@ -105,6 +124,16 @@ export default {
 		.avatar-link {
 			display: inline-block;
 		}
+
+		&.expanded {
+			grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+		}
+    }
+}
+
+@media(max-width: $breakpoint0) {
+	.photos.expanded {
+		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     }
 }
 </style>