Preventing scene poster, stash header and bottom navigation overflow.

assets/css/breakpoints.css

@@ -1,4 +1,5 @@
-@custom-media --small-50 (max-width: 350px);
+@custom-media --small-60 (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,3 +51,9 @@
 		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;
+	padding: .5rem 0;
 	border: none;
 	background: none;
 	color: var(--highlight-strong-20);

components/scenes/tile.vue

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

pages/movies/+Page.vue

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

pages/scene/+Page.vue

@@ -1,47 +1,52 @@
 <template>
 	<div class="page">
 		<div class="content">
-			<div class="banner">
+			<div
-				<div class="poster-container">
+				class="banner-container"
-					<a
+				:style="{ 'background-image': scene.poster.isS3 ? `url('https://cdndev.traxxx.me/${scene.poster.thumbnail}')` : `url('/media/${scene.poster.thumbnail}')` }"
-						:href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
+			>
-						target="_blank"
+				<div class="banner">
-						class="poster-link"
+					<div class="poster-container">
-					>
-						<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="photo.isS3 ? `https://cdndev.traxxx.me/${photo.path}` : `/media/${photo.path}`"
+							:href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
 							target="_blank"
-							class="photo-link"
+							class="poster-link"
 						>
 							<img
-								:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`"
+								v-if="scene.poster"
-								:style="{ 'background-image': photo.isS3 ? `url(https://cdndev.traxxx.me/${photo.lazy})` : `url(/media/${photo.lazy})` }"
+								:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
-								:width="photo.width"
+								:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }"
-								:height="photo.height"
+								:width="scene.poster.width"
-								class="photo"
+								: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="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>
 
@@ -87,6 +92,24 @@
 				>{{ 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"
@@ -100,11 +123,6 @@
 							class="button watch nolink"
 						>Watch scene</Link>
 					</div>
-
-					<div class="bookmarks">
-						<Icon icon="folder-heart" />
-						<Icon icon="heart8" />
-					</div>
 				</div>
 			</div>
 
@@ -178,15 +196,37 @@
 </template>
 
 <script setup>
-import { inject } from 'vue';
+import { ref, 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 } = inject('pageContext');
+const { pageProps, user } = 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>
@@ -203,15 +243,24 @@ const { scene } = pageProps;
 	flex-direction: column;
 }
 
-.banner {
+.banner-container {
-	height: 18rem;
+	background-position: center;
-	display: flex;
+	background-size: cover;
 	margin-top: .5rem;
 }
 
+.banner {
+	max-height: 18rem;
+	display: flex;
+	font-size: 0;
+	backdrop-filter: blur(1rem);
+}
+
 .poster {
-	height: 100%;
+	height: auto;
+	max-height: 18rem;
 	width: auto;
+	max-width: 100%;
 	border-radius: .25rem .25rem 0 0;
 }
 
@@ -290,7 +339,7 @@ const { scene } = pageProps;
 }
 
 .title {
-	margin: 0 1rem 0 0;
+	margin: 0 .5rem 0 0;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -300,6 +349,7 @@ const { scene } = pageProps;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	flex-shrink: 0;
 
 	.icon {
 		width: 1.5rem;
@@ -316,8 +366,17 @@ const { scene } = pageProps;
 
 .bookmarks {
 	display: flex;
-	gap: 1rem;
+	margin-right: .75rem;
-	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';
+import { fetchScenesById } from '#/src/scenes.js';
 
 export async function onBeforeRender(pageContext) {
-	const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)]);
+	const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)], pageContext.user);
 
 	return {
 		pageContext: {

pages/stashes/@username/+Page.vue

@@ -22,7 +22,7 @@
 				<img
 					:src="stash.user.avatar"
 					class="avatar"
-				>{{ stash.user.username }}
+				><span class="userame ellipsis">{{ stash.user.username }}</span>
 			</a>
 		</div>
 
@@ -56,6 +56,7 @@ console.log(stash);
 	padding: .5rem 1rem;
 	color: var(--text-light);
 	background: var(--grey-dark-40);
+	flex-shrink: 0;
 }
 
 .title {
@@ -63,11 +64,13 @@ console.log(stash);
 	text-transform: capitalize;
 	display: flex;
 	align-items: center;
+	font-size: 1.2rem;
+	margin-right: 1rem;
 
 	.icon {
-		width: 1.5rem;
+		width: 1.25rem;
-		height: 1.5rem;
+		height: 1.25rem;
-		margin-right: 1rem;
+		margin-right: .75rem;
 		fill: var(--text-light);
 	}
 }
@@ -76,16 +79,32 @@ console.log(stash);
 	display: flex;
 	align-items: center;
 	font-weight: bold;
+	overflow: hidden;
 }
 
 .avatar {
 	width: 1.5rem;
 	height: 1.5rem;
-	margin-right: 1rem;
+	margin-right: .75rem;
 	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,6 +125,8 @@ export async function fetchScenesById(sceneIds, reqUser) {
 			: [],
 	]);
 
+	console.log(reqUser, stashes);
+
 	return sceneIds.map((sceneId) => {
 		const scene = scenes.find((sceneEntry) => sceneEntry.id === sceneId);
 
@@ -550,8 +552,6 @@ 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,