soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Refine guest gallery UI and add multi-photo upload flow
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-02-09 18:01:01 +01:00
parent e3bb1642db
commit 1f9a43806a
9 changed files with 369 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
resources/js/guest-v2/components/PhotoFrameTile.tsx
View File

@@ -23,47 +23,31 @@ export default function PhotoFrameTile({
<YStack
height={height}
borderRadius={borderRadius}
padding={6}
backgroundColor={isDark ? 'rgba(255, 255, 255, 0.04)' : 'rgba(15, 23, 42, 0.04)'}
borderWidth={1}
borderColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)'}
overflow="hidden"
position="relative"
backgroundColor="$muted"
style={{
boxShadow: isDark ? '0 18px 32px rgba(2, 6, 23, 0.4)' : '0 16px 28px rgba(15, 23, 42, 0.12)',
boxShadow: isDark ? '0 10px 18px rgba(2, 6, 23, 0.36)' : '0 8px 14px rgba(15, 23, 42, 0.16)',
}}
>
<YStack
flex={1}
borderRadius={borderRadius}
backgroundColor="$muted"
borderWidth={1}
borderColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.1)'}
overflow="hidden"
position="relative"
style={{
boxShadow: isDark
? 'inset 0 0 0 1px rgba(255, 255, 255, 0.06)'
: 'inset 0 0 0 1px rgba(15, 23, 42, 0.04)',
}}
>
{shimmer ? (
<YStack
position="absolute"
top={-40}
bottom={-40}
left="-60%"
width="60%"
backgroundColor="transparent"
style={{
backgroundImage:
'linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0))',
animation: 'guestNightShimmer 4.6s ease-in-out infinite',
animationDelay: `${shimmerDelayMs}ms`,
}}
/>
) : null}
<YStack position="relative" zIndex={1} flex={1}>
{children}
</YStack>
{shimmer ? (
<YStack
position="absolute"
top={-40}
bottom={-40}
left="-60%"
width="60%"
backgroundColor="transparent"
style={{
backgroundImage:
'linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0))',
animation: 'guestNightShimmer 4.6s ease-in-out infinite',
animationDelay: `${shimmerDelayMs}ms`,
}}
/>
) : null}
<YStack position="relative" zIndex={1} flex={1}>
{children}
</YStack>
</YStack>
);