assets/css/breakpoints.css

@@ -1,5 +1,4 @@
-@custom-media --small-60 (max-width: 350px);
+@custom-media --small-50 (max-width: 350px);
-@custom-media --small-50 (max-width: 410px);
 @custom-media --small-40 (max-width: 480px);
 @custom-media --small-30 (max-width: 540px);
 @custom-media --small-20 (max-width: 650px);

assets/css/states.css

@@ -51,9 +51,3 @@
 		height: 0px;
 	}
 }
-
-.ellipsis {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}

components/footer/navigation.vue

@@ -61,7 +61,7 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 	justify-content: center;
 	align-items: center;
 	flex-grow: 1;
-	padding: .5rem 0;
+	padding: .5rem;
 	border: none;
 	background: none;
 	color: var(--highlight-strong-20);

components/scenes/tile.vue

@@ -136,6 +136,8 @@ async function stash() {
 }
 
 async function unstash() {
+	console.log('unstash!', user);
+
 	try {
 		favorited.value = false;
 		await del(`/stashes/${user.primaryStash.id}/scenes/${props.scene.id}`);

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "traxxx-web",
-  "version": "0.10.3",
+  "version": "0.10.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.10.3",
+      "version": "0.10.2",
       "dependencies": {
         "@brillout/json-serializer": "^0.5.8",
         "@dicebear/collection": "^7.0.5",

package.json

@@ -70,5 +70,5 @@
     "postcss-custom-media": "^10.0.2",
     "postcss-nesting": "^12.0.2"
   },
-  "version": "0.10.3"
+  "version": "0.10.2"
 }

pages/movies/+Page.vue

@@ -357,6 +357,7 @@ function updateFilter(prop, value, reload = true) {
 .tile-info {
 	flex-shrink: 0;
 	font-size: 0;
+	overflow: hidden;
 }
 
 .tile-meta {
@@ -405,7 +406,6 @@ function updateFilter(prop, value, reload = true) {
 }
 
 .title {
-	display: block;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;

pages/scene/+Page.vue

@@ -1,52 +1,47 @@
 <template>
 	<div class="page">
 		<div class="content">
-			<div
+			<div class="banner">
-				class="banner-container"
+				<div class="poster-container">
-				:style="{ 'background-image': scene.poster.isS3 ? `url('https://cdndev.traxxx.me/${scene.poster.thumbnail}')` : `url('/media/${scene.poster.thumbnail}')` }"
+					<a
-			>
+						:href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
-				<div class="banner">
+						target="_blank"
-					<div class="poster-container">
+						class="poster-link"
+					>
+						<img
+							v-if="scene.poster"
+							:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
+							:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }"
+							:width="scene.poster.width"
+							:height="scene.poster.height"
+							class="poster"
+						>
+					</a>
+				</div>
+
+				<div
+					v-if="scene.photos.length > 0"
+					class="album"
+				>
+					<div
+						v-for="photo in scene.photos"
+						:key="`photo-${photo.id}`"
+						class="photo-container"
+					>
 						<a
-							:href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
+							:href="photo.isS3 ? `https://cdndev.traxxx.me/${photo.path}` : `/media/${photo.path}`"
 							target="_blank"
-							class="poster-link"
+							class="photo-link"
 						>
 							<img
-								v-if="scene.poster"
+								:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`"
-								:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
+								:style="{ 'background-image': photo.isS3 ? `url(https://cdndev.traxxx.me/${photo.lazy})` : `url(/media/${photo.lazy})` }"
-								:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }"
+								:width="photo.width"
-								:width="scene.poster.width"
+								:height="photo.height"
-								:height="scene.poster.height"
+								class="photo"
-								class="poster"
 							>
 						</a>
 					</div>
-
-					<div
-						v-if="scene.photos.length > 0"
-						class="album"
-					>
-						<div
-							v-for="photo in scene.photos"
-							:key="`photo-${photo.id}`"
-							class="photo-container"
-						>
-							<a
-								:href="photo.isS3 ? `https://cdndev.traxxx.me/${photo.path}` : `/media/${photo.path}`"
-								target="_blank"
-								class="photo-link"
-							>
-								<img
-									:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`"
-									:style="{ 'background-image': photo.isS3 ? `url(https://cdndev.traxxx.me/${photo.lazy})` : `url(/media/${photo.lazy})` }"
-									:width="photo.width"
-									:height="photo.height"
-									class="photo"
-								>
-							</a>
-						</div>
-					</div>
 				</div>
 			</div>
 
@@ -92,24 +87,6 @@
 				>{{ scene.title }}</h2>
 
 				<div class="actions">
-					<div class="bookmarks">
-						<Icon icon="folder-heart" />
-
-						<Icon
-							v-show="favorited"
-							icon="heart7"
-							class="heart favorited"
-							@click.native.stop="unstash"
-						/>
-
-						<Icon
-							v-show="!favorited && user"
-							icon="heart8"
-							class="heart"
-							@click.native.stop="stash"
-						/>
-					</div>
-
 					<div class="view">
 						<button
 							v-if="scene.photos.length > 0"
@@ -123,6 +100,11 @@
 							class="button watch nolink"
 						>Watch scene</Link>
 					</div>
+
+					<div class="bookmarks">
+						<Icon icon="folder-heart" />
+						<Icon icon="heart8" />
+					</div>
 				</div>
 			</div>
 
@@ -196,37 +178,15 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { inject } from 'vue';
 
-import { post, del } from '#/src/api.js';
 import { formatDate, formatDuration } from '#/utils/format.js';
 
 import Icon from '../../components/icon/icon.vue';
 import ActorTile from '../../components/actors/tile.vue';
 
-const { pageProps, user } = inject('pageContext');
+const { pageProps } = inject('pageContext');
 const { scene } = pageProps;
-
-const favorited = ref(scene.stashes.some((sceneStash) => sceneStash.primary));
-
-async function stash() {
-	try {
-		favorited.value = true;
-		await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: scene.id });
-	} catch (error) {
-		favorited.value = false;
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-		await del(`/stashes/${user.primaryStash.id}/scenes/${scene.id}`);
-	} catch (error) {
-		console.error(error);
-		favorited.value = true;
-	}
-}
 </script>
 
 <style scoped>
@@ -243,24 +203,15 @@ async function unstash() {
 	flex-direction: column;
 }
 
-.banner-container {
+.banner {
-	background-position: center;
+	height: 18rem;
-	background-size: cover;
+	display: flex;
 	margin-top: .5rem;
 }
 
-.banner {
-	max-height: 18rem;
-	display: flex;
-	font-size: 0;
-	backdrop-filter: blur(1rem);
-}
-
 .poster {
-	height: auto;
+	height: 100%;
-	max-height: 18rem;
 	width: auto;
-	max-width: 100%;
 	border-radius: .25rem .25rem 0 0;
 }
 
@@ -339,7 +290,7 @@ async function unstash() {
 }
 
 .title {
-	margin: 0 .5rem 0 0;
+	margin: 0 1rem 0 0;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -349,7 +300,6 @@ async function unstash() {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	flex-shrink: 0;
 
 	.icon {
 		width: 1.5rem;
@@ -366,17 +316,8 @@ async function unstash() {
 
 .bookmarks {
 	display: flex;
-	margin-right: .75rem;
+	gap: 1rem;
-
+	margin-left: .5rem;
-	.icon {
-		padding: .5rem .5rem;
-	}
-
-	.icon.heart:hover,
-	.icon.heart.favorited {
-		cursor: pointer;
-		fill: var(--primary);
-	}
 }
 
 .view {

pages/scene/+onBeforeRender.js

@@ -1,7 +1,7 @@
-import { fetchScenesById } from '#/src/scenes.js';
+import { fetchScenesById } from '../../src/scenes';
 
 export async function onBeforeRender(pageContext) {
-	const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)], pageContext.user);
+	const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)]);
 
 	return {
 		pageContext: {

pages/stashes/@username/+Page.vue

@@ -22,7 +22,7 @@
 				<img
 					:src="stash.user.avatar"
 					class="avatar"
-				><span class="userame ellipsis">{{ stash.user.username }}</span>
+				>{{ stash.user.username }}
 			</a>
 		</div>
 
@@ -56,7 +56,6 @@ console.log(stash);
 	padding: .5rem 1rem;
 	color: var(--text-light);
 	background: var(--grey-dark-40);
-	flex-shrink: 0;
 }
 
 .title {
@@ -64,13 +63,11 @@ console.log(stash);
 	text-transform: capitalize;
 	display: flex;
 	align-items: center;
-	font-size: 1.2rem;
-	margin-right: 1rem;
 
 	.icon {
-		width: 1.25rem;
+		width: 1.5rem;
-		height: 1.25rem;
+		height: 1.5rem;
-		margin-right: .75rem;
+		margin-right: 1rem;
 		fill: var(--text-light);
 	}
 }
@@ -79,32 +76,16 @@ console.log(stash);
 	display: flex;
 	align-items: center;
 	font-weight: bold;
-	overflow: hidden;
 }
 
 .avatar {
 	width: 1.5rem;
 	height: 1.5rem;
-	margin-right: .75rem;
+	margin-right: 1rem;
 	border-radius: .25rem;
 }
 
 .scenes-container {
 	overflow-y: auto;
 }
-
-@media(--small-50) {
-	.title {
-		font-size: 1rem;
-
-		.icon {
-			width: 1rem;
-			height: 1rem;
-		}
-	}
-
-	.avatar {
-		display: none;
-	}
-}
 </style>

src/scenes.js

@@ -125,8 +125,6 @@ export async function fetchScenesById(sceneIds, reqUser) {
 			: [],
 	]);
 
-	console.log(reqUser, stashes);
-
 	return sceneIds.map((sceneId) => {
 		const scene = scenes.find((sceneEntry) => sceneEntry.id === sceneId);
 
@@ -552,6 +550,8 @@ export async function fetchScenes(filters, rawOptions, reqUser) {
 	const scenes = await fetchScenesById(sceneIds, reqUser);
 	console.timeEnd('fetch full');
 
+	console.log('total', result.total);
+
 	return {
 		scenes,
 		aggActors,