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,6 +1,10 @@
 <template>
 	<div class="page">
 		<div class="content">
+			<div
+				class="banner-container"
+				:style="{ 'background-image': scene.poster.isS3 ? `url('https://cdndev.traxxx.me/${scene.poster.thumbnail}')` : `url('/media/${scene.poster.thumbnail}')` }"
+			>
 				<div class="banner">
 					<div class="poster-container">
 						<a
@@ -44,6 +48,7 @@
 						</div>
 					</div>
 				</div>
+			</div>
 
 			<div class="meta">
 				<div class="entity">
@@ -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,