Scrolling release actors, added custom scroll bars.

assets/components/actors/tile.vue

@@ -3,8 +3,7 @@
 		v-if="actor"
 		class="actor"
 	>
-		<RouterLink
+		<div
-			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 			class="link"
 		>
 			<span
@@ -42,12 +41,16 @@
 				/>
 			</span>
 
-			<div class="avatar-container">
+			<a
+				class="avatar-container"
+				@click="goToActor"
+			>
 				<img
 					v-if="actor.avatar"
 					:src="getPath(actor.avatar, 'thumbnail')"
 					:style="{ 'background-image': getBgPath(actor.avatar, 'lazy') }"
 					loading="lazy"
+					draggable="false"
 					class="avatar"
 				>
 
@@ -56,6 +59,7 @@
 					class="avatar"
 				><img
 					:src="`/img/avatar_${actor.gender || 'female'}.svg`"
+					draggable="false"
 					class="avatar-fallback"
 				></span>
 
@@ -80,9 +84,7 @@
 					@click.prevent.native="unstashActor"
 				/>
 
-				<span
+				<span class="details">
-					class="details"
-				>
 					<span class="gender-age">
 						<Gender :gender="actor.gender" />
 
@@ -128,14 +130,21 @@
 						class="country"
 					/>
 				</span>
-			</div>
+			</a>
-		</RouterLink>
+		</div>
 	</div>
 </template>
 
 <script>
 import Gender from './gender.vue';
 
+function goToActor() {
+	// can't seem to control behavior with RouterLink
+	if (!this.hasScrolled) {
+		this.$router.push({ name: 'actor', params: { actorId: this.actor.id, actorSlug: this.actor.slug } });
+	}
+}
+
 async function stashActor() {
 	this.favorited = true;
 
@@ -189,6 +198,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		hasScrolled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['stash'],
 	data() {
@@ -202,6 +215,7 @@ export default {
 	methods: {
 		stashActor,
 		unstashActor,
+		goToActor,
 	},
 };
 </script>
@@ -289,6 +303,7 @@ export default {
     position: relative;
 	overflow: hidden;
 	background: var(--profile);
+	cursor: pointer;
 }
 
 .avatar {

assets/components/releases/release.vue

@@ -63,12 +63,19 @@
 			</div>
 
 			<div class="row associations">
-				<ul class="actors nolist">
+				<ul
+					ref="actors"
+					class="actors nolist noselect bar-inline"
+					@mousedown.prevent="startActorsScroll"
+				>
 					<li
 						v-for="actor in release.actors"
 						:key="actor.id"
 					>
-						<Actor :actor="actor" />
+						<Actor
+							:actor="actor"
+							:has-scrolled="actorsHasScrolled"
+						/>
 					</li>
 				</ul>
 			</div>
@@ -308,6 +315,29 @@ async function unstashScene(stashId) {
 	});
 }
 
+function startActorsScroll(event) {
+	event.preventDefault();
+
+	this.$refs.actors.addEventListener('mousemove', this.scrollActors);
+	document.addEventListener('mouseup', this.endActorsScroll);
+
+	this.actorsScrollStart = { mouse: event.clientX, scroll: this.$refs.actors.scrollLeft };
+	this.actorsHasScrolled = false;
+}
+
+function scrollActors(event) {
+	this.$refs.actors.scrollLeft = this.actorsScrollStart.scroll + this.actorsScrollStart.mouse - event.clientX;
+
+	if (Math.abs(this.actorsScrollStart.mouse - event.clientX) > 10) {
+		this.actorsHasScrolled = true;
+	}
+}
+
+function endActorsScroll() {
+	this.$refs.actors.removeEventListener('mousemove', this.scrollActors);
+	document.removeEventListener('mouseup', this.endActorsScroll);
+}
+
 function me() {
 	return this.$store.state.auth.user;
 }
@@ -358,6 +388,10 @@ function showAlbum() {
 	return (this.release.photos?.length > 0 || this.release.scenesPhotos?.length > 0) && this.$route.hash === '#album';
 }
 
+async function mounted() {
+	this.fetchRelease();
+}
+
 export default {
 	components: {
 		Actor,
@@ -376,6 +410,8 @@ export default {
 			summary: null,
 			summaryCopied: false,
 			stashedBy: [],
+			actorsScrollStart: 0,
+			actorsHasScrolled: false,
 			hasClipboard: !!navigator?.clipboard?.writeText,
 		};
 	},
@@ -388,12 +424,15 @@ export default {
 	watch: {
 		$route: fetchRelease,
 	},
-	mounted: fetchRelease,
+	mounted,
 	methods: {
 		copySummary,
+		endActorsScroll,
+		fetchRelease,
+		scrollActors,
 		selectSummary,
 		setSummary,
-		fetchRelease,
+		startActorsScroll,
 		stashScene,
 		unstashScene,
 	},
@@ -504,11 +543,16 @@ export default {
 }
 
 .actors {
-    display: grid;
+	display: block;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	padding-bottom: .25rem;
-    grid-gap: .5rem;
+	overflow-x: auto;
-    flex-grow: 1;
+	white-space: nowrap;
-    flex-wrap: wrap;
+
+	.actor {
+		width: 10rem;
+		margin-right: .25rem;
+		user-select: none;
+	}
 }
 
 .movies {

assets/css/_states.scss

@@ -24,6 +24,46 @@
 	text-decoration: none;
 }
 
+.nobar {
+	scrollbar-width: none;
+	-mis-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		background: transparent;
+		width: 0px;
+		height: 0px;
+	}
+}
+
+::-webkit-scrollbar {
+	width: 14px;
+	height: 14px;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--shadow-weak);
+	border: none;
+}
+
+::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 3px var(--shadow-hint);
+	border: solid 1px var(--shadow-hint);
+	background-color: var(--shadow-touch);
+}
+
+.bar-inline::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+.bar-inline::-webkit-scrollbar-thumb {
+	background-color: var(--shadow-hint);
+}
+
+.bar-strong::-webkit-scrollbar-thumb {
+	background-color: var(--primary);
+}
+
 :focus {
     outline: none;
 }