From 52708b5d704599bfc51ce26132c6ee06d524d728 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Tue, 19 Mar 2024 20:50:50 +0100
Subject: [PATCH] Fixed pagination and scene poster overflowing page on small
 screens. Fixed back reload interfering with tag page hashes.

---
 components/actors/tile.vue           |  4 +-
 components/footer/navigation.vue     |  2 +-
 components/header/header.vue         | 40 +++++++++++--------
 components/pagination/pagination.vue | 11 +++++
 components/scenes/scenes.vue         |  8 ++--
 pages/movies/+Page.vue               |  7 ++++
 pages/scene/+Page.vue                | 59 ++++++++++++++++++++-------
 pages/stashes/@username/+Page.vue    |  2 -
 pages/tags/+Page.vue                 | 11 ++++-
 renderer/+onRenderClient.js          |  6 ++-
 src/scenes.js                        |  8 ++--
 src/tools/manticore-joins.js         | 60 ++++++++++++++--------------
 12 files changed, 141 insertions(+), 77 deletions(-)

diff --git a/components/actors/tile.vue b/components/actors/tile.vue
index 0624893..faf12ef 100644
--- a/components/actors/tile.vue
+++ b/components/actors/tile.vue
@@ -27,6 +27,7 @@
 
 				<span
 					v-if="actor.ageThen && actor.ageThen < actor.ageFromBirth"
+					title="Age on date of release"
 					class="age age-then"
 				>{{ actor.ageThen }}</span>
 			</span>
