endery/voxblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve media library card layout with larger grid cells and better text wrapping

Browse Source
This commit is contained in:
Ender 2025-10-24 15:42:30 +02:00
parent a6e86eb976
commit b90ca876db
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/admin/src/components/MediaLibrary.tsx
View File

@ -98,27 +98,27 @@ export default function MediaLibrary({ onInsert, onSetFeature, showSetFeature }:
</Stack>
</Stack>
{error && <Typography color="error" sx={{ mb: 1 }}>{error}</Typography>}
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 1.5 }}>
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 1.5 }}>
{filtered.map((it) => {
const url = `/api/media/obj?key=${encodeURIComponent(it.key)}`;
const name = it.key.split('/').slice(-1)[0];
return (
<Paper key={it.key} sx={{ p: 1.25, display: 'flex', flexDirection: 'column', height: 260 }}>
<Box sx={{ width: '100%', flex: '0 0 140px', display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 1, overflow: 'hidden', background: '#fafafa', borderRadius: 1 }}>
<Paper key={it.key} sx={{ p: 1.25, display: 'flex', flexDirection: 'column', minHeight: 320, overflow: 'hidden' }}>
<Box sx={{ width: '100%', flex: '0 0 150px', display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 1, overflow: 'hidden', background: '#fafafa', borderRadius: 1 }}>
<a href={url} target="_blank" rel="noreferrer">
<img src={url} alt={name} style={{ maxWidth: '100%', maxHeight: '140px', objectFit: 'contain', display: 'block' }} />
<img src={url} alt={name} style={{ maxWidth: '100%', maxHeight: '150px', objectFit: 'contain', display: 'block' }} />
</a>
</Box>
<Typography variant="caption" noWrap sx={{ display: 'block' }} title={name}>{name}</Typography>
<Typography variant="caption" sx={{ display: 'block', whiteSpace: 'normal', overflowWrap: 'anywhere' }} title={name}>{name}</Typography>
<Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>{fmtSize(it.size)} · {fmtDate(it.lastModified)}</Typography>
<Box sx={{ flexGrow: 1 }} />
<Stack direction="row" spacing={1} sx={{ mt: 1, flexWrap: 'wrap' }}>
<Button size="small" variant="outlined" sx={{ flex: '1 1 48%' }} onClick={() => onInsert(url)}>Insert</Button>
<Stack direction="row" spacing={1} sx={{ mt: 0.5, flexWrap: 'wrap' }}>
<Button size="small" variant="outlined" sx={{ flex: '1 1 48%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} onClick={() => onInsert(url)}>Insert</Button>
{showSetFeature && onSetFeature && (
<Button size="small" variant="outlined" sx={{ flex: '1 1 48%' }} onClick={() => onSetFeature(url)}>Set Feature</Button>
<Button size="small" variant="outlined" sx={{ flex: '1 1 48%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} onClick={() => onSetFeature(url)}>Set Feature</Button>
)}
<Button size="small" variant="text" sx={{ flex: '1 1 48%' }} onClick={() => copyUrl(url)}>Copy URL</Button>
<Button size="small" color="error" variant="text" sx={{ flex: '1 1 48%' }} onClick={() => { if (confirm('Delete this image?')) del(it.key) }}>Delete</Button>
<Button size="small" variant="text" sx={{ flex: '1 1 48%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} onClick={() => copyUrl(url)}>Copy URL</Button>
<Button size="small" color="error" variant="text" sx={{ flex: '1 1 48%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} onClick={() => { if (confirm('Delete this image?')) del(it.key) }}>Delete</Button>
</Stack>
</Paper>
);