chris/nsfwapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
Linrador 2026-05-15 11:24:18 +02:00
parent fd3442500c
commit 2ee9599fd3
1 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/ui/TrainingTab.tsx
View File

@ -4746,19 +4746,24 @@ export default function TrainingTab(props: {
bottomReservePx: 138, bottomReservePx: 138,
} }
const imageStageStyle = { const imageStageStyle = imageExpanded
aspectRatio: `${frameLayoutSize.width} / ${frameLayoutSize.height}`, ? ({
'--image-stage-max-h': `${imageStageLimits.baseDvh}dvh`,
'--image-stage-max-h-sm': `${imageStageLimits.smDvh}dvh`,
} as CSSProperties & Record<string, string | number>)
: ({
aspectRatio: `${frameLayoutSize.width} / ${frameLayoutSize.height}`,
'--image-stage-max-h': `${imageStageLimits.baseDvh}dvh`, '--image-stage-max-h': `${imageStageLimits.baseDvh}dvh`,
'--image-stage-max-h-sm': `${imageStageLimits.smDvh}dvh`, '--image-stage-max-h-sm': `${imageStageLimits.smDvh}dvh`,
'--image-stage-max-h-lg': `min(calc(100dvh - ${imageStageLimits.bottomReservePx}px - env(safe-area-inset-bottom)), ${imageStageLimits.lgDvh}dvh, ${imageStageLimits.lgPx}px)`, '--image-stage-max-h-lg': `min(${imageStageLimits.lgDvh}dvh, ${imageStageLimits.lgPx}px)`,
'--image-stage-w': `${imageStageLimits.baseDvh * imageAspectRatio}dvh`, '--image-stage-w': `${imageStageLimits.baseDvh * imageAspectRatio}dvh`,
'--image-stage-w-sm': `${imageStageLimits.smDvh * imageAspectRatio}dvh`, '--image-stage-w-sm': `${imageStageLimits.smDvh * imageAspectRatio}dvh`,
'--image-stage-w-lg': `min(${imageStageLimits.lgDvh * imageAspectRatio}dvh, ${Math.round( '--image-stage-w-lg': `min(${imageStageLimits.lgDvh * imageAspectRatio}dvh, ${Math.round(
imageStageLimits.lgPx * imageAspectRatio imageStageLimits.lgPx * imageAspectRatio
)}px)`, )}px)`,
} as CSSProperties & Record<string, string | number> } as CSSProperties & Record<string, string | number>)
const imageStageHeightClass = [ const imageStageHeightClass = [
'max-h-[var(--image-stage-max-h)]', 'max-h-[var(--image-stage-max-h)]',
@ -4872,7 +4877,7 @@ export default function TrainingTab(props: {
<div <div
className={[ className={[
'grid grid-cols-1 items-start gap-2 lg:h-full lg:min-h-0 lg:overflow-visible', 'grid grid-cols-1 items-start gap-2 lg:h-full lg:min-h-0 lg:items-stretch lg:overflow-hidden',
imageExpanded imageExpanded
? [ ? [
// Desktop: Sidebars bleiben sichtbar, Mitte bekommt deutlich mehr Breite. // Desktop: Sidebars bleiben sichtbar, Mitte bekommt deutlich mehr Breite.
@ -4945,17 +4950,21 @@ export default function TrainingTab(props: {
</aside> </aside>
{/* Mitte */} {/* Mitte */}
<div className="min-w-0 lg:h-full lg:min-h-0 lg:overflow-visible"> <div className="min-w-0 lg:flex lg:h-full lg:min-h-0 lg:flex-col lg:overflow-hidden">
<section <section
className={[ className={[
'min-w-0 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-gray-900/60 sm:p-3', 'min-w-0 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-gray-900/60 sm:p-3',
'lg:self-start', imageExpanded
? 'lg:flex lg:h-full lg:min-h-0 lg:flex-col lg:overflow-hidden'
: 'lg:self-start',
].join(' ')} ].join(' ')}
> >
<div <div
className={[ className={[
'relative z-50 mx-auto flex items-center justify-center rounded-lg bg-black p-2 sm:p-3', 'relative z-50 mx-auto flex items-center justify-center rounded-lg bg-black p-2 sm:p-3',
imageStageHeightClass, imageExpanded
? 'w-full min-h-0 max-h-[var(--image-stage-max-h)] sm:max-h-[var(--image-stage-max-h-sm)] lg:h-auto lg:max-h-none lg:flex-1 lg:self-stretch'
: imageStageHeightClass,
'overflow-visible', 'overflow-visible',
].join(' ')} ].join(' ')}
style={imageStageStyle} style={imageStageStyle}
@ -4965,7 +4974,9 @@ export default function TrainingTab(props: {
<div <div
ref={imageBoxRef} ref={imageBoxRef}
className={[ className={[
'relative z-50 inline-flex min-h-0 max-h-full max-w-full select-none overscroll-contain transition', imageExpanded
? 'relative z-50 flex h-full w-full min-h-0 select-none items-center justify-center overscroll-contain transition'
: 'relative z-50 inline-flex min-h-0 max-h-full max-w-full select-none overscroll-contain transition',
imageTouchClass, imageTouchClass,
'[-webkit-touch-callout:none] [-webkit-user-select:none] [user-select:none]', '[-webkit-touch-callout:none] [-webkit-user-select:none] [user-select:none]',
trainingRunning || loading ? 'pointer-events-none' : '', trainingRunning || loading ? 'pointer-events-none' : '',
@ -5001,7 +5012,9 @@ export default function TrainingTab(props: {
onContextMenu={(e) => e.preventDefault()} onContextMenu={(e) => e.preventDefault()}
onDragStart={(e) => e.preventDefault()} onDragStart={(e) => e.preventDefault()}
className={[ className={[
'block h-auto min-h-0 max-h-full max-w-full rounded-md object-contain', imageExpanded
? 'block h-full w-full min-h-0 rounded-md object-contain'
: 'block h-auto min-h-0 max-h-full max-w-full rounded-md object-contain',
'select-none', 'select-none',
'transition-opacity duration-500 ease-out will-change-opacity motion-reduce:transition-none', 'transition-opacity duration-500 ease-out will-change-opacity motion-reduce:transition-none',
frameImageLoaded ? 'opacity-100' : 'opacity-0', frameImageLoaded ? 'opacity-100' : 'opacity-0',