assets/components/actors/actor.vue

@@ -285,12 +285,20 @@
 			</div>
 
 			<div class="actor-content">
-				<Photos
-					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
-					:actor="actor"
-				/>
-
 				<Releases :releases="actor.releases" />
+
+				<div
+					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
+					class="photos-container"
+				>
+					<Photos :actor="actor" />
+
+					<Photos
+						:actor="actor"
+						:class="{ expanded }"
+						class="compact"
+					/>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -318,6 +326,10 @@ async function route() {
 	await this.fetchActor();
 }
 
+function scrollPhotos(event) {
+	event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
+}
+
 async function mounted() {
 	await this.fetchActor();
 
@@ -351,6 +363,7 @@ export default {
 	mounted,
 	methods: {
 		fetchActor,
+		scrollPhotos,
 	},
 };
 </script>
@@ -416,6 +429,7 @@ export default {
     }
 
     .avatar-link {
+        font-size: 0;
         padding: 0 0 1rem 1rem;
         flex-shrink: 0;
     }
@@ -423,7 +437,6 @@ export default {
     .avatar {
         height: 100%;
         flex-shrink: 0;
-		border: solid 3px var(--lighten-hint);
         margin: 0 .5rem 0 0;
     }
 }
@@ -600,7 +613,7 @@ export default {
 .actor-content {
     display: flex;
     flex-grow: 1;
-    flex-direction: column;
+    flex-direction: row;
 }
 
 .heading {
@@ -608,6 +621,13 @@ 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;
 }
@@ -640,6 +660,20 @@ 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/actors.vue

@@ -155,7 +155,7 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
     grid-gap: 0 .5rem;
     padding: 1rem;
     flex-grow: 1;

assets/components/actors/photos.vue

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

assets/components/releases/release.vue

@@ -3,6 +3,8 @@
 		v-if="release"
 		class="content"
 	>
+		<Banner :release="release" />
+
 		<div class="details">
 			<div class="column">
 				<a
@@ -93,8 +95,6 @@
 			</div>
 		</div>
 
-		<Banner :release="release" />
-
 		<div class="info column">
 			<h2 class="row title">{{ release.title }}</h2>
 

assets/components/search/search.vue

@@ -101,15 +101,9 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
     grid-gap: 0 .5rem;
     flex-grow: 1;
 	margin: 0 0 1rem 0;
 }
-
-@media(max-width: $breakpoint0) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    }
-}
 </style>

src/scrapers/julesjordan.js

@@ -49,7 +49,7 @@ function scrapePhotos(html, type) {
 async function getPhotosLegacy(entryId, site, type = 'highres', page = 1) {
 	const albumUrl = `${site.url}/trial/gallery.php?id=${entryId}&type=${type}&page=${page}`;
 
-	// logger.warn(`Jules Jordan is using legacy photo scraper for ${albumUrl} (page ${page})`);
+	logger.warn(`Jules Jordan is using legacy photo scraper for ${albumUrl} (page ${page})`);
 
 	const html = await fetchPhotos(albumUrl);
 	const $ = cheerio.load(html, { normalizeWhitespace: true });