Always showing actor photos horizontally.

assets/components/actors/photos.vue

@@ -1,7 +1,12 @@
 <template>
 	<div
+		v-lazy-container
 		class="photos"
-		:class="{ wide: actor.photos.length > 2 }"
+		:class="{
+			avatar: !!actor.avatar,
+			empty: actor.photos.length === 0,
+			wide: actor.photos.length > 2
+		}"
 	>
 		<a
 			v-if="actor.avatar"
@@ -11,7 +16,8 @@
 			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}`"
 				class="avatar photo"
 			>
@@ -26,7 +32,8 @@
 			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}`"
 				class="photo"
 			>
@@ -56,59 +63,49 @@ export default {
 @import 'theme';
 
 .photos {
-    display: inline-grid;
-    grid-template-columns: repeat(auto-fit, 12rem);
-    grid-gap: .5rem;
+	width: 100%;
+    display: flex;
+	box-sizing: border-box;
+	padding: 1rem;
     font-size: 0;
+	overflow-x: scroll;
+	scrollbar-width: none;
+
+	&.empty {
+		display: none;
+	}
 
     .avatar-link {
         display: none;
     }
 
-    &.compact {
-        .photo {
-            width: auto;
-        }
-    }
+	/*
+	&::-webkit-scrollbar {
+		display: none;
+	}
+	*/
 }
 
 .photo-link {
+	height: 16rem;
+	flex-shrink: 0;
+	margin: 0 .5rem 0 0;
 }
 
 .photo {
-    width: 100%;
     height: 100%;
-    object-fit: cover;
     box-shadow: 0 0 3px $shadow-weak;
 }
 
-@media(min-width: $breakpoint3) {
-    .photos.wide {
-        max-width: 30vw;
-    }
-}
-
 @media(max-width: $breakpoint3) {
-    .photos {
-        width: 100%;
-        max-width: 100%;
-        display: flex;
-        overflow-x: scroll;
-        scrollbar-width: none;
+	.photos {
+		&.empty.avatar {
+			display: flex;
+		}
 
-        .avatar-link {
-            display: inline-block;
-        }
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-
-    .photo-link {
-        height: 15rem;
-        flex-shrink: 0;
-        margin: 0 .5rem 0 0;
+		.avatar-link {
+			display: inline-block;
+		}
     }
 }
 </style>