DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Preventing scene poster, stash header and bottom navigation overflow.

This commit is contained in:
DebaucheryLibrarian 2024-03-19 02:19:23 +01:00
parent fce43ed0c6
commit 3fa8bb7486
9 changed files with 145 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/breakpoints.css
View File

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

6
assets/css/states.css
View File

@ -51,3 +51,9 @@
height: 0px;
}
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

2
components/footer/navigation.vue
View File

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

2
components/scenes/tile.vue
View File

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

2
pages/movies/+Page.vue
View File

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

155
pages/scene/+Page.vue
View File

@ -1,47 +1,52 @@
<template>
<div class="page">
<div class="content">
<div class="banner">
<div class="poster-container">
<a
:href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
target="_blank"
class="poster-link"
>
<img
v-if="scene.poster"
:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }"
:width="scene.poster.width"
:height="scene.poster.height"
class="poster"
>
</a>
</div>
<div
v-if="scene.photos.length > 0"
class="album"
>
<div
v-for="photo in scene.photos"
:key="`photo-${photo.id}`"
class="photo-container"
>
<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
:href="photo.isS3 ? `https://cdndev.traxxx.me/${photo.path}` : `/media/${photo.path}`"
:href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
target="_blank"
class="photo-link"
class="poster-link"
>
<img
:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`"
:style="{ 'background-image': photo.isS3 ? `url(https://cdndev.traxxx.me/${photo.lazy})` : `url(/media/${photo.lazy})` }"
:width="photo.width"
:height="photo.height"
class="photo"
v-if="scene.poster"
:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }"
:width="scene.poster.width"
:height="scene.poster.height"
class="poster"
>
</a>
</div>
<div
v-if="scene.photos.length > 0"
class="album"
>
<div
v-for="photo in scene.photos"
:key="`photo-${photo.id}`"
class="photo-container"
>
<a
:href="photo.isS3 ? `https://cdndev.traxxx.me/${photo.path}` : `/media/${photo.path}`"
target="_blank"
class="photo-link"
>
<img
:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`"
:style="{ 'background-image': photo.isS3 ? `url(https://cdndev.traxxx.me/${photo.lazy})` : `url(/media/${photo.lazy})` }"
:width="photo.width"
:height="photo.height"
class="photo"
>
</a>
</div>
</div>
</div>
</div>
@ -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 {
height: 18rem;
display: flex;
.banner-container {
background-position: center;
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-left: .5rem;
margin-right: .75rem;
.icon {
padding: .5rem .5rem;
}
.icon.heart:hover,
.icon.heart.favorited {
cursor: pointer;
fill: var(--primary);
}
}
.view {

4
pages/scene/+onBeforeRender.js
View File

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

29
pages/stashes/@username/+Page.vue
View File

@ -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;
height: 1.5rem;
margin-right: 1rem;
width: 1.25rem;
height: 1.25rem;
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>

4
src/scenes.js
View File

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