itqop
/
itcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix ui

This commit is contained in:
itqop 2026-01-06 02:10:15 +03:00
parent e843337f34
commit ecfa339748
2 changed files with 74 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/components/ViewerModal.tsx
View File

@ -168,8 +168,8 @@ export default function ViewerModal({
left: 0,
right: 0,
pt: 'max(env(safe-area-inset-top), 8px)',
px: 2,
pb: 2,
px: { xs: 1, sm: 2 },
pb: { xs: 1, sm: 2 },
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
@ -177,26 +177,54 @@ export default function ViewerModal({
zIndex: 1,
}}
>
<Typography variant="h6" color="white" noWrap sx={{ flex: 1, mr: 2 }}>
<Typography
variant="h6"
color="white"
noWrap
sx={{
flex: 1,
mr: { xs: 1, sm: 2 },
fontSize: { xs: '0.875rem', sm: '1.25rem' },
}}
>
{asset.original_filename}
</Typography>
<Box>
<IconButton color="inherit" onClick={handleDownload} sx={{ color: 'white' }}>
<DownloadIcon />
<Box sx={{ display: 'flex', gap: { xs: 0, sm: 0.5 } }}>
<IconButton
color="inherit"
onClick={handleDownload}
sx={{ color: 'white', p: { xs: 0.5, sm: 1 } }}
size="small"
>
<DownloadIcon fontSize="small" />
</IconButton>
{onShare && (
<IconButton color="inherit" onClick={handleShare} sx={{ color: 'white' }}>
<ShareIcon />
<IconButton
color="inherit"
onClick={handleShare}
sx={{ color: 'white', p: { xs: 0.5, sm: 1 } }}
size="small"
>
<ShareIcon fontSize="small" />
</IconButton>
)}
{onDelete && (
<IconButton color="inherit" onClick={handleDelete} sx={{ color: 'white' }}>
<DeleteIcon />
<IconButton
color="inherit"
onClick={handleDelete}
sx={{ color: 'white', p: { xs: 0.5, sm: 1 } }}
size="small"
>
<DeleteIcon fontSize="small" />
</IconButton>
)}
<IconButton onClick={onClose} sx={{ color: 'white' }}>
<CloseIcon />
<IconButton
onClick={onClose}
sx={{ color: 'white', p: { xs: 0.5, sm: 1 } }}
size="small"
>
<CloseIcon fontSize="small" />
</IconButton>
</Box>
</Box>
@ -205,30 +233,34 @@ export default function ViewerModal({
{currentIndex > 0 && (
<IconButton
onClick={handlePrev}
size="small"
sx={{
position: 'absolute',
left: 16,
left: { xs: 4, sm: 16 },
color: 'white',
bgcolor: 'rgba(0,0,0,0.5)',
'&:hover': { bgcolor: 'rgba(0,0,0,0.7)' },
p: { xs: 0.5, sm: 1 },
}}
>
<PrevIcon fontSize="large" />
<PrevIcon fontSize="medium" />
</IconButton>
)}
{currentIndex < assets.length - 1 && (
<IconButton
onClick={handleNext}
size="small"
sx={{
position: 'absolute',
right: 16,
right: { xs: 4, sm: 16 },
color: 'white',
bgcolor: 'rgba(0,0,0,0.5)',
'&:hover': { bgcolor: 'rgba(0,0,0,0.7)' },
p: { xs: 0.5, sm: 1 },
}}
>
<NextIcon fontSize="large" />
<NextIcon fontSize="medium" />
</IconButton>
)}
@ -243,9 +275,10 @@ export default function ViewerModal({
src={currentUrl}
alt={asset.original_filename}
sx={{
maxWidth: '95%',
maxHeight: '85%',
maxWidth: { xs: 'calc(100% - 16px)', sm: '95%' },
maxHeight: { xs: 'calc(100vh - 160px)', sm: '85%' },
objectFit: 'contain',
px: { xs: 1, sm: 0 },
}}
/>
)}
@ -257,8 +290,9 @@ export default function ViewerModal({
controls
autoPlay
sx={{
maxWidth: '95%',
maxHeight: '85%',
maxWidth: { xs: 'calc(100% - 16px)', sm: '95%' },
maxHeight: { xs: 'calc(100vh - 160px)', sm: '85%' },
px: { xs: 1, sm: 0 },
}}
/>
)}
@ -270,24 +304,25 @@ export default function ViewerModal({
bottom: 0,
left: 0,
right: 0,
px: 2,
pt: 2,
px: { xs: 1, sm: 2 },
pt: { xs: 1, sm: 2 },
pb: 'max(env(safe-area-inset-bottom), 8px)',
bgcolor: 'rgba(0,0,0,0.5)',
color: 'white',
display: 'flex',
justifyContent: 'center',
gap: 2,
gap: { xs: 1, sm: 2 },
flexWrap: 'wrap',
}}
>
<Typography variant="body2">
<Typography variant="body2" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
{currentIndex + 1} / {assets.length}
</Typography>
<Typography variant="body2">
<Typography variant="body2" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
{(asset.size_bytes / 1024 / 1024).toFixed(2)} MB
</Typography>
{asset.width && asset.height && (
<Typography variant="body2">
<Typography variant="body2" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
{asset.width} × {asset.height}
</Typography>
)}

18
frontend/src/pages/ShareViewPage.tsx
View File

@ -71,20 +71,20 @@ export default function ShareViewPage() {
display: 'flex',
alignItems: 'center',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
p: 2,
p: { xs: 1, sm: 2 },
}}
>
<Container maxWidth="md">
<Paper
elevation={24}
sx={{
p: 4,
p: { xs: 2, sm: 3, md: 4 },
borderRadius: 3,
}}
>
<Box sx={{ textAlign: 'center', mb: 3 }}>
<CloudIcon sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
<Typography variant="h4" fontWeight="bold" gutterBottom>
<CloudIcon sx={{ fontSize: { xs: 48, sm: 64 }, color: 'primary.main', mb: 2 }} />
<Typography variant="h4" fontWeight="bold" gutterBottom sx={{ fontSize: { xs: '1.5rem', sm: '2.125rem' } }}>
Общий доступ к файлу
</Typography>
</Box>
@ -135,7 +135,15 @@ export default function ShareViewPage() {
{!loading && share && asset && (
<Box>
<Typography variant="h6" gutterBottom>
<Typography
variant="h6"
gutterBottom
sx={{
wordBreak: 'break-word',
overflowWrap: 'anywhere',
fontSize: { xs: '1rem', sm: '1.25rem' },
}}
>
{asset.original_filename}
</Typography>
<Typography variant="body2" color="text.secondary" gutterBottom>