@@ -139,7 +140,8 @@ defineProps({
 }
 
 .age-then {
-	color: var(--shadow-weak-10);
+	color: var(--grey-light-20);
+	font-weight: normal;
 }
 
 .country {
diff --git a/components/footer/navigation.vue b/components/footer/navigation.vue
index ee5ab9f..31ad9c9 100644
--- a/components/footer/navigation.vue
+++ b/components/footer/navigation.vue
@@ -102,7 +102,7 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 	border-radius: 1.5rem;
 }
 
-@media(--small-50) {
+@media(--small-60) {
 	.nav-item.channels {
 		display: none;
 	}
diff --git a/components/header/header.vue b/components/header/header.vue
index 48ea9b1..42e3063 100644
--- a/components/header/header.vue
+++ b/components/header/header.vue
@@ -80,7 +80,10 @@
 				:triggers="['click']"
 				:prevent-overflow="true"
 			>
-				<div class="userpanel">
+				<div
+					class="userpanel"
+					:class="{ searching: searchFocused }"
+				>
 					<img
 						:src="user.avatar"
 						class="avatar"
@@ -130,6 +133,7 @@
 			<div
 				v-else-if="allowLogin"
 				class="userpanel"
+				:class="{ searching: searchFocused }"
 			>
 				<a
 					:href="`/login?r=${encodeURIComponent(currentPath)}`"
@@ -224,6 +228,7 @@ async function logout() {
 	height: 100%;
 	display: flex;
 	align-items: center;
+	margin-left: .5rem;
 }
 
 .search {
@@ -353,16 +358,6 @@ async function logout() {
 }
 
 @media(--small) {
-	.search .input {
-		width: 12rem;
-	}
-}
-
-@media(--small-10) {
-	.nav-list {
-		display: none;
-	}
-
 	.header-section {
 		flex-grow: 1;
 	}
@@ -376,12 +371,9 @@ async function logout() {
 		flex-grow: 1;
 	}
 
-	.logo {
-		margin-right: .75rem;
-	}
-
-	.userpanel {
-		padding-left: 1rem;
+	.userpanel.searching {
+		padding: 0 0 0 1rem;
+		width: 0;
 	}
 
 	.login-text {
@@ -392,4 +384,18 @@ async function logout() {
 		display: block;
 	}
 }
+
+@media(--small-10) {
+	.nav-list {
+		display: none;
+	}
+
+	.logo {
+		margin-right: .75rem;
+	}
+
+	.userpanel {
+		padding-left: 1rem;
+	}
+}
 </style>
diff --git a/components/pagination/pagination.vue b/components/pagination/pagination.vue
index 86fbbcb..61b2094 100644
--- a/components/pagination/pagination.vue
+++ b/components/pagination/pagination.vue
@@ -276,4 +276,15 @@ function getPath(page) {
 	color: var(--shadow-strong-10);
 	font-size: 1.1rem;
 }
+
+@media (--small-30) {
+	.pagination {
+		height: 4.5rem;
+	}
+
+	.page {
+		width: 2rem;
+		height: 2.5rem;
+	}
+}
 </style>
diff --git a/components/scenes/scenes.vue b/components/scenes/scenes.vue
index edfba4e..df89fdf 100644
--- a/components/scenes/scenes.vue
+++ b/components/scenes/scenes.vue
@@ -57,7 +57,7 @@
 						v-if="pageStash"
 						:selected="scope === 'stashed'"
 						value="stashed"
-					>Stashed</option>
+					>Added</option>
 
 					<option
 						v-if="filters.search"
@@ -299,14 +299,14 @@ function updateFilter(prop, value, reload = true) {
 .scenes {
 	display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-	gap: .75rem .5rem;
+	gap: .5rem;
 	padding: .5rem 1rem 1rem 1rem;
 }
 
 .scopes {
 	display: flex;
 	gap: .5rem;
-	margin: .75rem 0 .25rem 1rem;
+	padding: .75rem 0 .25rem 1rem;
 }
 
 .scope {
@@ -353,6 +353,8 @@ function updateFilter(prop, value, reload = true) {
 @media(--small-20) {
 	.scenes {
 		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+		padding: .5rem .5rem 1rem .5rem;
+		gap: .5rem .25rem;
 	}
 }
 </style>
diff --git a/pages/movies/+Page.vue b/pages/movies/+Page.vue
index f1a53cb..cdb11e9 100644
--- a/pages/movies/+Page.vue
+++ b/pages/movies/+Page.vue
@@ -462,6 +462,13 @@ function updateFilter(prop, value, reload = true) {
 	}
 }
 
+@media(--small-20) {
+	.movies {
+		padding: .5rem .5rem 1rem .5rem;
+		gap: .5rem .25rem;
+	}
+}
+
 @media(--small-50) {
 	.movies {
 		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
diff --git a/pages/scene/+Page.vue b/pages/scene/+Page.vue
index d8d46e1..956a7ad 100644
--- a/pages/scene/+Page.vue
+++ b/pages/scene/+Page.vue
@@ -149,13 +149,13 @@
 					</li>
 				</ul>
 
-				<div class="section">
+				<div
+					v-if="scene.description"
+					class="section"
+				>
 					<h3 class="heading">Description</h3>
 
-					<p
-						v-if="scene.description"
-						class="description"
-					>{{ scene.description }}</p>
+					<p class="description">{{ scene.description }}</p>
 				</div>
 
 				<div class="section details">
@@ -246,22 +246,30 @@ async function unstash() {
 .banner-container {
 	background-position: center;
 	background-size: cover;
+	border-radius: .5rem .5rem 0 0;
 	margin-top: .5rem;
 }
 
 .banner {
 	max-height: 18rem;
+	border-radius: .5rem .5rem 0 0;
 	display: flex;
 	font-size: 0;
 	backdrop-filter: blur(1rem);
+	overflow: hidden;
+}
+
+.poster-container {
+	padding: .5rem;
+	max-height: 18rem;
 }
 
 .poster {
 	height: auto;
-	max-height: 18rem;
+	max-height: 100%;
 	width: auto;
 	max-width: 100%;
-	border-radius: .25rem .25rem 0 0;
+	border-radius: .5rem;
 }
 
 .poster,
@@ -273,12 +281,12 @@ async function unstash() {
 }
 
 .album {
-	height: 100%;
+	height: auto;
 	flex-grow: 1;
 	display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	gap: .5rem;
-	padding: 0 .5rem .5rem .5rem;
+	padding: .5rem .5rem .5rem 0;
 	overflow-y: auto;
 }
 
@@ -300,7 +308,7 @@ async function unstash() {
 	justify-content: space-between;
 	align-items: center;
 	background: var(--grey-dark-40);
-	border-radius: 0 0 .25rem .25rem;
+	border-radius: 0 0 .5rem .5rem;
 	color: var(--text-light);
 }
 
@@ -444,7 +452,31 @@ async function unstash() {
 	color: var(--shadow);
 }
 
-@media (--compact) {
+@media(--small-10) {
+	.banner-container {
+		border-radius: 0;
+		margin-top: 0;
+	}
+
+	.banner {
+		justify-content: center;
+	}
+
+	.poster-container {
+		padding: 0;
+		border-radius: 0;
+	}
+
+	.poster {
+		border-radius: 0;
+	}
+
+	.album {
+		display: none;
+	}
+}
+
+@media (--small) {
 	.header {
 		flex-direction: column-reverse;
 	}
@@ -455,13 +487,10 @@ async function unstash() {
 		margin-bottom: 1.5rem;
 	}
 
-	.view {
-		flex-direction: row-reverse;
-	}
-
 	.title {
 		width: 100%;
 		margin-left: 1rem;
+		white-space: wrap;
 	}
 
 	.meta {
diff --git a/pages/stashes/@username/+Page.vue b/pages/stashes/@username/+Page.vue
index e110bb2..8439739 100644
--- a/pages/stashes/@username/+Page.vue
+++ b/pages/stashes/@username/+Page.vue
@@ -39,8 +39,6 @@ import Scenes from '#/components/scenes/scenes.vue';
 
 const pageContext = inject('pageContext');
 const stash = pageContext.pageProps.stash;
-
-console.log(stash);
 </script>
 
 <style scoped>
diff --git a/pages/tags/+Page.vue b/pages/tags/+Page.vue
index fc7561a..2e73134 100644
--- a/pages/tags/+Page.vue
+++ b/pages/tags/+Page.vue
@@ -120,7 +120,16 @@ onMounted(() => {
 		categories.value.scrollLeft += event.deltaY;
 	});
 
-	content.value.addEventListener('scroll', calculateActiveCategory);
+	content.value.addEventListener('scroll', () => calculateActiveCategory());
+
+	window.addEventListener('popstate', () => {
+		if (window.location.hash) {
+			const categoryTitle = document.querySelector(window.location.hash);
+
+			activeCategory.value = window.location.hash.slice(1);
+			categoryTitle?.scrollIntoView();
+		}
+	});
 
 	calculateActiveCategory();
 });
diff --git a/renderer/+onRenderClient.js b/renderer/+onRenderClient.js
index d3d7621..addc8c6 100644
--- a/renderer/+onRenderClient.js
+++ b/renderer/+onRenderClient.js
@@ -16,8 +16,10 @@ async function onRenderClient(pageContext) {
 
 	if (typeof window !== 'undefined') {
 		window.addEventListener('popstate', () => {
-			// force reload when back button is used
-			window.location.reload();
+			if (!window.location.hash) {
+				// force reload when back button is used
+				window.location.reload();
+			}
 		});
 	}
 }
diff --git a/src/scenes.js b/src/scenes.js
index 6124c0b..c283921 100644
--- a/src/scenes.js
+++ b/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);
 
@@ -420,8 +418,8 @@ async function queryManticoreSql(filters, options, _reqUser) {
 				if (filters.entityId) {
 					builder.where((whereBuilder) => {
 						whereBuilder
-							.where('channel_id', filters.entityId)
-							.orWhere('network_id', filters.entityId);
+							.where('scenes.channel_id', filters.entityId)
+							.orWhere('scenes.network_id', filters.entityId);
 					});
 				}
 
@@ -483,7 +481,7 @@ async function queryManticoreSql(filters, options, _reqUser) {
 
 	const results = await utilsApi.sql(curatedSqlQuery);
 
-	// console.log(results);
+	console.log(results[0]);
 
 	const actorIds = results
 		.find((result) => (result.columns[0].actor_ids || result.columns[0]['scenes.actor_ids']) && result.columns[1]['count(*)'])
diff --git a/src/tools/manticore-joins.js b/src/tools/manticore-joins.js
index 655bbb6..6e29f4c 100644
--- a/src/tools/manticore-joins.js
+++ b/src/tools/manticore-joins.js
@@ -1,28 +1,28 @@
 import { indexApi, utilsApi } from '../manticore.js';
-import rawMovies from './movies.json' with { type: 'json' };
+import rawvideos from './movies.json' with { type: 'json' };
 
-async function fetchMovies() {
-	const movies = rawMovies
-		.filter((movie) => movie.cast.length > 0
-			&& movie.genres.length > 0
-			&& movie.cast.every((actor) => actor.charCodeAt(0) >= 65)) // throw out movies with non-alphanumerical actor names
-		.map((movie, index) => ({ id: index + 1, ...movie }));
+async function fetchvideos() {
+	const videos = rawvideos
+		.filter((video) => video.cast.length > 0
+			&& video.genres.length > 0
+			&& video.cast.every((actor) => actor.charCodeAt(0) >= 65)) // throw out videos with non-alphanumerical actor names
+		.map((video, index) => ({ id: index + 1, ...video }));
 
-	const actors = Array.from(new Set(movies.flatMap((movie) => movie.cast))).sort();
-	const genres = Array.from(new Set(movies.flatMap((movie) => movie.genres)));
+	const actors = Array.from(new Set(videos.flatMap((video) => video.cast))).sort();
+	const genres = Array.from(new Set(videos.flatMap((video) => video.genres)));
 
 	return {
-		movies,
+		videos,
 		actors,
 		genres,
 	};
 }
 
 async function init() {
-	await utilsApi.sql('drop table if exists movies');
-	await utilsApi.sql('drop table if exists movies_liked');
+	await utilsApi.sql('drop table if exists videos');
+	await utilsApi.sql('drop table if exists videos_liked');
 
-	await utilsApi.sql(`create table movies (
+	await utilsApi.sql(`create table videos (
 		 id int,
 		 title text,
 		 actor_ids multi,
@@ -31,37 +31,37 @@ async function init() {
 		 genres text
 	)`);
 
-	await utilsApi.sql(`create table movies_liked (
+	await utilsApi.sql(`create table videos_liked (
 		 id int,
 		 user_id int,
-		 movie_id int
+		 video_id int
 	)`);
 
-	const { movies, actors, genres } = await fetchMovies();
+	const { videos, actors, genres } = await fetchvideos();
 
-	const likedMovieIds = Array.from(new Set(Array.from({ length: 10.000 }, () => movies[Math.round(Math.random() * movies.length)].id)));
+	const likedvideoIds = Array.from(new Set(Array.from({ length: 10.000 }, () => videos[Math.round(Math.random() * videos.length)].id)));
 
-	const docs = movies
-		.map((movie) => ({
+	const docs = videos
+		.map((video) => ({
 			replace: {
-				index: 'movies',
-				id: movie.id,
+				index: 'videos',
+				id: video.id,
 				doc: {
-					title: movie.title,
-					actor_ids: movie.cast.map((actor) => actors.indexOf(actor)),
-					actors: movie.cast.join(','),
-					genre_ids: movie.genres.map((genre) => genres.indexOf(genre)),
-					genres: movie.genres.join(','),
+					title: video.title,
+					actor_ids: video.cast.map((actor) => actors.indexOf(actor)),
+					actors: video.cast.join(','),
+					genre_ids: video.genres.map((genre) => genres.indexOf(genre)),
+					genres: video.genres.join(','),
 				},
 			},
 		}))
-		.concat(likedMovieIds.map((movieId, index) => ({
+		.concat(likedvideoIds.map((videoId, index) => ({
 			replace: {
-				index: 'movies_liked',
+				index: 'videos_liked',
 				id: index + 1,
 				doc: {
 					user_id: Math.floor(Math.random() * 51),
-					movie_id: movieId,
+					video_id: videoId,
 				},
 			},
 		})));
@@ -71,7 +71,7 @@ async function init() {
 	console.log('data', data);
 
 	const result = await utilsApi.sql(`
-		select * from movies_liked
+		select * from videos_liked
 		limit 10
 	`);