Always showing actor photos horizontally.

assets/components/actors/actor.vue

@@ -285,20 +285,12 @@
 			</div>
 
 			<div class="actor-content">
-				<Releases :releases="actor.releases" />
-
-				<div
-					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
-					class="photos-container"
-				>
-					<Photos :actor="actor" />
-
 				<Photos
+					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
 					:actor="actor"
-						:class="{ expanded }"
-						class="compact"
 				/>
-				</div>
+
+				<Releases :releases="actor.releases" />
 			</div>
 		</div>
 	</div>
@@ -429,7 +421,6 @@ export default {
     }
 
     .avatar-link {
-        font-size: 0;
         padding: 0 0 1rem 1rem;
         flex-shrink: 0;
     }
@@ -437,6 +428,7 @@ export default {
     .avatar {
         height: 100%;
         flex-shrink: 0;
+		border: solid 3px var(--lighten-hint);
         margin: 0 .5rem 0 0;
     }
 }
@@ -613,7 +605,7 @@ export default {
 .actor-content {
     display: flex;
     flex-grow: 1;
-    flex-direction: row;
+    flex-direction: column;
 }
 
 .heading {
@@ -621,13 +613,6 @@ export default {
     margin: 0 0 1rem 0;
 }
 
-.photos-container {
-    box-sizing: border-box;
-    border-left: solid 1px $shadow-hint;
-    padding: 1rem 1rem 1rem 1.5rem;
-    margin: 0 0 0 .5rem;
-}
-
 .photos.compact {
     display: none;
 }
@@ -660,20 +645,6 @@ export default {
     .actor-content {
         flex-direction: column;
     }
-
-    .photos-container {
-        border: none;
-        border-bottom: solid 1px $shadow-hint;
-        margin: 0 0 .5rem 0;
-    }
-
-    .photos {
-        display: none;
-    }
-
-    .photos.compact {
-        display: flex;
-    }
 }
 
 @media(max-width: $breakpoint) {

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;
+	width: 100%;
-    grid-template-columns: repeat(auto-fit, 12rem);
+    display: flex;
-    grid-gap: .5rem;
+	box-sizing: border-box;
+	padding: 1rem;
     font-size: 0;
+	overflow-x: scroll;
+	scrollbar-width: none;
+
+	&.empty {
+		display: none;
+	}
 
     .avatar-link {
         display: none;
     }
 
-    &.compact {
+	/*
-        .photo {
+	&::-webkit-scrollbar {
-            width: auto;
+		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%;
+		&.empty.avatar {
-        max-width: 100%;
 			display: flex;
-        overflow-x: scroll;
+		}
-        scrollbar-width: none;
 
 		.avatar-link {
 			display: inline-block;
 		}
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-
-    .photo-link {
-        height: 15rem;
-        flex-shrink: 0;
-        margin: 0 .5rem 0 0;
     }
 }
 </style>