cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: photo/video capture-date pipeline + premium UI/UX overhaul

Browse Source 
Backend — Photos timeline now groups by real capture date instead of upload time. New MediaMetadataService (FileLifecycleHook) extracts EXIF DateTimeOriginal from images and container creation_time from videos (mov/mp4/mkv) via nom-exif, timezone-correct (OffsetTimeOriginal), persisting captured_at so the existing media_sort_date trigger takes over. Adds POST /admin/photos/metadata/reextract to backfill existing media. Falls back to upload date when no embedded date exists.

Frontend — premium grid cards: combined metadata line (relative date · size, owner avatar when shared), custom selection checkbox with a clear checked state, uniform full-width 4:3 thumbnail tiles independent of filename length, centered file-type icons, and a hit-test fix so checkbox/star/kebab clicks reach the controls (the decorative thumbnail no longer captures pointer events). Notification messages internationalised across all 16 locales. Broader polish: design tokens, a11y/focus-visible states, brand + PWA assets.

Chore — bump semver-compatible dependencies (cargo upgrade); add nom-exif 3.6.1.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DioCrafts
2026-06-15 00:17:17 +02:00
parent dac299fea6
commit 81a93a489b
129 changed files with 8194 additions and 2473 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/modals.css
+55 -53
View File
@@ -12,8 +12,8 @@
.about-modal {
background: var(--color-bg-surface);
border-radius: 20px;
padding: 40px;
border-radius: var(--radius-4xl);
padding: var(--space-10);
max-width: 400px;
width: 90%;
text-align: center;
@@ -24,73 +24,74 @@
.about-modal-logo {
width: 72px;
height: 72px;
background: var(--color-accent-gradient);
border-radius: 20px;
background: var(--color-logo-gradient);
border-radius: var(--radius-4xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
margin: 0 auto var(--space-5);
box-shadow: 0 8px 24px var(--color-accent-shadow);
}
.about-modal-logo i {
font-size: 32px;
color: var(--color-danger-text);
.about-modal-logo svg {
width: 36px;
height: 36px;
fill: var(--color-on-accent);
}
.about-modal h2 {
font-size: 22px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-text-heading);
margin-bottom: 6px;
margin-bottom: var(--space-1-5);
}
.about-modal .about-version {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-faint);
margin-bottom: 20px;
margin-bottom: var(--space-5);
}
.about-modal .about-description {
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-subtle);
line-height: 1.6;
margin-bottom: 24px;
margin-bottom: var(--space-6);
}
.about-modal .about-tech {
display: flex;
justify-content: center;
gap: 12px;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: 24px;
margin-bottom: var(--space-6);
}
.about-modal .about-tech-badge {
padding: 4px 12px;
padding: var(--space-1) var(--space-3);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 20px;
font-size: 12px;
border-radius: var(--radius-4xl);
font-size: var(--text-xs);
color: var(--color-text-subtle);
font-weight: 500;
font-weight: var(--weight-medium);
}
.about-modal .about-links {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.about-modal .about-link {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-accent);
gap: var(--space-1-5);
font-size: var(--text-sm);
color: var(--color-accent-text);
text-decoration: none;
font-weight: 500;
font-weight: var(--weight-medium);
transition: opacity 0.2s;
}
@@ -99,13 +100,13 @@
}
.about-modal .about-close-btn {
padding: 10px 32px;
padding: var(--space-2-5) var(--space-8);
background: var(--color-accent-gradient);
color: var(--color-danger-text);
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-xl);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
cursor: pointer;
transition:
transform 0.2s,
@@ -141,7 +142,7 @@
.modal-container {
background-color: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
width: 420px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-3xl);
@@ -157,7 +158,7 @@
.modal-header {
display: flex;
align-items: center;
padding: 20px 24px;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
position: relative;
}
@@ -166,27 +167,28 @@
width: 44px;
height: 44px;
background: var(--color-accent-gradient);
border-radius: 12px;
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
margin-right: var(--space-3-5);
flex-shrink: 0;
[dir="rtl"] & {
margin-left: 14px;
margin-left: var(--space-3-5);
margin-right: unset;
}
}
.modal-icon i {
color: var(--color-danger-text);
font-size: 20px;
font-size: var(--text-xl);
}
.modal-header h2,
.modal-header h3 {
font-size: 18px;
font-weight: 600;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
margin: 0;
flex: 1;
@@ -203,7 +205,7 @@
height: 32px;
border: none;
background: var(--color-bg-muted);
border-radius: 8px;
border-radius: var(--radius-lg);
cursor: pointer;
display: flex;
align-items: center;
@@ -223,23 +225,23 @@
}
.modal-body {
padding: 24px;
padding: var(--space-6);
}
.modal-body label {
display: block;
font-size: 14px;
font-weight: 500;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.modal-input {
width: 100%;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
font-size: 15px;
border: 2px solid var(--color-border);
border-radius: 10px;
border-radius: var(--radius-xl);
background: var(--color-bg-hover);
color: var(--color-text-heading);
transition: all 0.15s ease;
@@ -261,25 +263,25 @@
}
.modal-error {
margin-top: 8px;
font-size: 13px;
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--color-error-text);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
.modal-footer .btn {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
border-radius: 10px;
padding: var(--space-2-5) var(--space-5);
font-size: var(--text-base);
font-weight: var(--weight-medium);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all 0.15s ease;
}