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>
96 lines
3.7 KiB
CSS
96 lines
3.7 KiB
CSS
/* ── Tooltip primitive ─────────────────────────────────────────────
|
||
*
|
||
* Generic on-hover tooltip used app-wide. Two flavours:
|
||
*
|
||
* 1. Single-line label, content from `data-tooltip="…"` on the trigger.
|
||
* Use `attachTooltip(el, text)` from `static/js/utils/tooltip.js`.
|
||
* 2. Rich popover with a DOM subtree, populated lazily on first hover.
|
||
* Use `attachRichTooltip(el, populateAsync)` for things like the
|
||
* group-vignette member list.
|
||
*
|
||
* Both are portal'd to `document.body` (the JS helper creates a child
|
||
* of body and positions it with `position: fixed`) so they escape the
|
||
* `overflow: hidden` clipping that lives on lane wrappers, list rows,
|
||
* and any other "contain my children" ancestor. Without the portal,
|
||
* tooltips near the edges of those containers get cropped — exactly
|
||
* the bug that prompted this refactor.
|
||
*
|
||
* Hover-intent timing is asymmetric on purpose:
|
||
* - Entry: 250 ms delay before the fade-in starts. Short enough to
|
||
* feel responsive (much faster than the browser-native `title`
|
||
* delay, which is ~500–1500 ms), long enough to suppress flicker
|
||
* on accidental mouseovers.
|
||
* - Exit: 0 ms delay. The tooltip dismisses immediately when the
|
||
* user moves away.
|
||
*
|
||
* The class toggle is JS-driven (mouseenter/leave + focusin/out
|
||
* listeners on the trigger); the visible transition lives entirely
|
||
* in CSS so a setTimeout never gates the visual change.
|
||
*/
|
||
|
||
.oxi-tooltip-popover {
|
||
position: fixed;
|
||
min-width: 0;
|
||
max-width: 280px;
|
||
padding: var(--space-1-5) var(--space-2-5);
|
||
background-color: var(--color-text);
|
||
color: var(--color-bg-page);
|
||
font-size: var(--text-xs);
|
||
line-height: var(--leading-normal);
|
||
text-align: left;
|
||
border-radius: var(--radius-md);
|
||
box-shadow: 0 2px 8px var(--color-shadow);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
/* Default (no `--visible`): fast hide, no delay. */
|
||
transition: opacity 100ms ease-out 0ms;
|
||
z-index: 10000;
|
||
}
|
||
|
||
/* Simple (data-tooltip) flavour — keeps the label on one line so it
|
||
reads as a short caption, not a paragraph. Used by short labels
|
||
like a user vignette's email-on-hover. */
|
||
.oxi-tooltip-popover--simple {
|
||
white-space: nowrap;
|
||
max-width: none;
|
||
}
|
||
|
||
/* Visible state overrides the transition to add the hover-intent
|
||
delay on the *entry* path. Removing the class falls back to
|
||
the default rule above (no delay → immediate fade-out). */
|
||
.oxi-tooltip-popover--visible {
|
||
opacity: 1;
|
||
transition: opacity 100ms ease-out 250ms;
|
||
}
|
||
|
||
/* ── Rich-popover layout helpers ────────────────────────────────── */
|
||
|
||
.oxi-tooltip-popover__line {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* "+N" overflow badge — small pill at the end of a list of items when
|
||
there are more than the tooltip cares to show. Lighter background
|
||
so the count reads as meta-information, not just another line. */
|
||
.oxi-tooltip-popover__overflow {
|
||
display: inline-block;
|
||
margin-top: var(--space-1);
|
||
padding: 1px 7px;
|
||
font-size: var(--text-2xs);
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--color-bg-page);
|
||
background-color: var(--color-text-faint);
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
/* Placeholder line shown briefly between the first hover and the
|
||
populate() callback's resolve (e.g. while `/api/groups/{id}/members`
|
||
is in flight). Italic + dimmed so the user perceives it as a
|
||
transitional state, not real content. */
|
||
.oxi-tooltip-popover__placeholder {
|
||
color: var(--color-text-faint);
|
||
font-style: italic;
|
||
}
|