Preventing scene poster, stash header and bottom navigation overflow.
This commit is contained in:
parent
fce43ed0c6
commit
3fa8bb7486
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -51,3 +51,9 @@
|
|||
height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<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
|
||||
|
|
@ -44,6 +48,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meta">
|
||||
<div class="entity">
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue