Fixed pagination and scene poster overflowing page on small screens. Fixed back reload interfering with tag page hashes.
This commit is contained in:
parent
21eaa98de4
commit
52708b5d70
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(*)'])
|
||||
|
|
|
|||
|
|
@ -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
|
||||
`);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue