assets/components/actors/actor.vue

@@ -408,7 +408,7 @@ export default {
 			actor: null,
 			releases: null,
 			totalCount: 0,
-			limit: 20,
+			limit: 15,
 			pageTitle: null,
 			bioExpanded: false,
 			photosExpanded: false,

assets/components/actors/actors.vue

@@ -59,7 +59,6 @@
 		</nav>
 
 		<Pagination
-			ref="pagination"
 			:items-total="totalCount"
 			:items-per-page="limit"
 		/>
@@ -100,8 +99,6 @@ async function fetchActors() {
 
 	this.actors = actors;
 	this.totalCount = totalCount;
-
-	this.$refs.pagination.$el.scrollIntoView();
 }
 
 function letter() {
@@ -133,7 +130,7 @@ export default {
 			actors: [],
 			pageTitle: null,
 			totalCount: 0,
-			limit: 50,
+			limit: 30,
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
 		};
 	},

assets/components/container/container.vue

@@ -20,11 +20,8 @@
 			@show-filters="(state) => toggleFilters(state)"
 		/>
 
-		<div
-			ref="content"
-			class="content"
-		>
-			<router-view @scroll="scrollToTop" />
+		<div class="content">
+			<router-view />
 		</div>
 
 		<Filters
@@ -71,10 +68,6 @@ function resize(event) {
 	this.events.emit('resize', event);
 }
 
-function scrollToTop() {
-	this.$refs.content.scrollTop = 0;
-}
-
 function mounted() {
 	document.addEventListener('click', this.blur);
 	window.addEventListener('resize', this.resize);
@@ -107,7 +100,6 @@ export default {
 		setConsent,
 		blur,
 		resize,
-		scrollToTop,
 	},
 };
 </script>

assets/components/entities/entity.vue

@@ -75,7 +75,10 @@
 			</router-link>
 		</div>
 
-		<div class="content-inner">
+		<div
+			ref="content"
+			class="content-inner"
+		>
 			<Scroll
 				v-if="entity.children.length > 0"
 				v-slot="scroll"
@@ -91,7 +94,6 @@
 			</Scroll>
 
 			<FilterBar
-				ref="filter"
 				:fetch-releases="fetchEntity"
 				:items-total="totalCount"
 				:items-per-page="limit"
@@ -113,6 +115,8 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 import FilterBar from '../filters/filter-bar.vue';
 import Pagination from '../pagination/pagination.vue';
 import Releases from '../releases/releases.vue';
@@ -133,7 +137,9 @@ async function fetchEntity() {
 
 	this.pageTitle = entity.name;
 
-	this.$refs.filter.$el.scrollIntoView();
+	nextTick(() => {
+		this.$refs.content.scrollTop = 0;
+	});
 }
 
 async function mounted() {

assets/components/home/home.vue

@@ -1,8 +1,10 @@
 <template>
 	<div class="home">
-		<div class="content-inner">
+		<div
+			ref="content"
+			class="content-inner"
+		>
 			<FilterBar
-				ref="filter"
 				:fetch-releases="fetchReleases"
 				:is-home="true"
 				:items-total="totalCount"
@@ -39,7 +41,7 @@ async function fetchReleases() {
 	this.totalCount = totalCount;
 	this.releases = releases;
 
-	this.$refs.filter.$el.scrollIntoView();
+	this.$refs.content.scrollTop = 0;
 }
 
 async function mounted() {
@@ -59,7 +61,7 @@ export default {
 			releases: [],
 			networks: [],
 			pageTitle: null,
-			limit: 30,
+			limit: 20,
 			totalCount: 0,
 			from: null,
 		};

assets/components/releases/media.vue

@@ -170,7 +170,6 @@ export default {
 		grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 		grid-gap: 1rem;
 		justify-content: center;
-		padding: 1rem;
 		margin: 0 0 1rem 0;
 	}
 }
@@ -251,7 +250,7 @@ export default {
 }
 
 .trailer-container {
-	height: 18rem;
+	max-height: 18rem;
 	width: 32rem;
     max-width: 100%;
 }

assets/components/releases/releases.vue

@@ -71,7 +71,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'breakpoints';
+@import 'theme';
 
 .heading {
     padding: 0;
@@ -111,9 +111,15 @@ export default {
     font-weight: bold;
 }
 
-@media(max-width: $breakpoint-kilo) {
+@media(max-width: $breakpoint3) {
     .tiles {
-		grid-gap: .5rem;
+        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    }
+}
+
+@media(max-width: $breakpoint2) {
+    .tiles {
+        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
     }
 }
 </style>

assets/components/releases/scene-tile.vue

@@ -4,132 +4,122 @@
 		:class="{ new: release.isNew }"
 		class="tile"
 	>
-		<div class="tile-body">
-			<span class="poster">
-				<a
-					:href="`/scene/${release.id}/${release.slug || ''}`"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="link"
+		<span class="poster">
+			<a
+				:href="`/scene/${release.id}/${release.slug || ''}`"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="link"
+			>
+				<img
+					v-if="release.poster"
+					:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
+					:style="{ 'background-image': sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}` }"
+					:alt="release.title"
+					class="thumbnail"
+					loading="lazy"
+				>
+
+				<span
+					v-else-if="release.covers && release.covers.length > 0"
+					class="covers"
 				>
 					<img
-						v-if="release.poster"
-						:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
-						:style="{ 'background-image': sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}` }"
+						v-for="cover in release.covers"
+						:key="cover.id"
+						:src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
+						:style="{ 'background-image': sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
 						:alt="release.title"
-						class="thumbnail"
+						class="thumbnail cover"
 						loading="lazy"
 					>
-
-					<span
-						v-else-if="release.covers && release.covers.length > 0"
-						class="covers"
-					>
-						<img
-							v-for="cover in release.covers"
-							:key="cover.id"
-							:src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
-							:style="{ 'background-image': sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
-							:alt="release.title"
-							class="thumbnail cover"
-							loading="lazy"
-						>
-					</span>
-
-					<div
-						v-else
-						:title="release.title"
-						class="thumbnail"
-					>No thumbnail available</div>
-				</a>
-			</span>
-
-			<div class="info">
-				<Details
-					:release="release"
-					class="details-wide"
-				/>
-
-				<a
-					:href="`/scene/${release.id}/${release.slug || ''}`"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="row link"
-				>
-					<h3
-						v-if="release.title"
-						v-tooltip.bottom="release.title"
-						:title="release.title"
-						class="title"
-					>{{ release.title }}</h3>
-
-					<h3
-						v-else-if="release.actors.length > 0"
-						class="title title-composed"
-					>{{ release.actors[0].name }} for {{ release.entity.name }}</h3>
-
-					<h3
-						v-else
-						class="title title-empty"
-					>{{ release.entity.name }}</h3>
-				</a>
-
-				<span class="row">
-					<ul
-						class="actors nolist"
-						:title="release.actors.map(actor => actor.name).join(', ')"
-					>
-						<li
-							v-for="actor in release.actors"
-							:key="actor.id"
-							class="actor"
-						>
-							<router-link
-								:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
-								class="actor-link"
-							>{{ actor.name }}</router-link>
-						</li>
-					</ul>
 				</span>
 
-				<div class="labels">
-					<router-link
-						v-if="release.shootId && release.studio"
-						:to="{ name: 'studio', params: { entitySlug: release.studio.slug } }"
-						:title="release.studio && release.studio.name"
-						class="shoot nolink"
-					>{{ release.shootId }}</router-link>
+				<div
+					v-else
+					:title="release.title"
+					class="thumbnail"
+				>No thumbnail available</div>
+			</a>
 
-					<span
-						v-else-if="release.shootId"
-						:title="release.studio && release.studio.name"
-						class="shoot nolink"
-					>{{ release.shootId }}</span>
+			<Details :release="release" />
+		</span>
 
-					<ul
-						v-if="release.tags.length > 0"
-						:title="release.tags.map(tag => tag.name).join(', ')"
-						class="tags nolist"
+		<div class="info">
+			<a
+				:href="`/scene/${release.id}/${release.slug || ''}`"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="row link"
+			>
+				<h3
+					v-if="release.title"
+					v-tooltip.bottom="release.title"
+					:title="release.title"
+					class="title"
+				>{{ release.title }}</h3>
+
+				<h3
+					v-else-if="release.actors.length > 0"
+					class="title title-composed"
+				>{{ release.actors[0].name }} for {{ release.entity.name }}</h3>
+
+				<h3
+					v-else
+					class="title title-empty"
+				>{{ release.entity.name }}</h3>
+			</a>
+
+			<span class="row">
+				<ul
+					class="actors nolist"
+					:title="release.actors.map(actor => actor.name).join(', ')"
+				>
+					<li
+						v-for="actor in release.actors"
+						:key="actor.id"
+						class="actor"
 					>
-						<li
-							v-for="tag in release.tags"
-							:key="`tag-${tag.slug}`"
-							class="tag"
-						>
-							<router-link
-								:to="`/tag/${tag.slug}`"
-								class="tag-link"
-							>{{ tag.name }}</router-link>
-						</li>
-					</ul>
-				</div>
+						<router-link
+							:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
+							class="actor-link"
+						>{{ actor.name }}</router-link>
+					</li>
+				</ul>
+			</span>
+
+			<div class="labels">
+				<router-link
+					v-if="release.shootId && release.studio"
+					:to="{ name: 'studio', params: { entitySlug: release.studio.slug } }"
+					:title="release.studio && release.studio.name"
+					class="shoot nolink"
+				>{{ release.shootId }}</router-link>
+
+				<span
+					v-else-if="release.shootId"
+					:title="release.studio && release.studio.name"
+					class="shoot nolink"
+				>{{ release.shootId }}</span>
+
+				<ul
+					v-if="release.tags.length > 0"
+					:title="release.tags.map(tag => tag.name).join(', ')"
+					class="tags nolist"
+				>
+					<li
+						v-for="tag in release.tags"
+						:key="`tag-${tag.slug}`"
+						class="tag"
+					>
+						<router-link
+							:to="`/tag/${tag.slug}`"
+							class="tag-link"
+						>{{ tag.name }}</router-link>
+					</li>
+				</ul>
 			</div>
 		</div>
-
-		<Details
-			:release="release"
-			class="details-compact"
-		/>
 	</div>
 </template>
 
@@ -157,7 +147,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'breakpoints';
+@import 'theme';
 
 .tile {
     background: var(--background);
@@ -182,13 +172,9 @@ export default {
 	}
 }
 
-.tile-body {
-	display: flex;
-	flex-direction: column;
-}
-
 .poster {
     position: relative;
+    margin: 0 0 .6rem 0;
 }
 
 .covers {
@@ -227,7 +213,6 @@ export default {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-	overflow: hidden;
 }
 
 .link {
@@ -313,53 +298,4 @@ export default {
         color: var(--primary);
     }
 }
-
-.details-wide {
-	margin: 0 0 .5rem 0;
-}
-
-.details-compact {
-	display: none;
-}
-
-@media(max-width: $breakpoint-kilo) {
-	.tile-body {
-		flex-direction: row;
-	}
-
-	.poster {
-		margin: 0;
-	}
-
-	.thumbnail {
-		width: 9rem;
-		height: 100%;
-	}
-
-	.info {
-		padding: .5rem .25rem 0 .25rem;
-	}
-
-	.row {
-		margin: 0 0 .15rem 0;
-	}
-
-	.title,
-	.actor-link {
-		font-size: .9rem;
-	}
-
-	.details-wide {
-		display: none;
-	}
-
-	.details-compact {
-		display: flex;
-		border-top: solid 1px var(--shadow-hint);
-	}
-
-	.shoot {
-		display: none;
-	}
-}
 </style>

assets/components/releases/tile-details.vue

@@ -12,17 +12,10 @@
 				:title="`Part of ${release.entity.parent.name}`"
 				:to="`/${release.entity.parent.type}/${release.entity.parent.slug}`"
 				class="site-link"
-			>
-				<img
-					:src="`/img/logos/${release.entity.parent.slug}/favicon_light.png`"
-					class="favicon favicon-light"
-				>
-
-				<img
-					:src="`/img/logos/${release.entity.parent.slug}/favicon_dark.png`"
-					class="favicon favicon-dark"
-				>
-			</router-link>
+			><img
+				:src="`/img/logos/${release.entity.parent.slug}/favicon.png`"
+				class="favicon"
+			></router-link>
 
 			<router-link
 				v-tooltip.bottom="`More from ${release.entity.name}`"
@@ -36,17 +29,10 @@
 			v-else
 			:to="`/${release.entity.type}/${release.entity.slug}`"
 			class="site site-link"
-		>
-			<img
-				:src="`/img/logos/${release.entity.slug}/favicon_light.png`"
-				class="favicon favicon-light"
-			>
-
-			<img
-				:src="`/img/logos/${release.entity.slug}/favicon_dark.png`"
-				class="favicon favicon-dark"
-			>{{ release.entity.name }}
-		</router-link>
+		><img
+			:src="`/img/logos/${release.entity.slug}/favicon.png`"
+			class="favicon"
+		>{{ release.entity.name }}</router-link>
 
 		<a
 			v-if="release.date"
@@ -82,8 +68,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'breakpoints';
-
 .details {
     width: 100%;
     display: flex;
@@ -95,9 +79,8 @@ export default {
 	box-shadow: 0 0 3px var(--darken);
 
     .favicon {
-		height: 2rem;
-		box-sizing: border-box;
-		padding: .5rem;
+		width: 1rem;
+        margin: 0 .25rem 0 0;
     }
 
 	/*
@@ -132,43 +115,9 @@ export default {
 	}
 }
 
-.site {
-	padding: 0 .5rem 0 0;
-}
-
 .site-link {
     display: flex;
     color: var(--text-light);
     text-decoration: none;
 }
-
-.favicon-dark {
-	display: none;
-}
-
-@media(max-width: $breakpoint-kilo) {
-	/* light details bar
-	.details {
-		background: var(--background);
-		box-shadow: none;
-
-		.favicon-dark {
-			display: inline-block;
-		}
-
-		.favicon-light {
-			display: none;
-		}
-	}
-
-	.site-link,
-	.date {
-		color: var(--text);
-	}
-	*/
-
-	.site {
-		padding: 0 .5rem 0 0;
-	}
-}
 </style>

assets/components/scroll/scroll.vue

@@ -210,21 +210,17 @@ export default {
 	padding: 1rem .5rem 1rem 2rem;
 }
 
-.scroll .expand-light {
+.scroll-light .expand-dark {
 	display: none;
 }
 
-.scroll-light {
-	.expand-light {
-		display: block;
-	}
-
-	.expand-dark {
-		display: none;
-	}
-}
-
 .scroll-dark .expand-light {
 	display: none;
 }
+
+@media(max-width: $breakpoint) {
+	.scroll-button {
+		display: none;
+	}
+}
 </style>

assets/components/tags/tag.vue

@@ -31,11 +31,7 @@
 				/>
 			</Scroll>
 
-			<FilterBar
-				ref="filter"
-				:fetch-releases="fetchReleases"
-			/>
-
+			<FilterBar :fetch-releases="fetchReleases" />
 			<Releases :releases="releases" />
 
 			<Pagination
@@ -77,8 +73,6 @@ async function fetchReleases() {
 
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
-
-	this.$refs.filter.$el.scrollIntoView();
 }
 
 async function mounted() {
@@ -100,7 +94,7 @@ export default {
 			description: null,
 			releases: null,
 			totalCount: 0,
-			limit: 20,
+			limit: 15,
 			pageTitle: null,
 			hasMedia: false,
 			expanded: false,

assets/js/router.js

@@ -191,9 +191,6 @@ const routes = [
 const router = createRouter({
 	history: createWebHistory(),
 	routes,
-	scrollBehavior(to, from, savedPosition) {
-		console.log(to, from, savedPosition);
-	},
 });
 
 export default router;

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.158.0",
+    "version": "1.157.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.158.0",
+    "version": "1.157.0",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {