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 <span
v-if="actor.ageThen && actor.ageThen < actor.ageFromBirth" v-if="actor.ageThen && actor.ageThen < actor.ageFromBirth"
title="Age on date of release"
class="age age-then" class="age age-then"
>{{ actor.ageThen }}</span> >{{ actor.ageThen }}</span>
</span> </span>
@ -139,7 +140,8 @@ defineProps({
} }
.age-then { .age-then {
color: var(--shadow-weak-10); color: var(--grey-light-20);
font-weight: normal;
} }
.country { .country {

View File

@ -102,7 +102,7 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
border-radius: 1.5rem; border-radius: 1.5rem;
} }
@media(--small-50) { @media(--small-60) {
.nav-item.channels { .nav-item.channels {
display: none; display: none;
} }

View File

@ -80,7 +80,10 @@
:triggers="['click']" :triggers="['click']"
:prevent-overflow="true" :prevent-overflow="true"
> >
<div class="userpanel"> <div
class="userpanel"
:class="{ searching: searchFocused }"
>
<img <img
:src="user.avatar" :src="user.avatar"
class="avatar" class="avatar"
@ -130,6 +133,7 @@
<div <div
v-else-if="allowLogin" v-else-if="allowLogin"
class="userpanel" class="userpanel"
:class="{ searching: searchFocused }"
> >
<a <a
:href="`/login?r=${encodeURIComponent(currentPath)}`" :href="`/login?r=${encodeURIComponent(currentPath)}`"
@ -224,6 +228,7 @@ async function logout() {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: .5rem;
} }
.search { .search {
@ -353,16 +358,6 @@ async function logout() {
} }
@media(--small) { @media(--small) {
.search .input {
width: 12rem;
}
}
@media(--small-10) {
.nav-list {
display: none;
}
.header-section { .header-section {
flex-grow: 1; flex-grow: 1;
} }
@ -376,12 +371,9 @@ async function logout() {
flex-grow: 1; flex-grow: 1;
} }
.logo { .userpanel.searching {
margin-right: .75rem; padding: 0 0 0 1rem;
} width: 0;
.userpanel {
padding-left: 1rem;
} }
.login-text { .login-text {
@ -392,4 +384,18 @@ async function logout() {
display: block; display: block;
} }
} }
@media(--small-10) {
.nav-list {
display: none;
}
.logo {
margin-right: .75rem;
}
.userpanel {
padding-left: 1rem;
}
}
</style> </style>

View File

@ -276,4 +276,15 @@ function getPath(page) {
color: var(--shadow-strong-10); color: var(--shadow-strong-10);
font-size: 1.1rem; font-size: 1.1rem;
} }
@media (--small-30) {
.pagination {
height: 4.5rem;
}
.page {
width: 2rem;
height: 2.5rem;
}
}
</style> </style>

View File

@ -57,7 +57,7 @@
v-if="pageStash" v-if="pageStash"
:selected="scope === 'stashed'" :selected="scope === 'stashed'"
value="stashed" value="stashed"
>Stashed</option> >Added</option>
<option <option
v-if="filters.search" v-if="filters.search"
@ -299,14 +299,14 @@ function updateFilter(prop, value, reload = true) {
.scenes { .scenes {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: .75rem .5rem; gap: .5rem;
padding: .5rem 1rem 1rem 1rem; padding: .5rem 1rem 1rem 1rem;
} }
.scopes { .scopes {
display: flex; display: flex;
gap: .5rem; gap: .5rem;
margin: .75rem 0 .25rem 1rem; padding: .75rem 0 .25rem 1rem;
} }
.scope { .scope {
@ -353,6 +353,8 @@ function updateFilter(prop, value, reload = true) {
@media(--small-20) { @media(--small-20) {
.scenes { .scenes {
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
padding: .5rem .5rem 1rem .5rem;
gap: .5rem .25rem;
} }
} }
</style> </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) { @media(--small-50) {
.movies { .movies {
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));

View File

@ -149,13 +149,13 @@
</li> </li>
</ul> </ul>
<div class="section"> <div
v-if="scene.description"
class="section"
>
<h3 class="heading">Description</h3> <h3 class="heading">Description</h3>
<p <p class="description">{{ scene.description }}</p>
v-if="scene.description"
class="description"
>{{ scene.description }}</p>
</div> </div>
<div class="section details"> <div class="section details">
@ -246,22 +246,30 @@ async function unstash() {
.banner-container { .banner-container {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
border-radius: .5rem .5rem 0 0;
margin-top: .5rem; margin-top: .5rem;
} }
.banner { .banner {
max-height: 18rem; max-height: 18rem;
border-radius: .5rem .5rem 0 0;
display: flex; display: flex;
font-size: 0; font-size: 0;
backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
overflow: hidden;
}
.poster-container {
padding: .5rem;
max-height: 18rem;
} }
.poster { .poster {
height: auto; height: auto;
max-height: 18rem; max-height: 100%;
width: auto; width: auto;
max-width: 100%; max-width: 100%;
border-radius: .25rem .25rem 0 0; border-radius: .5rem;
} }
.poster, .poster,
@ -273,12 +281,12 @@ async function unstash() {
} }
.album { .album {
height: 100%; height: auto;
flex-grow: 1; flex-grow: 1;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: .5rem; gap: .5rem;
padding: 0 .5rem .5rem .5rem; padding: .5rem .5rem .5rem 0;
overflow-y: auto; overflow-y: auto;
} }
@ -300,7 +308,7 @@ async function unstash() {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: var(--grey-dark-40); background: var(--grey-dark-40);
border-radius: 0 0 .25rem .25rem; border-radius: 0 0 .5rem .5rem;
color: var(--text-light); color: var(--text-light);
} }
@ -444,7 +452,31 @@ async function unstash() {
color: var(--shadow); 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 { .header {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
@ -455,13 +487,10 @@ async function unstash() {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.view {
flex-direction: row-reverse;
}
.title { .title {
width: 100%; width: 100%;
margin-left: 1rem; margin-left: 1rem;
white-space: wrap;
} }
.meta { .meta {

View File

@ -39,8 +39,6 @@ import Scenes from '#/components/scenes/scenes.vue';
const pageContext = inject('pageContext'); const pageContext = inject('pageContext');
const stash = pageContext.pageProps.stash; const stash = pageContext.pageProps.stash;
console.log(stash);
</script> </script>
<style scoped> <style scoped>

View File

@ -120,7 +120,16 @@ onMounted(() => {
categories.value.scrollLeft += event.deltaY; 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(); calculateActiveCategory();
}); });

View File

@ -16,8 +16,10 @@ async function onRenderClient(pageContext) {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
window.addEventListener('popstate', () => { window.addEventListener('popstate', () => {
// force reload when back button is used if (!window.location.hash) {
window.location.reload(); // 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) => { return sceneIds.map((sceneId) => {
const scene = scenes.find((sceneEntry) => sceneEntry.id === sceneId); const scene = scenes.find((sceneEntry) => sceneEntry.id === sceneId);
@ -420,8 +418,8 @@ async function queryManticoreSql(filters, options, _reqUser) {
if (filters.entityId) { if (filters.entityId) {
builder.where((whereBuilder) => { builder.where((whereBuilder) => {
whereBuilder whereBuilder
.where('channel_id', filters.entityId) .where('scenes.channel_id', filters.entityId)
.orWhere('network_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); const results = await utilsApi.sql(curatedSqlQuery);
// console.log(results); console.log(results[0]);
const actorIds = results const actorIds = results
.find((result) => (result.columns[0].actor_ids || result.columns[0]['scenes.actor_ids']) && result.columns[1]['count(*)']) .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 { indexApi, utilsApi } from '../manticore.js';
import rawMovies from './movies.json' with { type: 'json' }; import rawvideos from './movies.json' with { type: 'json' };
async function fetchMovies() { async function fetchvideos() {
const movies = rawMovies const videos = rawvideos
.filter((movie) => movie.cast.length > 0 .filter((video) => video.cast.length > 0
&& movie.genres.length > 0 && video.genres.length > 0
&& movie.cast.every((actor) => actor.charCodeAt(0) >= 65)) // throw out movies with non-alphanumerical actor names && video.cast.every((actor) => actor.charCodeAt(0) >= 65)) // throw out videos with non-alphanumerical actor names
.map((movie, index) => ({ id: index + 1, ...movie })); .map((video, index) => ({ id: index + 1, ...video }));
const actors = Array.from(new Set(movies.flatMap((movie) => movie.cast))).sort(); const actors = Array.from(new Set(videos.flatMap((video) => video.cast))).sort();
const genres = Array.from(new Set(movies.flatMap((movie) => movie.genres))); const genres = Array.from(new Set(videos.flatMap((video) => video.genres)));
return { return {
movies, videos,
actors, actors,
genres, genres,
}; };
} }
async function init() { async function init() {
await utilsApi.sql('drop table if exists movies'); await utilsApi.sql('drop table if exists videos');
await utilsApi.sql('drop table if exists movies_liked'); await utilsApi.sql('drop table if exists videos_liked');
await utilsApi.sql(`create table movies ( await utilsApi.sql(`create table videos (
id int, id int,
title text, title text,
actor_ids multi, actor_ids multi,
@ -31,37 +31,37 @@ async function init() {
genres text genres text
)`); )`);
await utilsApi.sql(`create table movies_liked ( await utilsApi.sql(`create table videos_liked (
id int, id int,
user_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 const docs = videos
.map((movie) => ({ .map((video) => ({
replace: { replace: {
index: 'movies', index: 'videos',
id: movie.id, id: video.id,
doc: { doc: {
title: movie.title, title: video.title,
actor_ids: movie.cast.map((actor) => actors.indexOf(actor)), actor_ids: video.cast.map((actor) => actors.indexOf(actor)),
actors: movie.cast.join(','), actors: video.cast.join(','),
genre_ids: movie.genres.map((genre) => genres.indexOf(genre)), genre_ids: video.genres.map((genre) => genres.indexOf(genre)),
genres: movie.genres.join(','), genres: video.genres.join(','),
}, },
}, },
})) }))
.concat(likedMovieIds.map((movieId, index) => ({ .concat(likedvideoIds.map((videoId, index) => ({
replace: { replace: {
index: 'movies_liked', index: 'videos_liked',
id: index + 1, id: index + 1,
doc: { doc: {
user_id: Math.floor(Math.random() * 51), user_id: Math.floor(Math.random() * 51),
movie_id: movieId, video_id: videoId,
}, },
}, },
}))); })));
@ -71,7 +71,7 @@ async function init() {
console.log('data', data); console.log('data', data);
const result = await utilsApi.sql(` const result = await utilsApi.sql(`
select * from movies_liked select * from videos_liked
limit 10 limit 10
`); `);