DioCrafts
81a93a489b
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>
94 lines
2.3 KiB
CSS
94 lines
2.3 KiB
CSS
/* ============================================================
|
|
* Reusable loading-skeleton primitive.
|
|
*
|
|
* A `.skeleton` element pulses; modifiers shape it into lines,
|
|
* list rows (mirroring the file-list grid), or grid tiles. Used to
|
|
* hold layout during first load instead of a centred spinner that
|
|
* makes the list flash empty. Honors reduced-motion via the global
|
|
* guard in base/a11y.css.
|
|
*
|
|
* (shareModal's bespoke .smd-skeleton predates this and can migrate
|
|
* onto it when its loader is next touched.)
|
|
* ============================================================ */
|
|
|
|
.skeleton {
|
|
background: var(--color-bg-muted);
|
|
border-radius: var(--radius-md);
|
|
animation: skeletonPulse 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 14px;
|
|
}
|
|
|
|
.skeleton-line--short {
|
|
width: 40%;
|
|
}
|
|
|
|
.skeleton-line--medium {
|
|
width: 65%;
|
|
}
|
|
|
|
.skeleton-line--full {
|
|
width: 100%;
|
|
}
|
|
|
|
/* A loading row shaped like a file-list row (inherits the list's grid
|
|
columns; falls back to icon + name + meta when used standalone). */
|
|
.skeleton-row {
|
|
display: grid;
|
|
grid-template-columns: var(--files-list-columns, 36px 1fr 90px);
|
|
column-gap: var(--space-3);
|
|
align-items: center;
|
|
padding: var(--space-3) 15px;
|
|
border-bottom: 1px solid var(--color-border-xfaint);
|
|
}
|
|
|
|
/* A square loading tile for the photo/file grid. */
|
|
.skeleton-tile {
|
|
aspect-ratio: 1;
|
|
width: 100%;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
/* File-grid loading card — mirrors the real grid card (4:3 thumbnail tile +
|
|
name line + meta line). The card frame itself doesn't pulse; its inner
|
|
`.skeleton` elements do. Dropped straight into `.files-grid-view`. */
|
|
.skeleton-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
padding: var(--space-4);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: var(--radius-2xl);
|
|
}
|
|
|
|
.skeleton-card .skeleton-thumb {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
border-radius: var(--radius-lg);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.skeleton-card .skeleton-line {
|
|
align-self: center;
|
|
}
|
|
|
|
/* Small leading icon block for list-row skeletons. */
|
|
.skeleton-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
@keyframes skeletonPulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|