Added components.

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>
@@ -326,10 +318,6 @@ 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();
 
@@ -363,7 +351,6 @@ export default {
 	mounted,
 	methods: {
 		fetchActor,
-		scrollPhotos,
 	},
 };
 </script>
@@ -429,7 +416,6 @@ export default {
     }
 
     .avatar-link {
-        font-size: 0;
         padding: 0 0 1rem 1rem;
         flex-shrink: 0;
     }
@@ -437,6 +423,7 @@ export default {
     .avatar {
         height: 100%;
         flex-shrink: 0;
+		border: solid 3px var(--lighten-hint);
         margin: 0 .5rem 0 0;
     }
 }
@@ -613,7 +600,7 @@ export default {
 .actor-content {
     display: flex;
     flex-grow: 1;
-    flex-direction: row;
+    flex-direction: column;
 }
 
 .heading {
@@ -621,13 +608,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 +640,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/actors.vue

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

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,48 @@ export default {
 @import 'theme';
 
 .photos {
-    display: inline-grid;
-    grid-template-columns: repeat(auto-fit, 12rem);
-    grid-gap: .5rem;
-    font-size: 0;
-
-    .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;
+	box-sizing: border-box;
+	padding: 1rem;
+	border-bottom: solid 1px var(--darken-hint);
+    font-size: 0;
 	overflow-x: scroll;
 	scrollbar-width: none;
 
+	&.empty {
+		display: none;
+	}
+
     .avatar-link {
-            display: inline-block;
+        display: none;
     }
 
 	&::-webkit-scrollbar {
 		display: none;
 	}
-    }
+}
 
-    .photo-link {
+.photo-link {
-        height: 15rem;
+	height: 16rem;
 	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,8 +3,6 @@
 		v-if="release"
 		class="content"
 	>
-		<Banner :release="release" />
-
 		<div class="details">
 			<div class="column">
 				<a
@@ -95,6 +93,8 @@
 			</div>
 		</div>
 
+		<Banner :release="release" />
+
 		<div class="info column">
 			<h2 class="row title">{{ release.title }}</h2>
 

assets/components/search/search.vue

@@ -101,9 +101,15 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 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 });