Fixed pagination and scene poster overflowing page on small screens. Fixed back reload interfering with tag page hashes.

This commit is contained in:
DebaucheryLibrarian 2024-03-19 20:50:50 +01:00
parent 21eaa98de4
commit 52708b5d70
12 changed files with 141 additions and 77 deletions

View File

@ -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 {

View File

@ -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;
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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));

View File

@ -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 {

View File

@ -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>

View File

@ -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();
});

View File

@ -16,8 +16,10 @@ async function onRenderClient(pageContext) {
if (typeof window !== 'undefined') {
window.addEventListener('popstate', () => {
if (!window.location.hash) {
// force reload when back button is used
window.location.reload();
}
});
}
}

View File

@ -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(*)'])

View File

@ -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
`);