Compare commits
14 Commits
093c942f67
...
feat/issue
| Author | SHA1 | Date | |
|---|---|---|---|
|
61116916a8 | ||
|
|
f4d8442760 | ||
|
|
fe8868d143 | ||
|
|
9ae84828ea | ||
| fa510f3991 | |||
|
|
3ba5ae982b | ||
|
|
82979be705 | ||
|
|
a63b8115a1 | ||
|
|
ace9602f6e | ||
|
|
9716319aad | ||
|
|
afee9df8c0 | ||
| 49d8ab78b4 | |||
|
|
109202246e | ||
| 273a97046a |
@@ -229,9 +229,14 @@ jobs:
|
||||
name: Backend Unit Tests
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
DOCKER_API_VERSION: "1.43" # NAS runner runs Docker 24.x (max API 1.43); Testcontainers 2.x defaults to 1.44
|
||||
# CI runs against the root-server Docker daemon (29.x). This API pin is a harmless
|
||||
# carry-over from the old NAS runner (Docker 24.x, max API 1.43); safe to drop later.
|
||||
DOCKER_API_VERSION: "1.43"
|
||||
DOCKER_HOST: unix:///var/run/docker.sock
|
||||
TESTCONTAINERS_RYUK_DISABLED: "true"
|
||||
# Ryuk (Testcontainers' out-of-process reaper) is intentionally LEFT ENABLED so it
|
||||
# removes each run's containers after the JVM exits. Disabling it forced the in-JVM
|
||||
# reaper, which hung at JVM shutdown and leaked Postgres containers run-over-run until
|
||||
# the daemon degraded and the fork timed out at teardown — see #848.
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
> Living document. One row per `REQ-NNN` across all in-flight and shipped features. The spec
|
||||
> itself lives in the **Gitea issue** (issue-only — there is no committed `spec.md`); this
|
||||
> matrix is the part of the spec that _is_ committed: it links each requirement to its issue,
|
||||
> matrix is the part of the spec that *is* committed: it links each requirement to its issue,
|
||||
> the code that implements it, and the test(s) that prove it — so any requirement traces end
|
||||
> to end, and any orphan (a requirement with no test) is visible on `main`.
|
||||
|
||||
@@ -24,31 +24,30 @@
|
||||
|
||||
## Matrix
|
||||
|
||||
| REQ-ID | Requirement Summary | Issue | Feature | Implementation File(s) | Test(s) | Status |
|
||||
| ------- | ---------------------------------------------------------------------- | -------- | ---------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| REQ-001 | Store avatar at `avatars/{userId}`, overwrite | #example | profile-picture-upload (\_example) | `UserService` (planned) | `UserServiceAvatarTest#storesUnderUserKey`, `#replaceLeavesNoOrphan` | Planned |
|
||||
| REQ-002 | Upload self avatar → 200 + avatarUrl | #example | profile-picture-upload (\_example) | `UserAvatarController`, `UserService` (planned) | `UserAvatarControllerTest#uploadReturnsAvatarUrl` | Planned |
|
||||
| REQ-003 | Delete self avatar → avatarUrl null | #example | profile-picture-upload (\_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#deleteClearsAvatar` | Planned |
|
||||
| REQ-004 | No avatar → null + initials placeholder | #example | profile-picture-upload (\_example) | `UserProfileView`, avatar component (planned) | `avatar-placeholder.svelte.spec.ts` | Planned |
|
||||
| REQ-005 | ADMIN_USER may delete others' avatar | #example | profile-picture-upload (\_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#adminDeletesOthersAvatar` | Planned |
|
||||
| REQ-006 | Unauthenticated → 401, store nothing | #example | profile-picture-upload (\_example) | `SecurityConfig`, controller (planned) | `UserAvatarControllerTest#unauthenticatedReturns401` | Planned |
|
||||
| REQ-007 | Non-image → 400 UNSUPPORTED_FILE_TYPE | #example | profile-picture-upload (\_example) | `UserService` (planned) | `UserAvatarControllerTest#rejectsNonImage` | Planned |
|
||||
| REQ-008 | Over 2 MB → 400 AVATAR_TOO_LARGE | #example | profile-picture-upload (\_example) | `UserService`, `ErrorCode` (planned) | `UserAvatarControllerTest#rejectsOversize` | Planned |
|
||||
| REQ-009 | Non-admin on others → 403 FORBIDDEN | #example | profile-picture-upload (\_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#nonAdminForbiddenOnOthers` | Planned |
|
||||
| REQ-001 | Render dated entry via shared `formatDocumentDate` (de/en/es) | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `renders a DAY date localized in German`, `renders a SEASON date with the German season word`, `delegates a same-year RANGE to formatDocumentDate` | Done |
|
||||
| REQ-002 | Non-UNKNOWN + non-empty date → shared label, `raw=null`, `getLocale()` | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `renders a DAY date localized in German`, `renders a DAY date localized in English` | Done |
|
||||
| REQ-003 | `UNKNOWN` → `null` (no chip) | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `returns null for UNKNOWN precision even with a date`, `returns null for UNKNOWN precision without a date` | Done |
|
||||
| REQ-004 | `null`/`undefined`/`''` eventDate → `null`, no formatter call | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `returns null for APPROX with a null eventDate, without calling the formatter`, `returns null for DAY with an empty-string eventDate`, `treats undefined eventDateEnd identically to null for RANGE` | Done |
|
||||
| REQ-005 | No rendering logic outside `documentDate.ts` | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` (façade) | `dateLabel.spec.ts` › `delegates a same-year RANGE to formatDocumentDate` (asserts byte-identical delegation) | Done |
|
||||
| REQ-006 | `timeline` in coverage `include` (80% branch gate) | #778 | timeline-date-label | `frontend/vite.config.ts` | coverage `include` now lists `src/lib/timeline/**`; covered by all `dateLabel.spec.ts` cases | Done |
|
||||
| REQ-ID | Requirement Summary | Issue | Feature | Implementation File(s) | Test(s) | Status |
|
||||
|---|---|---|---|---|---|---|
|
||||
| REQ-001 | Store avatar at `avatars/{userId}`, overwrite | #example | profile-picture-upload (_example) | `UserService` (planned) | `UserServiceAvatarTest#storesUnderUserKey`, `#replaceLeavesNoOrphan` | Planned |
|
||||
| REQ-002 | Upload self avatar → 200 + avatarUrl | #example | profile-picture-upload (_example) | `UserAvatarController`, `UserService` (planned) | `UserAvatarControllerTest#uploadReturnsAvatarUrl` | Planned |
|
||||
| REQ-003 | Delete self avatar → avatarUrl null | #example | profile-picture-upload (_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#deleteClearsAvatar` | Planned |
|
||||
| REQ-004 | No avatar → null + initials placeholder | #example | profile-picture-upload (_example) | `UserProfileView`, avatar component (planned) | `avatar-placeholder.svelte.spec.ts` | Planned |
|
||||
| REQ-005 | ADMIN_USER may delete others' avatar | #example | profile-picture-upload (_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#adminDeletesOthersAvatar` | Planned |
|
||||
| REQ-006 | Unauthenticated → 401, store nothing | #example | profile-picture-upload (_example) | `SecurityConfig`, controller (planned) | `UserAvatarControllerTest#unauthenticatedReturns401` | Planned |
|
||||
| REQ-007 | Non-image → 400 UNSUPPORTED_FILE_TYPE | #example | profile-picture-upload (_example) | `UserService` (planned) | `UserAvatarControllerTest#rejectsNonImage` | Planned |
|
||||
| REQ-008 | Over 2 MB → 400 AVATAR_TOO_LARGE | #example | profile-picture-upload (_example) | `UserService`, `ErrorCode` (planned) | `UserAvatarControllerTest#rejectsOversize` | Planned |
|
||||
| REQ-009 | Non-admin on others → 403 FORBIDDEN | #example | profile-picture-upload (_example) | `UserAvatarController` (planned) | `UserAvatarControllerTest#nonAdminForbiddenOnOthers` | Planned |
|
||||
| REQ-001 | Render dated entry via shared `formatDocumentDate` (de/en/es) | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `renders a DAY date localized in German`, `renders a SEASON date with the German season word`, `delegates a same-year RANGE to formatDocumentDate` | Done |
|
||||
| REQ-002 | Non-UNKNOWN + non-empty date → shared label, `raw=null`, `getLocale()` | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `renders a DAY date localized in German`, `renders a DAY date localized in English` | Done |
|
||||
| REQ-003 | `UNKNOWN` → `null` (no chip) | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `returns null for UNKNOWN precision even with a date`, `returns null for UNKNOWN precision without a date` | Done |
|
||||
| REQ-004 | `null`/`undefined`/`''` eventDate → `null`, no formatter call | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` | `dateLabel.spec.ts` › `returns null for APPROX with a null eventDate, without calling the formatter`, `returns null for DAY with an empty-string eventDate`, `treats undefined eventDateEnd identically to null for RANGE` | Done |
|
||||
| REQ-005 | No rendering logic outside `documentDate.ts` | #778 | timeline-date-label | `frontend/src/lib/timeline/dateLabel.ts` (façade) | `dateLabel.spec.ts` › `delegates a same-year RANGE to formatDocumentDate` (asserts byte-identical delegation) | Done |
|
||||
| REQ-006 | `timeline` in coverage `include` (80% branch gate) | #778 | timeline-date-label | `frontend/vite.config.ts` | coverage `include` now lists `src/lib/timeline/**`; covered by all `dateLabel.spec.ts` cases | Done |
|
||||
|
||||
<!-- Append real features below this line, one row per REQ-NNN, with the real issue number. Keep the header row above. -->
|
||||
|
||||
| REQ-001 | family-member Person with birthDate → 1 BIRTH event, precision passed through | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents` | `DerivedEventsAssemblyTest#should_emit_one_geburt_for_person_with_birthdate`, `#should_pass_birth_precision_through_unchanged` | Done |
|
||||
| REQ-002 | family-member Person with deathDate → 1 DEATH event | #776 | derive-person-life-events | `timeline/TimelineEventService#buildDeathEvents` | `DerivedEventsAssemblyTest#should_emit_one_tod_for_person_with_deathdate`, `#should_emit_one_tod_and_zero_geburt_for_person_with_deathdate_only` | Done |
|
||||
| REQ-003 | null birthDate → 0 Geburt events | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents` | `DerivedEventsAssemblyTest#should_emit_zero_tod_when_person_has_birthdate_but_no_deathdate`, `#should_emit_one_tod_and_zero_geburt_for_person_with_deathdate_only` | Done |
|
||||
| REQ-004 | null deathDate → 0 Tod events; no dates → 0 events | #776 | derive-person-life-events | `timeline/TimelineEventService#buildDeathEvents` | `DerivedEventsAssemblyTest#should_emit_no_events_for_person_with_neither_date` | Done |
|
||||
| REQ-005 | SPOUSE*OF edge with fromYear → MARRIAGE event, eventDate={fromYear}-01-01, precision=YEAR | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_one_heirat_for_spouse_edge_with_fromYear` | Done |
|
||||
| REQ-005 | SPOUSE_OF edge with fromYear → MARRIAGE event, eventDate={fromYear}-01-01, precision=YEAR | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_one_heirat_for_spouse_edge_with_fromYear` | Done |
|
||||
| REQ-006 | SPOUSE_OF edge with null fromYear → MARRIAGE emitted, eventDate=null, precision=UNKNOWN | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_unknown_precision_heirat_when_fromYear_is_null` | Done |
|
||||
| REQ-007 | exactly one MARRIAGE per SPOUSE_OF row (dedup on relationship id) | #776 | derive-person-life-events | `timeline/TimelineEventService#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_emit_exactly_one_heirat_when_both_spouses_in_scope`, `#should_emit_two_heirat_for_person_married_to_two_partners` | Done |
|
||||
| REQ-008 | synthetic prefixed ids (birth:/death:/marriage:), never parseable as UUID | #776 | derive-person-life-events | `timeline/TimelineEventService#buildBirthEvents,#buildDeathEvents,#buildMarriageEvents` | `DerivedEventsAssemblyTest#should_mint_prefixed_synthetic_ids_never_uuid` | Done |
|
||||
@@ -183,7 +182,7 @@
|
||||
| REQ-007 | sticky "Filter (N aktiv)" trigger; N from isDefaultState/hiddenLayerCount; 44px target | #780 | timeline-layer-filter | `frontend/src/lib/timeline/timelineFilter.ts`, `frontend/src/lib/timeline/TimelineFilters.svelte` | `timelineFilter.spec.ts#isDefaultState`, `#hiddenLayerCount`; `TimelineFilters.svelte.spec.ts#shows a plain trigger ... and a count`, `#gives the trigger a 44px touch target` | Done |
|
||||
| REQ-008 | reset text button restores all layers on; visibility tracks a $derived any-layer-off flag | #780 | timeline-layer-filter | `frontend/src/lib/timeline/TimelineFilters.svelte` | `TimelineFilters.svelte.spec.ts#hides the reset button by default and restores all layers when activated` | Done |
|
||||
| REQ-009 | prefers-reduced-motion → slide duration 0 (matchMedia guard reused from documents/[id]/+page.svelte:57) | #780 | timeline-layer-filter | `frontend/src/lib/timeline/TimelineFilters.svelte` | manual reduced-motion check + svelte-autofixer/code review (guard reused, only the slide `duration` zeroed) | Done |
|
||||
| REQ-010 | 8 timeline_filter*_ keys in de/en/es; trigger vs trigger*active({count}) distinct | #780 | timeline-layer-filter | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl layer-filter keys are present in all locales (#780 REQ-010)` | Done |
|
||||
| REQ-010 | 8 timeline_filter_* keys in de/en/es; trigger vs trigger_active({count}) distinct | #780 | timeline-layer-filter | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl layer-filter keys are present in all locales (#780 REQ-010)` | Done |
|
||||
| REQ-001 | WRITE_ALL viewer → "Ereignis hinzufügen" link to /zeitstrahl/events/new in the wrapping Zeitstrahl header | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/messages/{de,en,es}.json` | `zeitstrahl/page.svelte.spec.ts#renders the add-event CTA in a wrapping header when the viewer can write` | Done |
|
||||
| REQ-002 | viewer without WRITE_ALL → no add-event affordance on /zeitstrahl | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/+page.svelte` | `zeitstrahl/page.svelte.spec.ts#renders no add-event CTA when the viewer cannot write` | Done |
|
||||
| REQ-003 | WRITE_ALL viewer → person-page "Ereignis für diese Person" link to /zeitstrahl/events/new?personId={id} | #842 | timeline-curator-affordances | `frontend/src/routes/persons/[id]/PersonCard.svelte`, `frontend/messages/{de,en,es}.json` | `PersonCard.svelte.spec.ts#shows an add-event link pre-seeded with the person to a curator` | Done |
|
||||
@@ -195,24 +194,26 @@
|
||||
| REQ-009 | TimelineView threads canWrite through the year-band path and the undated bucket (identical gate) | #842 | timeline-curator-affordances | `frontend/src/lib/timeline/TimelineView.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `TimelineView.svelte.spec.ts#threads canWrite to a curated event in both a year band and the undated bucket`, `#threads canWrite to a curated HISTORICAL world band in both paths` | Done |
|
||||
| REQ-010 | person add-event opens #781 create form prefilled with the person, returns to /persons/{id} on save | #842 | timeline-curator-affordances | `frontend/src/routes/persons/[id]/PersonCard.svelte`, `frontend/src/routes/zeitstrahl/events/new/+page.server.ts` (#781) | `PersonCard.svelte.spec.ts#shows an add-event link pre-seeded with the person to a curator` (URL), `zeitstrahl/events/new/page.server.spec.ts#redirects to /persons/{id} when originPersonId is a valid UUID` (#781) | Done |
|
||||
| REQ-011 | non-curator direct nav to /zeitstrahl/events/new or /{id}/edit → 403 (existing #781 route guard, regression) | #842 | timeline-curator-affordances | `frontend/src/routes/zeitstrahl/events/new/+page.server.ts`, `frontend/src/routes/zeitstrahl/events/[id]/edit/+page.server.ts` (#781, unchanged — both share `requireWriteAll`) | `zeitstrahl/events/new/page.server.spec.ts#throws 403 for an authenticated user without WRITE_ALL`, `zeitstrahl/events/[id]/edit/page.server.spec.ts#throws 403 for a user without WRITE_ALL` | Done |
|
||||
| REQ-001 | axis-fixed layers (life-events, pills, world-bands) render identically across all 3 modes; only loose letters re-bundle | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/TimelineView.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `grouping-event-layer-identity.svelte.spec.ts#renders the event pills and world-bands identically across all three grouping modes`, `YearBand.svelte.spec.ts#still renders the event world-band in Ereignis mode` | Done |
|
||||
| REQ-002 | mode switch re-bundles loose letters over the layer-filtered view, no GET /api/timeline refetch | #827 | timeline-grouping-modes | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/timelineGrouping.ts`, `frontend/src/lib/timeline/TimelineView.svelte` | `zeitstrahl/page.svelte.spec.ts#regroups loose letters under their event client-side`, `e2e/zeitstrahl-grouping.spec.ts#switching grouping modes issues no extra timeline fetch` | Done |
|
||||
| REQ-003 | Ereignis clusters each loose letter under the curated event whose documents contain it | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts#bucketLetters`, `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/LetterBucket.svelte` | `timelineGrouping.spec.ts#clusters letters under the curated event named by linkedEventId`, `YearBand.svelte.spec.ts#clusters loose letters under their linked event in Ereignis mode` | Done |
|
||||
| REQ-004 | Thema buckets each loose letter per year under its primary root tag (rootTagId) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts#bucketLetters`, `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/LetterBucket.svelte` | `timelineGrouping.spec.ts#buckets letters under their primary root tag with name and colour`, `YearBand.svelte.spec.ts#buckets loose letters under their root tag in Thema mode` | Done |
|
||||
| REQ-005 | TimelineEntryDTO carries nullable linkedEventId, resolved in one batched membership pass | #827 | timeline-grouping-modes | `backend/.../timeline/TimelineEntryDTO.java`, `backend/.../timeline/TimelineService.java#resolveLetterEventLinks`, `frontend/src/lib/generated/api.ts` | `TimelineServiceTest#letter_in_a_curated_events_documents_carries_that_events_id` | Done |
|
||||
| REQ-005b | linkedEventId is nullable / not @Schema REQUIRED; null for non-letter entries | #827 | timeline-grouping-modes | `backend/.../timeline/TimelineEntryDTO.java`, `frontend/src/lib/generated/api.ts` (`linkedEventId?`) | `TimelineServiceTest#letter_in_no_curated_event_has_null_linkedEventId` | Done |
|
||||
| REQ-006 | Ereignis: letter with null linkedEventId → per-year "Weitere Briefe" bucket | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts`, `frontend/src/lib/timeline/LetterBucket.svelte` | `timelineGrouping.spec.ts#drops a letter with no linkedEventId into the fallback bucket`, `LetterBucket.svelte.spec.ts#uses the localized "Weitere Briefe" label` | Done |
|
||||
| REQ-007 | Thema: untagged letter → per-year "Ohne Thema" bucket | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts`, `frontend/src/lib/timeline/LetterBucket.svelte` | `timelineGrouping.spec.ts#drops an untagged letter into the "Ohne Thema" fallback bucket`, `LetterBucket.svelte.spec.ts#uses the localized "Ohne Thema" label` | Done |
|
||||
| REQ-008 | multi-tagged letter appears under exactly one root tag, never duplicated | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts` | `timelineGrouping.spec.ts#places a letter in exactly one bucket` | Done |
|
||||
| REQ-009 | tag names + hint render via `{...}` escaping; grep gate forbids `{@html}` in lib/timeline | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/BucketHeaderChip.svelte`, `frontend/src/lib/timeline/LetterCard.svelte`, `frontend/src/lib/timeline/TagChip.svelte` | `BucketHeaderChip.svelte.spec.ts#renders an HTML-bearing name as inert text`, `timeline-no-raw-html.spec.ts#no timeline component contains the raw-HTML directive` | Done |
|
||||
| REQ-010 | grouping control is a keyboard-navigable role=radiogroup, ≥44px text segments, default Datum, dark-mode contrast | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/GroupingControl.svelte` | `GroupingControl.svelte.spec.ts#renders three radios inside a radiogroup`, `#moves the selection forward with the right arrow key`, `#each segment has a tap target of at least 44×44px`, `#defaults to Datum`; `e2e/zeitstrahl-grouping.spec.ts#no wcag2a/wcag2aa violations ... (light + dark)` | Done |
|
||||
| REQ-011 | ≤320px: control overflow-free + tap ≥44px, each abbreviation carries its full word as aria-label | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/GroupingControl.svelte` | `GroupingControl.svelte.spec.ts#exposes each segment full word as an aria-label`, `e2e/zeitstrahl-grouping.spec.ts#the control stays overflow-free and operable at 320px` | Done |
|
||||
| REQ-012 | new grouping/bucket Paraglide keys in de/en/es; no collision with existing timeline*_ keys | #827 | timeline-grouping-modes | `frontend/messages/{de,en,es}.json` | `messages.spec.ts#zeitstrahl grouping + bucket keys are present in all locales (#827 REQ-012)`, `messages.spec.ts#de, en, and es have identical key sets` | Done |
|
||||
| REQ-013 | failed timeline fetch → existing localized error via getErrorMessage; grouping has no independent failure mode | #827 | timeline-grouping-modes | `frontend/src/routes/zeitstrahl/+page.server.ts` (#779, unchanged) | `zeitstrahl/page.server` error path (#779 — getErrorMessage(extractErrorCode)) | Done |
|
||||
| REQ-014 | Ereignis event-clustered letters live inside a **contained card whose header is the same-year curated event** (glyph, title, date, provenance, edit pencil) — the title reads once, no separate floating pill; letters render as the compact `.lcard.ev` variant, first 5 + show-more (redesign #847 → #827 grouped-card layout) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/LetterCard.svelte`, `frontend/src/lib/timeline/LetterBucket.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `LetterCard.svelte.spec.ts#carries the .lcard.ev class in the event variant`, `LetterBucket.svelte.spec.ts#renders the curated event as the card header when given an `event` (no separate pill)`, `LetterBucket.svelte.spec.ts#shows no edit affordance in the header when canWrite is false`, `YearBand.svelte.spec.ts#renders a same-year curated event as one card header, with no separate pill and no duplicate title` | Done |
|
||||
| REQ-015 | Thema bucket-header chip tinted via rootTagColor `var(--c-tag-*)`, neutral fallback when null/unknown; **label kept in a fixed ink for ≥4.5:1 contrast** (redesign #847) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/BucketHeaderChip.svelte` | `BucketHeaderChip.svelte.spec.ts#tints the chip with var(--c-tag-{token})`, `#renders a neutral chip with no --c-tag- binding when colour is null`, `#falls back to neutral for an unknown colour token`, `#paints the label in a fixed ink colour, never the saturated tag token` | Done |
|
||||
| REQ-016 | header meta-line grouping segment tracks the active mode (date/event/thema keys) | #827 | timeline-grouping-modes | `frontend/src/routes/zeitstrahl/+page.svelte` | `zeitstrahl/page.svelte.spec.ts#updates the meta-line grouping label when a mode is chosen` | Done |
|
||||
| REQ-017 | Thema: per-letter TagChip suppressed inside its own bucket; still shown in Datum/Ereignis | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/LetterCard.svelte`, `frontend/src/lib/timeline/LetterBucket.svelte` | `LetterCard.svelte.spec.ts#suppresses the per-letter tag chip when asked`, `#still shows the per-letter tag chip when not suppressed`, `LetterBucket.svelte.spec.ts#suppresses the per-letter tag chip inside its own root-tag bucket` | Done |
|
||||
| REQ-018 | Letters layer off → grouping control disabled (kept in place), mode retained | #827 | timeline-grouping-modes | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/GroupingControl.svelte`, `frontend/src/lib/timeline/timelineGrouping.ts#hasLooseLetters` | `zeitstrahl/page.svelte.spec.ts#disables the grouping control when the Letters layer is off`, `GroupingControl.svelte.spec.ts#retains the active mode while disabled`, `timelineGrouping.spec.ts#hasLooseLetters` | Done |
|
||||
| REQ-019 | Ereignis: letter whose only linking event was filtered off → "Weitere Briefe" (never re-introduced) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/timelineGrouping.ts#buildEventLookup`, `frontend/src/lib/timeline/TimelineView.svelte` | `timelineGrouping.spec.ts#drops a letter whose linked event is absent from the lookup into fallback` | Done |
|
||||
| REQ-020 | Grouped clusters are **contained colour-railed cards** (bordered, rounded, surface) carrying compact cards; a cluster shows the first `CLUSTER_PREVIEW` (5) letters behind a show-more toggle, and the leftover bin is a **collapsed count-only drawer** revealed on demand — the month-density `YearLetterStrip` is no longer used in grouped mode (still used in Datum dense years) (redesign #847 → #827 grouped-card layout) | #827 | timeline-grouping-modes | `frontend/src/lib/timeline/LetterBucket.svelte`, `frontend/src/lib/timeline/timelineGrouping.ts#CLUSTER_PREVIEW`, `frontend/src/lib/timeline/LetterCard.svelte` | `LetterBucket.svelte.spec.ts#renders the cluster as a contained card (bordered, rounded, surface)`, `#binds a tag bucket together with a coloured left rail from its token`, `#shows only the first 5 letters with a show-more toggle when the cluster is larger`, `#expands to all letters and collapses back on toggle`, `#renders collapsed — count + reveal, no letter cards — until opened`, `#reveals the first 5 letters when opened`, `LetterCard.svelte.spec.ts#renders the compact variant on a single tighter row` | Done |
|
||||
| REQ-001 | `/zeitstrahl` renders a single chronological timeline with no grouping-mode control (no toggle/Thema/drawer) | #850 | inline-event-clustering | `frontend/src/routes/zeitstrahl/+page.svelte`, `frontend/src/lib/timeline/TimelineView.svelte` | `page.svelte.spec.ts#renders the meta sub-line with range and counts, no grouping segment`; absence of `GroupingControl`/`LetterBucket`/`BucketHeaderChip` (never ported) | Done |
|
||||
| REQ-002 | curated event with ≥1 same-year linked letter → contained card (event header + glyph/title/date·provenance/edit + compact letter cards) | #850 | inline-event-clustering | `frontend/src/lib/timeline/EventCluster.svelte`, `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/eventClustering.ts` | `EventCluster.svelte.spec.ts#renders a data-testid event-card with the event title once`, `#shows the event-edit link for a curator`, `#renders its letters as compact a.lcard.ev cards`; `YearBand.svelte.spec.ts#renders a curated event with a same-year linked letter as one event-card, title once, no separate pill` | Done |
|
||||
| REQ-003 | event card body > 5 letters → first 5 + keyboard-operable show-more/less toggle (aria-expanded, ≥44px) | #850 | inline-event-clustering | `frontend/src/lib/timeline/EventCluster.svelte`, `frontend/src/lib/timeline/eventClustering.ts` (`CLUSTER_PREVIEW=5`) | `EventCluster.svelte.spec.ts#shows the first 5 of 8 letters + a show-more toggle that expands to 8 then back to 5`, `#renders no show-more toggle when the cluster holds 5 or fewer letters` | Done |
|
||||
| REQ-004 | linked letters in a year other than the event's band → labeled ✉ text-header card (no pill, no edit link) per such year | #850 | inline-event-clustering | `frontend/src/lib/timeline/EventCluster.svelte`, `frontend/src/lib/timeline/YearBand.svelte` | `EventCluster.svelte.spec.ts#renders a cross-year text header (✉ title, no event-edit, no pill) when no event is given`; `YearBand.svelte.spec.ts#renders a cross-year cluster (event not in this band) as a ✉ text-header card holding it` | Done |
|
||||
| REQ-005 | event/derived/world-band with no linked letters → existing plain pill/world-band (unchanged) | #850 | inline-event-clustering | `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/EventPill.svelte`, `frontend/src/lib/timeline/WorldBand.svelte` | `YearBand.svelte.spec.ts#renders a curated event with NO linked letters as a plain EventPill, no card` | Done |
|
||||
| REQ-006 | letter linked to no curated event → loose chronological letter (alternating; density strip past 12) | #850 | inline-event-clustering | `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/eventClustering.ts` | `eventClustering.spec.ts#keeps a letter with no linkedEventId loose`; `YearBand.svelte.spec.ts#renders loose (unlinked) letters in a sparse year as alternating .letter-row, no card` | Done |
|
||||
| REQ-007 | loose-letter layout + density strip count ONLY non-event-linked letters; clustered letter never also loose | #850 | inline-event-clustering | `frontend/src/lib/timeline/YearBand.svelte`, `frontend/src/lib/timeline/eventClustering.ts` | `eventClustering.spec.ts#places each letter in exactly one place`; `YearBand.svelte.spec.ts#counts only loose letters in the density strip; event letters stay in the card` | Done |
|
||||
| REQ-008 | letter whose only linking event is filtered out (absent from lookup) → loose, never re-introduces the event (filter-then-cluster) | #850 | inline-event-clustering | `frontend/src/lib/timeline/eventClustering.ts` (`splitYearLetters` filters via `eventLookup`) | `eventClustering.spec.ts#keeps a letter whose linkedEventId is absent from the lookup loose (filter-then-cluster, REQ-008)` | Done |
|
||||
| REQ-009 | `TimelineEntryDTO` carries nullable `linkedEventId` for LETTER entries, one batched pass, no new column/migration, not @Schema(REQUIRED); a multi-event letter links deterministically (earliest date, then id) | #850 | inline-event-clustering | `backend/.../timeline/TimelineEntryDTO.java`, `backend/.../timeline/TimelineService.java#resolveLetterEventLinks`, `frontend/src/lib/generated/api.ts` | `TimelineServiceTest#letter_in_a_curated_events_documents_carries_that_events_id`, `#letter_in_no_curated_event_has_null_linkedEventId`, `#multi_event_letter_links_deterministically_to_the_earliest_event` | Done |
|
||||
| REQ-010 | event/letter/sender/receiver text via Svelte `{...}` escaping; no `{@html}` anywhere in `lib/timeline/` (grep gate, CWE-79) | #850 | inline-event-clustering | `frontend/src/lib/timeline/*.svelte` | `timeline-no-raw-html.spec.ts#no timeline component contains the raw-HTML directive`; `EventCluster.svelte.spec.ts#renders an HTML-bearing event title verbatim as text, never as markup` | Done |
|
||||
| REQ-011 | wrapping header keeps #842 add-event CTA + #780 filter trigger; meta-line drops the grouping segment | #850 | inline-event-clustering | `frontend/src/routes/zeitstrahl/+page.svelte` | `page.svelte.spec.ts#renders the meta sub-line with range and counts, no grouping segment`, `#drops the letters segment instead of showing "0 Briefe"` (no "Gruppierung") | Done |
|
||||
| REQ-012 | show-more/less labels are new Paraglide keys in de/en/es; unused #827 grouping/Thema keys removed | #850 | inline-event-clustering | `frontend/messages/{de,en,es}.json`, `frontend/src/lib/timeline/EventCluster.svelte` | `messages.spec.ts#zeitstrahl visual-fidelity keys are present in all locales` (now asserts `timeline_bucket_show_more`/`_less`; `timeline_grouping_date` removed) | Done |
|
||||
| REQ-013 | `GET /api/timeline` failure → existing localized error state via `getErrorMessage(code)` (unchanged #779) | #850 | inline-event-clustering | `frontend/src/routes/zeitstrahl/+page.svelte` (unchanged error path) | covered by #779 `zeitstrahl` error-state tests (regression — no change) | Done |
|
||||
| REQ-014 | HISTORICAL curated event with ≥1 linked letter keeps its full-width WorldBand — never clusters into a card (preserves #779 REQ-009); its letters stay loose | #850 | inline-event-clustering | `frontend/src/lib/timeline/eventClustering.ts` (`buildEventLookup` excludes HISTORICAL) | `eventClustering.spec.ts#excludes a HISTORICAL event so its letters stay loose, keeping its WorldBand (REQ-014)`; `TimelineView.svelte.spec.ts#keeps a HISTORICAL event a WorldBand with a same-year linked letter — never clusters (REQ-014)` | Done |
|
||||
| REQ-015 | a cross-year ✉ card is placed at its earliest linked letter's chronological position in the band — never appended after later-dated loose letters | #850 | inline-event-clustering | `frontend/src/lib/timeline/YearBand.svelte` | `YearBand.svelte.spec.ts#interleaves a cross-year card before a later-dated loose letter in the same band (REQ-015)` | Done |
|
||||
| REQ-001 | `TimelineEvent.description` flows through `TimelineEntryDTO` to the frontend; null for letters and derived events | #844 | event-note-display | `backend/.../timeline/TimelineEntryDTO.java`, `backend/.../timeline/TimelineService.java#mapEvent`, `frontend/src/lib/generated/api.ts` | `TimelineServiceTest#mapEvent_populates_description_from_event`, `#mapEvent_leaves_description_null_when_event_has_none`, `#mapDocument_leaves_description_null_for_letter`; `TimelineControllerTest#timelineIncludesEventDescription` | Done |
|
||||
| REQ-002 | description text is HTML-escaped; no `{@html}` — Svelte `{...}` interpolation ensures XSS safety (CWE-79) | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#escapesHtml — renders XSS payload as inert text, no injected element` | Done |
|
||||
| REQ-003 | newlines in the description are preserved visually via `white-space: pre-line` | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#preservesLineBreaks — note element carries whitespace-pre-line class` | Done |
|
||||
| REQ-004 | description renders below the title/subtitle line in EventPill (PERSONAL) and WorldBand (HISTORICAL) | #844 | event-note-display | `frontend/src/lib/timeline/EventPill.svelte`, `frontend/src/lib/timeline/WorldBand.svelte` | `e2e/zeitstrahl-note.spec.ts#PERSONAL curated event note appears below its title`, `#HISTORICAL curated event note appears below its title` | Done |
|
||||
| REQ-005 | description longer than 3 lines is clamped and shows a disclosure toggle with aria-expanded=false (show more) | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#clampsAndShowsToggle — long note shows "mehr anzeigen" with aria-expanded=false` | Done |
|
||||
| REQ-006 | short description (≤ 3 lines) renders fully with no toggle | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#shortNoteNoToggle — a one-line note renders fully with no disclosure control` | Done |
|
||||
| REQ-007 | clicking the toggle expands the note (aria-expanded=true, "show less"); clicking again collapses it | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#toggleExpandsCollapses — click expands, re-click collapses` | Done |
|
||||
| REQ-008 | null, empty, or blank-only description renders nothing (no note element in DOM) | #844 | event-note-display | `frontend/src/lib/timeline/EventNote.svelte` | `event-note.svelte.spec.ts#blankNoteRendersNothing — null/empty string/blank-only string produces no note element` (3 cases) | Done |
|
||||
|
||||
@@ -369,6 +369,12 @@
|
||||
<artifactId>maven-surefire-plugin</artifactId>
|
||||
<configuration>
|
||||
<forkedProcessTimeoutInSeconds>600</forkedProcessTimeoutInSeconds>
|
||||
<!-- Grace period after the test JVM calls System.exit(0). The 30s default is too
|
||||
short: the single reused fork closes ~32 cached Spring contexts at shutdown,
|
||||
each tearing down a Testcontainers Postgres + HikariCP pool, which overruns 30s
|
||||
and makes Surefire kill the fork (BUILD FAILURE despite 0 test failures). This is
|
||||
a different knob from forkedProcessTimeoutInSeconds above. See issue #848. -->
|
||||
<forkedProcessExitTimeoutInSeconds>120</forkedProcessExitTimeoutInSeconds>
|
||||
<systemPropertyVariables>
|
||||
<junit.jupiter.execution.timeout.default>90 s</junit.jupiter.execution.timeout.default>
|
||||
</systemPropertyVariables>
|
||||
|
||||
@@ -30,11 +30,16 @@ import java.util.UUID;
|
||||
*
|
||||
* <p><b>Letter→event link ({@code linkedEventId}):</b> for a {@link Kind#LETTER} entry, the id of
|
||||
* the curated {@link TimelineEvent} whose {@code documents} set contains the letter's document, or
|
||||
* {@code null} when the letter is referenced by no curated event (#827). Computed on read from the
|
||||
* {@code null} when the letter is referenced by no curated event (#850). Computed on read from the
|
||||
* existing {@code timeline_event_documents} join — no new column. {@code null} for non-letter
|
||||
* entries. Deliberately NOT {@code @Schema(requiredMode = REQUIRED)} so the generated TypeScript
|
||||
* type stays optional.
|
||||
*
|
||||
* <p><b>Event description ({@code description}):</b> curator-authored context note for a curated
|
||||
* {@link Kind#EVENT} entry (#844). Populated from {@link TimelineEvent#getDescription()} — null
|
||||
* for {@link Kind#LETTER} and derived entries. Deliberately NOT
|
||||
* {@code @Schema(requiredMode = REQUIRED)} so the generated TypeScript type stays optional.
|
||||
*
|
||||
* <p>Callers of {@code TimelineEventService.assembleDerivedEvents()} must independently enforce
|
||||
* {@code READ_ALL} authorization before invoking that method (see ADR-043).
|
||||
*/
|
||||
@@ -55,6 +60,7 @@ public record TimelineEntryDTO(
|
||||
UUID rootTagId,
|
||||
String rootTagName,
|
||||
String rootTagColor,
|
||||
UUID linkedEventId
|
||||
UUID linkedEventId,
|
||||
String description
|
||||
) {
|
||||
}
|
||||
|
||||
@@ -267,7 +267,7 @@ public class TimelineEventService {
|
||||
p.getBirthDate(), null,
|
||||
p.getDisplayName(), EventType.PERSONAL,
|
||||
null, null, List.of(p.getId()), DerivedEventType.BIRTH,
|
||||
null, null, null, null))
|
||||
null, null, null, null, null))
|
||||
.toList();
|
||||
}
|
||||
|
||||
@@ -279,7 +279,7 @@ public class TimelineEventService {
|
||||
p.getDeathDate(), null,
|
||||
p.getDisplayName(), EventType.PERSONAL,
|
||||
null, null, List.of(p.getId()), DerivedEventType.DEATH,
|
||||
null, null, null, null))
|
||||
null, null, null, null, null))
|
||||
.toList();
|
||||
}
|
||||
|
||||
@@ -304,7 +304,7 @@ public class TimelineEventService {
|
||||
null, null,
|
||||
List.of(r.getPerson().getId(), r.getRelatedPerson().getId()),
|
||||
DerivedEventType.MARRIAGE,
|
||||
null, null, null, null));
|
||||
null, null, null, null, null));
|
||||
}
|
||||
}
|
||||
return result;
|
||||
|
||||
@@ -80,18 +80,20 @@ public class TimelineService {
|
||||
// Resolve generation person IDs once — used across all three layers
|
||||
Set<UUID> genPersonIds = resolveGenerationPersonIds(filter.generation());
|
||||
|
||||
// Fetch curated events once — reused for both the event entries below and the
|
||||
// batched letter→event link resolution (resolveLetterEventLinks), so the
|
||||
// membership pass costs no extra query. REQ-005.
|
||||
// Fetch curated events once; the events that survive the filter below feed both the
|
||||
// event entries and the batched letter→event link pass (resolveLetterEventLinks), so the
|
||||
// membership pass costs no extra query and touches only on-screen events. REQ-009.
|
||||
List<TimelineEvent> allEvents = eventRepository.findAll();
|
||||
|
||||
// ── curated events ───────────────────────────────────────────────────
|
||||
List<TimelineEntryDTO> entries = new ArrayList<>();
|
||||
List<TimelineEvent> filteredEvents = new ArrayList<>();
|
||||
for (TimelineEvent ev : allEvents) {
|
||||
if (!passesTypeFilter(ev.getType(), filter.type())) continue;
|
||||
if (!passesPersonFilter(ev.getPersons(), filter.personId())) continue;
|
||||
if (!passesGenerationFilter(ev.getPersons(), genPersonIds)) continue;
|
||||
if (!passesYearFilter(ev.getEventDate(), ev.getPrecision(), filter)) continue;
|
||||
filteredEvents.add(ev);
|
||||
entries.add(mapEvent(ev));
|
||||
}
|
||||
|
||||
@@ -112,7 +114,7 @@ public class TimelineService {
|
||||
letters.add(doc);
|
||||
}
|
||||
Map<UUID, RootTag> rootByDocId = resolveLetterRootTags(letters);
|
||||
Map<UUID, UUID> eventByDocId = resolveLetterEventLinks(letters, allEvents);
|
||||
Map<UUID, UUID> eventByDocId = resolveLetterEventLinks(letters, filteredEvents);
|
||||
for (Document doc : letters) {
|
||||
entries.add(mapDocument(doc, rootByDocId, eventByDocId));
|
||||
}
|
||||
@@ -236,7 +238,8 @@ public class TimelineService {
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
null,
|
||||
ev.getDescription()
|
||||
);
|
||||
}
|
||||
|
||||
@@ -260,26 +263,39 @@ public class TimelineService {
|
||||
root == null ? null : root.id(),
|
||||
root == null ? null : root.name(),
|
||||
root == null ? null : root.color(),
|
||||
eventByDocId.get(doc.getId())
|
||||
eventByDocId.get(doc.getId()),
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves each letter's linked curated event in one batched pass, keyed by document id: the
|
||||
* event whose {@code documents} set contains the letter (REQ-005). A single doc→event map is
|
||||
* event whose {@code documents} set contains the letter (REQ-009). A single doc→event map is
|
||||
* built over the already-loaded events — no per-letter query ({@code TimelineEvent.documents}
|
||||
* carries {@code @BatchSize(50)}). When a document is referenced by more than one curated
|
||||
* event, the first by repository iteration order wins ({@code putIfAbsent}). The map is built
|
||||
* from <em>all</em> events (not just the year/type-filtered ones) so the link is a stable
|
||||
* property of the data; the frontend's filter-then-group decides whether the linked event is
|
||||
* actually on screen (#827). Logs nothing — the assembly path keeps UUIDs out of logs (§2.7).
|
||||
* event, the earliest-dated event wins (then lowest {@code eventId}); the pass runs over a
|
||||
* stably-ordered copy so the link is a deterministic property of the data, not a coin-flip on
|
||||
* the undefined repository iteration order ({@code putIfAbsent} keeps the first = winner). The
|
||||
* map is built only over the events that survived the timeline filter, so the lazy
|
||||
* {@code documents} collection is hydrated for on-screen events alone (finding #10); a letter
|
||||
* whose only linking event was filtered out links to nothing, matching the frontend's
|
||||
* filter-then-cluster (#850). Logs nothing — the assembly path keeps UUIDs out of logs (§2.7).
|
||||
*/
|
||||
private Map<UUID, UUID> resolveLetterEventLinks(List<Document> letters, List<TimelineEvent> events) {
|
||||
Set<UUID> letterDocIds = letters.stream().map(Document::getId).collect(Collectors.toSet());
|
||||
if (letterDocIds.isEmpty()) return Map.of();
|
||||
|
||||
// Stable order so a multi-event letter links deterministically: earliest event date
|
||||
// (undated last), then lowest id. putIfAbsent below then keeps the winner (REQ-009).
|
||||
List<TimelineEvent> ordered = events.stream()
|
||||
.sorted(Comparator
|
||||
.comparing(TimelineEvent::getEventDate,
|
||||
Comparator.nullsLast(Comparator.naturalOrder()))
|
||||
.thenComparing(TimelineEvent::getId))
|
||||
.toList();
|
||||
|
||||
Map<UUID, UUID> eventByDocId = new HashMap<>();
|
||||
for (TimelineEvent ev : events) {
|
||||
for (TimelineEvent ev : ordered) {
|
||||
Set<Document> linkedDocs = ev.getDocuments();
|
||||
if (linkedDocs == null) continue;
|
||||
for (Document linked : linkedDocs) {
|
||||
|
||||
@@ -74,6 +74,28 @@ class TimelineControllerTest {
|
||||
.andExpect(jsonPath("$.undated").isArray());
|
||||
}
|
||||
|
||||
// ─── REQ-001: description field serialised ───────────────────────────────
|
||||
|
||||
@Test
|
||||
@org.springframework.security.test.context.support.WithMockUser(authorities = "READ_ALL")
|
||||
void timelineIncludesEventDescription() throws Exception {
|
||||
// REQ-001 (controller slice): a curated event entry with description "Kontext" is
|
||||
// serialised into the timeline response at the correct JSON path.
|
||||
var entry = new TimelineEntryDTO(Kind.EVENT, org.raddatz.familienarchiv.document.DatePrecision.DAY,
|
||||
false, "", "",
|
||||
java.time.LocalDate.of(1914, 8, 1), null, "Kriegsbeginn",
|
||||
EventType.HISTORICAL, UUID.randomUUID(), null, List.of(), null,
|
||||
null, null, null, null, "Kontext");
|
||||
when(timelineService.assemble(any()))
|
||||
.thenReturn(new TimelineDTO(
|
||||
List.of(new TimelineYearDTO(1914, List.of(entry))),
|
||||
List.of()));
|
||||
|
||||
mockMvc.perform(get("/api/timeline"))
|
||||
.andExpect(status().isOk())
|
||||
.andExpect(jsonPath("$.years[0].entries[0].description", is("Kontext")));
|
||||
}
|
||||
|
||||
// ─── Parameter binding ────────────────────────────────────────────────────
|
||||
|
||||
@Test
|
||||
|
||||
@@ -69,10 +69,10 @@ class TimelineServiceTest {
|
||||
UUID id2 = UUID.fromString("00000000-0000-0000-0000-000000000002");
|
||||
var e1 = new TimelineEntryDTO(Kind.LETTER, DatePrecision.DAY, false, "", "",
|
||||
LocalDate.of(1914, 7, 28), null, "Same Title", null, null, id1, List.of(), null,
|
||||
null, null, null, null);
|
||||
null, null, null, null, null);
|
||||
var e2 = new TimelineEntryDTO(Kind.LETTER, DatePrecision.DAY, false, "", "",
|
||||
LocalDate.of(1914, 7, 28), null, "Same Title", null, null, id2, List.of(), null,
|
||||
null, null, null, null);
|
||||
null, null, null, null, null);
|
||||
|
||||
var sorted = List.of(e2, e1).stream()
|
||||
.sorted(TimelineService.WITHIN_BAND_ORDER)
|
||||
@@ -511,11 +511,58 @@ class TimelineServiceTest {
|
||||
verify(tagService, times(1)).resolveRootTags(anyList());
|
||||
}
|
||||
|
||||
// ─── letter→event link (#827, REQ-005/006) ───────────────────────────────
|
||||
// ─── event description (#844, REQ-001) ───────────────────────────────────
|
||||
|
||||
@Test
|
||||
void mapEvent_populates_description_from_event() {
|
||||
// REQ-001: a curated event with a description surfaces it on the assembled entry.
|
||||
TimelineEvent ev = TimelineEvent.builder().id(UUID.randomUUID())
|
||||
.title("Kriegsbeginn").type(EventType.HISTORICAL)
|
||||
.eventDate(LocalDate.of(1914, 8, 1)).precision(DatePrecision.DAY)
|
||||
.description("Kontext")
|
||||
.build();
|
||||
when(eventRepository.findAll()).thenReturn(List.of(ev));
|
||||
when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
|
||||
when(documentService.getAllForTimeline()).thenReturn(List.of());
|
||||
|
||||
TimelineDTO result = timelineService.assemble(noFilters());
|
||||
|
||||
TimelineEntryDTO entry = result.years().get(0).entries().get(0);
|
||||
assertThat(entry.description()).isEqualTo("Kontext");
|
||||
}
|
||||
|
||||
@Test
|
||||
void mapEvent_leaves_description_null_when_event_has_none() {
|
||||
// REQ-001: an event without a description → null on the entry.
|
||||
TimelineEvent ev = TimelineEvent.builder().id(UUID.randomUUID())
|
||||
.title("Ereignis").type(EventType.PERSONAL)
|
||||
.eventDate(LocalDate.of(1920, 1, 1)).precision(DatePrecision.YEAR)
|
||||
.build();
|
||||
when(eventRepository.findAll()).thenReturn(List.of(ev));
|
||||
when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
|
||||
when(documentService.getAllForTimeline()).thenReturn(List.of());
|
||||
|
||||
TimelineEntryDTO entry = timelineService.assemble(noFilters()).years().get(0).entries().get(0);
|
||||
assertThat(entry.description()).isNull();
|
||||
}
|
||||
|
||||
@Test
|
||||
void mapDocument_leaves_description_null_for_letter() {
|
||||
// REQ-001: LETTER entries carry null description, regardless of any document fields.
|
||||
Document doc = docWithDate(LocalDate.of(1916, 3, 1), DatePrecision.MONTH);
|
||||
when(eventRepository.findAll()).thenReturn(List.of());
|
||||
when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
|
||||
when(documentService.getAllForTimeline()).thenReturn(List.of(doc));
|
||||
|
||||
TimelineEntryDTO entry = onlyLetterEntry(timelineService.assemble(noFilters()));
|
||||
assertThat(entry.description()).isNull();
|
||||
}
|
||||
|
||||
// ─── letter→event link (#850, REQ-009) ───────────────────────────────────
|
||||
|
||||
@Test
|
||||
void letter_in_a_curated_events_documents_carries_that_events_id() {
|
||||
// REQ-005: linkedEventId = the curated event whose documents set contains the letter.
|
||||
// REQ-009: linkedEventId = the curated event whose documents set contains the letter.
|
||||
Document letterDoc = docWithDate(LocalDate.of(1915, 5, 1), DatePrecision.MONTH);
|
||||
UUID eventId = UUID.randomUUID();
|
||||
TimelineEvent event = TimelineEvent.builder().id(eventId)
|
||||
@@ -533,8 +580,8 @@ class TimelineServiceTest {
|
||||
|
||||
@Test
|
||||
void letter_in_no_curated_event_has_null_linkedEventId() {
|
||||
// REQ-006: a letter referenced by no curated event → linkedEventId null (frontend falls
|
||||
// back to the per-year "Weitere Briefe" bucket).
|
||||
// REQ-009: a letter referenced by no curated event → linkedEventId null; the frontend
|
||||
// then renders it as a loose chronological letter (REQ-006).
|
||||
Document letterDoc = docWithDate(LocalDate.of(1915, 5, 1), DatePrecision.MONTH);
|
||||
TimelineEvent event = TimelineEvent.builder().id(UUID.randomUUID())
|
||||
.title("Anderes Ereignis").type(EventType.PERSONAL)
|
||||
@@ -549,6 +596,68 @@ class TimelineServiceTest {
|
||||
assertThat(entry.linkedEventId()).isNull();
|
||||
}
|
||||
|
||||
@Test
|
||||
void multi_event_letter_links_deterministically_to_the_earliest_event() {
|
||||
// REQ-009: a document referenced by >1 curated event links to the earliest-dated event
|
||||
// (then lowest id), independent of repository iteration order — not a coin-flip on
|
||||
// findAll()'s undefined order.
|
||||
Document shared = docWithDate(LocalDate.of(1916, 5, 1), DatePrecision.MONTH);
|
||||
TimelineEvent earlier = TimelineEvent.builder()
|
||||
.id(UUID.fromString("00000000-0000-0000-0000-000000000001"))
|
||||
.title("Frühes Ereignis").type(EventType.PERSONAL)
|
||||
.eventDate(LocalDate.of(1913, 3, 1)).precision(DatePrecision.MONTH)
|
||||
.documents(new HashSet<>(Set.of(shared)))
|
||||
.build();
|
||||
TimelineEvent later = TimelineEvent.builder()
|
||||
.id(UUID.fromString("00000000-0000-0000-0000-000000000002"))
|
||||
.title("Spätes Ereignis").type(EventType.PERSONAL)
|
||||
.eventDate(LocalDate.of(1914, 3, 1)).precision(DatePrecision.MONTH)
|
||||
.documents(new HashSet<>(Set.of(shared)))
|
||||
.build();
|
||||
when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
|
||||
when(documentService.getAllForTimeline()).thenReturn(List.of(shared));
|
||||
|
||||
// `later` first in iteration: a naive putIfAbsent would wrongly pick it.
|
||||
when(eventRepository.findAll()).thenReturn(List.of(later, earlier));
|
||||
assertThat(theLetter(timelineService.assemble(noFilters())).linkedEventId())
|
||||
.isEqualTo(earlier.getId());
|
||||
|
||||
// Reversed order yields the same winner — the link is order-independent.
|
||||
when(eventRepository.findAll()).thenReturn(List.of(earlier, later));
|
||||
assertThat(theLetter(timelineService.assemble(noFilters())).linkedEventId())
|
||||
.isEqualTo(earlier.getId());
|
||||
}
|
||||
|
||||
@Test
|
||||
void letter_linked_only_to_a_filtered_out_event_has_null_linkedEventId() {
|
||||
// finding #10: the link pass runs over the events that survived the filter, not all of
|
||||
// them. A letter whose only linking event is excluded by the active filter links to
|
||||
// nothing (the frontend would drop it loose anyway) — and the lazy `documents` collection
|
||||
// is never hydrated for events that are off-screen.
|
||||
Document letterDoc = docWithDate(LocalDate.of(1916, 5, 1), DatePrecision.MONTH);
|
||||
TimelineEvent worldEvent = TimelineEvent.builder().id(UUID.randomUUID())
|
||||
.title("Somme").type(EventType.HISTORICAL)
|
||||
.documents(new HashSet<>(Set.of(letterDoc)))
|
||||
.build();
|
||||
when(eventRepository.findAll()).thenReturn(List.of(worldEvent));
|
||||
when(timelineEventService.assembleDerivedEvents()).thenReturn(List.of());
|
||||
when(documentService.getAllForTimeline()).thenReturn(List.of(letterDoc));
|
||||
|
||||
// Filter to PERSONAL only → the HISTORICAL event is filtered out of the view.
|
||||
TimelineEntryDTO entry = theLetter(timelineService.assemble(
|
||||
new TimelineFilter(null, null, EventType.PERSONAL, null, null)));
|
||||
|
||||
assertThat(entry.linkedEventId()).isNull();
|
||||
}
|
||||
|
||||
private static TimelineEntryDTO theLetter(TimelineDTO result) {
|
||||
return java.util.stream.Stream.concat(
|
||||
result.years().stream().flatMap(y -> y.entries().stream()),
|
||||
result.undated().stream())
|
||||
.filter(e -> e.kind() == Kind.LETTER)
|
||||
.findFirst().orElseThrow();
|
||||
}
|
||||
|
||||
private static TimelineEntryDTO onlyLetterEntry(TimelineDTO result) {
|
||||
assertThat(result.years()).hasSize(1);
|
||||
return result.years().get(0).entries().get(0);
|
||||
@@ -561,7 +670,7 @@ class TimelineServiceTest {
|
||||
private static TimelineEntryDTO letter(LocalDate date, DatePrecision precision, String title) {
|
||||
return new TimelineEntryDTO(Kind.LETTER, precision, false, "", "",
|
||||
date, null, title, null, null, UUID.randomUUID(), List.of(), null,
|
||||
null, null, null, null);
|
||||
null, null, null, null, null);
|
||||
}
|
||||
|
||||
private static Document docWithDate(LocalDate date, DatePrecision precision) {
|
||||
|
||||
210
design_handoff_familienarchiv_redesign/DESIGN_RULES.md
Normal file
210
design_handoff_familienarchiv_redesign/DESIGN_RULES.md
Normal file
@@ -0,0 +1,210 @@
|
||||
# Familienarchiv — Design Rules (binding)
|
||||
|
||||
This is the visual law for the redesign. It promotes the informal `Regeln` page into
|
||||
enforceable specs. **When this doc and a prototype disagree, the prototype wins** — these
|
||||
values are transcribed from the prototypes, but the rendered file is ground truth.
|
||||
|
||||
Built on the **De Gruyter Brill** corporate identity. Tone: restrained, archival,
|
||||
formal-respectful — institutional, not cute. German-first, formal **Sie**, never emoji.
|
||||
|
||||
---
|
||||
|
||||
## 1. Design tokens
|
||||
|
||||
Port `prototypes/colors_and_type.css` verbatim into the app (Tailwind 4 `@theme` or CSS
|
||||
custom properties). Components reference **semantic** tokens, never raw hex.
|
||||
|
||||
### Color — light mode
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `--c-canvas` | `#f0efe9` | Page background (warm sand). Flat, no gradients. |
|
||||
| `--c-surface` | `#ffffff` | Cards, inputs, menus. |
|
||||
| `--c-muted` | `#f5f4ef` | Subtle fills (mission-control tiles, hover wash). |
|
||||
| `--c-line` | `#e4e2d7` | 1px borders. |
|
||||
| `--c-line-2` | `#eeede8` | Inner dividers / row separators. |
|
||||
| `--c-ink` | `#012851` | Primary text (navy). |
|
||||
| `--c-ink-2` | `#4b5563` | Secondary / body text. |
|
||||
| `--c-ink-3` | `#6b7280` | Meta, placeholder, captions. |
|
||||
| `--c-primary` | `#012851` | Primary buttons, active segment, header. |
|
||||
| `--c-primary-fg` | `#ffffff` | Text on primary. |
|
||||
| `--c-accent` | `#a1dcd8` | **Mint — decorative only.** Top stripes, left rules, underlines, timeline spine. **Never carries text.** |
|
||||
| `--c-accent-bg` | `rgba(161,220,216,.15)` | Tinted note/skill backgrounds. |
|
||||
| `--c-header` | `#012851` | Header bar (always navy, both themes). |
|
||||
| `--c-turquoise` | `#00c7b1` | Transcription mode only. |
|
||||
| `--c-danger` | `#c0392b` | Destructive actions (Löschen). |
|
||||
| `--c-focus-ring` | `#012851` | 2px focus outline, 2px offset (mint in dark). |
|
||||
|
||||
### Color — dark mode (`:root[data-theme='dark']`)
|
||||
|
||||
Navy-tinted. Key flips: `--c-canvas:#010e1e`, `--c-surface:#011526`, `--c-muted:#011a30`,
|
||||
`--c-line:#0d3358`, `--c-ink:#f0efe9`, `--c-ink-2:#9ca3af`, `--c-ink-3:#8b97a5`.
|
||||
**`--c-accent` flips to turquoise `#00c7b1`**, and `--c-primary` flips to mint `#a1dcd8`
|
||||
with `--c-primary-fg:#012851`. Full set in `colors_and_type.css`.
|
||||
|
||||
### Person / avatar palette (deterministic — see §5)
|
||||
|
||||
`#5a8a6a #a0522d #c17a00 #607080 #7a4f9a #c0446e #3060b0 #4a7a3a #9a8040 #c05540`
|
||||
|
||||
> The live avatar constant is `$lib/shared/avatarPalette.ts` (single source of
|
||||
> truth). Three of these hues fail the ≥4.5:1 white-initials contrast floor and
|
||||
> ship as AA-darkened variants there (sage `#527e61`, amber `#a46800`,
|
||||
> sand `#897239`); the bright hues above remain the decorative tag-dot colors.
|
||||
|
||||
### Tag dot colors
|
||||
|
||||
`--c-tag-sage #5a8a6a`, `--c-tag-sienna #a0522d`, `--c-tag-amber #c17a00`,
|
||||
`--c-tag-slate #607080`, `--c-tag-violet #7a4f9a`, `--c-tag-rose #c0446e`,
|
||||
`--c-tag-cobalt #3060b0`, `--c-tag-moss #4a7a3a`, `--c-tag-sand #9a8040`,
|
||||
`--c-tag-coral #c05540`.
|
||||
|
||||
### Badge types (Personen)
|
||||
|
||||
| Type | bg / text / border |
|
||||
|---|---|
|
||||
| Institution | `#e8eff7` / `#1a4971` / `#c4d5e8` |
|
||||
| Gruppe | `#f0e8f5` / `#5a2d6f` / `#d8c5e3` |
|
||||
| Unbekannt | `#fdf4e3` / `#7a5a0a` / `#f0ddb3` |
|
||||
|
||||
### Radius / shadow
|
||||
|
||||
- `--radius-sm: 2px` — cards, inputs, buttons, segmented control. **The default.**
|
||||
- `--radius-md: 4px` — tag chips/badges only.
|
||||
- `--radius-full: 9999px` — avatars, dots, pills.
|
||||
- `--shadow-sm: 0 1px 2px 0 rgb(0 0 0/.05)` — resting cards.
|
||||
- `--shadow-md: 0 4px 6px -1px rgb(0 0 0/.1), 0 2px 4px -2px rgb(0 0 0/.1)` — dropdowns.
|
||||
|
||||
---
|
||||
|
||||
## 2. Typography
|
||||
|
||||
Two families. **Montserrat** (`--font-sans`) for all UI chrome; **Tinos** (`--font-serif`)
|
||||
for headlines, body, letter content, transcriptions, story prose.
|
||||
|
||||
| Role | Family | Size / weight | Treatment |
|
||||
|---|---|---|---|
|
||||
| Page title (`h1`) | Tinos | **46px / 700**, line-height 1.06 | sentence case |
|
||||
| Story detail title | Tinos | 38px / 700, lh 1.15 | sentence case |
|
||||
| Card title (`h3`) | Tinos | 19–24px / 700 | sentence case |
|
||||
| Body / letter / snippet | Tinos | 15–18px, lh 1.55–1.75 | snippets *italic*, quotes use `„…“` |
|
||||
| **Rubric / eyebrow label** | Montserrat | **12px / 700**, `letter-spacing:.14em`, UPPERCASE | above every page title |
|
||||
| Section caption | Montserrat | 11–12px / 700, `.12–.14em`, UPPERCASE | card headers |
|
||||
| Button / nav label | Montserrat | 11–12px / 700, `.08–.1em`, UPPERCASE | |
|
||||
| Tag chip label | Montserrat | 10px / 700, `.13–.15em`, UPPERCASE | |
|
||||
| Meta line | Montserrat | 12px / 400 | counts, dates; separated by ` · ` |
|
||||
|
||||
**Casing law:** UI chrome (labels, buttons, nav, captions, tags) is ALL CAPS + wide
|
||||
tracking, Montserrat bold. Headlines and document titles are sentence case in Tinos serif.
|
||||
|
||||
---
|
||||
|
||||
## 3. Shared component: page header (eyebrow + title)
|
||||
|
||||
Every top-level page opens with this block. **Build it once** as a `PageHeader`
|
||||
component (props: eyebrow, title, lede, optional right-side count or action).
|
||||
|
||||
```
|
||||
<div border-left:4px solid var(--c-accent); padding-left:18px>
|
||||
<eyebrow> Montserrat 12px/700, .14em, UPPERCASE, color --c-ink-3, margin-bottom 8px
|
||||
<h1> Tinos 46px/700, lh 1.06, color --c-ink
|
||||
<lede> Tinos italic 16px, color --c-ink-2, margin-top 10px, max-width 520px
|
||||
```
|
||||
|
||||
The **4px mint left rule** is the signature. A right-aligned count
|
||||
(`38 Personen`, `147 Dokumente · 38 Personen`) or a primary action button sits opposite via
|
||||
`justify-content:space-between; align-items:flex-end`.
|
||||
|
||||
Page shell for every screen: `min-height:100vh; background:var(--c-canvas)`, header on top,
|
||||
then `<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">`.
|
||||
|
||||
---
|
||||
|
||||
## 4. Shared component: app header + nav (`ArchiveHeader`)
|
||||
|
||||
Single sticky header reused on every page. **This is the most important thing to extract
|
||||
into one component** — it is currently duplicated and must not be.
|
||||
|
||||
- `position:sticky; top:0; z-index:50; background:var(--c-header)`.
|
||||
- **4px mint stripe** (`#a1dcd8`) across the very top, above the bar.
|
||||
- Bar: `max-width:1180px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center`, white text.
|
||||
- Wordmark `FAMILIENARCHIV`: Montserrat 18px/700, `letter-spacing:.16em`, UPPERCASE, `margin-right:28px`.
|
||||
- Nav items: Montserrat 11px/700, `.07em`, UPPERCASE, color `rgba(255,255,255,.6)`,
|
||||
`line-height:44px`. **Active** item → color `#fff` + `border-bottom:2px solid #a1dcd8`.
|
||||
Nav order: Dokumente · Personen · Briefwechsel · Geschichten · Zeitstrahl · Aktivitäten
|
||||
(· Regeln, internal). Each links to its route; pass the active key as a prop.
|
||||
- Right cluster: **Hell / Dunkel** theme toggle (segmented; active segment = mint bg
|
||||
`#a1dcd8` + navy text) and a round user avatar chip (`MR`, white bg, navy text, 32px).
|
||||
- **Theme toggle** writes `localStorage['theme']` (`'light'|'dark'`) and sets
|
||||
`document.documentElement.dataset.theme`. A tiny inline boot script in `<head>` reads it
|
||||
before paint to avoid a flash. Map this to the app's existing theme mechanism if one
|
||||
exists; otherwise replicate.
|
||||
- Motion: `transition-colors` only. No transforms, no scale on press.
|
||||
|
||||
---
|
||||
|
||||
## 5. Shared primitive: avatar + deterministic color
|
||||
|
||||
Every person is a round avatar with initials, colored by a hash of the name so the same
|
||||
person is always the same color across every screen. **Extract this into one util +
|
||||
component** — it is currently copy-pasted into 6 files.
|
||||
|
||||
```js
|
||||
// palette = the 10 person colors in §1
|
||||
function avatarFor(name) {
|
||||
let h = 0;
|
||||
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length > 1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
return { bg: palette[h % palette.length], initials };
|
||||
}
|
||||
```
|
||||
|
||||
- Always a perfect circle (`border-radius:full`), white initials in Montserrat 700, `line-height:1`.
|
||||
- Sizes in use: **48px**/16px (selectors, person cards), **40px**/14px (story byline, feed,
|
||||
Briefwechsel rows), **26px**/10px (overlapping stacks — `margin-left:-6px` +
|
||||
`2px solid var(--c-surface)` ring), **28px** (timeline person nodes).
|
||||
- The color **distinguishes, it does not decorate** — never restyle it for emphasis.
|
||||
|
||||
---
|
||||
|
||||
## 6. Shared component: segmented control (filters / views)
|
||||
|
||||
Inline filter switch used on Personen, Geschichten, Zeitstrahl, Aktivitäten, and the header
|
||||
theme toggle.
|
||||
|
||||
- `display:inline-flex; border:1px solid var(--c-line)` (radius 0 / sm; segments share borders).
|
||||
- Each segment: Montserrat 12px/700, `.08em`, UPPERCASE, `padding:9–10px 16px`, `cursor:pointer`.
|
||||
- **Active** segment: `background:var(--c-primary); color:var(--c-primary-fg)`.
|
||||
- Inactive: `background:var(--c-surface); color:var(--c-ink-2)`, `border-left:1px solid var(--c-line)` between segments.
|
||||
|
||||
---
|
||||
|
||||
## 7. Cards, metadata, empty states
|
||||
|
||||
**Card:** `background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20–24px`.
|
||||
Most content cards add a **3px mint top border** (`border-top:3px solid var(--c-accent)`) as
|
||||
the archival signature; some use a **3px mint left border** for inline/resume strips.
|
||||
|
||||
**Metadata line:** one Montserrat 12px line, items separated by ` · `, often led by a 14px
|
||||
De Gruyter icon at `opacity:.5`. Example: `📅 14. März 1923 · 14 Dokumente · 4 Personen`
|
||||
(icon is an `<img>`, not emoji).
|
||||
|
||||
**Status dots:** 7px circle + UPPERCASE label. Transkribiert/Veröffentlicht `#5a8a6a`,
|
||||
In Arbeit `#c17a00`, Neu/Entwurf `#607080`.
|
||||
|
||||
**Empty state:** dashed `1px var(--c-line)` border, centered. Serif heading
|
||||
(`Noch keine Geschichten angelegt.`) + Montserrat sub line ending in the German ellipsis
|
||||
(`Beginnen Sie mit einem Brief…`). Quiet, Sie-form, helpful — never cute.
|
||||
|
||||
---
|
||||
|
||||
## 8. Motion, hover, imagery
|
||||
|
||||
- All motion is **color**, `transition: color/background/border .15–.2s`. No transform, no
|
||||
scale, no press-down.
|
||||
- Rows: `hover:bg-muted/50`. Links: 2px mint underline at `text-underline-offset:3px`,
|
||||
`text-decoration-thickness:2px`. Header nav: `white/60 → white`.
|
||||
- Backdrops `bg-black/20`. **No backdrop-blur, no glassmorphism, no gradients, no noise.**
|
||||
- Imagery is warm aged letter scans; UI chrome stays cool navy to contrast.
|
||||
- De Gruyter icons: black strokes as `<img>`, `opacity-40` resting tint (`.65` on the dark
|
||||
header), globally inverted in dark mode.
|
||||
217
design_handoff_familienarchiv_redesign/EPIC.md
Normal file
217
design_handoff_familienarchiv_redesign/EPIC.md
Normal file
@@ -0,0 +1,217 @@
|
||||
# EPIC: Familienarchiv Visual Redesign ("Mappe")
|
||||
|
||||
> Implement **in order**. Stories 1–4 are foundation and shared primitives — every screen
|
||||
> depends on them. Do not start a screen story until 1–4 are merged, or the header, avatar,
|
||||
> and tokens get re-implemented per screen and drift. Read `DESIGN_RULES.md` first; open the
|
||||
> matching `prototypes/*.dc.html` for pixel ground truth while building each story.
|
||||
|
||||
## Epic goal
|
||||
|
||||
Reskin the entire Familienarchiv app to the unified "Mappe" archival direction and ship
|
||||
three new sections (Geschichten, Zeitstrahl, Aktivitäten). All copy German-first via
|
||||
Paraglide; light + dark mode; De Gruyter icon convention preserved.
|
||||
|
||||
## Epic-level acceptance criteria
|
||||
|
||||
- [ ] All eight screens match their prototype in light **and** dark mode.
|
||||
- [ ] Header, page-header, avatar, segmented control, and card exist as **single shared
|
||||
components** — zero duplication of the header markup or the avatar-color function.
|
||||
- [ ] No raw hex in components; everything references the semantic tokens.
|
||||
- [ ] Every visible string is a Paraglide message key, German authored first; `en`/`es`
|
||||
stubs added.
|
||||
- [ ] Icons rendered as `<img>`, invert correctly in dark mode.
|
||||
- [ ] No gradients, blur, emoji, or transform-based motion introduced.
|
||||
|
||||
---
|
||||
|
||||
> **Reframe (2026-06-16): this is alignment, not greenfield.** An audit of the live codebase
|
||||
> found the substrate already in place — the full token system (`DESIGN_RULES §1–2`), dark
|
||||
> mode, the app header, and the three "new" sections (Geschichten, Zeitstrahl, Aktivitäten)
|
||||
> all already exist. So **Stories 1–4 below are close-out + extraction**, not from-scratch
|
||||
> builds, and Stories 5–11 are "align the existing screen to its prototype," not new pages.
|
||||
> The detailed, trackable breakdown lives in the Gitea milestone **"Mappe Visual Redesign"**
|
||||
> (issues split into *shared components* then *pages*); **Phase B** at the bottom of this file
|
||||
> lists the screens that previously had no prototype and now do.
|
||||
|
||||
## Story 1 — Foundation: tokens, fonts, theme
|
||||
|
||||
**Goal:** establish the visual substrate the whole app reads from.
|
||||
|
||||
- Port `prototypes/colors_and_type.css` into the app's token layer (Tailwind 4 `@theme` /
|
||||
`layout.css`). Keep every variable name in `DESIGN_RULES.md §1`.
|
||||
- Wire Montserrat + Tinos (or licensed Gotham/Times) and the `--font-sans`/`--font-serif` vars.
|
||||
- Implement light/dark via `:root[data-theme='dark']` + the pre-paint boot script that reads
|
||||
`localStorage['theme']`. Add the global `img[src*='degruyter-icons']{filter:invert(1)}`
|
||||
dark rule.
|
||||
|
||||
**Done when:** a throwaway page using `var(--c-*)` tokens renders correct in both themes; no
|
||||
flash of wrong theme on reload.
|
||||
|
||||
## Story 2 — Shared: app header + nav (`ArchiveHeader`)
|
||||
|
||||
**Spec:** `DESIGN_RULES.md §4`. Prototype: `ArchiveHeader.dc.html`.
|
||||
|
||||
- One sticky header component: mint stripe, wordmark, nav with active-key prop, theme
|
||||
toggle, user chip. Nav routes to all sections.
|
||||
- Theme toggle drives the Story 1 mechanism.
|
||||
|
||||
**Done when:** header renders identically on every route; active item shows the mint
|
||||
underline; toggle flips theme and persists.
|
||||
|
||||
## Story 3 — Shared: avatar + deterministic color
|
||||
|
||||
**Spec:** `DESIGN_RULES.md §5`.
|
||||
|
||||
- `avatarFor(name)` util (hash → palette index + initials) + an `<Avatar name size>`
|
||||
component supporting 26/28/40/48px and the overlapping-stack ring variant.
|
||||
|
||||
**Done when:** the same name yields the same color everywhere; stacks overlap with the
|
||||
surface-colored ring.
|
||||
|
||||
## Story 4 — Shared: page-header, segmented control, card, metadata, empty state
|
||||
|
||||
**Spec:** `DESIGN_RULES.md §3, §6, §7`.
|
||||
|
||||
- `PageHeader` (eyebrow + 4px mint left rule + serif h1 + italic lede + right slot).
|
||||
- `SegmentedControl` (active = navy). `Card` (mint top/left border variants). `MetaLine`
|
||||
(` · ` separated, optional leading icon). `EmptyState` (dashed, serif + ellipsis).
|
||||
|
||||
**Done when:** each primitive matches the prototype and is consumed by the screen stories
|
||||
below — not re-styled inline.
|
||||
|
||||
---
|
||||
|
||||
## Story 5 — Dokumente (dashboard / search results)
|
||||
|
||||
**Route:** `/`. **Prototype:** `Dokumente.dc.html`.
|
||||
|
||||
PageHeader (eyebrow "Archiv", title "Dokumente", lede, right count "147 Dokumente · 38
|
||||
Personen"). Then: a **search bar card** (input `Titel, Personen, Tags durchsuchen…` +
|
||||
"Datum ↓" sort + "Filter" buttons); a **resume strip** (mint left border, "Weiter bei:" +
|
||||
italic underlined doc link); a **`1fr 320px` grid** — left: "Zuletzt hinzugefügt" list
|
||||
(title · avatar stack · right-aligned date `width:128px` · status dot+label `width:118px`),
|
||||
right column: **upload dropzone** (dashed, Upload icon, `PDF, JPG, PNG, TIFF bis 50 MB`) +
|
||||
"Benötigt Metadaten" card; below full-width **Mission Control** — 3 tiles (Segmentierung /
|
||||
Transkription / Zur Überprüfung), each with a caption, a pill "skill" hint, a weekly count,
|
||||
and a list of linked items. Right column collapses below `lg`; main goes full-width.
|
||||
|
||||
**Done when:** matches prototype both themes; status dots use the §7 colors; grid collapses.
|
||||
|
||||
## Story 6 — Personen (directory)
|
||||
|
||||
**Route:** `/persons`. **Prototype:** `Personen.dc.html`.
|
||||
|
||||
PageHeader (eyebrow "Verzeichnis") + right count "38 Personen". Search input
|
||||
(`z.B. Oma Frieda, Onkel Karl…`) + segmented control (Alle / Personen / Institutionen /
|
||||
Gruppen). **3-column card grid**; each card: 48px avatar, serif name, relation sub, optional
|
||||
type **badge** (Institution/Gruppe/Unbekannt — §1 colors), divider, meta line
|
||||
`✉ N Briefe · N Dokumente`. Cards carry the 3px mint top border.
|
||||
|
||||
**Done when:** badge colors correct; avatar colors deterministic; grid responsive.
|
||||
|
||||
## Story 7 — Briefwechsel — DROPPED
|
||||
|
||||
The two-person letter-exchange feature was removed from the product. Its prototype, route, and
|
||||
nav entry no longer exist. Skip.
|
||||
|
||||
## Story 8 — Geschichten (story collections list) — NEW
|
||||
|
||||
**Route:** `/geschichten`. **Prototype:** `Geschichten.dc.html`.
|
||||
|
||||
PageHeader (eyebrow "Sammlungen") + primary button "Neue Geschichte". Segmented control
|
||||
(Alle / Veröffentlicht / In Arbeit / Entwurf) + Filter button. **2-column card grid**; each
|
||||
card (link, mint top border): tag chips (dot + UPPERCASE label), serif 24px title, serif dek,
|
||||
meta line `📅 range · N Dokumente · N Personen`, footer with overlapping avatar stack + status
|
||||
dot/label. Cards link to the story detail.
|
||||
|
||||
**Done when:** tag dots and status colors correct; cards link to Story 9.
|
||||
|
||||
## Story 9 — Geschichte (single story detail) — NEW
|
||||
|
||||
**Route:** `/geschichten/:id`. **Prototype:** `Geschichte.dc.html`. **Two variants**
|
||||
(`variant` prop): **"Lesereise"** (a guided reading — intro + narration blocks + letter
|
||||
cards + annotation notes) and **"Sammlung"** (a collection — intro + "Erwähnte Dokumente"
|
||||
list). Centered `max-width:880px` article card (mint top border, `padding:48px 56px`):
|
||||
type badge, 38px serif title, byline row (author avatar + name + "zusammengestellt am …" +
|
||||
Bearbeiten / Löschen actions), intro paragraph, then ordered **blocks**:
|
||||
|
||||
- **narration** — 3px mint left rule, serif italic 18px.
|
||||
- **letter** — clickable row: 40px tile w/ Mail icon, serif title, meta `date · von X an Y`,
|
||||
trailing Arrow-Right icon.
|
||||
- **note** — mint-tinted (`--c-accent-bg`) left-rule box, "Anmerkung" caption + serif italic.
|
||||
|
||||
**Done when:** both variants render from the prop; block types styled per spec; Löschen uses
|
||||
`--c-danger`.
|
||||
|
||||
## Story 10 — Zeitstrahl (timeline) — NEW
|
||||
|
||||
**Route:** `/zeitstrahl`. **Prototype:** `Zeitstrahl.dc.html`.
|
||||
|
||||
PageHeader (eyebrow "Chronik") + right count. Segmented control (Alle / Briefe / Personen /
|
||||
Ereignisse) + a small legend. **Centered vertical spine** (`max-width:760px`, 2px mint center
|
||||
line). Item types stacked on the spine: **year** pill (navy), **summary** card (count + a
|
||||
12-bar monthly-density mini chart in mint + range labels), **letter** cards **alternating
|
||||
left/right** with a spine dot (`2px solid --c-primary`) and optional tag pill, **person**
|
||||
node (28px navy circle glyph + name + derived meta), **curated** node (★, mint left rule),
|
||||
**historical** band (full-width, Globe icon, serif italic, top/bottom hairline).
|
||||
|
||||
**Done when:** spine centered; letters alternate; bars scale to value %; all five item types
|
||||
render.
|
||||
|
||||
## Story 11 — Aktivitäten (activity feed) — NEW
|
||||
|
||||
**Route:** `/aktivitaeten`. **Prototype:** `Aktivitaeten.dc.html`.
|
||||
|
||||
PageHeader (eyebrow "Verlauf") + "Aktualisieren" button. Segmented control (Alle /
|
||||
Transkription / Uploads / Personen). Feed grouped by day (Heute / Gestern / Diese Woche),
|
||||
each group a UPPERCASE caption + rows. Each **row**: 40px avatar with a small **action-icon
|
||||
badge** bottom-right (Check/Upload/Chat/Edit/…), then a sentence — bold actor name +
|
||||
Montserrat verb + *italic underlined* target link — and a time sub.
|
||||
|
||||
**Done when:** grouping + icon badges match; target links styled with mint underline.
|
||||
|
||||
## Story 12 (optional) — Regeln (internal style reference)
|
||||
|
||||
**Prototype:** `Regeln.dc.html`. Internal page documenting the seven blocks (Typografie,
|
||||
Farbe, Seitenkopf, Steuerung, Avatare, Metadaten/Leerzustände). Build only if the team wants
|
||||
a living in-app reference; otherwise `DESIGN_RULES.md` is the canonical record. Gate behind
|
||||
admin/dev.
|
||||
|
||||
---
|
||||
|
||||
## Suggested order & dependencies
|
||||
|
||||
```
|
||||
1 Tokens ─┬─ 2 Header ──┐
|
||||
├─ 3 Avatar ──┼─→ 5 Dokumente, 6 Personen,
|
||||
└─ 4 Primitives┘ 8 Geschichten → 9 Geschichte,
|
||||
10 Zeitstrahl, 11 Aktivitäten (parallelizable)
|
||||
12 Regeln (optional, last)
|
||||
→ then Phase B (added screens), all depend on 1–4
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase B — Added screens (previously un-prototyped pages)
|
||||
|
||||
These are the pages the original handoff never covered. Each now has a hifi `.dc.html`
|
||||
prototype in `prototypes/`. All depend on the shared primitives from Stories 1–4 and are
|
||||
parallelizable among themselves. **Each maps to one Gitea page-issue** in the milestone.
|
||||
Admin + OCR pages are explicitly **out of scope** here (phase-2 milestone).
|
||||
|
||||
| # | Screen | Prototype | Route(s) | Done when |
|
||||
|---|---|---|---|---|
|
||||
| B1 | Dokumente-Liste | `Dokumente-Liste.dc.html` | `/documents` | PageHeader; search card; AND/OR segmented; grouped mint-top cards; avatar-stack rows; 7px status dot+label; pagination |
|
||||
| B2 | Dokument-Detail | `Dokument-Detail.dc.html` | `/documents/[id]` | compact top bar w/ mint accent bar; PDF pane + transcription panel w/ Lesen/Bearbeiten segmented + turquoise mode; details card |
|
||||
| B3 | Dokument-Bearbeiten | `Dokument-Bearbeiten.dc.html` | `/documents/[id]/edit`, `/new`, `/bulk-edit` | split pane; progress strip; Wer&Wann + Beschreibung cards; dropzone (new); action bar (Löschen danger / Abbrechen / Zur Überprüfung / Speichern) |
|
||||
| B4 | PersonDetail | `PersonDetail.dc.html` | `/persons/[id]` | PageHeader; 2-col mint-top cards; deterministic avatar; correspondents + relationships + letter lists |
|
||||
| B5 | PersonForm | `PersonForm.dc.html` | `/persons/new`, `/[id]/edit` | PageHeader; Stammdaten card w/ type segmented; caps labels; Namensverlauf; edit-only merge danger zone; save bar |
|
||||
| B6 | PersonReview | `PersonReview.dc.html` | `/persons/review` | PageHeader + count; row card w/ muted avatar; idle/rename/merge states; danger merge+delete; confirm dialog; empty state |
|
||||
| B7 | Geschichte-Editor | `Geschichte-Editor.dc.html` | `/geschichten/new`, `/[id]/edit` | type-pick segmented; prose editor toolbar; journey editor w/ **color-only** drag; sidebar status+persons; save bar |
|
||||
| B8 | Ereignis-Editor | `Ereignis-Editor.dc.html` | `/zeitstrahl/events/new`, `/[id]/edit` | PageHeader; Wann&Was card w/ type segmented + date precision + danger error; persons/docs sidebar; save bar |
|
||||
| B9 | Stammbaum | `Stammbaum.dc.html` | `/stammbaum` | PageHeader + count; node cards w/ **§5 avatar** in resting/selected/dimmed; line connectors; side panel; zoom controls; empty state |
|
||||
| B10 | Themen | `Themen.dc.html` | `/themen` | PageHeader + count; segmented filter; mint-top cards w/ **§1 tag-dot** (not stripe); child rows; empty state |
|
||||
| B11 | Anreicherung | `Anreicherung.dc.html` | `/enrich`, `/[id]`, `/done` | list (status rows) / step (progress bar + split pane + action bar) / done (success card) |
|
||||
| B12 | Profil | `Profil.dc.html` | `/profile`, `/users/[id]` | PageHeader; 2-col data/password cards; token banners; notifications; public profile card w/ avatar |
|
||||
| B13 | Anmeldung | `Anmeldung.dc.html` | `/login`, `/register`, `/forgot-password`, `/reset-password` | self-contained branded shell (no app header); Tinos sentence-case titles; 17px inputs; token banners |
|
||||
| B14 | Hilfe-Transkription | `Hilfe-Transkription.dc.html` | `/hilfe/transkription` | PageHeader; article column; rule cards w/ De Gruyter icons (no emoji); fixes `border-brand-sand`/`bg-white` bugs |
|
||||
125
design_handoff_familienarchiv_redesign/README.md
Normal file
125
design_handoff_familienarchiv_redesign/README.md
Normal file
@@ -0,0 +1,125 @@
|
||||
# Handoff: Familienarchiv — Visual Redesign ("Mappe" direction)
|
||||
|
||||
## Overview
|
||||
|
||||
This package hands off a **complete visual redesign of the Familienarchiv web app** to a
|
||||
developer using Claude Code. Familienarchiv is a private digital family archive
|
||||
(German-first SvelteKit app) for digitising, transcribing, tagging and searching
|
||||
historical correspondence.
|
||||
|
||||
The redesign unifies every page under one system — internally called **"Mappe"** (German
|
||||
for *folder/portfolio*): a warm, archival, institutional look built on the De Gruyter Brill
|
||||
corporate identity. It also **adds three new sections** that did not exist in the old app
|
||||
(**Geschichten**, **Zeitstrahl**, **Aktivitäten**) alongside redesigns of the existing ones.
|
||||
|
||||
The work is broken into an **epic with foundation-first stories**. Read the three docs in
|
||||
this order:
|
||||
|
||||
1. **`README.md`** (this file) — what's here, fidelity, how to use it.
|
||||
2. **`DESIGN_RULES.md`** — the binding visual law (tokens, type, the shared patterns).
|
||||
*Read this before writing any code.*
|
||||
3. **`EPIC.md`** — the epic + ordered stories + acceptance criteria. *Implement in order.*
|
||||
|
||||
## About the design files
|
||||
|
||||
The files in `prototypes/` are **design references created in HTML** — high-fidelity
|
||||
prototypes that show the intended look and behaviour exactly. **They are not the production
|
||||
codebase and must not be shipped as-is.** They are authored as "Design Components"
|
||||
(`.dc.html`) for a prototyping runtime (`support.js`); that runtime is **not** part of the
|
||||
target app.
|
||||
|
||||
Your task is to **recreate these designs inside the existing Familienarchiv codebase**
|
||||
(SvelteKit 2 + Svelte 5 + Tailwind 4 + Paraglide i18n) using its established patterns —
|
||||
real Svelte components, real routes, real i18n message keys. Where the prototype uses a
|
||||
made-up runtime construct (`<dc-import>`, `<sc-for>`, `renderVals()`), map it to the
|
||||
codebase's idiom (a Svelte component import, an `{#each}` block, component props/state).
|
||||
|
||||
### Why HTML prototypes are the source of truth
|
||||
|
||||
Every colour, size, weight, spacing and radius is written **inline** in the prototype
|
||||
markup, and the files **render**. When the written spec and a prototype disagree, **the
|
||||
prototype wins** — open it in a browser and measure. Treat `DESIGN_RULES.md` and `EPIC.md`
|
||||
as the *intent and ordering*, and the prototypes as the *pixel ground truth*.
|
||||
|
||||
To view a prototype: open any `prototypes/*.dc.html` in a browser (they are self-contained;
|
||||
`colors_and_type.css`, `support.js` and `assets/icons/` sit alongside them). Use the
|
||||
**Hell / Dunkel** toggle in the header to verify dark mode.
|
||||
|
||||
## Fidelity
|
||||
|
||||
**High-fidelity (hifi).** Final colours, typography, spacing, radii, shadows, copy and
|
||||
interaction intent are all decided. Recreate pixel-perfectly using the codebase's existing
|
||||
libraries. Do not re-interpret the visual language — apply it.
|
||||
|
||||
## What's in this bundle
|
||||
|
||||
```
|
||||
design_handoff_familienarchiv_redesign/
|
||||
├── README.md ← you are here
|
||||
├── DESIGN_RULES.md ← binding tokens + shared patterns (the "rules")
|
||||
├── EPIC.md ← epic, stories, acceptance criteria (implement in order)
|
||||
├── _AUTHORING_KIT.md ← the contract every prototype was authored against (copy-verbatim snippets)
|
||||
└── prototypes/ ← runnable hifi references (source of truth)
|
||||
│ ── original section screens ──
|
||||
├── ArchiveHeader.dc.html shared header + nav + theme toggle
|
||||
├── Dokumente.dc.html dashboard
|
||||
├── Personen.dc.html person directory
|
||||
├── Geschichten.dc.html curated story collections (list)
|
||||
├── Geschichte.dc.html single story detail (2 variants)
|
||||
├── Zeitstrahl.dc.html chronological timeline
|
||||
├── Aktivitaeten.dc.html activity feed
|
||||
├── Regeln.dc.html the design-rules spec page (internal reference)
|
||||
│ ── added screens (the previously un-prototyped pages) ──
|
||||
├── Dokumente-Liste.dc.html document search / grouped results
|
||||
├── Dokument-Detail.dc.html document viewer + transcription workbench
|
||||
├── Dokument-Bearbeiten.dc.html edit / new / bulk-edit (variant prop)
|
||||
├── PersonDetail.dc.html person detail (read)
|
||||
├── PersonForm.dc.html person new / edit (variant prop)
|
||||
├── PersonReview.dc.html provisional-person triage workflow
|
||||
├── Geschichte-Editor.dc.html story authoring: new / story / journey (variant prop)
|
||||
├── Ereignis-Editor.dc.html timeline event new / edit (variant prop)
|
||||
├── Stammbaum.dc.html family tree
|
||||
├── Themen.dc.html topics / tag directory
|
||||
├── Anreicherung.dc.html enrich workflow: list / step / done (variant prop)
|
||||
├── Profil.dc.html account settings + public profile (variant prop)
|
||||
├── Anmeldung.dc.html auth: login / register / forgot / reset (variant prop, no app header)
|
||||
├── Hilfe-Transkription.dc.html transcription help / guidelines
|
||||
│ ── shared assets ──
|
||||
├── colors_and_type.css design tokens (port into the app)
|
||||
├── support.js prototype runtime — DO NOT ship
|
||||
└── assets/icons/ De Gruyter "Simple" icons used by the screens
|
||||
```
|
||||
|
||||
> **Status note (2026-06-16).** Two facts updated this bundle since the original handoff:
|
||||
> 1. **This is now an alignment effort, not a greenfield reskin.** The token system
|
||||
> (`DESIGN_RULES §1–2`), dark mode, the app header, and the three "new" sections
|
||||
> (Geschichten, Zeitstrahl, Aktivitäten) **already exist in the codebase**. Foundation
|
||||
> Stories 1–4 are *close-out + extraction* of the missing shared primitives (`PageHeader`,
|
||||
> `Avatar`/`avatarFor`, `SegmentedControl`, `Card`, `MetaLine`, `EmptyState`, `StatusDot`),
|
||||
> not from-scratch builds. See the Gitea milestone **"Mappe Visual Redesign"** for the
|
||||
> issue-level breakdown (shared components, then pages).
|
||||
> 2. **Briefwechsel was dropped** — that feature was removed from the product, so its
|
||||
> prototype and nav entry are gone. Admin + OCR pages are deferred to a phase-2 milestone.
|
||||
|
||||
## Assets
|
||||
|
||||
- **Icons** — De Gruyter "Simple" Medium-24px SVGs in `prototypes/assets/icons/`. In the
|
||||
real app these live at `static/degruyter-icons/Simple/…` and are rendered as `<img>`
|
||||
tags. Reuse the existing app copies; this bundle ships only the subset the redesign
|
||||
touches so you can see which are needed.
|
||||
- **Fonts** — Montserrat + Tinos via Google Fonts (substitutes for Gotham + Times). The
|
||||
`@import` is at the top of `colors_and_type.css`. If the team has the licensed Gotham/Times
|
||||
faces, swap them in and keep the variable names.
|
||||
- **Logo** — none. The brand is the wordmark `FAMILIENARCHIV` (Montserrat Bold, uppercase,
|
||||
`letter-spacing:.16em`) on the navy header.
|
||||
|
||||
## Target codebase notes
|
||||
|
||||
- **i18n**: all copy in the prototypes is German. The app is German-first with `en`/`es`
|
||||
translations (Paraglide). Every visible string must become a message key, German written
|
||||
first. Existing keys live in `frontend/messages/{de,en,es}.json`.
|
||||
- **Icons as `<img>`**: keep the app convention — never inline SVG, never icon fonts. Dark
|
||||
mode inverts them globally via `img[src*='degruyter-icons'] { filter: invert(1); }`.
|
||||
- **Tailwind 4**: the prototypes use inline styles for clarity. Port them to the codebase's
|
||||
Tailwind utilities / `@theme` tokens — but the *values* must match the tokens in
|
||||
`DESIGN_RULES.md` exactly.
|
||||
275
design_handoff_familienarchiv_redesign/_AUTHORING_KIT.md
Normal file
275
design_handoff_familienarchiv_redesign/_AUTHORING_KIT.md
Normal file
@@ -0,0 +1,275 @@
|
||||
# Prototype Authoring Kit — "Mappe" redesign
|
||||
|
||||
You are authoring a **`.dc.html` design prototype** for the Familienarchiv redesign. These
|
||||
prototypes are the **pixel ground truth** for one screen. They are NOT production code — they
|
||||
run in a tiny prototyping runtime (`support.js`) and are opened directly in a browser.
|
||||
|
||||
**Read alongside this kit:** `DESIGN_RULES.md` (the binding visual law) and the existing
|
||||
prototype you are told to use as a template. When this kit and `DESIGN_RULES.md` disagree,
|
||||
`DESIGN_RULES.md` wins; when a rule and an existing rendered prototype disagree, the
|
||||
prototype wins.
|
||||
|
||||
Everything below is **copy-verbatim**. Do not invent new tokens, colors, fonts, radii, or
|
||||
spacings. Use only `var(--c-*)` / `var(--font-*)` / `var(--shadow-*)` and the literal values
|
||||
shown here.
|
||||
|
||||
---
|
||||
|
||||
## 1. File skeleton (copy exactly; fill the `<main>` and the `renderVals()`)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="ACTIVE_KEY" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
<!-- PAGE CONTENT HERE -->
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
renderVals(){
|
||||
return { /* data the template renders */ };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
- `ACTIVE_KEY` ∈ `dokumente · personen · geschichten · zeitstrahl · aktivitaeten · stammbaum · themen · regeln`.
|
||||
Pick the section your page belongs to (e.g. a document edit page → `dokumente`; a person
|
||||
edit page → `personen`; a timeline event editor → `zeitstrahl`).
|
||||
- **Auth pages (`Anmeldung`) have NO `ArchiveHeader`** — they get their own branded shell
|
||||
(see §11).
|
||||
|
||||
## 2. Runtime constructs (this is all the runtime understands)
|
||||
|
||||
- `{{ expr }}` — interpolate a value from `renderVals()` (path access: `a.b`, `a[0]`). Works
|
||||
in text and in any attribute, including `style="{{ obj }}"` where `obj` is a JS style
|
||||
object.
|
||||
- `<sc-for list="{{ items }}" as="x" hint-placeholder-count="6"> … {{ x.foo }} … </sc-for>`
|
||||
- `<sc-if value="{{ flag }}" hint-placeholder-val="{{ false }}"> … </sc-if>`
|
||||
- `onClick="{{ handler }}"` where `handler` is a function returned from `renderVals()`.
|
||||
- The logic class is `class Component extends DCLogic`. `renderVals()` returns the flat data
|
||||
object. Use `this.props.X` to read a prop. `this.state` + `this.setState({...})` for
|
||||
interactivity (rarely needed — prototypes are mostly static).
|
||||
- To inject a raw element from logic (e.g. an icon inside a loop), use
|
||||
`React.createElement('img', { className:'dgicon', src:'assets/icons/Mail-MD.svg', style:{width:18,height:18,opacity:.5} })`.
|
||||
- **camelCase event/style props** in the template: `onClick`, not `onclick`.
|
||||
|
||||
## 3. PageHeader (DESIGN_RULES §3) — every top-level page opens with this
|
||||
|
||||
```html
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">EYEBROW</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Title</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Lede sentence, Sie-form.</p>
|
||||
</div>
|
||||
<!-- right slot: a count span OR a primary button (see §6) -->
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">147 Dokumente</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
Edit/detail/form pages still open with a PageHeader (eyebrow like `PERSON BEARBEITEN`,
|
||||
`EREIGNIS`, `NEUE PERSON`). Immersive split-pane workbenches (document detail viewer,
|
||||
document/enrich edit) may use a compact top bar instead — follow your page brief.
|
||||
|
||||
## 4. Card (DESIGN_RULES §7)
|
||||
|
||||
Base card, **with the 3px mint top-border archival signature** (most content cards):
|
||||
|
||||
```html
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">…</div>
|
||||
```
|
||||
|
||||
Variants: inline/resume strip uses `border-left:3px solid var(--c-accent)` instead of the top
|
||||
border. Section caption inside a card:
|
||||
|
||||
```html
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Section title</h2>
|
||||
```
|
||||
|
||||
## 5. Segmented control (DESIGN_RULES §6) — filters / view switches / binary type picks
|
||||
|
||||
```html
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line)">
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:10px 16px; cursor:pointer">Alle</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Zweitens</span>
|
||||
<!-- repeat inactive segments; each adds border-left:1px solid var(--c-line) -->
|
||||
</div>
|
||||
```
|
||||
|
||||
Active = `background:var(--c-primary); color:var(--c-primary-fg)`. Inactive =
|
||||
`background:var(--c-surface); color:var(--c-ink-2)`.
|
||||
|
||||
## 6. Buttons (DESIGN_RULES §2 casing law — all UPPERCASE Montserrat 700)
|
||||
|
||||
```html
|
||||
<!-- PRIMARY (navy) -->
|
||||
<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
|
||||
|
||||
<!-- SECONDARY (bordered) -->
|
||||
<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Abbrechen</button>
|
||||
|
||||
<!-- DANGER (destructive — Löschen) -->
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
|
||||
```
|
||||
|
||||
## 7. Form field + label (DESIGN_RULES §1, §2)
|
||||
|
||||
```html
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel</span>
|
||||
<input placeholder="z.B. Brief an Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
```
|
||||
|
||||
Inputs are Tinos 16px (auth inputs 17px). Textareas same. Focus is shown by the runtime's
|
||||
default outline; if you add a visible focus style use a 2px `var(--c-focus-ring)` outline with
|
||||
2px offset — never remove focus without a replacement.
|
||||
|
||||
## 8. MetaLine (DESIGN_RULES §7) — ` · `-separated, optional leading icon
|
||||
|
||||
```html
|
||||
<div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
|
||||
<img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
<span>14. März 1923</span><span>·</span><span>14 Dokumente</span><span>·</span><span>4 Personen</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 9. Status dot (DESIGN_RULES §7) — 7px circle + UPPERCASE label
|
||||
|
||||
```html
|
||||
<span style="display:inline-flex; align-items:center; gap:7px">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:#5a8a6a"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">Transkribiert</span>
|
||||
</span>
|
||||
```
|
||||
|
||||
Status colors: Transkribiert / Veröffentlicht / Bestätigt `#5a8a6a` · In Arbeit `#c17a00` ·
|
||||
Neu / Entwurf / Unbestätigt `#607080`. **Never color alone** — always the label too.
|
||||
|
||||
## 10. Empty state (DESIGN_RULES §7) — dashed, serif heading, German ellipsis
|
||||
|
||||
```html
|
||||
<div style="border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center">
|
||||
<div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Noch keine Geschichten angelegt.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Beginnen Sie mit einem Brief…</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 11. Auth shell (only for `Anmeldung.dc.html` — no ArchiveHeader)
|
||||
|
||||
```html
|
||||
<div style="min-height:100vh; display:flex; flex-direction:column; background:var(--c-canvas)">
|
||||
<header style="background:var(--c-header)">
|
||||
<div style="height:4px; background:#a1dcd8"></div>
|
||||
<div style="max-width:1180px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; color:#fff">
|
||||
<span style="font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase">Familienarchiv</span>
|
||||
</div>
|
||||
</header>
|
||||
<div style="flex:1; display:flex; align-items:center; justify-content:center; padding:40px 16px">
|
||||
<div style="width:100%; max-width:400px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 32px">
|
||||
<h1 style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink); margin:0 0 8px">Anmelden</h1>
|
||||
<!-- labelled 17px inputs (§7), full-width primary button (§6), secondary link row -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Title is **Tinos sentence-case** (NOT an uppercase chrome label). Inputs 17px. Register
|
||||
variant uses `max-width:640px` and sectioned fields.
|
||||
|
||||
## 12. Icons (render as `<img class="dgicon">`, never inline SVG, never emoji)
|
||||
|
||||
```html
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:16px; height:16px; opacity:.4">
|
||||
```
|
||||
|
||||
Available in `assets/icons/`: `Account-MD` · `Arrow-Right-MD` · `Bookmarks-MD` ·
|
||||
`Calendar-Add-MD` · `Chat-MD` · `Check-MD` · `Copy-Item-MD` · `Edit-Content-MD` ·
|
||||
`Filter-MD` · `Folder-MD` · `Globe-MD` · `Library-MD` · `Location-MD` · `Mag-Glass-MD` ·
|
||||
`Mail-MD` · `Refresh-MD` · `Upload-MD` · `View-More-MD`. Use only these; pick the closest
|
||||
match. Icons rest at `opacity:.4` (`.5` on meta lines). They invert automatically in dark
|
||||
mode via the `.dgicon` rule in the skeleton.
|
||||
|
||||
## 13. Hard rules checklist (verify before you finish)
|
||||
|
||||
- [ ] Every color is a `var(--c-*)` token — **zero** raw hex except the `av()` palette and the
|
||||
`#a1dcd8` mint stripe inside the header/auth shell. No `red-*`/`gray-*`/Tailwind.
|
||||
- [ ] Casing law: UI chrome (labels, buttons, nav, captions, tags, status, eyebrow) is
|
||||
**UPPERCASE Montserrat 700 + wide tracking**; headlines & body & names are **Tinos
|
||||
sentence case**. Quotes use `„…"`; snippets are *italic*.
|
||||
- [ ] Cards carry the 3px mint **top** border (or 3px mint **left** for inline strips).
|
||||
- [ ] Touch targets ≥ 44px (`min-height:44px`) on buttons / interactive rows / icon buttons.
|
||||
- [ ] Icon-only buttons would carry an `aria-label` in production — add `title="…"` in the
|
||||
prototype so intent is clear.
|
||||
- [ ] **No** transforms, scale, translate, blur, glassmorphism, gradients, or emoji. Motion is
|
||||
color only.
|
||||
- [ ] German, formal **Sie**. Use realistic family-archive content (Kurrent/Sütterlin letters
|
||||
~1894–1945; people like Herbert Cram, Clara Cram, Marie Cram, Eugenie de Gruyter).
|
||||
- [ ] Renders correctly in light AND dark — because you used tokens, it will. Do not hardcode
|
||||
anything that breaks dark mode.
|
||||
- [ ] Avatars use `this.av(name)` and the size objects (`a26/a28/a40/a48`). Same name → same
|
||||
color (10-color palette).
|
||||
|
||||
## 14. Realistic data
|
||||
|
||||
Pull field names / sections from the **current Svelte page** you are given so the prototype
|
||||
reflects what the app actually shows. Invent plausible German archival content for the values.
|
||||
Aim for enough rows/items to show the layout breathing (e.g. 6–9 grid cards, 4–8 list rows).
|
||||
|
||||
## 15. Person chip (multiselect / token input)
|
||||
|
||||
A selected person inside a form (person multiselect, sender/receiver token input, etc.) is a
|
||||
**square 2px rectangle chip** — `--radius-sm`, matching inputs/cards across the app. The
|
||||
**avatar inside stays round**, but the chip container is **NOT** a round pill. (`radius-full`
|
||||
in §1 is for avatars, dots, and status/count pills — not person chips.) Use this exact
|
||||
shape everywhere a removable person appears:
|
||||
|
||||
```html
|
||||
<span style="display:inline-flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; padding:4px 6px 4px 4px">
|
||||
<span style="{{ p.a26 }}">{{ p.initials }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ p.name }}</span>
|
||||
<a href="#" title="Person entfernen" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
|
||||
</span>
|
||||
```
|
||||
|
||||
The person **name** is content → Tinos serif. The chip itself is `border-radius:2px`. Wrap
|
||||
chip lists in `display:flex; flex-wrap:wrap; gap:8px`. (A read-only correspondent link uses
|
||||
the same square 2px container with no `×`.)
|
||||
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="aktivitaeten" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Verlauf</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Aktivitäten</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Wer zuletzt transkribiert, ergänzt und kuratiert hat — die Hände hinter dem Archiv.</p>
|
||||
</div>
|
||||
<button class="fa-link" style="display:inline-flex; align-items:center; gap:8px; background:var(--c-surface); border:1px solid var(--c-line); padding:10px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer">
|
||||
<img class="dgicon" src="assets/icons/Refresh-MD.svg" style="width:15px; height:15px; opacity:.55"> Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- filter -->
|
||||
<div style="margin-bottom:30px">
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line)">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Alle</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Transkription</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Uploads</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Personen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- feed -->
|
||||
<sc-for list="{{ acts }}" as="g" hint-placeholder-count="3">
|
||||
<div style="margin-bottom:30px">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">{{ g.day }}</div>
|
||||
<sc-for list="{{ g.items }}" as="a" hint-placeholder-count="3">
|
||||
<div style="display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:var(--c-surface); border:1px solid var(--c-line); margin-bottom:10px">
|
||||
<div style="position:relative; flex-shrink:0">
|
||||
<span style="{{ a.a40 }}">{{ a.initials }}</span>
|
||||
<span style="position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; border-radius:999px; background:var(--c-surface); border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center">
|
||||
{{ a.iconEl }}
|
||||
</span>
|
||||
</div>
|
||||
<div style="flex:1; min-width:0; padding-top:2px">
|
||||
<p style="margin:0; font-family:var(--font-sans); font-size:14px; line-height:1.5; color:var(--c-ink-2)">
|
||||
<span style="font-weight:600; color:var(--c-ink)">{{ a.name }}</span> {{ a.verb }} <a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:16px; font-style:italic; color:var(--c-ink); text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:3px; text-decoration-thickness:2px">{{ a.target }}</a>
|
||||
</p>
|
||||
<div style="margin-top:4px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ a.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-for>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name, a40:{ ...base, width:40, height:40, fontSize:14 } };
|
||||
}
|
||||
|
||||
activities(){
|
||||
const mk = (actor, verb, target, time, icon) => ({ ...this.av(actor), verb, target, time, iconName:icon });
|
||||
return [
|
||||
{ day:'Heute', items:[
|
||||
mk('Frieda Rose','hat die Transkription abgeschlossen von','Brief an Frieda aus dem Harz','09:42','Check-MD'),
|
||||
mk('Karl Müller','hat 3 Seiten segmentiert in','Konvolut Rose, Heft III','08:15','Copy-Item-MD'),
|
||||
mk('Anna Bauer','hat einen Kommentar hinterlassen zu','Postkarte aus Wien','07:51','Chat-MD'),
|
||||
]},
|
||||
{ day:'Gestern', items:[
|
||||
mk('Otto Schmidt','hat zwei Dokumente hochgeladen in','Mappe B','17:30','Upload-MD'),
|
||||
mk('Margarete Hoffmann','hat Metadaten ergänzt zu','Umschlag, 1924','14:05','Edit-Content-MD'),
|
||||
mk('Wilhelm Rose','hat die Geschichte erstellt','Wilhelms Lehrjahre','11:20','Bookmarks-MD'),
|
||||
]},
|
||||
{ day:'Diese Woche', items:[
|
||||
mk('Elise Vogt','hat zur Überprüfung freigegeben','Brief aus der Lehrzeit','Di.','Check-MD'),
|
||||
mk('Heinrich Rose','ist dem Archiv beigetreten','','Mo.','Account-MD'),
|
||||
]},
|
||||
];
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
return {
|
||||
acts: this.activities().map(g => ({ ...g, items: g.items.map(a => ({ ...a, iconEl: React.createElement('img', { className:'dgicon', src:'assets/icons/'+a.iconName+'.svg', style:{ width:12, height:12, opacity:.65 } }) })) })),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
|
||||
<!-- ═══ AUTH SHELL (§11) — no ArchiveHeader on auth pages ═══ -->
|
||||
<div style="min-height:100vh; display:flex; flex-direction:column; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
|
||||
<!-- branded auth header: navy bar + 4px mint stripe + wordmark -->
|
||||
<header style="background:var(--c-header)">
|
||||
<div style="height:4px; background:#a1dcd8"></div>
|
||||
<div style="max-width:1180px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; color:#fff">
|
||||
<span style="font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase">Familienarchiv</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="flex:1; display:flex; align-items:center; justify-content:center; padding:48px 16px">
|
||||
<div style="width:100%; max-width:{{ cardMaxWidth }}">
|
||||
|
||||
<!-- ─────────────────────────────────────────────── LOGIN ── -->
|
||||
<sc-if value="{{ isLogin }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 32px">
|
||||
|
||||
<h1 style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink); margin:0 0 6px">Anmelden</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--c-ink-2); margin:0 0 24px">Willkommen zurück im Familienarchiv.</p>
|
||||
|
||||
<!-- token-driven error banner (var(--c-danger)) -->
|
||||
<div role="alert" style="display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; border:1px solid var(--c-danger); border-left:3px solid var(--c-danger); background:var(--c-accent-bg); border-radius:2px; padding:11px 14px">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:var(--c-danger); margin-top:6px; flex-shrink:0"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:13px; color:var(--c-danger)">E-Mail oder Passwort ist nicht korrekt.</span>
|
||||
</div>
|
||||
|
||||
<!-- rate-limit / warning note (tinted with accent-bg) -->
|
||||
<div role="status" style="display:flex; align-items:flex-start; gap:10px; margin-bottom:22px; border:1px solid var(--c-line); border-left:3px solid var(--c-warning); background:var(--c-accent-bg); border-radius:2px; padding:11px 14px">
|
||||
<img class="dgicon" src="assets/icons/Refresh-MD.svg" style="width:15px; height:15px; opacity:.5; margin-top:1px; flex-shrink:0">
|
||||
<span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-2)">Zu viele Versuche. Bitte warten Sie eine Minute, bevor Sie es erneut versuchen.</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:18px">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">E-Mail</span>
|
||||
<input type="email" autocomplete="email" placeholder="vorname@familie.de" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:24px">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Passwort</span>
|
||||
<input type="password" autocomplete="current-password" placeholder="••••••••" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="fa-link" style="width:100%; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:12px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Anmelden</button>
|
||||
|
||||
<!-- secondary link row -->
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--c-line-2)">
|
||||
<a href="Anmeldung.dc.html" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">Passwort vergessen?</a>
|
||||
<a href="Anmeldung.dc.html" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Konto erstellen</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ───────────────────────────────────────── REGISTRIEREN ── -->
|
||||
<sc-if value="{{ isRegister }}" hint-placeholder-val="{{ false }}">
|
||||
<div>
|
||||
<!-- hero: Montserrat eyebrow + Tinos ~38px title -->
|
||||
<div style="text-align:center; margin-bottom:28px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px">Einladung angenommen</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:38px; line-height:1.15; color:var(--c-ink); margin:0">Konto erstellen</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:12px auto 0; max-width:440px">Legen Sie Ihren Zugang an, um Briefe zu lesen, zu transkribieren und mitzuschreiben.</p>
|
||||
</div>
|
||||
|
||||
<div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 36px">
|
||||
|
||||
<!-- Section: Über dich -->
|
||||
<section style="margin-bottom:30px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Über Sie</h2>
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:18px">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname</span>
|
||||
<input type="text" autocomplete="given-name" placeholder="z.B. Marie" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname</span>
|
||||
<input type="text" autocomplete="family-name" placeholder="z.B. Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section: Konto -->
|
||||
<section style="margin-bottom:30px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Konto</h2>
|
||||
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">E-Mail</span>
|
||||
<input type="email" autocomplete="email" placeholder="marie@familie.de" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<!-- Passwort with show/hide affordance -->
|
||||
<label style="display:block; margin-bottom:8px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Passwort</span>
|
||||
<div style="position:relative">
|
||||
<input type="password" autocomplete="new-password" placeholder="Mindestens 8 Zeichen" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 64px 12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<button type="button" title="Passwort anzeigen" class="fa-link" style="position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; min-height:36px; padding:0 12px; background:transparent; border:none; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); cursor:pointer">Zeigen</button>
|
||||
</div>
|
||||
</label>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 18px">Mindestens 8 Zeichen.</p>
|
||||
|
||||
<!-- Passwort bestätigen with show/hide affordance -->
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Passwort bestätigen</span>
|
||||
<div style="position:relative">
|
||||
<input type="password" autocomplete="new-password" placeholder="Passwort wiederholen" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 64px 12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<button type="button" title="Passwort anzeigen" class="fa-link" style="position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; min-height:36px; padding:0 12px; background:transparent; border:none; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); cursor:pointer">Zeigen</button>
|
||||
</div>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<!-- Section: Benachrichtigungen — checkbox card -->
|
||||
<section style="margin-bottom:28px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 14px">Benachrichtigungen</h2>
|
||||
<label style="display:flex; align-items:flex-start; gap:14px; cursor:pointer; border:1px solid var(--c-primary); background:var(--c-accent-bg); border-radius:2px; padding:16px">
|
||||
<span style="margin-top:1px; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex-shrink:0; border:1px solid var(--c-primary); background:var(--c-primary); border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Check-MD.svg" style="width:13px; height:13px; filter:brightness(0) invert(1)">
|
||||
</span>
|
||||
<span style="min-width:0">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:14px; font-weight:700; color:var(--c-ink)">Bei Erwähnungen benachrichtigen</span>
|
||||
<span style="display:block; font-family:var(--font-serif); font-size:15px; line-height:1.5; color:var(--c-ink-2); margin-top:3px">Erhalten Sie eine E-Mail, wenn jemand Sie in einem Kommentar oder einer Transkription erwähnt.</span>
|
||||
</span>
|
||||
<input type="checkbox" checked style="position:absolute; opacity:0; width:0; height:0">
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<button class="fa-link" style="width:100%; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:12px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Registrieren</button>
|
||||
|
||||
<p style="text-align:center; font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3); margin:18px 0 0">
|
||||
Schon ein Konto?
|
||||
<a href="Anmeldung.dc.html" class="fa-link" style="font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Anmelden</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ───────────────────────────────── PASSWORT VERGESSEN ── -->
|
||||
<sc-if value="{{ isForgot }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 32px">
|
||||
|
||||
<h1 style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink); margin:0 0 8px">Passwort zurücksetzen</h1>
|
||||
<p style="font-family:var(--font-serif); font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0 0 24px">Geben Sie Ihre E-Mail-Adresse ein. Wir senden Ihnen einen Link, mit dem Sie ein neues Passwort vergeben können.</p>
|
||||
|
||||
<!-- success banner example (token-driven, accent-bg tint) -->
|
||||
<div role="status" style="display:flex; align-items:flex-start; gap:10px; margin-bottom:22px; border:1px solid var(--c-line); border-left:3px solid var(--c-accent); background:var(--c-accent-bg); border-radius:2px; padding:12px 14px">
|
||||
<img class="dgicon" src="assets/icons/Check-MD.svg" style="width:15px; height:15px; opacity:.5; margin-top:1px; flex-shrink:0">
|
||||
<span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-2)">Falls ein Konto zu dieser Adresse besteht, ist der Link unterwegs. Prüfen Sie Ihr Postfach.</span>
|
||||
</div>
|
||||
|
||||
<label style="display:block; margin-bottom:24px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">E-Mail</span>
|
||||
<input type="email" autocomplete="email" placeholder="vorname@familie.de" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<button class="fa-link" style="width:100%; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:12px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Link senden</button>
|
||||
|
||||
<div style="text-align:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--c-line-2)">
|
||||
<a href="Anmeldung.dc.html" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">Zurück zur Anmeldung</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ────────────────────────────── PASSWORT ZURÜCKSETZEN ── -->
|
||||
<sc-if value="{{ isReset }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:36px 32px">
|
||||
|
||||
<h1 style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink); margin:0 0 8px">Neues Passwort</h1>
|
||||
<p style="font-family:var(--font-serif); font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0 0 24px">Vergeben Sie ein neues Passwort für Ihr Konto. Danach werden Sie zur Anmeldung weitergeleitet.</p>
|
||||
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Neues Passwort</span>
|
||||
<input type="password" autocomplete="new-password" placeholder="Mindestens 8 Zeichen" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<label style="display:block; margin-bottom:24px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Passwort bestätigen</span>
|
||||
<input type="password" autocomplete="new-password" placeholder="Passwort wiederholen" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:12px 14px; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<button class="fa-link" style="width:100%; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:12px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Passwort speichern</button>
|
||||
|
||||
<div style="text-align:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--c-line-2)">
|
||||
<a href="Anmeldung.dc.html" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">Zurück zur Anmeldung</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- quiet footer wordmark -->
|
||||
<div style="padding:24px 16px; text-align:center">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--c-ink-3)">Familienarchiv</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1180,"height":1100},"variant":{"editor":"enum","options":["login","registrieren","passwort-vergessen","passwort-zuruecksetzen"],"default":"login","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
renderVals(){
|
||||
const variant = this.props.variant || 'login';
|
||||
const isLogin = variant === 'login';
|
||||
const isRegister = variant === 'registrieren';
|
||||
const isForgot = variant === 'passwort-vergessen';
|
||||
const isReset = variant === 'passwort-zuruecksetzen';
|
||||
|
||||
return {
|
||||
isLogin, isRegister, isForgot, isReset,
|
||||
cardMaxWidth: isRegister ? '640px' : '400px',
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
|
||||
|
||||
<!-- ════════════ VARIANT: LISTE (start screen) ════════════ -->
|
||||
<sc-if value="{{ isListe }}" hint-placeholder-val="{{ true }}">
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- PageHeader (§3) -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Aufgabe</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Anreicherung</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Ergänzen Sie fehlende Angaben Stück für Stück — wir führen Sie durch jeden Brief.</p>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:flex-end; gap:10px">
|
||||
<button class="fa-link" style="display:inline-flex; align-items:center; gap:8px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px"><img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:15px; height:15px; opacity:.7; filter:invert(1)">Starten</button>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ count }} Dokumente offen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: documents needing metadata (§4 — 3px mint top border) -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 8px">Benötigt Metadaten</h2>
|
||||
|
||||
<sc-for list="{{ docs }}" as="d" hint-placeholder-count="6">
|
||||
<div style="display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--c-line-2); padding:13px 0; min-height:44px">
|
||||
<label style="display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; cursor:pointer; flex-shrink:0">
|
||||
<input type="checkbox" style="width:18px; height:18px; accent-color:var(--c-primary); cursor:pointer">
|
||||
</label>
|
||||
<a href="Anreicherung.dc.html" class="fa-link" style="flex:1; min-width:0; font-family:var(--font-serif); font-size:17px; color:var(--c-ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ d.title }}</a>
|
||||
<span style="display:inline-flex; align-items:center; gap:7px; width:128px; flex-shrink:0">
|
||||
<span style="width:7px; height:7px; border-radius:999px; flex-shrink:0; background:{{ d.dotColor }}"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ d.status }}</span>
|
||||
</span>
|
||||
<div style="display:flex; align-items:center; gap:8px; width:160px; flex-shrink:0; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
|
||||
<img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
<span>{{ d.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
|
||||
<p style="margin:16px 0 0; font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">{{ count }} Dokumente warten auf Pflichtangaben.</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty state (§10) — shown when nothing left to enrich -->
|
||||
<sc-if value="{{ isEmpty }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="margin-top:18px; border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center">
|
||||
<div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Alles angereichert — nichts zu tun.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Jeder Brief trägt Titel, Datum und Absender…</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
</main>
|
||||
</sc-if>
|
||||
|
||||
<!-- ════════════ VARIANT: SCHRITT (guided editor) ════════════ -->
|
||||
<sc-if value="{{ isSchritt }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="display:flex; flex-direction:column">
|
||||
|
||||
<!-- compact workflow top bar -->
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--c-line); background:var(--c-surface); padding:12px 24px">
|
||||
<a href="Anreicherung.dc.html" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; border:1px solid var(--c-line); background:var(--c-surface); padding:9px 14px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; border-radius:2px">← Zurück</a>
|
||||
<p style="flex:1; min-width:0; text-align:center; font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--c-ink); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ doc.title }}</p>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); flex-shrink:0">Schritt {{ doc.step }} von {{ doc.total }}</span>
|
||||
</div>
|
||||
|
||||
<!-- EnrichProgress block -->
|
||||
<div style="display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--c-line); background:var(--c-surface); padding:10px 24px">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap">Pflichtfelder {{ doc.filled }} / {{ doc.required }}</span>
|
||||
<div style="flex:1; height:4px; border-radius:999px; background:var(--c-line); overflow:hidden">
|
||||
<div style="height:100%; border-radius:999px; background:var(--c-primary); width:{{ doc.progressPct }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- split pane -->
|
||||
<div style="display:grid; grid-template-columns:6fr 4fr; align-items:stretch; min-height:calc(100vh - 68px - 110px)">
|
||||
|
||||
<!-- LEFT: PDF preview -->
|
||||
<div style="border-right:1px solid var(--c-line); background:var(--c-pdf-bg); display:flex; flex-direction:column">
|
||||
<div style="display:flex; align-items:center; border-bottom:1px solid var(--c-line); background:var(--c-surface); padding:8px 16px">
|
||||
<label class="fa-link" style="margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); cursor:pointer"><img class="dgicon" src="assets/icons/Refresh-MD.svg" style="width:14px; height:14px; opacity:.5">Datei ersetzen</label>
|
||||
</div>
|
||||
<div style="flex:1; display:flex; align-items:flex-start; justify-content:center; padding:28px 16px; overflow:auto">
|
||||
<div style="width:100%; max-width:520px; aspect-ratio:1 / 1.414; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-md); border-radius:2px; padding:40px 38px; display:flex; flex-direction:column; gap:14px">
|
||||
<div style="font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--c-ink-3); text-align:right">Wien, im August 1924</div>
|
||||
<div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink-2)">Meine liebe Clara,</div>
|
||||
<div style="font-family:var(--font-serif); font-size:15px; line-height:1.8; color:var(--c-ink-3)">die Reise verlief gut, doch der Zug nach Mariahilf hatte Verspätung. Onkel Walter lässt herzlich grüßen und fragt nach den Kindern.</div>
|
||||
<div style="font-family:var(--font-serif); font-size:15px; line-height:1.8; color:var(--c-ink-3)">Die Tage hier sind warm; ich denke oft an unseren Garten und an Euch alle daheim.</div>
|
||||
<div style="margin-top:auto; font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--c-ink-3); text-align:right">In Liebe, Herbert</div>
|
||||
<div style="display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Seite 1 von 1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: metadata form -->
|
||||
<div style="display:flex; flex-direction:column; background:var(--c-canvas)">
|
||||
<div style="flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:18px">
|
||||
|
||||
<!-- Wer & Wann card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Wer & Wann</h2>
|
||||
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Datum *</span>
|
||||
<input value="02.08.1924" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
|
||||
<span>Genauigkeit:</span><span style="color:var(--c-ink-2)">Tag</span><span>·</span><span>Monat</span><span>·</span><span>Jahr</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Absender *</span>
|
||||
<div style="position:relative">
|
||||
<input value="Herbert Cram" placeholder="Person suchen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Empfänger</span>
|
||||
<div style="position:relative">
|
||||
<input value="Clara Cram" placeholder="Personen hinzufügen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Ort</span>
|
||||
<div style="position:relative">
|
||||
<input value="" placeholder="z.B. Wien" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Location-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Beschreibung card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Beschreibung</h2>
|
||||
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel *</span>
|
||||
<input value="Postkarte aus Wien" placeholder="z.B. Brief an Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<div style="display:flex; align-items:center; gap:10px; margin:0 0 18px">
|
||||
<div style="flex:1; height:1px; background:var(--c-line)"></div>
|
||||
<span style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3)">Optional</span>
|
||||
<div style="flex:1; height:1px; background:var(--c-line)"></div>
|
||||
</div>
|
||||
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Schlagworte</span>
|
||||
<input value="Feldpost, Reise, Familie" placeholder="Schlagworte hinzufügen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Inhalt</span>
|
||||
<textarea rows="4" placeholder="Kurze Zusammenfassung des Inhalts…" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px"></textarea>
|
||||
</label>
|
||||
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:18px">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Karton</span>
|
||||
<input value="Mappe B" placeholder="z.B. Mappe B" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Mappe</span>
|
||||
<input value="" placeholder="z.B. Heft III" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- action bar -->
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--c-line); background:var(--c-surface); padding:14px 20px">
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">Überspringen</a>
|
||||
<div style="display:flex; align-items:center; gap:12px">
|
||||
<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
|
||||
<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern & geprüft</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ════════════ VARIANT: FERTIG (done) ════════════ -->
|
||||
<sc-if value="{{ isFertig }}" hint-placeholder-val="{{ false }}">
|
||||
<main style="max-width:1180px; margin:0 auto; padding:80px 32px; display:flex; justify-content:center">
|
||||
<div style="width:100%; max-width:520px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:48px 40px; text-align:center">
|
||||
<div style="width:56px; height:56px; margin:0 auto 22px; border-radius:999px; background:var(--c-accent-bg); display:flex; align-items:center; justify-content:center">
|
||||
<img class="dgicon" src="assets/icons/Check-MD.svg" style="width:28px; height:28px; opacity:.7">
|
||||
</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:32px; line-height:1.15; color:var(--c-ink); margin:0">Geschafft!</h1>
|
||||
<p style="font-family:var(--font-serif); font-size:17px; line-height:1.6; color:var(--c-ink-2); margin:14px 0 0">Alle Briefe dieser Sitzung sind angereichert. Vielen Dank — Ihre Sorgfalt hält das Archiv beieinander.</p>
|
||||
<div style="display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:30px">
|
||||
<a href="Dokumente.dc.html" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:13px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; text-decoration:none; border-radius:2px">Zur Übersicht</a>
|
||||
<a href="Anreicherung.dc.html" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:13px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; text-decoration:none; border-radius:2px">Zur Liste</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</sc-if>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1180,"height":1100},"variant":{"editor":"enum","options":["liste","schritt","fertig"],"default":"schritt","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
listDocs(){
|
||||
const sc = { 'Neu':'#607080', 'In Arbeit':'#c17a00', 'Entwurf':'#607080' };
|
||||
const raw = [
|
||||
{ title:'Postkarte aus Wien', status:'In Arbeit', date:'2. August 1924' },
|
||||
{ title:'Brief ohne Titel (Mappe B)', status:'Neu', date:'1924' },
|
||||
{ title:'Umschlag — Absender unbekannt', status:'Neu', date:'November 1925' },
|
||||
{ title:'Geschäftsbrief betr. Grundstück Mariahilf', status:'In Arbeit', date:'19. November 1925' },
|
||||
{ title:'Glückwunsch zum 60. Geburtstag', status:'Entwurf', date:'22. Mai 1928' },
|
||||
{ title:'Feldpostkarte, Datum unleserlich', status:'Neu', date:'ohne Datum' },
|
||||
];
|
||||
return raw.map(d => ({ ...d, dotColor: sc[d.status] || '#607080' }));
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
const variant = this.props.variant || 'schritt';
|
||||
const docs = this.listDocs();
|
||||
|
||||
return {
|
||||
isListe: variant === 'liste',
|
||||
isSchritt: variant === 'schritt',
|
||||
isFertig: variant === 'fertig',
|
||||
|
||||
// liste
|
||||
docs,
|
||||
count: docs.length,
|
||||
isEmpty: false,
|
||||
|
||||
// schritt
|
||||
doc: {
|
||||
title: 'Postkarte aus Wien',
|
||||
step: 3,
|
||||
total: 12,
|
||||
filled: 2,
|
||||
required: 3,
|
||||
progressPct: '66.7%',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
</helmet>
|
||||
<header style="background:var(--c-header); position:sticky; top:0; z-index:50">
|
||||
<div style="height:4px; background:#a1dcd8"></div>
|
||||
<div style="max-width:1180px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; color:#fff">
|
||||
<a href="Dokumente.dc.html" style="font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-right:28px; white-space:nowrap; color:#fff; text-decoration:none">Familienarchiv</a>
|
||||
<nav style="display:flex; gap:2px">
|
||||
<a class="fa-link" href="Dokumente.dc.html" style="{{ nDok }}">Dokumente</a>
|
||||
<a class="fa-link" href="Personen.dc.html" style="{{ nPers }}">Personen</a>
|
||||
<a class="fa-link" href="Geschichten.dc.html" style="{{ nGesch }}">Geschichten</a>
|
||||
<a class="fa-link" href="Zeitstrahl.dc.html" style="{{ nZeit }}">Zeitstrahl</a>
|
||||
<a class="fa-link" href="Aktivitaeten.dc.html" style="{{ nAkt }}">Aktivitäten</a>
|
||||
<a class="fa-link" href="Stammbaum.dc.html" style="{{ nStamm }}">Stammbaum</a>
|
||||
<a class="fa-link" href="Themen.dc.html" style="{{ nThemen }}">Themen</a>
|
||||
<a class="fa-link" href="Regeln.dc.html" style="{{ nReg }}">Regeln</a>
|
||||
</nav>
|
||||
<div style="margin-left:auto; display:flex; gap:16px; align-items:center">
|
||||
<div style="display:flex; border:1px solid rgba(255,255,255,.25)">
|
||||
<button class="fa-link" onClick="{{ setLight }}" style="{{ thLight }}">Hell</button>
|
||||
<button class="fa-link" onClick="{{ setDark }}" style="{{ thDark }}">Dunkel</button>
|
||||
</div>
|
||||
<div style="width:32px; height:32px; border-radius:999px; background:#fff; color:#012851; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:11px; font-weight:700">MR</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1180,"height":68},"active":{"editor":"enum","options":["dokumente","personen","geschichten","zeitstrahl","aktivitaeten","stammbaum","themen","regeln"],"default":"dokumente","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
state = { theme: null };
|
||||
stored(){ try { return localStorage.getItem('fa-theme'); } catch(e){ return null; } }
|
||||
get theme(){ return this.state.theme ?? this.stored() ?? 'light'; }
|
||||
apply(){ try { document.documentElement.dataset.theme = this.theme === 'dark' ? 'dark' : ''; } catch(e){} }
|
||||
componentDidMount(){ this.apply(); }
|
||||
componentDidUpdate(){ this.apply(); }
|
||||
set(t){ try { localStorage.setItem('fa-theme', t); } catch(e){} this.setState({ theme: t }); }
|
||||
|
||||
renderVals(){
|
||||
const active = this.props.active || 'dokumente';
|
||||
const theme = this.theme;
|
||||
const navBase = { color:'rgba(255,255,255,.6)', padding:'0 9px', fontFamily:'var(--font-sans)', fontSize:11, fontWeight:700, letterSpacing:'.07em', textTransform:'uppercase', textDecoration:'none', lineHeight:'44px', borderBottom:'2px solid transparent', marginTop:'10px', whiteSpace:'nowrap' };
|
||||
const navOn = { ...navBase, color:'#fff', borderBottom:'2px solid #a1dcd8' };
|
||||
const nav = (k) => active===k ? navOn : navBase;
|
||||
const thBase = { fontFamily:'var(--font-sans)', fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', padding:'5px 11px', cursor:'pointer', border:'none', background:'transparent', color:'rgba(255,255,255,.6)' };
|
||||
const thOn = { ...thBase, background:'#a1dcd8', color:'#012851' };
|
||||
return {
|
||||
nDok:nav('dokumente'), nPers:nav('personen'), nGesch:nav('geschichten'), nZeit:nav('zeitstrahl'), nAkt:nav('aktivitaeten'), nStamm:nav('stammbaum'), nThemen:nav('themen'), nReg:nav('regeln'),
|
||||
thLight: theme==='dark' ? thBase : thOn, thDark: theme==='dark' ? thOn : thBase,
|
||||
setLight: () => this.set('light'), setDark: () => this.set('dark'),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
|
||||
|
||||
<!-- ===== Compact top bar (immersive workbench — replaces full PageHeader) ===== -->
|
||||
<div style="border-bottom:1px solid var(--c-line); background:var(--c-surface)">
|
||||
<div style="max-width:1180px; margin:0 auto; padding:0 32px; height:54px; display:flex; align-items:center; gap:18px">
|
||||
<!-- BackButton-style chip -->
|
||||
<a href="{{ backHref }}" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">
|
||||
<span style="font-size:15px; line-height:1">←</span>{{ backLabel }}
|
||||
</a>
|
||||
<span style="width:1px; height:22px; background:var(--c-line)"></span>
|
||||
<!-- Truncated Tinos title -->
|
||||
<span style="flex:1; min-width:0; font-family:var(--font-serif); font-size:18px; font-weight:700; color:var(--c-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ workbenchTitle }}</span>
|
||||
</div>
|
||||
<!-- Required-fields progress strip -->
|
||||
<div style="max-width:1180px; margin:0 auto; padding:0 32px 12px; display:flex; align-items:center; gap:14px">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap">Erforderliche Felder {{ reqFilled }} / {{ reqTotal }}</span>
|
||||
<div style="flex:1; height:3px; border-radius:999px; background:var(--c-line); overflow:hidden">
|
||||
<div style="height:100%; border-radius:999px; background:var(--c-primary); width:{{ reqPct }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Split pane ===== -->
|
||||
<div style="max-width:1180px; margin:0 auto; padding:0 32px">
|
||||
<div style="display:grid; grid-template-columns:46% 1fr; gap:0; border:1px solid var(--c-line); border-top:none">
|
||||
|
||||
<!-- LEFT: PDF preview OR empty dropzone (variant=neu) -->
|
||||
<div style="background:var(--c-pdf-bg); border-right:1px solid var(--c-line); display:flex; flex-direction:column; min-height:680px">
|
||||
|
||||
<!-- variant: bearbeiten | sammel — PDF preview with "Datei ersetzen" -->
|
||||
<sc-if value="{{ showPreview }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="display:flex; flex-direction:column; height:100%">
|
||||
<!-- Toolbar -->
|
||||
<div style="display:flex; align-items:center; border-bottom:1px solid var(--c-line); background:var(--c-pdf-ctrl); padding:8px 14px">
|
||||
<span style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-pdf-text); opacity:.7">{{ pdfFilename }}</span>
|
||||
<label class="fa-link" style="margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); padding:9px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Refresh-MD.svg" style="width:14px; height:14px; opacity:.5">Datei ersetzen
|
||||
</label>
|
||||
</div>
|
||||
<!-- Page surface -->
|
||||
<div style="flex:1; display:flex; align-items:flex-start; justify-content:center; padding:28px; overflow:hidden">
|
||||
<div style="width:340px; max-width:100%; aspect-ratio:1 / 1.41; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-md); padding:34px 30px; display:flex; flex-direction:column; gap:11px">
|
||||
<div style="font-family:var(--font-serif); font-size:13px; font-style:italic; color:var(--c-pdf-text); opacity:.85">Im Felde, den 12. März 1916</div>
|
||||
<div style="font-family:var(--font-serif); font-size:14px; color:var(--c-pdf-text); line-height:1.7; opacity:.9">Meine innig geliebte Clara, nun sind es bald zwei Jahre, dass ich Dich nicht mehr in den Armen halten durfte …</div>
|
||||
<div style="height:1px; background:var(--c-line); margin:4px 0"></div>
|
||||
<div style="font-family:var(--font-serif); font-size:13px; color:var(--c-pdf-text); line-height:1.7; opacity:.55">… (Kurrentschrift, Seite 1 von 4) …</div>
|
||||
<div style="font-family:var(--font-serif); font-size:13px; color:var(--c-pdf-text); line-height:1.7; opacity:.55">Dein Dich ewig liebender Herbert</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- variant: neu — empty dashed dropzone -->
|
||||
<sc-if value="{{ showDropzone }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="flex:1; display:flex; align-items:center; justify-content:center; padding:32px">
|
||||
<label class="fa-link" style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; max-width:420px; min-height:300px; border:2px dashed var(--c-accent); border-radius:2px; background:var(--c-accent-bg); padding:40px 28px; text-align:center; cursor:pointer">
|
||||
<img class="dgicon" src="assets/icons/Upload-MD.svg" style="width:34px; height:34px; opacity:.5">
|
||||
<span style="font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-2)">Dateien hier ablegen oder klicken</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">PDF, JPG, PNG, TIFF bis 50 MB</span>
|
||||
</label>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: scrollable form column -->
|
||||
<div style="background:var(--c-surface); display:flex; flex-direction:column; min-height:680px">
|
||||
<div style="flex:1; padding:24px; display:flex; flex-direction:column; gap:18px">
|
||||
|
||||
<!-- variant: sammel — shared-metadata note -->
|
||||
<sc-if value="{{ isBulk }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="background:var(--c-accent-bg); border:1px solid var(--c-line); border-left:3px solid var(--c-accent); padding:14px 16px; border-radius:2px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); margin-bottom:4px">Geteilte Metadaten</div>
|
||||
<p style="margin:0; font-family:var(--font-serif); font-size:15px; font-style:italic; color:var(--c-ink-2)">Felder werden ergänzt, nicht ersetzt.</p>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- CARD: Wer & Wann -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 18px">Wer & Wann</h2>
|
||||
|
||||
<!-- Absender (typeahead, required) -->
|
||||
<label style="display:block; margin-bottom:16px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Absender *</span>
|
||||
<div style="position:relative">
|
||||
<input value="{{ f.sender }}" placeholder="Person suchen … z.B. Herbert Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<!-- Empfänger -->
|
||||
<div style="margin-bottom:16px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Empfänger {{ additiveSuffix }}</span>
|
||||
<div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid var(--c-line); background:var(--c-surface); padding:8px 10px; border-radius:2px; min-height:44px">
|
||||
<sc-for list="{{ f.receivers }}" as="r" hint-placeholder-count="2">
|
||||
<span style="display:inline-flex; align-items:center; gap:7px; background:var(--c-muted); border:1px solid var(--c-line); padding:4px 10px 4px 5px; border-radius:2px">
|
||||
<span style="{{ r.a26 }}">{{ r.initials }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ r.name }}</span>
|
||||
</span>
|
||||
</sc-for>
|
||||
<input placeholder="{{ receiverPlaceholder }}" style="flex:1; min-width:120px; border:none; background:transparent; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datum + Präzision -->
|
||||
<div style="display:grid; grid-template-columns:1fr 150px; gap:12px; margin-bottom:16px">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Datum *</span>
|
||||
<input value="{{ f.date }}" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Genauigkeit</span>
|
||||
<select style="width:100%; appearance:none; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px; cursor:pointer; min-height:44px">
|
||||
<option selected>Tag</option><option>Monat</option><option>Jahr</option><option>Unbekannt</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Ort -->
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Ort</span>
|
||||
<div style="position:relative">
|
||||
<input value="{{ f.location }}" placeholder="z.B. Im Felde, Galizien" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Location-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- CARD: Beschreibung -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 18px">Beschreibung</h2>
|
||||
|
||||
<!-- Titel -->
|
||||
<label style="display:block; margin-bottom:16px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel *</span>
|
||||
<input value="{{ f.title }}" placeholder="z.B. Feldpostbrief an Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<!-- Notiz / Inhalt -->
|
||||
<label style="display:block; margin-bottom:16px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Notiz</span>
|
||||
<textarea rows="4" placeholder="Kurze Beschreibung oder erste Notizen zum Inhalt …" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px; resize:vertical">{{ f.note }}</textarea>
|
||||
</label>
|
||||
|
||||
<!-- Tags / Schlagworte -->
|
||||
<div>
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Schlagworte {{ additiveSuffix }}</span>
|
||||
<div style="display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid var(--c-line); background:var(--c-surface); padding:8px 10px; border-radius:2px; min-height:44px">
|
||||
<sc-for list="{{ f.tags }}" as="t" hint-placeholder-count="3">
|
||||
<span style="display:inline-flex; align-items:center; gap:6px; background:var(--c-muted); border:1px solid var(--c-line); padding:4px 10px; border-radius:4px">
|
||||
<span style="width:8px; height:8px; border-radius:999px; background:{{ t.dot }}"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink-2)">{{ t.label }}</span>
|
||||
</span>
|
||||
</sc-for>
|
||||
<input placeholder="Schlagwort hinzufügen …" style="flex:1; min-width:120px; border:none; background:transparent; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Sticky action bar -->
|
||||
<div style="position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--c-line); background:var(--c-surface); padding:14px 24px">
|
||||
<sc-if value="{{ isEdit }}" hint-placeholder-val="{{ true }}">
|
||||
<a href="#" class="fa-link" title="Dokument löschen" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
|
||||
</sc-if>
|
||||
<div style="display:flex; align-items:center; gap:12px; margin-left:auto">
|
||||
<a href="{{ backHref }}" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 18px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px; text-decoration:none">Abbrechen</a>
|
||||
<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 18px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Zur Überprüfung</button>
|
||||
<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 22px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:48px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1180,"height":840},"variant":{"editor":"enum","options":["bearbeiten","neu","sammel"],"default":"bearbeiten","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
rcv(name){ const a = this.av(name); return { name, initials:a.initials, a26:a.a26 }; }
|
||||
|
||||
renderVals(){
|
||||
const variant = this.props.variant || 'bearbeiten';
|
||||
const isEdit = variant === 'bearbeiten';
|
||||
const isNew = variant === 'neu';
|
||||
const isBulk = variant === 'sammel';
|
||||
|
||||
const tagPal = {
|
||||
sage:'#5a8a6a', sienna:'#a0522d', amber:'#c17a00', slate:'#607080',
|
||||
violet:'#7a4f9a', cobalt:'#3060b0',
|
||||
};
|
||||
|
||||
const editing = {
|
||||
sender:'Herbert Cram',
|
||||
receivers:[ this.rcv('Clara Cram') ],
|
||||
date:'12.03.1916',
|
||||
location:'Im Felde, Galizien',
|
||||
title:'Feldpostbrief an Clara — „nun sind es bald zwei Jahre“',
|
||||
note:'Vierseitiger Feldpostbrief in Kurrentschrift. Herbert schreibt aus dem Stellungskrieg an seine Frau Clara. Teil des Konvoluts 1914–1918.',
|
||||
tags:[
|
||||
{ label:'Feldpost', dot:tagPal.sienna },
|
||||
{ label:'1. Weltkrieg', dot:tagPal.slate },
|
||||
{ label:'Galizien', dot:tagPal.sage },
|
||||
],
|
||||
};
|
||||
const blank = {
|
||||
sender:'', receivers:[], date:'', location:'', title:'', note:'', tags:[],
|
||||
};
|
||||
const bulk = {
|
||||
sender:'', receivers:[], date:'', location:'', title:'', note:'',
|
||||
tags:[ { label:'Feldpost', dot:tagPal.sienna } ],
|
||||
};
|
||||
const f = isEdit ? editing : (isBulk ? bulk : blank);
|
||||
|
||||
// Required progress: bearbeiten=alle 3, neu=0, sammel=2 (Absender+Datum geteilt, Titel pro Datei).
|
||||
const reqFilled = isEdit ? 3 : (isBulk ? 2 : 0);
|
||||
const reqTotal = 3;
|
||||
|
||||
return {
|
||||
isEdit, isNew, isBulk,
|
||||
showPreview: isEdit || isBulk,
|
||||
showDropzone: isNew,
|
||||
backHref: isEdit ? 'Dokumente.dc.html' : 'Dokumente-Liste.dc.html',
|
||||
backLabel: 'Zurück',
|
||||
workbenchTitle: isBulk
|
||||
? '3 Dokumente · Gemeinsame Metadaten'
|
||||
: (isNew ? 'Neues Dokument' : 'Feldpostbrief an Clara — „nun sind es bald zwei Jahre“'),
|
||||
pdfFilename: isBulk ? 'feldpost_1916_03_12.pdf' : 'cram_feldpost_1916.pdf',
|
||||
reqFilled, reqTotal,
|
||||
reqPct: Math.round((reqFilled / reqTotal) * 100),
|
||||
additiveSuffix: isBulk ? '· wird ergänzt' : '',
|
||||
receiverPlaceholder: f.receivers.length ? 'Weitere hinzufügen …' : 'Person suchen …',
|
||||
f,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
|
||||
|
||||
<!-- ── Compact top bar (immersive workbench — no big PageHeader) ── -->
|
||||
<div style="position:relative; z-index:10; border-bottom:1px solid var(--c-line); background:var(--c-surface); box-shadow:var(--shadow-sm)">
|
||||
<div style="display:flex; align-items:center; gap:0; padding-right:16px; min-height:76px">
|
||||
|
||||
<!-- Back chip -->
|
||||
<a href="Dokumente.dc.html" class="fa-link" title="Zurück zur Übersicht" style="display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 14px 0 16px; margin-right:6px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">← Zurück</a>
|
||||
|
||||
<div style="width:1px; height:24px; background:var(--c-line); flex-shrink:0; margin-right:14px"></div>
|
||||
|
||||
<!-- Title block with 3px MINT left accent bar -->
|
||||
<div style="border-left:3px solid var(--c-accent); padding-left:14px; min-width:0; flex:1">
|
||||
<div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:3px">{{ signatur }} · Feldpost</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:21px; line-height:1.2; color:var(--c-ink); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ title }}</h1>
|
||||
</div>
|
||||
|
||||
<!-- Overlapping sender/receiver avatar stack (a26) -->
|
||||
<div style="display:flex; align-items:center; padding-left:12px; margin-right:14px; flex-shrink:0">
|
||||
<sc-for list="{{ stack }}" as="p" hint-placeholder-count="2">
|
||||
<span title="{{ p.name }}" style="{{ p.a26 }}">{{ p.initials }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<!-- Status dot + UPPERCASE label (§9) -->
|
||||
<span style="display:inline-flex; align-items:center; gap:7px; flex-shrink:0; margin-right:14px">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:{{ statusColor }}"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ status }}</span>
|
||||
</span>
|
||||
|
||||
<div style="width:1px; height:24px; background:var(--c-line); flex-shrink:0; margin-right:14px"></div>
|
||||
|
||||
<!-- Details toggle (secondary, active state) -->
|
||||
<button class="fa-link" aria-expanded="true" style="display:inline-flex; align-items:center; gap:7px; min-height:44px; background:var(--c-primary); color:var(--c-primary-fg); border:1px solid var(--c-primary); padding:0 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; border-radius:2px; flex-shrink:0">
|
||||
Details
|
||||
<span style="font-size:9px; line-height:1">▾</span>
|
||||
</button>
|
||||
|
||||
<div style="width:1px; height:24px; background:var(--c-line); flex-shrink:0; margin:0 14px"></div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div style="display:flex; align-items:center; gap:8px; flex-shrink:0">
|
||||
<button class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:0 18px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px"><img class="dgicon" src="assets/icons/Edit-Content-MD.svg" style="width:15px; height:15px; opacity:.9; filter:invert(1) brightness(2)">Transkribieren</button>
|
||||
<button class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:0 16px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Bearbeiten</button>
|
||||
<button class="fa-link" title="Weitere Aktionen" style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); cursor:pointer; border-radius:2px; flex-shrink:0"><img class="dgicon" src="assets/icons/View-More-MD.svg" style="width:18px; height:18px; opacity:.55"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Slide-over "Details" metadata card (3px mint TOP border) ── -->
|
||||
<div style="border-top:3px solid var(--c-accent); background:var(--c-surface); padding:26px 32px">
|
||||
<div style="max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.4fr 1fr 1fr; gap:30px; align-items:start">
|
||||
|
||||
<!-- Details column -->
|
||||
<div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">Details</div>
|
||||
<div style="display:flex; flex-direction:column; gap:14px">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:3px"><img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:13px; height:13px; opacity:.5">Datum</div>
|
||||
<div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">31. Oktober 1915</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:3px"><img class="dgicon" src="assets/icons/Location-MD.svg" style="width:13px; height:13px; opacity:.5">Ort</div>
|
||||
<div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">Feldpost — Westfront</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:5px">Status</div>
|
||||
<span style="display:inline-flex; align-items:center; gap:7px">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:{{ statusColor }}"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ status }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Personen column (avatar chips a40) -->
|
||||
<div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">Personen</div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:6px">Absender</div>
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:10px; padding:6px 8px; margin:0 -8px 10px; text-decoration:none; border-radius:2px">
|
||||
<span style="{{ sender.a40 }}">{{ sender.initials }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">{{ sender.name }}</span>
|
||||
</a>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:6px">Empfänger</div>
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:10px; padding:6px 8px; margin:0 -8px; text-decoration:none; border-radius:2px">
|
||||
<span style="{{ receiver.a40 }}">{{ receiver.initials }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">{{ receiver.name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Schlagwörter column (tag chips) -->
|
||||
<div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">Schlagwörter</div>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:8px">
|
||||
<sc-for list="{{ tags }}" as="t" hint-placeholder-count="4">
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; gap:6px; background:var(--c-muted); border:1px solid var(--c-line); padding:5px 10px; border-radius:4px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink); text-decoration:none">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:{{ t.dot }}"></span>{{ t.name }}
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Geschichten + comment/chat affordance -->
|
||||
<div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:14px">Geschichten</div>
|
||||
<a href="Geschichte.dc.html" class="fa-link" style="display:block; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); text-decoration:none; margin-bottom:3px">Feldpost: Herbert an der Westfront 1914–1918</a>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-bottom:18px">Marcel Raddatz · 11. Juni 2026</div>
|
||||
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); padding:9px 14px; border-radius:2px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">
|
||||
<img class="dgicon" src="assets/icons/Chat-MD.svg" style="width:15px; height:15px; opacity:.55">3 Anmerkungen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Main split pane ── -->
|
||||
<div style="display:grid; grid-template-columns:1fr 480px; min-height:640px; align-items:stretch">
|
||||
|
||||
<!-- LEFT: document/PDF viewer placeholder on --c-pdf-bg -->
|
||||
<div style="display:flex; flex-direction:column; background:var(--c-pdf-bg); min-height:640px">
|
||||
<div style="flex:1; display:flex; align-items:center; justify-content:center; padding:36px">
|
||||
<!-- aged-scan page placeholder -->
|
||||
<div style="width:100%; max-width:540px; aspect-ratio:3 / 4; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:46px; height:46px; opacity:.3">
|
||||
<div style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-3)">Feldpostbrief — Seite 1</div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3)">{{ signatur }} · Kurrentschrift</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- page-control footer (prev/next, page x of y) -->
|
||||
<div style="display:flex; align-items:center; justify-content:center; gap:16px; padding:12px; background:var(--c-pdf-ctrl); border-top:1px solid var(--c-line)">
|
||||
<button class="fa-link" title="Vorherige Seite" style="display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; cursor:pointer; color:var(--c-pdf-text); font-family:var(--font-sans); font-size:16px; font-weight:700">‹</button>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--c-pdf-text)">Seite 1 von 2</span>
|
||||
<button class="fa-link" title="Nächste Seite" style="display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; cursor:pointer; color:var(--c-pdf-text); font-family:var(--font-sans); font-size:16px; font-weight:700">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: transcription panel -->
|
||||
<div style="display:flex; flex-direction:column; background:var(--c-surface); border-left:1px solid var(--c-line); min-height:640px">
|
||||
|
||||
<!-- panel header: read/edit SEGMENTED CONTROL + turquoise accent chip -->
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--c-line)">
|
||||
<div style="display:flex; align-items:center; gap:12px">
|
||||
<!-- segmented control (§6) -->
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Lesen</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Bearbeiten</span>
|
||||
</div>
|
||||
<!-- turquoise Transkriptionsmodus accent chip -->
|
||||
<span style="display:inline-flex; align-items:center; gap:6px; border:1px solid var(--c-turquoise); padding:5px 10px; border-radius:999px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-turquoise)">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:var(--c-turquoise)"></span>Transkriptionsmodus
|
||||
</span>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">4 Abschnitte · zuletzt 12. Juni 2026</span>
|
||||
</div>
|
||||
|
||||
<!-- transcription blocks in Tinos -->
|
||||
<div style="flex:1; overflow-y:auto; padding:26px 28px">
|
||||
<sc-for list="{{ blocks }}" as="b" hint-placeholder-count="4">
|
||||
<div style="{{ b.wrap }}">
|
||||
<p style="font-family:var(--font-serif); font-size:16px; line-height:1.85; color:var(--c-ink); margin:0">{{ b.text }}</p>
|
||||
<sc-if value="{{ b.annotated }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3)">
|
||||
<img class="dgicon" src="assets/icons/Chat-MD.svg" style="width:13px; height:13px; opacity:.5">Markiert · 1 Anmerkung
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10, marginLeft:-6, border:'2px solid var(--c-surface)' },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 } };
|
||||
}
|
||||
|
||||
blocks(){
|
||||
const raw = [
|
||||
{ annotated:false, text:'Meine liebe, gute Clara! Heute hatte ich endlich wieder einen ruhigen Tag, um Dir ausführlich zu schreiben. Das Wetter ist umgeschlagen, kalter Regen seit gestern, und die Wege sind grundlos. Trotzdem geht es mir gut, sei darum unbesorgt.' },
|
||||
{ annotated:true, text:'In 10 Minuten gehe ich in Stellung zum ehrenvollen, heissen und schweren Kampfe. Was kommen mag, ich gehe ruhig hinein – nur der Gedanke an Dich und die Kinder läßt mich nicht los, Tag und Nacht.' },
|
||||
{ annotated:false, text:'Hast Du meine letzten beiden Karten erhalten? Schreibe mir bald, wie es Mutter geht und ob die Kohlen für den Winter schon eingebracht sind. Grüße mir die Nachbarn und besonders Frau Hoffmann recht herzlich.' },
|
||||
{ annotated:false, text:'Nun muß ich schließen, der Posten wartet. Bleib gesund und tapfer, meine Gute. In treuer Liebe und mit tausend Küssen, Dein Herbert.' },
|
||||
];
|
||||
return raw.map(b => ({
|
||||
...b,
|
||||
wrap: b.annotated
|
||||
? { borderLeft:'3px solid var(--c-accent)', paddingLeft:18, paddingTop:14, paddingBottom:18, marginBottom:8, background:'var(--c-accent-bg)' }
|
||||
: { paddingTop:14, paddingBottom:18, marginBottom:8, borderBottom:'1px solid var(--c-line)' },
|
||||
}));
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
const sender = this.av('Herbert Cram');
|
||||
const receiver = this.av('Clara Cram');
|
||||
const tagColors = { 'Feldpost':'#a0522d', 'Erster Weltkrieg':'#607080', 'Westfront':'#3060b0', 'Liebesbrief':'#c0446e' };
|
||||
const tags = Object.keys(tagColors).map(name => ({ name, dot:tagColors[name] }));
|
||||
return {
|
||||
signatur:'H-0366',
|
||||
title:'Feldpostbrief an Clara — »in 10 Minuten gehe ich in Stellung«',
|
||||
status:'Transkribiert',
|
||||
statusColor:'#5a8a6a',
|
||||
sender, receiver,
|
||||
stack:[sender, receiver],
|
||||
tags,
|
||||
blocks: this.blocks(),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- PAGE HEADER -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Archiv</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Dokumente</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Durchsuchen Sie den Bestand nach Titel, Person oder Schlagwort — gebündelt nach Jahr.</p>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">147 Dokumente · 38 Personen</span>
|
||||
</div>
|
||||
|
||||
<!-- SEARCH CARD -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:16px; margin-bottom:16px">
|
||||
<!-- row 1: search + sort + filter -->
|
||||
<div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap">
|
||||
<div style="position:relative; flex:1; min-width:240px">
|
||||
<input placeholder="Titel, Personen, Tags durchsuchen…" style="width:100%; box-sizing:border-box; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
<button class="fa-link" style="display:flex; align-items:center; gap:8px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); padding:11px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">Datum ↓</button>
|
||||
<button class="fa-link" style="display:flex; align-items:center; gap:8px; min-height:44px; background:var(--c-muted); border:1px solid var(--c-line); padding:11px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px"><img class="dgicon" src="assets/icons/Filter-MD.svg" style="width:15px; height:15px; opacity:.55">Filter</button>
|
||||
</div>
|
||||
|
||||
<!-- row 2: advanced filters (shown open) -->
|
||||
<div style="margin-top:18px; padding-top:18px; border-top:1px solid var(--c-line-2); display:flex; flex-direction:column; gap:18px">
|
||||
|
||||
<!-- tags + AND/OR segmented control -->
|
||||
<div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Schlagwörter</div>
|
||||
<div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap">
|
||||
<sc-for list="{{ tagChips }}" as="t" hint-placeholder-count="3">
|
||||
<span style="display:inline-flex; align-items:center; gap:6px; border:1px solid var(--c-line); background:var(--c-muted); padding:5px 10px; border-radius:4px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink-2)">
|
||||
<span style="{{ t.dot }}"></span>{{ t.name }}
|
||||
</span>
|
||||
</sc-for>
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line); margin-left:4px">
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Und</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Oder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- typeahead + dates + undated toggle -->
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; align-items:end">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Absender</span>
|
||||
<input placeholder="z.B. Herbert Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Empfänger</span>
|
||||
<input placeholder="z.B. Clara Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Von</span>
|
||||
<input placeholder="01.01.1914" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Bis</span>
|
||||
<input placeholder="31.12.1918" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- undated-only toggle -->
|
||||
<div>
|
||||
<button class="fa-link" title="Nur undatierte Dokumente anzeigen" style="display:inline-flex; align-items:center; gap:10px; min-height:44px; border:1px solid var(--c-line); background:var(--c-muted); padding:0 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">
|
||||
<span style="display:inline-flex; width:16px; height:16px; border:1px solid var(--c-ink-3); border-radius:2px"></span>
|
||||
Ohne Datum
|
||||
<span style="display:inline-flex; align-items:center; justify-content:center; min-width:24px; padding:2px 6px; border-radius:999px; background:var(--c-line); color:var(--c-ink-2); font-size:11px; font-weight:700; letter-spacing:0">9</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RESULT COUNT + ACTIONS -->
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap">
|
||||
<p style="margin:0; font-family:var(--font-sans); font-size:14px; color:var(--c-ink-2)">147 Treffer</p>
|
||||
<div style="display:flex; align-items:center; gap:12px">
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px; text-decoration:none"><img class="dgicon" src="assets/icons/Edit-Content-MD.svg" style="width:15px; height:15px; opacity:.55">Alle bearbeiten</a>
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; min-height:44px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px; text-decoration:none">Neu</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GROUPED RESULT CARDS -->
|
||||
<sc-for list="{{ groups }}" as="g" hint-placeholder-count="3">
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; margin-bottom:18px">
|
||||
<div style="border-bottom:1px solid var(--c-line-2); background:var(--c-muted); padding:11px 24px">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3)">{{ g.label }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<sc-for list="{{ g.docs }}" as="d" hint-placeholder-count="5">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding:15px 24px">
|
||||
<a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:18px; color:var(--c-ink); text-decoration:none; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1">{{ d.title }}</a>
|
||||
<div style="display:flex; align-items:center; gap:18px; flex-shrink:0">
|
||||
<div style="display:flex; padding-left:6px">
|
||||
<sc-for list="{{ d.people }}" as="p" hint-placeholder-count="3">
|
||||
<span style="{{ p.a26 }}">{{ p.initials }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); width:130px; text-align:right">{{ d.date }}</span>
|
||||
<span style="display:inline-flex; align-items:center; gap:7px; width:120px">
|
||||
<span style="{{ d.statusDot }}"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ d.status }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
|
||||
<!-- PAGINATION -->
|
||||
<div style="display:flex; align-items:center; justify-content:center; gap:8px; margin-top:28px">
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none; border-radius:2px">Zurück</a>
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-primary); background:var(--c-primary); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-primary-fg); text-decoration:none; border-radius:2px">1</a>
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-ink-2); text-decoration:none; border-radius:2px">2</a>
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-ink-2); text-decoration:none; border-radius:2px">3</a>
|
||||
<span style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; font-family:var(--font-sans); font-size:12px; font-weight:700; color:var(--c-ink-3)">…</span>
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-ink-2); text-decoration:none; border-radius:2px">8</a>
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:0 14px; border:1px solid var(--c-line); background:var(--c-surface); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; border-radius:2px">Weiter</a>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name, a26:{ ...base, width:26, height:26, fontSize:10, marginLeft:-6, border:'2px solid var(--c-surface)' } };
|
||||
}
|
||||
avs(names){ return names.map(n => this.av(n)); }
|
||||
|
||||
// Real DocumentStatus labels (documentStatusLabel.ts) mapped to the 3 status colors.
|
||||
statusColor(status){
|
||||
const sc = {
|
||||
'Transkribiert':'#5a8a6a', 'Geprüft':'#5a8a6a', 'Archiviert':'#5a8a6a',
|
||||
'Hochgeladen':'#c17a00',
|
||||
'Platzhalter':'#607080',
|
||||
};
|
||||
return sc[status] || '#607080';
|
||||
}
|
||||
|
||||
groups(){
|
||||
const tag = (t) => ({ ...t, statusDot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:this.statusColor(t.status), flexShrink:0 } });
|
||||
const raw = [
|
||||
{ label:'1916', docs:[
|
||||
{ title:'Feldpostbrief von der Westfront', date:'3. Februar 1916', status:'Transkribiert', people:['Herbert Cram','Clara Cram'] },
|
||||
{ title:'Postkarte aus dem Lazarett Sedan', date:'17. April 1916', status:'Geprüft', people:['Herbert Cram','Marie Cram'] },
|
||||
{ title:'Brief an die Mutter, Sütterlin', date:'9. Juni 1916', status:'Hochgeladen', people:['Herbert Cram','Eugenie de Gruyter'] },
|
||||
{ title:'Glückwunsch zur Verlobung', date:'28. August 1916', status:'Transkribiert', people:['Clara Cram','Marie Cram'] },
|
||||
{ title:'Feldpost — Absender unleserlich', date:'1916 (Monat unbekannt)', status:'Platzhalter', people:['Clara Cram'] },
|
||||
{ title:'Weihnachtsgruß aus dem Schützengraben', date:'22. Dezember 1916', status:'Hochgeladen', people:['Herbert Cram','Clara Cram','Marie Cram'] },
|
||||
]},
|
||||
{ label:'1915', docs:[
|
||||
{ title:'Erste Karte nach der Einberufung', date:'14. März 1915', status:'Geprüft', people:['Herbert Cram','Eugenie de Gruyter'] },
|
||||
{ title:'Brief über das Leben in der Etappe', date:'30. Mai 1915', status:'Transkribiert', people:['Herbert Cram','Clara Cram'] },
|
||||
{ title:'Postkarte mit Feldpoststempel', date:'11. September 1915', status:'Hochgeladen', people:['Marie Cram','Clara Cram'] },
|
||||
{ title:'Brief an Eugenie, Kurrentschrift', date:'4. November 1915', status:'Platzhalter', people:['Eugenie de Gruyter','Herbert Cram'] },
|
||||
{ title:'Adventsgruß an die Familie', date:'5. Dezember 1915', status:'Transkribiert', people:['Herbert Cram','Marie Cram','Clara Cram'] },
|
||||
]},
|
||||
{ label:'1914', docs:[
|
||||
{ title:'Brief vor der Mobilmachung', date:'19. Juli 1914', status:'Geprüft', people:['Herbert Cram','Clara Cram'] },
|
||||
{ title:'Karte vom Bahnhof Köln', date:'8. August 1914', status:'Transkribiert', people:['Herbert Cram','Eugenie de Gruyter'] },
|
||||
{ title:'Erster Feldpostbrief aus Belgien', date:'27. September 1914', status:'Hochgeladen', people:['Herbert Cram','Marie Cram'] },
|
||||
{ title:'Umschlag ohne Inhalt (Mappe A)', date:'1914 (undatiert)', status:'Platzhalter', people:['Clara Cram'] },
|
||||
]},
|
||||
];
|
||||
return raw.map(g => ({ label:g.label, docs:g.docs.map(d => ({ ...d, people:this.avs(d.people), statusDot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:this.statusColor(d.status), flexShrink:0 } })) }));
|
||||
}
|
||||
|
||||
tagChips(){
|
||||
const tc = { sage:'#5a8a6a', sienna:'#a0522d', amber:'#c17a00', cobalt:'#3060b0' };
|
||||
const raw = [
|
||||
{ name:'Feldpost', color:tc.sienna },
|
||||
{ name:'Erster Weltkrieg', color:tc.cobalt },
|
||||
{ name:'Westfront', color:tc.amber },
|
||||
];
|
||||
return raw.map(t => ({ name:t.name, dot:{ display:'inline-block', width:8, height:8, borderRadius:'999px', background:t.color, flexShrink:0 } }));
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
return {
|
||||
groups: this.groups(),
|
||||
tagChips: this.tagChips(),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="dokumente" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Archiv</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Dokumente</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Jüngste Eingänge, offene Aufgaben und der schnelle Weg zum nächsten Stück.</p>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">147 Dokumente · 38 Personen</span>
|
||||
</div>
|
||||
|
||||
<!-- search bar -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); padding:16px; margin-bottom:16px; display:flex; align-items:center; gap:12px">
|
||||
<div style="position:relative; flex:1">
|
||||
<input placeholder="Titel, Personen, Tags durchsuchen…" style="width:100%; box-sizing:border-box; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:15px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
<button class="fa-link" style="display:flex; align-items:center; gap:8px; background:var(--c-surface); border:1px solid var(--c-line); padding:11px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">Datum ↓</button>
|
||||
<button class="fa-link" style="display:flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); padding:11px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px"><img class="dgicon" src="assets/icons/Filter-MD.svg" style="width:15px; height:15px; opacity:.55">Filter</button>
|
||||
</div>
|
||||
|
||||
<!-- resume -->
|
||||
<div style="display:flex; align-items:center; gap:10px; border:1px solid var(--c-line); border-left:3px solid var(--c-accent); background:var(--c-surface); padding:12px 16px; margin-bottom:20px">
|
||||
<span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-2)">Weiter bei:</span>
|
||||
<a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:16px; font-style:italic; color:var(--c-ink); text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:3px; text-decoration-thickness:2px">Brief an Frieda aus dem Harz</a>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start">
|
||||
<!-- recent documents -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:24px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Zuletzt hinzugefügt</div>
|
||||
<sc-for list="{{ docs }}" as="d" hint-placeholder-count="6">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding:13px 0">
|
||||
<a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); text-decoration:none; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ d.title }}</a>
|
||||
<div style="display:flex; align-items:center; gap:16px; flex-shrink:0">
|
||||
<div style="display:flex; padding-left:6px">
|
||||
<sc-for list="{{ d.people }}" as="p" hint-placeholder-count="2">
|
||||
<span style="{{ p.a26 }}">{{ p.initials }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); width:128px; text-align:right">{{ d.date }}</span>
|
||||
<span style="display:inline-flex; align-items:center; gap:6px; width:118px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)"><span style="{{ d.statusDot }}"></span>{{ d.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<p style="margin:16px 0 0; font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">147 Dokumente · 38 Personen</p>
|
||||
</div>
|
||||
|
||||
<!-- right column -->
|
||||
<div style="display:flex; flex-direction:column; gap:18px">
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); padding:6px">
|
||||
<div style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--c-line); padding:26px 18px; text-align:center">
|
||||
<img class="dgicon" src="assets/icons/Upload-MD.svg" style="width:30px; height:30px; opacity:.4">
|
||||
<span style="font-family:var(--font-sans); font-size:14px; color:var(--c-ink-2)">Dateien hier ablegen oder klicken</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">PDF, JPG, PNG, TIFF bis 50 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:22px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Benötigt Metadaten</div>
|
||||
<sc-for list="{{ needsMeta }}" as="m" hint-placeholder-count="3">
|
||||
<div style="border-bottom:1px solid var(--c-line-2); padding:11px 0">
|
||||
<a href="#" class="fa-link" style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink); text-decoration:none">{{ m }}</a>
|
||||
</div>
|
||||
</sc-for>
|
||||
<a href="#" class="fa-link" style="display:inline-block; margin-top:14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Alle anzeigen →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mission control -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:24px; margin-top:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">Mission Control</div>
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px">
|
||||
<sc-for list="{{ mission }}" as="c" hint-placeholder-count="3">
|
||||
<div style="display:flex; flex-direction:column; gap:12px; border:1px solid var(--c-line); background:var(--c-muted); padding:16px">
|
||||
<div>
|
||||
<h3 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink); margin:0 0 8px">{{ c.heading }}</h3>
|
||||
<span style="display:inline-flex; align-items:center; gap:4px; border:1px solid var(--c-line); background:var(--c-accent-bg); padding:3px 10px; border-radius:999px; font-family:var(--font-sans); font-size:11px; font-weight:600; color:var(--c-ink)">{{ c.skill }}</span>
|
||||
<p style="margin:8px 0 0; font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--c-ink-2)">{{ c.weekly }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<sc-for list="{{ c.items }}" as="it" hint-placeholder-count="3">
|
||||
<a href="#" class="fa-link" style="display:flex; flex-direction:column; padding:8px 0; border-top:1px solid var(--c-line-2); text-decoration:none">
|
||||
<span style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink)">{{ it.title }}</span>
|
||||
<span style="margin-top:2px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">{{ it.date }}</span>
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name, a26:{ ...base, width:26, height:26, fontSize:10, marginLeft:-6, border:'2px solid var(--c-surface)' } };
|
||||
}
|
||||
avs(names){ return names.map(n => this.av(n)); }
|
||||
|
||||
docs(){
|
||||
const sc = { 'Transkribiert':'#5a8a6a', 'In Arbeit':'#c17a00', 'Neu':'#607080' };
|
||||
const raw = [
|
||||
{ title:'Brief an Frieda aus dem Harz', date:'14. März 1923', status:'Transkribiert', people:['Frieda Rose','Anna Bauer'] },
|
||||
{ title:'Postkarte aus Wien', date:'2. August 1924', status:'In Arbeit', people:['Karl Müller'] },
|
||||
{ title:'Geschäftsbrief betr. Grundstück Mariahilf', date:'19. November 1925', status:'In Arbeit', people:['Otto Schmidt'] },
|
||||
{ title:'Glückwunsch zum 60. Geburtstag', date:'22. Mai 1928', status:'Transkribiert', people:['Margarete Hoffmann'] },
|
||||
{ title:'Brief aus der Lehrzeit', date:'8. Oktober 1930', status:'Neu', people:['Wilhelm Rose'] },
|
||||
{ title:'Weihnachtsgruß an die Familie', date:'21. Dezember 1931', status:'Transkribiert', people:['Heinrich Rose'] },
|
||||
];
|
||||
return raw.map(d => ({ ...d, people:this.avs(d.people), statusDot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:sc[d.status], flexShrink:0 } }));
|
||||
}
|
||||
|
||||
mission(){
|
||||
return [
|
||||
{ heading:'Segmentierung', skill:'Gut für Augen, die Seiten erkennen', weekly:'Diese Woche: 12 Seiten zugeordnet', items:[
|
||||
{ title:'Konvolut Rose, Heft III', date:'2. Feb 1923' },
|
||||
{ title:'Umschlag Mariahilf', date:'19. Nov 1925' },
|
||||
{ title:'Mappe B — unsortiert', date:'' },
|
||||
]},
|
||||
{ heading:'Transkription', skill:'Gut für geübte Leser der Kurrentschrift', weekly:'Diese Woche: 7 Briefe begonnen', items:[
|
||||
{ title:'Brief an Frieda aus dem Harz', date:'14. März 1923' },
|
||||
{ title:'Postkarte aus Wien', date:'2. Aug 1924' },
|
||||
{ title:'Geburtstagsbrief', date:'22. Mai 1928' },
|
||||
]},
|
||||
{ heading:'Zur Überprüfung', skill:'Gut für letzte Korrekturen', weekly:'', items:[
|
||||
{ title:'Brief aus der Lehrzeit', date:'8. Okt 1930' },
|
||||
{ title:'Weihnachtsgruß', date:'21. Dez 1931' },
|
||||
]},
|
||||
];
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
return {
|
||||
docs: this.docs(),
|
||||
needsMeta: ['Brief ohne Titel (Mappe B)', 'Postkarte — Absender unbekannt', 'Umschlag, 1924'],
|
||||
mission: this.mission(),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="zeitstrahl" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- back link -->
|
||||
<a href="Zeitstrahl.dc.html" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; margin-bottom:24px">← Zurück zum Zeitstrahl</a>
|
||||
|
||||
<!-- PageHeader (§3) -->
|
||||
<div style="margin-bottom:30px; border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">{{ eyebrow }}</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ title }}</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">{{ lede }}</p>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start">
|
||||
|
||||
<!-- ─── MAIN column ─── -->
|
||||
<div style="display:flex; flex-direction:column; gap:24px">
|
||||
|
||||
<!-- Wann & Was -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Wann & Was</h2>
|
||||
|
||||
<!-- Titel (with error state on a missing-title field) -->
|
||||
<label style="display:block; margin-bottom:22px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel *</span>
|
||||
<input value="{{ f.title }}" placeholder="z.B. Hochzeit von Hannemarie Cram" style="{{ titleInputStyle }}">
|
||||
<sc-if value="{{ titleError }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="display:flex; align-items:center; gap:7px; margin-top:7px">
|
||||
<img class="dgicon" src="assets/icons/Check-MD.svg" style="width:14px; height:14px; opacity:.7">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--c-danger)">{{ titleError }}</span>
|
||||
</div>
|
||||
</sc-if>
|
||||
</label>
|
||||
|
||||
<!-- Ereignistyp — segmented control (§6) -->
|
||||
<div style="margin-bottom:22px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Ereignistyp</div>
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
|
||||
<sc-for list="{{ typeSegments }}" as="seg" hint-placeholder-count="2">
|
||||
<span class="fa-link" style="{{ seg.style }}">{{ seg.label }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datum + Genauigkeit hint -->
|
||||
<div>
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Datum</span>
|
||||
<div style="position:relative; max-width:280px">
|
||||
<input value="{{ f.date }}" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
|
||||
<span>Genauigkeit:</span>
|
||||
<sc-for list="{{ precisionHints }}" as="p" hint-placeholder-count="3">
|
||||
<span style="{{ p.style }}">{{ p.label }}</span>
|
||||
<sc-if value="{{ p.sep }}" hint-placeholder-val="{{ true }}"><span>·</span></sc-if>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Beschreibung -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Beschreibung</h2>
|
||||
<label style="display:block">
|
||||
<span class="sr-only" style="position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)">Beschreibung des Ereignisses</span>
|
||||
<textarea rows="5" placeholder="Was geschah an diesem Tag? Hintergrund, Quellen, Beteiligte…" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.7; color:var(--c-ink); outline:none; border-radius:2px">{{ f.description }}</textarea>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── SIDEBAR ─── -->
|
||||
<div style="display:flex; flex-direction:column; gap:24px">
|
||||
|
||||
<!-- Beteiligte Personen -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Beteiligte Personen</h2>
|
||||
|
||||
<sc-if value="{{ hasPersons }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px">
|
||||
<sc-for list="{{ persons }}" as="p" hint-placeholder-count="3">
|
||||
<span style="display:inline-flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; padding:4px 6px 4px 4px">
|
||||
<span style="{{ p.a26 }}">{{ p.initials }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ p.name }}</span>
|
||||
<a href="#" title="Person entfernen" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
|
||||
</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ noPersons }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="border:1px dashed var(--c-line); border-radius:2px; padding:24px 16px; text-align:center; margin-bottom:14px">
|
||||
<div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink); margin-bottom:4px">Noch keine Person verknüpft.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">Beginnen Sie zu tippen…</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- add typeahead -->
|
||||
<div style="position:relative">
|
||||
<input placeholder="Person suchen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Verknüpfte Briefe -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Verknüpfte Briefe</h2>
|
||||
|
||||
<sc-if value="{{ hasDocuments }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="display:flex; flex-direction:column; gap:10px; margin-bottom:14px">
|
||||
<sc-for list="{{ documents }}" as="d" hint-placeholder-count="2">
|
||||
<div style="display:flex; align-items:center; gap:12px; border:1px solid var(--c-line); border-radius:2px; padding:12px">
|
||||
<span style="width:38px; height:38px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); border-radius:2px; display:flex; align-items:center; justify-content:center">{{ d.iconEl }}</span>
|
||||
<div style="flex:1; min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink); line-height:1.3">{{ d.title }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ d.meta }}</div>
|
||||
</div>
|
||||
<a href="#" title="Brief entfernen" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-family:var(--font-sans); font-size:18px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ noDocuments }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="border:1px dashed var(--c-line); border-radius:2px; padding:24px 16px; text-align:center; margin-bottom:14px">
|
||||
<div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink); margin-bottom:4px">Noch kein Brief verknüpft.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">Verknüpfen Sie einen Brief aus dem Archiv…</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- add typeahead -->
|
||||
<div style="position:relative">
|
||||
<input placeholder="Brief suchen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── Sticky save bar ─── -->
|
||||
<div style="position:sticky; bottom:0; z-index:20; margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:0 -2px 8px rgba(0,0,0,.06); border-radius:2px; padding:16px 24px">
|
||||
<div style="display:flex; align-items:center; gap:18px">
|
||||
<sc-if value="{{ isEdit }}" hint-placeholder-val="{{ true }}">
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
|
||||
</sc-if>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">Ereignisse erscheinen im Zeitstrahl.</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:14px">
|
||||
<a href="{{ discardHref }}" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border-radius:2px">Abbrechen</a>
|
||||
<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1180,"height":1300},"variant":{"editor":"enum","options":["neu","bearbeiten"],"default":"bearbeiten","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
typeSegments(activeLabel){
|
||||
const labels = ['Persönlich','Historisch'];
|
||||
return labels.map((label, i) => {
|
||||
const active = label === activeLabel;
|
||||
const style = {
|
||||
fontFamily:'var(--font-sans)', fontSize:12, fontWeight:700, letterSpacing:'.08em',
|
||||
textTransform:'uppercase', padding:'10px 16px', cursor:'pointer',
|
||||
background: active ? 'var(--c-primary)' : 'var(--c-surface)',
|
||||
color: active ? 'var(--c-primary-fg)' : 'var(--c-ink-2)',
|
||||
};
|
||||
if (i > 0) style.borderLeft = '1px solid var(--c-line)';
|
||||
return { label, style };
|
||||
});
|
||||
}
|
||||
|
||||
precisionHints(activeLabel){
|
||||
const labels = ['Tag','Monat','Jahr'];
|
||||
return labels.map((label, i) => ({
|
||||
label,
|
||||
sep: i < labels.length - 1,
|
||||
style: { color: label === activeLabel ? 'var(--c-ink-2)' : 'var(--c-ink-3)', fontWeight: label === activeLabel ? 700 : 400 },
|
||||
}));
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
const variant = this.props.variant || 'bearbeiten';
|
||||
const isEdit = variant === 'bearbeiten';
|
||||
|
||||
const editing = {
|
||||
title:'Hochzeit von Hannemarie Cram',
|
||||
type:'Persönlich',
|
||||
precision:'Tag',
|
||||
date:'12.05.1945',
|
||||
description:'Hannemarie Cram heiratet mitten im Krieg, wenige Tage nach der Kapitulation. Die Trauung findet im engsten Familienkreis statt — Herbert ist noch an der Front vermisst. Mehrere Glückwunschbriefe aus dem Mai 1945 nehmen auf diesen Tag Bezug.',
|
||||
};
|
||||
const blank = {
|
||||
title:'',
|
||||
type:'Persönlich',
|
||||
precision:'Tag',
|
||||
date:'',
|
||||
description:'',
|
||||
};
|
||||
const f = isEdit ? editing : blank;
|
||||
|
||||
// Error state demo: the Titel field shows a danger border + danger message
|
||||
// (Check/warning icon, never an emoji). On `neu` the empty title is flagged.
|
||||
const titleError = isEdit ? '' : 'Bitte einen Titel eingeben.';
|
||||
const titleInputStyle = {
|
||||
width:'100%',
|
||||
border: '1px solid ' + (titleError ? 'var(--c-danger)' : 'var(--c-line)'),
|
||||
background:'var(--c-surface)', padding:'11px 14px',
|
||||
fontFamily:'var(--font-serif)', fontSize:16, color:'var(--c-ink)',
|
||||
outline:'none', borderRadius:'2px',
|
||||
};
|
||||
|
||||
const personNames = isEdit
|
||||
? ['Hannemarie Cram', 'Clara Cram', 'Marie Cram']
|
||||
: [];
|
||||
const persons = personNames.map(n => this.av(n));
|
||||
|
||||
const rawDocs = isEdit
|
||||
? [
|
||||
{ title:'C-0512 – 14. Mai 1945 – Glückwunsch zur Hochzeit', meta:'14.05.1945 · von Eugenie de Gruyter an Hannemarie Cram', kind:'letter' },
|
||||
{ title:'C-0518 – 20. Mai 1945 – Hochzeitsbericht', meta:'20.05.1945 · von Clara Cram an Marie Cram', kind:'letter' },
|
||||
]
|
||||
: [];
|
||||
const documents = rawDocs.map(d => ({
|
||||
...d,
|
||||
iconEl: React.createElement('img', {
|
||||
className:'dgicon',
|
||||
src: d.kind === 'folder' ? 'assets/icons/Folder-MD.svg' : 'assets/icons/Mail-MD.svg',
|
||||
style:{ width:18, height:18, opacity:.5 },
|
||||
}),
|
||||
}));
|
||||
|
||||
return {
|
||||
isEdit,
|
||||
eyebrow:'Chronik',
|
||||
title: isEdit ? f.title : 'Neues Ereignis',
|
||||
lede: isEdit
|
||||
? 'Pflegen Sie Datum, Beteiligte und verknüpfte Briefe dieses Ereignisses.'
|
||||
: 'Verankern Sie einen Moment der Familiengeschichte im Zeitstrahl.',
|
||||
f,
|
||||
titleError,
|
||||
titleInputStyle,
|
||||
typeSegments: this.typeSegments(f.type),
|
||||
precisionHints: this.precisionHints(f.precision),
|
||||
persons, hasPersons: persons.length > 0, noPersons: persons.length === 0,
|
||||
documents, hasDocuments: documents.length > 0, noDocuments: documents.length === 0,
|
||||
discardHref: isEdit ? 'Zeitstrahl.dc.html' : 'Zeitstrahl.dc.html',
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,401 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="geschichten" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 110px">
|
||||
|
||||
<!-- back link -->
|
||||
<a href="{{ backHref }}" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; margin-bottom:24px">← {{ backLabel }}</a>
|
||||
|
||||
<!-- PageHeader (§3) -->
|
||||
<div style="margin-bottom:30px; border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">{{ eyebrow }}</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ title }}</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">{{ lede }}</p>
|
||||
</div>
|
||||
|
||||
<!-- ════════════════════ VARIANT: neu (type picker) ════════════════════ -->
|
||||
<sc-if value="{{ isNeu }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="max-width:780px">
|
||||
|
||||
<!-- segmented control (§6) — Lesereise / Sammlung -->
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px">Art der Geschichte</div>
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden; margin-bottom:28px">
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:10px 22px; cursor:pointer">Lesereise</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 22px; border-left:1px solid var(--c-line); cursor:pointer">Sammlung</span>
|
||||
</div>
|
||||
|
||||
<!-- two explanatory cards -->
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px">
|
||||
|
||||
<!-- Lesereise card (selected) -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:18px; height:18px; opacity:.4">
|
||||
<h2 style="font-family:var(--font-serif); font-size:21px; font-weight:700; color:var(--c-ink); margin:0">Lesereise</h2>
|
||||
</div>
|
||||
<p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0 0 14px">Eine geführte Abfolge von Briefen in fester Reihenfolge — die Lesenden gehen Schritt für Schritt durch den Briefwechsel. Zwischen den Dokumenten setzen Sie eigene Anmerkungen, die den Bogen spannen.</p>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); line-height:1.6">Ideal für: <span style="font-style:normal; color:var(--c-ink-2)">die Feldpost Herberts 1914–1918 chronologisch erzählt.</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Sammlung card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px">
|
||||
<img class="dgicon" src="assets/icons/Library-MD.svg" style="width:18px; height:18px; opacity:.4">
|
||||
<h2 style="font-family:var(--font-serif); font-size:21px; font-weight:700; color:var(--c-ink); margin:0">Sammlung</h2>
|
||||
</div>
|
||||
<p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0 0 14px">Ein frei geschriebener Prosatext mit Überschriften und Absätzen, in den Sie einzelne Briefe als Belege einbetten. Sie führen die Feder — die Dokumente stützen Ihre Erzählung.</p>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); line-height:1.6">Ideal für: <span style="font-style:normal; color:var(--c-ink-2)">ein Porträt der drei Kinder über mehrere Jahrzehnte.</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- primary action -->
|
||||
<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 24px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Weiter</button>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ════════════════════ VARIANT: geschichte (prose / Sammlung editor) ════════════════════ -->
|
||||
<sc-if value="{{ isGeschichte }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start">
|
||||
|
||||
<!-- MAIN: editor card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:0; overflow:hidden">
|
||||
|
||||
<!-- title field -->
|
||||
<div style="padding:24px 28px 0">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel</span>
|
||||
<input value="Die Kinder: Briefe an und über Hannemarie, Clara-Eugenie und Kurt-Georg" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- toolbar (§6 segment styling) -->
|
||||
<div style="padding:18px 28px 0">
|
||||
<div style="display:inline-flex; flex-wrap:wrap; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
|
||||
<sc-for list="{{ toolbarButtons }}" as="t" hint-placeholder-count="6">
|
||||
<span class="fa-link" title="{{ t.title }}" style="{{ t.style }}">{{ t.iconEl }}<span>{{ t.label }}</span></span>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- content editing area (Tinos prose) -->
|
||||
<div style="padding:18px 28px 28px">
|
||||
<div style="border:1px solid var(--c-line); border-radius:2px; background:var(--c-surface); padding:24px 26px; min-height:340px">
|
||||
<p style="font-family:var(--font-serif); font-size:17px; line-height:1.75; color:var(--c-ink); margin:0 0 18px">Herbert und Clara Cram hatten drei Kinder: <b>Hannemarie</b>, <b>Clara-Eugenie</b> und <b>Kurt-Georg</b>. Die Briefe dieser Sammlung drehen sich um sie — als Kleinkinder, als Schüler, als junge Erwachsene im Zweiten Weltkrieg.</p>
|
||||
|
||||
<h3 style="font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--c-ink); margin:26px 0 12px">Die Töchter im Krieg</h3>
|
||||
<p style="font-family:var(--font-serif); font-size:17px; line-height:1.75; color:var(--c-ink); margin:0 0 18px">Clara-Eugenie dient bei der Flak, während <i>Hannemarie</i> 1945 mitten im Krieg heiratet. Durch die Briefe der Eltern und Großeltern entsteht das Bild einer ganzen Generation, die im Schatten der großen Geschichte aufwuchs:</p>
|
||||
|
||||
<blockquote style="border-left:3px solid var(--c-accent); padding-left:20px; margin:0 0 18px">
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:17px; line-height:1.7; color:var(--c-ink-2); margin:0">„Schreibt mir, sobald Ihr könnt — die Tage sind lang ohne ein Wort von Euch."</p>
|
||||
</blockquote>
|
||||
|
||||
<p style="font-family:var(--font-serif); font-size:17px; line-height:1.75; color:var(--c-ink); margin:0">Clara schreibt an ihre Kinder, die Großeltern schreiben über sie, Freunde erkundigen sich nach ihnen<span style="display:inline-block; width:1px; height:20px; background:var(--c-ink); margin-left:2px; vertical-align:-4px"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDEBAR: status + persons + cover -->
|
||||
<aside style="display:flex; flex-direction:column; gap:20px">
|
||||
|
||||
<!-- Status -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Status</h2>
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden; margin-bottom:12px">
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 13px; cursor:pointer">Entwurf</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 13px; border-left:1px solid var(--c-line); cursor:pointer">In Arbeit</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 13px; border-left:1px solid var(--c-line); cursor:pointer">Veröffentlicht</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:7px">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:#5a8a6a"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">Veröffentlicht — für alle sichtbar</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Personen -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 6px">Personen</h2>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 14px">Verknüpfte Personen erscheinen auf deren Profilseiten.</p>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px">
|
||||
<sc-for list="{{ persons }}" as="p" hint-placeholder-count="4">
|
||||
<span style="display:inline-flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; padding:4px 6px 4px 4px">
|
||||
<span style="{{ p.av.a26 }}">{{ p.av.initials }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ p.name }}</span>
|
||||
<a href="#" class="fa-link" title="Entfernen" style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
|
||||
</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="position:relative">
|
||||
<input placeholder="Person hinzufügen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:10px 38px 10px 13px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Titelbild / Intro -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 6px">Titelbild / Intro</h2>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 12px">Ein kurzer einleitender Text für die Übersicht.</p>
|
||||
<textarea rows="4" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px">Ein Porträt der drei Cram-Kinder durch die Briefe ihrer Eltern und Großeltern.</textarea>
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ════════════════════ VARIANT: lesereise (journey editor) ════════════════════ -->
|
||||
<sc-if value="{{ isLesereise }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start">
|
||||
|
||||
<!-- MAIN: title + intro + journey item list -->
|
||||
<div style="display:flex; flex-direction:column; gap:18px">
|
||||
|
||||
<!-- title -->
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Titel</span>
|
||||
<input value="Feldpost: Herbert an der Westfront 1914–1918" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<!-- intro -->
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Einleitung</span>
|
||||
<textarea rows="3" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px">Herbert Cram schreibt aus den Schützengräben nach Hause — an seine Frau Clara und seine Mutter Marie. Über 440 Feldpostbriefe in vier Jahren, allein 349 im Jahr 1918.</textarea>
|
||||
</label>
|
||||
|
||||
<!-- station list -->
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-top:6px">Stationen der Lesereise</div>
|
||||
|
||||
<div style="display:flex; flex-direction:column; gap:10px">
|
||||
<sc-for list="{{ journeyItems }}" as="it" hint-placeholder-count="5">
|
||||
|
||||
<!-- letter row -->
|
||||
<sc-if value="{{ it.isLetter }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="{{ it.rowStyle }}">
|
||||
<div style="display:flex; align-items:center; gap:14px; padding:14px 16px">
|
||||
<!-- drag handle (View-More icon) -->
|
||||
<span class="fa-link" title="Zum Verschieben ziehen" style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; cursor:grab; color:var(--c-ink-3)">
|
||||
<img class="dgicon" src="assets/icons/View-More-MD.svg" style="width:18px; height:18px; opacity:.4">
|
||||
</span>
|
||||
<!-- 40px Mail tile -->
|
||||
<span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:18px; height:18px; opacity:.5">
|
||||
</span>
|
||||
<!-- title + meta -->
|
||||
<div style="flex:1; min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ it.title }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ it.meta }}</div>
|
||||
</div>
|
||||
<!-- remove -->
|
||||
<a href="#" class="fa-link" title="Aus der Lesereise entfernen" style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; font-family:var(--font-sans); font-size:14px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
|
||||
</div>
|
||||
|
||||
<!-- note sub-field -->
|
||||
<sc-if value="{{ it.hasNote }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="padding:0 16px 14px 74px">
|
||||
<div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Anmerkung</div>
|
||||
<textarea rows="2" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-accent-bg); padding:10px 13px; font-family:var(--font-serif); font-style:italic; font-size:15px; line-height:1.6; color:var(--c-ink-2); outline:none; border-radius:2px">{{ it.note }}</textarea>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ it.noNote }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="padding:0 16px 14px 74px">
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3); text-decoration:none">+ Anmerkung hinzufügen</a>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<!-- add-document row -->
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:12px; border:1px dashed var(--c-line); border-radius:2px; padding:16px 18px; min-height:44px; text-decoration:none">
|
||||
<img class="dgicon" src="assets/icons/Folder-MD.svg" style="width:18px; height:18px; opacity:.4">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">Dokument hinzufügen</span>
|
||||
</a>
|
||||
|
||||
<!-- empty-state variant note -->
|
||||
<div style="border:1px dashed var(--c-line); border-radius:2px; padding:18px 22px; background:var(--c-muted)">
|
||||
<div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Variante: leere Lesereise</div>
|
||||
<div style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink); margin-bottom:4px">Noch keine Briefe in dieser Lesereise.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Fügen Sie über „Dokument hinzufügen" den ersten Brief hinzu…</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDEBAR: same as story -->
|
||||
<aside style="display:flex; flex-direction:column; gap:20px">
|
||||
|
||||
<!-- Status -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Status</h2>
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden; margin-bottom:12px">
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 13px; cursor:pointer">Entwurf</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 13px; border-left:1px solid var(--c-line); cursor:pointer">In Arbeit</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 13px; border-left:1px solid var(--c-line); cursor:pointer">Veröffentlicht</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:7px">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:#c17a00"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">In Arbeit — noch nicht öffentlich</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Personen -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 6px">Personen</h2>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 14px">Verknüpfte Personen erscheinen auf deren Profilseiten.</p>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px">
|
||||
<sc-for list="{{ journeyPersons }}" as="p" hint-placeholder-count="3">
|
||||
<span style="display:inline-flex; align-items:center; gap:8px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; padding:4px 6px 4px 4px">
|
||||
<span style="{{ p.av.a26 }}">{{ p.av.initials }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink)">{{ p.name }}</span>
|
||||
<a href="#" class="fa-link" title="Entfernen" style="display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--c-ink-3); text-decoration:none">×</a>
|
||||
</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="position:relative">
|
||||
<input placeholder="Person hinzufügen…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:10px 38px 10px 13px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Titelbild / Intro -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:20px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 6px">Titelbild / Intro</h2>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:0 0 12px">Ein kurzer einleitender Text für die Übersicht.</p>
|
||||
<textarea rows="4" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px">Vier Kriegsjahre in Feldpostbriefen — von der Mobilmachung bis zum Waffenstillstand.</textarea>
|
||||
</section>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ════════════════════ Sticky save bar (geschichte + lesereise) ════════════════════ -->
|
||||
<sc-if value="{{ showSaveBar }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="position:sticky; bottom:0; margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:0 -2px 8px rgba(0,0,0,.06); border-radius:2px; padding:16px 24px">
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
|
||||
<div style="display:flex; align-items:center; gap:14px">
|
||||
<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Vorschau</button>
|
||||
<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1180,"height":1500},"variant":{"editor":"enum","options":["neu","geschichte","lesereise"],"default":"geschichte","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
// Toolbar segment styled like a §6 segmented control. Active = navy fill.
|
||||
toolbar(){
|
||||
const items = [
|
||||
{ label:'Fett', icon:null, active:false },
|
||||
{ label:'Kursiv', icon:null, active:false },
|
||||
{ label:'Überschrift', icon:null, active:true },
|
||||
{ label:'Zitat', icon:'assets/icons/Chat-MD.svg', active:false },
|
||||
{ label:'Liste', icon:null, active:false },
|
||||
{ label:'Link', icon:'assets/icons/Globe-MD.svg',active:false },
|
||||
];
|
||||
return items.map((it, i) => {
|
||||
const style = {
|
||||
display:'inline-flex', alignItems:'center', gap:6,
|
||||
fontFamily:'var(--font-sans)', fontSize:12, fontWeight:700, letterSpacing:'.08em',
|
||||
textTransform:'uppercase', padding:'9px 14px', cursor:'pointer', whiteSpace:'nowrap',
|
||||
background: it.active ? 'var(--c-primary)' : 'var(--c-surface)',
|
||||
color: it.active ? 'var(--c-primary-fg)' : 'var(--c-ink-2)',
|
||||
};
|
||||
if (i > 0) style.borderLeft = '1px solid var(--c-line)';
|
||||
const iconEl = it.icon
|
||||
? React.createElement('img', { className:'dgicon', src:it.icon, style:{ width:14, height:14, opacity: it.active ? .9 : .4, filter: it.active ? 'invert(1) brightness(1.6)' : undefined } })
|
||||
: null;
|
||||
return { ...it, title:it.label, style, iconEl };
|
||||
});
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
const variant = this.props.variant || 'geschichte';
|
||||
const isNeu = variant === 'neu';
|
||||
const isGeschichte = variant === 'geschichte';
|
||||
const isLesereise = variant === 'lesereise';
|
||||
|
||||
const header = {
|
||||
neu: { eyebrow:'Geschichten', title:'Neue Geschichte', lede:'Wählen Sie, wie Sie die Briefe Ihrer Familie erzählen möchten.', back:'Zurück zu Geschichten', backHref:'Geschichten.dc.html' },
|
||||
geschichte: { eyebrow:'Geschichte bearbeiten', title:'Die Kinder', lede:'Schreiben Sie freien Prosatext und betten Sie Briefe als Belege ein.', back:'Zurück zur Geschichte', backHref:'Geschichte.dc.html' },
|
||||
lesereise: { eyebrow:'Lesereise bearbeiten', title:'Feldpost 1914–1918',lede:'Ordnen Sie die Briefe in eine geführte Abfolge und ergänzen Sie Anmerkungen.', back:'Zurück zur Lesereise', backHref:'Geschichte.dc.html?variant=Lesereise' },
|
||||
}[variant];
|
||||
|
||||
// Sammlung persons (story editor)
|
||||
const persons = ['Hannemarie Cram','Clara-Eugenie Cram','Kurt-Georg Cram','Clara Cram']
|
||||
.map(n => ({ name:n, av:this.av(n) }));
|
||||
|
||||
// Lesereise persons
|
||||
const journeyPersons = ['Herbert Cram','Clara Cram','Marie Cram']
|
||||
.map(n => ({ name:n, av:this.av(n) }));
|
||||
|
||||
// Journey items — chronological Feldpost. One row in a COLOR-ONLY drag/active
|
||||
// state (§8): bg var(--c-muted) + 3px mint LEFT rule + opacity. NO transform.
|
||||
const rawItems = [
|
||||
{ title:'H-0366 – 31. Oktober 1915 – Feldpost', meta:'31.10.1915 · von Herbert Cram an Clara Cram', note:'Der erste erhaltene Brief aus dem Feld — Herbert berichtet vom Quartier hinter der Front.', dragging:false },
|
||||
{ title:'H-0370 – 29. März 1916 – Feldpost', meta:'29.03.1916 · von Herbert Cram an Clara Cram', note:'', dragging:true },
|
||||
{ title:'H-0023 – 6. Juli 1916 – Feldpost', meta:'06.07.1916 · von Herbert Cram an Marie Cram', note:'', dragging:false },
|
||||
{ title:'H-0015 – 21. Juli 1916 – Feldpost', meta:'21.07.1916 · von Herbert Cram an Marie Cram', note:'Zehn Minuten vor dem Gang in Stellung geschrieben — einer der eindringlichsten Briefe des Archivs.', dragging:false },
|
||||
{ title:'H-0016 – 22. Juli 1916 – Feldpost', meta:'22.07.1916 · von Herbert Cram an Marie Cram', note:'', dragging:false },
|
||||
];
|
||||
const journeyItems = rawItems.map(it => {
|
||||
const base = 'background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px';
|
||||
const drag = 'background:var(--c-muted); border:1px solid var(--c-line); border-left:3px solid var(--c-accent); border-radius:2px; opacity:.85';
|
||||
return {
|
||||
...it,
|
||||
isLetter:true,
|
||||
hasNote: it.note.length > 0,
|
||||
noNote: it.note.length === 0,
|
||||
rowStyle: it.dragging ? drag : base,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
isNeu, isGeschichte, isLesereise,
|
||||
showSaveBar: isGeschichte || isLesereise,
|
||||
eyebrow:header.eyebrow, title:header.title, lede:header.lede,
|
||||
backLabel:header.back, backHref:header.backHref,
|
||||
toolbarButtons:this.toolbar(),
|
||||
persons, journeyPersons, journeyItems,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="geschichten" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:32px 32px 90px">
|
||||
|
||||
<a href="Geschichten.dc.html" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; margin-bottom:24px">← Zurück zu Geschichten</a>
|
||||
|
||||
<article style="max-width:880px; margin:0 auto; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:48px 56px 56px">
|
||||
|
||||
<!-- header -->
|
||||
<span style="display:inline-block; background:var(--c-accent-bg); border:1px solid var(--c-accent); color:var(--c-ink); padding:4px 11px; border-radius:4px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px">{{ badge }}</span>
|
||||
<h1 style="font-family:var(--font-serif); font-size:38px; font-weight:700; line-height:1.15; color:var(--c-ink); margin:0 0 22px">{{ title }}</h1>
|
||||
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--c-line)">
|
||||
<div style="display:flex; align-items:center; gap:12px">
|
||||
<span style="{{ author.a40 }}">{{ author.initials }}</span>
|
||||
<div>
|
||||
<div style="font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--c-ink)">{{ author.name }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:2px">{{ bylineMeta }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:14px">
|
||||
<button class="fa-link" style="background:var(--c-surface); border:1px solid var(--c-line); padding:9px 16px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer; border-radius:2px">Bearbeiten</button>
|
||||
<a href="#" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- intro -->
|
||||
<p style="{{ introStyle }}">{{ intro }}</p>
|
||||
|
||||
<sc-if value="{{ sectionHeading }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin:36px 0 16px; padding-top:28px; border-top:1px solid var(--c-line)">{{ sectionHeading }}</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- blocks -->
|
||||
<div style="margin-top:8px">
|
||||
<sc-for list="{{ blocks }}" as="b" hint-placeholder-count="6">
|
||||
<sc-if value="{{ b.isNarration }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="border-left:3px solid var(--c-accent); padding-left:22px; margin:30px 0">
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:18px; line-height:1.7; color:var(--c-ink-2); margin:0">{{ b.text }}</p>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ b.isLetter }}" hint-placeholder-val="{{ false }}">
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:16px; background:var(--c-surface); border:1px solid var(--c-line); padding:14px 18px; text-decoration:none; margin:10px 0">
|
||||
<span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center">{{ b.iconEl }}</span>
|
||||
<div style="flex:1; min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ b.title }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ b.meta }}</div>
|
||||
</div>
|
||||
<img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:18px; height:18px; opacity:.4; flex-shrink:0">
|
||||
</a>
|
||||
</sc-if>
|
||||
<sc-if value="{{ b.isNote }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="background:var(--c-accent-bg); border-left:3px solid var(--c-accent); padding:14px 18px; margin:2px 0 14px">
|
||||
<div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Anmerkung</div>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0">{{ b.text }}</p>
|
||||
</div>
|
||||
</sc-if>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1180,"height":1400},"variant":{"editor":"enum","options":["Lesereise","Sammlung"],"default":"Lesereise","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name, a40:{ ...base, width:40, height:40, fontSize:14 } };
|
||||
}
|
||||
|
||||
story(){
|
||||
const variant = this.props.variant || 'Lesereise';
|
||||
if (variant === 'Sammlung'){
|
||||
return {
|
||||
badge:'Sammlung',
|
||||
title:'Die Kinder: Briefe an und über Hannemarie, Clara-Eugenie und Kurt-Georg',
|
||||
dateVerb:'veröffentlicht am', date:'11. Juni 2026', introItalic:false,
|
||||
intro:'Herbert und Clara Cram hatten drei Kinder: Hannemarie, Clara-Eugenie und Kurt-Georg. Die Briefe dieser Sammlung drehen sich um sie – als Kleinkinder, als Schüler, als junge Erwachsene im Zweiten Weltkrieg. Clara schreibt an ihre Kinder, die Großeltern schreiben über sie, Freunde erkundigen sich nach ihnen. Clara-Eugenie dient bei der Flak, Walter kämpft an der Front, Hannemarie heiratet 1945 mitten im Krieg. Durch die Briefe der Eltern und Großeltern entsteht das Bild einer ganzen Generation, die im Schatten der großen Geschichte aufwuchs.',
|
||||
sectionHeading:'Erwähnte Dokumente',
|
||||
blocks:[
|
||||
{ kind:'letter', title:'W-0780 – 17. April 1894 – Ruhrort?', meta:'17.04.1894 · von Ella Dieckmann an Geschwister de Gruyter' },
|
||||
{ kind:'letter', title:'Eu-0078 – 5. Dezember 1895 – Ruhrort', meta:'05.12.1895 · von Eugenie de Gruyter an Walter de Gruyter' },
|
||||
{ kind:'letter', title:'Eu-0087 – 23. Dezember 1895 – Oberhausen', meta:'23.12.1895 · von Eugenie de Gruyter an Walter de Gruyter' },
|
||||
{ kind:'letter', title:'Eu-0092 – 11. Januar 1896 – Hückeswagen', meta:'11.01.1896 · von Eugenie de Gruyter an Walter de Gruyter' },
|
||||
{ kind:'letter', title:'Eu-0101 – 3. März 1896 – Ruhrort', meta:'03.03.1896 · von Eugenie de Gruyter an Walter de Gruyter' },
|
||||
],
|
||||
};
|
||||
}
|
||||
return {
|
||||
badge:'Lesereise',
|
||||
title:'Feldpost: Herbert an der Westfront 1914–1918',
|
||||
dateVerb:'zusammengestellt am', date:'11. Juni 2026', introItalic:true,
|
||||
intro:'Herbert Cram schreibt aus den Schützengräben nach Hause – an seine Frau Clara und seine Mutter Marie. Über 440 Feldpostbriefe in vier Jahren, allein 349 im Jahr 1918. Zwischen Pflichterfüllung und Sehnsucht: »In 10 Minuten gehe ich in Stellung zum ehrenvollen, heissen und schweren Kampfe.« Und kurz vor dem Waffenstillstand: »ich bin tatsächlich zu keiner Arbeit mehr zu brauchen, weil Du mir Tag u Nacht im Kopf herumspukst.«',
|
||||
sectionHeading:null,
|
||||
blocks:[
|
||||
{ kind:'narration', text:'Als die Mobilmachung am 1. August 1914 begann, wurde Herbert Cram eingezogen. Er war der Sohn von John James Cram aus Monterrey – aufgewachsen ohne den Vater, der in Mexiko lebte. Jetzt schrieb er selbst Feldpostbriefe. Die folgende Korrespondenz umfasst vier Kriegsjahre.' },
|
||||
{ kind:'letter', title:'H-0366 – 31. Oktober 1915 – Feldpost', meta:'31.10.1915 · von Herbert Cram an Clara Cram' },
|
||||
{ kind:'letter', title:'H-0367 – 20. Dezember 1915 – Feldpost', meta:'20.12.1915 · von Herbert Cram an Clara Cram' },
|
||||
{ kind:'narration', text:'1916. Die Schlachten bei Verdun und an der Somme fordern über eine Million Opfer. Herbert ist in Belgien stationiert. Er schreibt über Weihnachtsgrüße und Claras Ausflug nach Baden-Baden. Er schreibt alles – nur nicht über das, was er täglich vor Augen hat.' },
|
||||
{ kind:'letter', title:'H-0370 – 29. März 1916 – Feldpost', meta:'29.03.1916 · von Herbert Cram an Clara Cram' },
|
||||
{ kind:'letter', title:'H-0372 – 5. Mai 1916 – Feldpost', meta:'05.05.1916 · von Herbert Cram an Clara Cram' },
|
||||
{ kind:'letter', title:'H-0023 – 6. Juli 1916 – Feldpost', meta:'06.07.1916 · von Herbert Cram an Marie Cram' },
|
||||
{ kind:'note', text:'Herbert beschreibt einen gewaltigen Stadtbrand – Kathedrale, Warenhäuser. Vermutlich ein Ort in Belgien oder Nordfrankreich. Er schildert es nüchtern, fast wie ein Beobachter. Erst am Ende kommt ein Gruß an Clara.' },
|
||||
{ kind:'letter', title:'H-0014 – 21. Juli 1916 – Feldpost', meta:'21.07.1916 · von Herbert Cram an Marie Cram' },
|
||||
{ kind:'letter', title:'H-0015 – 21. Juli 1916 – Feldpost', meta:'21.07.1916 · von Herbert Cram an Marie Cram' },
|
||||
{ kind:'note', text:'Dieser Brief ist einer der eindringlichsten des Archivs. Herbert schrieb ihn am Morgen eines Gefechtstages – zehn Minuten, bevor er in Stellung ging. Er kehrte zurück.' },
|
||||
{ kind:'letter', title:'H-0016 – 22. Juli 1916 – Feldpost', meta:'22.07.1916 · von Herbert Cram an Marie Cram' },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
const s = this.story();
|
||||
const author = this.av('Marcel Raddatz');
|
||||
const blocks = s.blocks.map(b => ({
|
||||
...b,
|
||||
isNarration: b.kind==='narration',
|
||||
isLetter: b.kind==='letter',
|
||||
isNote: b.kind==='note',
|
||||
iconEl: b.kind==='letter' ? React.createElement('img', { className:'dgicon', src:'assets/icons/Mail-MD.svg', style:{ width:18, height:18, opacity:.5 } }) : null,
|
||||
}));
|
||||
const introStyle = { fontFamily:'var(--font-serif)', fontSize:18, lineHeight:1.75, margin:'0', fontStyle: s.introItalic ? 'italic' : 'normal', color: s.introItalic ? 'var(--c-ink-2)' : 'var(--c-ink)' };
|
||||
return {
|
||||
badge:s.badge, title:s.title, intro:s.intro, introStyle,
|
||||
bylineMeta: s.dateVerb + ' ' + s.date,
|
||||
sectionHeading: s.sectionHeading,
|
||||
author, blocks,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="geschichten" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Sammlungen</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Geschichten</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Kuratierte Erzählungen aus Briefen, Karten und Fotografien des Archivs.</p>
|
||||
</div>
|
||||
<button class="fa-link" style="display:inline-flex; align-items:center; gap:8px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 16px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Neue Geschichte</button>
|
||||
</div>
|
||||
|
||||
<!-- filter -->
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px">
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line)">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Alle</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Veröffentlicht</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">In Arbeit</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Entwurf</span>
|
||||
</div>
|
||||
<button class="fa-link" style="display:flex; align-items:center; gap:8px; background:var(--c-surface); border:1px solid var(--c-line); padding:9px 14px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); cursor:pointer">
|
||||
<img class="dgicon" src="assets/icons/Filter-MD.svg" style="width:15px; height:15px; opacity:.55"> Filter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:18px">
|
||||
<sc-for list="{{ stories }}" as="s" hint-placeholder-count="6">
|
||||
<a href="Geschichte.dc.html" class="fa-link" style="display:flex; flex-direction:column; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:22px 22px 20px; text-decoration:none">
|
||||
<div style="display:flex; gap:8px; margin-bottom:14px">
|
||||
<sc-for list="{{ s.tags }}" as="t" hint-placeholder-count="2">
|
||||
<span style="display:inline-flex; align-items:center; gap:6px; background:var(--c-muted); border:1px solid var(--c-line-2); padding:3px 9px; border-radius:4px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--c-ink)"><span style="{{ t.dot }}"></span>{{ t.l }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
<h3 style="font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); margin:0 0 8px; line-height:1.2">{{ s.title }}</h3>
|
||||
<p style="font-family:var(--font-serif); font-size:15px; line-height:1.55; color:var(--c-ink-2); margin:0 0 18px">{{ s.dek }}</p>
|
||||
<div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--c-line-2)">
|
||||
<img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
<span>{{ s.range }}</span><span>·</span><span>{{ s.docs }} Dokumente</span><span>·</span><span>{{ s.persons }} Personen</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; justify-content:space-between">
|
||||
<div style="display:flex; padding-left:6px">
|
||||
<sc-for list="{{ s.people }}" as="p" hint-placeholder-count="3">
|
||||
<span style="{{ p.a26 }}">{{ p.initials }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
<span style="display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)"><span style="{{ s.statusDot }}"></span>{{ s.status }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name, a26:{ ...base, width:26, height:26, fontSize:10, marginLeft:-6, border:'2px solid var(--c-surface)' } };
|
||||
}
|
||||
avs(names){ return names.map(n => this.av(n)); }
|
||||
|
||||
stories(){
|
||||
const raw = [
|
||||
{ title:'Die Briefe aus dem Harz', dek:'Eine Sommerkorrespondenz zwischen Frieda und ihrer Schwester, voller Wetterberichte und stiller Sehnsucht.', range:'1923–1925', docs:14, persons:4, status:'Veröffentlicht', tags:[{l:'Familie',d:'#5a8a6a'},{l:'Reise',d:'#c17a00'}], people:['Frieda Rose','Anna Bauer','Wilhelm Rose','Heinrich Rose'] },
|
||||
{ title:'Das Grundstück in Mariahilf', dek:'Ein Erbschaftsstreit, erzählt in nüchternen Geschäftsbriefen über drei Jahre.', range:'1925–1928', docs:9, persons:6, status:'In Arbeit', tags:[{l:'Recht',d:'#607080'},{l:'Wien',d:'#3060b0'}], people:['Otto Schmidt','Karl Müller','Margarete Hoffmann'] },
|
||||
{ title:'Wilhelms Lehrjahre', dek:'Briefe aus der Ausbildung — vom Heimweh bis zum ersten Lohn.', range:'1928–1931', docs:11, persons:3, status:'Entwurf', tags:[{l:'Arbeit',d:'#9a8040'}], people:['Wilhelm Rose','Frieda Rose'] },
|
||||
{ title:'Weihnachten bei den Roses', dek:'Glückwünsche und Grüße über drei Jahrzehnte hinweg gesammelt.', range:'1919–1948', docs:23, persons:9, status:'Veröffentlicht', tags:[{l:'Familie',d:'#5a8a6a'},{l:'Fest',d:'#c0446e'}], people:['Margarete Hoffmann','Heinrich Rose','Elise Vogt','Anna Bauer'] },
|
||||
{ title:'Postkarten einer Reise', dek:'Wien, Triest, Venedig — Ansichten und kurze Zeilen von unterwegs.', range:'1924', docs:7, persons:2, status:'In Arbeit', tags:[{l:'Reise',d:'#c17a00'}], people:['Karl Müller','Frieda Rose'] },
|
||||
{ title:'Stimmen aus dem Feld', dek:'Feldpost und Heimatbriefe der Jahre 1914 bis 1918.', range:'1914–1918', docs:18, persons:5, status:'Entwurf', tags:[{l:'Krieg',d:'#a0522d'}], people:['Heinrich Rose','Otto Schmidt','Wilhelm Rose'] },
|
||||
];
|
||||
return raw.map(s => {
|
||||
const sc = ({'Veröffentlicht':'#5a8a6a','In Arbeit':'#c17a00','Entwurf':'#607080'})[s.status] || '#607080';
|
||||
return { ...s, people:this.avs(s.people),
|
||||
statusDot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:sc, flexShrink:0 },
|
||||
tags:s.tags.map(t => ({ l:t.l, dot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:t.d, flexShrink:0 } })) };
|
||||
});
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
return { stories: this.stories() };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<!-- active="hilfe" is intentionally NOT a nav key → nothing in ArchiveHeader highlights -->
|
||||
<dc-import name="ArchiveHeader" active="hilfe" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:880px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- §3 PageHeader -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Hilfe</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Transkription</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:560px">Damit alle Briefe einheitlich übertragen werden — gleich, wer am Schreibtisch sitzt — finden Sie hier die Konventionen für das Familienarchiv.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- intro paragraph (Tinos) -->
|
||||
<p style="font-family:var(--font-serif); font-size:18px; line-height:1.75; color:var(--c-ink); margin:0 0 28px; max-width:760px">Die Briefe dieses Archivs sind in <em>Kurrent</em> und <em>Sütterlin</em> geschrieben — der deutschen Schreibschrift des späten 19. und frühen 20. Jahrhunderts. Übertragen Sie den Text so getreu wie möglich, ohne ihn zu modernisieren. Wo Sie unsicher sind, machen Sie die Unsicherheit sichtbar, statt sie zu verstecken. Diese Seite wächst mit: sobald wir eine neue Konvention beschließen, landet sie hier.</p>
|
||||
|
||||
<!-- Wikipedia / Weiterführend card (3px mint top) -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px; margin-bottom:36px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Weiterführend</h2>
|
||||
<p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0 0 16px">Die Kurrent- und Sütterlin-Alphabete sind bei Wikipedia ausführlich erklärt — mit Buchstabentafeln zum Vergleichen. Hier auf dieser Seite stehen nur unsere eigenen Vereinbarungen für dieses Archiv.</p>
|
||||
<!-- EXTERNAL link: in production this carries rel="noopener noreferrer" + target="_blank" -->
|
||||
<a href="https://de.wikipedia.org/wiki/Kurrentschrift" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--c-ink); text-decoration:underline; text-decoration-color:var(--c-accent); text-decoration-thickness:2px; text-underline-offset:3px">
|
||||
<span>Kurrentschrift auf Wikipedia</span>
|
||||
<img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Rules section caption -->
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 18px">Regeln für die Transkription</h2>
|
||||
|
||||
<!-- Rule cards (RichtlinienRuleCard pattern) -->
|
||||
<div style="display:flex; flex-direction:column; gap:16px; margin-bottom:40px">
|
||||
<sc-for list="{{ rules }}" as="r" hint-placeholder-count="6">
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:22px 24px">
|
||||
<div style="display:flex; align-items:center; gap:12px; margin-bottom:10px">
|
||||
<span style="width:36px; height:36px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); border-radius:2px; display:flex; align-items:center; justify-content:center">{{ r.iconEl }}</span>
|
||||
<h3 style="font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">{{ r.title }}</h3>
|
||||
</div>
|
||||
<p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0">{{ r.body }}</p>
|
||||
|
||||
<!-- example block on subtle --c-muted background: Kurrent snippet vs transcription -->
|
||||
<sc-if value="{{ r.hasExample }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="background:var(--c-muted); border:1px solid var(--c-line-2); border-radius:2px; padding:14px 16px; margin-top:16px">
|
||||
<div style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Beispiel</div>
|
||||
<div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap">
|
||||
<span style="font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--c-ink-2); {{ r.inStyle }}">{{ r.in }}</span>
|
||||
<img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:14px; height:14px; opacity:.4; flex-shrink:0">
|
||||
<span style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink)">{{ r.out }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<!-- In Klärung section -->
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 10px">In Klärung</h2>
|
||||
<p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0 0 16px; max-width:760px">Diese Fragen besprechen wir noch. Stoßen Sie beim Transkribieren darauf, treffen Sie eine plausible Wahl und notieren Sie sie im Kommentar des Blocks.</p>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px">
|
||||
<sc-for list="{{ klaerungChips }}" as="c" hint-placeholder-count="5">
|
||||
<span style="display:inline-flex; align-items:center; gap:7px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:999px; padding:7px 14px">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:#c17a00; flex-shrink:0"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2)">{{ c }}</span>
|
||||
</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<!-- closing card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<div style="display:flex; align-items:center; gap:12px; margin-bottom:10px">
|
||||
<span style="width:36px; height:36px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); border-radius:2px; display:flex; align-items:center; justify-content:center">
|
||||
<img class="dgicon" src="assets/icons/Chat-MD.svg" style="width:18px; height:18px; opacity:.5">
|
||||
</span>
|
||||
<h3 style="font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">Fehlt eine Regel?</h3>
|
||||
</div>
|
||||
<p style="font-family:var(--font-serif); font-size:16px; line-height:1.65; color:var(--c-ink-2); margin:0">Stolpern Sie über eine Situation, die hier nicht steht — schreiben Sie einen Kommentar beim betreffenden Block. Wir sammeln die offenen Fälle und besprechen sie beim nächsten Familientreffen.</p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
icon(src){
|
||||
return React.createElement('img', { className:'dgicon', src:'assets/icons/' + src, style:{ width:18, height:18, opacity:.5 } });
|
||||
}
|
||||
renderVals(){
|
||||
const rules = [
|
||||
{
|
||||
icon:'Mag-Glass-MD.svg',
|
||||
title:'Nicht lesbare Wörter',
|
||||
body:'Wenn Sie ein Wort beim besten Willen nicht entziffern können, schreiben Sie [unleserlich]. Lassen Sie nichts einfach weg — die Lücke fällt anderen sonst nicht auf.',
|
||||
hasExample:true,
|
||||
in:'…und ſende Dir ▢▢▢ Grüße',
|
||||
out:'und sende Dir [unleserlich] Grüße',
|
||||
},
|
||||
{
|
||||
icon:'Edit-Content-MD.svg',
|
||||
title:'Durchgestrichene Wörter',
|
||||
body:'Auch durchgestrichener Text gehört zum Brief. Übernehmen Sie ihn in eckigen Klammern mit dem Präfix „durchgestrichen".',
|
||||
hasExample:true,
|
||||
in:'der Text',
|
||||
inStrike:true,
|
||||
out:'[durchgestrichen: der Text]',
|
||||
},
|
||||
{
|
||||
icon:'Check-MD.svg',
|
||||
title:'Das lange s (ſ)',
|
||||
body:'Das ſ ist nur eine alte Schriftform des Buchstabens s — kein eigener Laut. Schreiben Sie immer ein normales s.',
|
||||
hasExample:true,
|
||||
in:'Straße, Poſthaus, Schloſs',
|
||||
out:'Straße, Posthaus, Schloss',
|
||||
},
|
||||
{
|
||||
icon:'View-More-MD.svg',
|
||||
title:'Unsichere Lesart',
|
||||
body:'Wenn Sie ein Wort oder einen Namen zu erkennen meinen, aber nicht sicher sind, ergänzen Sie ein Fragezeichen in eckigen Klammern direkt dahinter.',
|
||||
hasExample:true,
|
||||
in:'Grüße an Tante Mar…',
|
||||
out:'Grüße an Tante [Marie?]',
|
||||
},
|
||||
{
|
||||
icon:'Edit-Content-MD.svg',
|
||||
title:'Originalschreibung bewahren',
|
||||
body:'Übernehmen Sie Rechtschreibung, Zeichensetzung und alte Wortformen genau so, wie sie dastehen. Modernisieren Sie nicht. Anführungen setzen Sie als „…", längere wörtliche Reden bleiben unverändert.',
|
||||
hasExample:true,
|
||||
in:'Theil, Thür, giebt es',
|
||||
out:'Theil, Thür, giebt es',
|
||||
},
|
||||
{
|
||||
icon:'Chat-MD.svg',
|
||||
title:'Dialekt, Fremdwörter, Zitate',
|
||||
body:'Plattdeutsch, Französisch, lateinische Phrasen — wörtlich übernehmen, genau wie sie geschrieben stehen. Übersetzen Sie nicht und glätten Sie nichts.',
|
||||
hasExample:false,
|
||||
},
|
||||
];
|
||||
|
||||
const mapped = rules.map(r => ({
|
||||
...r,
|
||||
iconEl: this.icon(r.icon),
|
||||
inStyle: r.inStrike ? 'text-decoration:line-through' : '',
|
||||
}));
|
||||
|
||||
return {
|
||||
rules: mapped,
|
||||
klaerungChips: ['Abkürzungen', 'Datumsformate', 'Originale Zeilenumbrüche', 'Alte Groß- und Kleinschreibung'],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
@media (max-width: 760px){ .pd-grid{ grid-template-columns:1fr !important } }
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="personen" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- PageHeader (§3) -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Person</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ person.name }}</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">{{ person.lede }}</p>
|
||||
</div>
|
||||
<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Bearbeiten</button>
|
||||
</div>
|
||||
|
||||
<!-- 2-column layout: 340px left, flexible right; wraps on narrow -->
|
||||
<div class="pd-grid" style="display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start">
|
||||
|
||||
<!-- ════════ LEFT COLUMN ════════ -->
|
||||
<div style="display:flex; flex-direction:column; gap:24px">
|
||||
|
||||
<!-- Identity card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<div style="display:flex; align-items:flex-start; gap:14px">
|
||||
<span style="{{ person.a48 }}">{{ person.initials }}</span>
|
||||
<div style="flex:1; min-width:0">
|
||||
<h2 style="font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">{{ person.name }}</h2>
|
||||
<sc-if value="{{ person.badge }}" hint-placeholder-val="{{ false }}">
|
||||
<span style="{{ person.badge.style }}">{{ person.badge.label }}</span>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<sc-if value="{{ person.alias }}" hint-placeholder-val="{{ false }}">
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:14px 0 0">„{{ person.alias }}"</p>
|
||||
</sc-if>
|
||||
|
||||
<p style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3); margin:12px 0 0">
|
||||
<span aria-hidden="true">*</span> {{ person.birthYear }} <span style="margin:0 4px">–</span> <span aria-hidden="true">†</span> {{ person.deathYear }}
|
||||
</p>
|
||||
|
||||
<div style="height:1px; background:var(--c-line-2); margin:18px 0"></div>
|
||||
|
||||
<!-- MetaLine (§8) -->
|
||||
<div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
<span>{{ person.letters }} Briefe</span><span>·</span><span>{{ person.docs }} Dokumente</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Namensverlauf card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Namensverlauf</h2>
|
||||
<ol style="list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px">
|
||||
<sc-for list="{{ nameHistory }}" as="n" hint-placeholder-count="3">
|
||||
<li style="display:flex; align-items:baseline; gap:10px">
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap; min-width:74px">{{ n.kind }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink)">{{ n.name }}</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-left:auto; white-space:nowrap">{{ n.year }}</span>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ════════ RIGHT COLUMN ════════ -->
|
||||
<div style="display:flex; flex-direction:column; gap:24px; min-width:0">
|
||||
|
||||
<!-- Korrespondenten card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Korrespondenten</h2>
|
||||
<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px">
|
||||
<sc-for list="{{ correspondents }}" as="c" hint-placeholder-count="5">
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:12px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; padding:8px 12px; text-decoration:none">
|
||||
<span style="{{ c.a40 }}">{{ c.initials }}</span>
|
||||
<div style="flex:1; min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ c.name }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-top:2px">{{ c.meta }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Beziehungen card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Beziehungen</h2>
|
||||
<ul style="list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px">
|
||||
<sc-for list="{{ relationships }}" as="r" hint-placeholder-count="4">
|
||||
<li style="display:flex; align-items:center; gap:12px">
|
||||
<span style="flex-shrink:0; min-width:96px; background:var(--c-muted); color:var(--c-ink-2); border:1px solid var(--c-line); border-radius:4px; padding:4px 10px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:center">{{ r.role }}</span>
|
||||
<a href="#" class="fa-link" style="flex:1; min-width:0; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ r.name }}</a>
|
||||
<span style="flex-shrink:0; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); white-space:nowrap">{{ r.dates }}</span>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Briefe — Gesendet -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0">Briefe — Gesendet</h2>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ sentCount }} gesamt</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:10px">
|
||||
<sc-for list="{{ sentLetters }}" as="b" hint-placeholder-count="4">
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:16px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; padding:12px 16px; text-decoration:none">
|
||||
<span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center">{{ b.iconEl }}</span>
|
||||
<div style="flex:1; min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ b.title }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ b.meta }}</div>
|
||||
</div>
|
||||
<img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:18px; height:18px; opacity:.4; flex-shrink:0">
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Briefe — Empfangen -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0">Briefe — Empfangen</h2>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ receivedCount }} gesamt</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:10px">
|
||||
<sc-for list="{{ receivedLetters }}" as="b" hint-placeholder-count="4">
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:16px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; padding:12px 16px; text-decoration:none">
|
||||
<span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center">{{ b.iconEl }}</span>
|
||||
<div style="flex:1; min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ b.title }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ b.meta }}</div>
|
||||
</div>
|
||||
<img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:18px; height:18px; opacity:.4; flex-shrink:0">
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Geschichten card -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Geschichten</h2>
|
||||
<div style="display:flex; flex-direction:column; gap:10px">
|
||||
<sc-for list="{{ stories }}" as="g" hint-placeholder-count="2">
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:16px; min-height:44px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; padding:12px 16px; text-decoration:none">
|
||||
<span style="width:40px; height:40px; flex-shrink:0; background:var(--c-muted); border:1px solid var(--c-line-2); display:flex; align-items:center; justify-content:center">{{ g.iconEl }}</span>
|
||||
<div style="flex:1; min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:17px; color:var(--c-ink); line-height:1.3">{{ g.title }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:3px">{{ g.meta }}</div>
|
||||
</div>
|
||||
<img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:18px; height:18px; opacity:.4; flex-shrink:0">
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
mailIcon(){
|
||||
return React.createElement('img', { className:'dgicon', src:'assets/icons/Mail-MD.svg', style:{ width:18, height:18, opacity:.5 } });
|
||||
}
|
||||
bookIcon(){
|
||||
return React.createElement('img', { className:'dgicon', src:'assets/icons/Library-MD.svg', style:{ width:18, height:18, opacity:.5 } });
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
const person = {
|
||||
...this.av('Clara Cram'),
|
||||
lede:'Ehefrau von Herbert · 1885–1962',
|
||||
alias:'Clärchen',
|
||||
birthYear:'1885',
|
||||
deathYear:'1962',
|
||||
letters:118,
|
||||
docs:142,
|
||||
badge:null,
|
||||
};
|
||||
|
||||
const nameHistory = [
|
||||
{ kind:'Geburtsname', name:'Clara de Gruyter', year:'1885' },
|
||||
{ kind:'Verheiratet', name:'Clara Cram', year:'1908' },
|
||||
{ kind:'Verwitwet', name:'Clara Cram, geb. de Gruyter', year:'1949' },
|
||||
];
|
||||
|
||||
const correspondents = [
|
||||
{ name:'Herbert Cram', meta:'74 Briefe' },
|
||||
{ name:'Marie Cram', meta:'19 Briefe' },
|
||||
{ name:'Eugenie de Gruyter', meta:'12 Briefe' },
|
||||
{ name:'Hannemarie Cram', meta:'8 Briefe' },
|
||||
{ name:'Walter de Gruyter', meta:'5 Briefe' },
|
||||
].map(c => ({ ...this.av(c.name), meta:c.meta }));
|
||||
|
||||
const relationships = [
|
||||
{ role:'Ehemann', name:'Herbert Cram', dates:'1908–1949' },
|
||||
{ role:'Tochter', name:'Hannemarie Cram', dates:'* 1910' },
|
||||
{ role:'Tochter', name:'Clara-Eugenie Cram', dates:'* 1913' },
|
||||
{ role:'Sohn', name:'Kurt-Georg Cram', dates:'* 1916' },
|
||||
{ role:'Mutter', name:'Eugenie de Gruyter', dates:'1860–1934' },
|
||||
];
|
||||
|
||||
const sentCount = 74;
|
||||
const sentLetters = [
|
||||
{ title:'C-0211 – 4. März 1916 – Wiesbaden', meta:'04.03.1916 · von Clara Cram an Herbert Cram' },
|
||||
{ title:'C-0214 – 19. Mai 1916 – Wiesbaden', meta:'19.05.1916 · von Clara Cram an Herbert Cram' },
|
||||
{ title:'C-0240 – 2. Oktober 1917 – Bad Ems', meta:'02.10.1917 · von Clara Cram an Herbert Cram' },
|
||||
{ title:'C-0098 – 11. Juli 1918 – Wiesbaden', meta:'11.07.1918 · von Clara Cram an Marie Cram' },
|
||||
];
|
||||
|
||||
const receivedCount = 44;
|
||||
const receivedLetters = [
|
||||
{ title:'H-0366 – 31. Oktober 1915 – Feldpost', meta:'31.10.1915 · von Herbert Cram an Clara Cram' },
|
||||
{ title:'H-0370 – 29. März 1916 – Feldpost', meta:'29.03.1916 · von Herbert Cram an Clara Cram' },
|
||||
{ title:'Eu-0341 – 8. April 1917 – Ruhrort', meta:'08.04.1917 · von Eugenie de Gruyter an Clara Cram' },
|
||||
{ title:'H-0405 – 2. November 1918 – Feldpost', meta:'02.11.1918 · von Herbert Cram an Clara Cram' },
|
||||
];
|
||||
|
||||
const stories = [
|
||||
{ title:'Feldpost: Herbert an der Westfront 1914–1918', meta:'Lesereise · 18 Briefe' },
|
||||
{ title:'Die Kinder: Briefe an und über Hannemarie, Clara-Eugenie und Kurt-Georg', meta:'Sammlung · 31 Dokumente' },
|
||||
];
|
||||
|
||||
const withMail = (arr) => arr.map(b => ({ ...b, iconEl:this.mailIcon() }));
|
||||
const withBook = (arr) => arr.map(g => ({ ...g, iconEl:this.bookIcon() }));
|
||||
|
||||
return {
|
||||
person, nameHistory, correspondents, relationships,
|
||||
sentCount, sentLetters:withMail(sentLetters),
|
||||
receivedCount, receivedLetters:withMail(receivedLetters),
|
||||
stories:withBook(stories),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,268 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="personen" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:780px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- back link -->
|
||||
<a href="Personen.dc.html" class="fa-link" style="display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none; margin-bottom:24px">← Zurück zu Personen</a>
|
||||
|
||||
<!-- PageHeader (§3) -->
|
||||
<div style="margin-bottom:30px; border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">{{ eyebrow }}</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ title }}</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">{{ lede }}</p>
|
||||
</div>
|
||||
|
||||
<!-- ─── Stammdaten ─── -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Stammdaten</h2>
|
||||
|
||||
<!-- Personentyp — segmented control (§5/§6) -->
|
||||
<div style="margin-bottom:22px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Personentyp</div>
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
|
||||
<sc-for list="{{ typeSegments }}" as="seg" hint-placeholder-count="4">
|
||||
<span class="fa-link" style="{{ seg.style }}">{{ seg.label }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Anrede/Titel + Vorname -->
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Anrede / Titel</span>
|
||||
<input value="{{ f.title }}" placeholder="z.B. Frau, Dr." style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname *</span>
|
||||
<input value="{{ f.firstName }}" placeholder="z.B. Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Nachname -->
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname *</span>
|
||||
<input value="{{ f.lastName }}" placeholder="z.B. Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<!-- Aliasnamen -->
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Aliasnamen</span>
|
||||
<input value="{{ f.alias }}" placeholder="z.B. Clärchen, geb. de Gruyter" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
|
||||
<!-- Lebensdaten: Geburtsdatum + Sterbedatum with precision hint -->
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px">
|
||||
<div>
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Geburtsdatum</span>
|
||||
<input value="{{ f.birthDate }}" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
|
||||
<span>Genauigkeit:</span><span style="color:var(--c-ink-2)">Tag</span><span>·</span><span>Monat</span><span>·</span><span>Jahr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Sterbedatum</span>
|
||||
<input value="{{ f.deathDate }}" placeholder="TT.MM.JJJJ" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
|
||||
<span>Genauigkeit:</span><span>Tag</span><span>·</span><span>Monat</span><span>·</span><span style="color:var(--c-ink-2)">Jahr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generation (select) -->
|
||||
<label style="display:block; margin-bottom:18px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Generation</span>
|
||||
<div style="position:relative">
|
||||
<select style="width:100%; appearance:none; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px; cursor:pointer; min-height:44px">
|
||||
<option>Keine Generation</option>
|
||||
<option>G 0</option><option>G 1</option><option selected>G 2</option>
|
||||
<option>G 3</option><option>G 4</option><option>G 5</option><option>G 6</option>
|
||||
</select>
|
||||
<span style="position:absolute; right:14px; top:50%; transform:translateY(-50%); font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); pointer-events:none">▾</span>
|
||||
</div>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:7px 0 0">Ordnet die Person einer Generation im Stammbaum zu.</p>
|
||||
</label>
|
||||
|
||||
<!-- Notizen (textarea) -->
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Notizen</span>
|
||||
<textarea rows="4" placeholder="Anmerkungen zu dieser Person…" style="width:100%; resize:vertical; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink); outline:none; border-radius:2px">{{ f.notes }}</textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- ─── Namensverlauf ─── -->
|
||||
<div style="margin-top:24px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Namensverlauf</h2>
|
||||
|
||||
<sc-if value="{{ hasAliases }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="margin-bottom:18px">
|
||||
<sc-for list="{{ aliasRows }}" as="a" hint-placeholder-count="3">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--c-line-2)">
|
||||
<div style="display:flex; align-items:baseline; gap:10px; min-width:0">
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); white-space:nowrap">{{ a.kind }}</span>
|
||||
<span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">{{ a.name }}</span>
|
||||
</div>
|
||||
<a href="#" title="Diesen Namen entfernen" class="fa-link" style="display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Entfernen</a>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ noAliases }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="border:1px dashed var(--c-line); border-radius:2px; padding:28px 24px; text-align:center; margin-bottom:18px">
|
||||
<div style="font-family:var(--font-serif); font-size:18px; color:var(--c-ink); margin-bottom:6px">Noch keine früheren Namen erfasst.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Ergänzen Sie Geburts- oder Ehenamen unten…</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- add row -->
|
||||
<div style="border-top:1px solid var(--c-line); padding-top:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:12px">Namen hinzufügen</div>
|
||||
<div style="display:grid; grid-template-columns:160px 1fr 1fr auto; gap:12px; align-items:end">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Art</span>
|
||||
<div style="position:relative">
|
||||
<select style="width:100%; appearance:none; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 36px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px; cursor:pointer; min-height:44px">
|
||||
<option>Geburtsname</option><option>Ehename (verwitwet)</option><option>Ehename (geschieden)</option><option>Sonstiger</option>
|
||||
</select>
|
||||
<span style="position:absolute; right:12px; top:50%; transform:translateY(-50%); font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); pointer-events:none">▾</span>
|
||||
</div>
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname</span>
|
||||
<input placeholder="z.B. de Gruyter" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname</span>
|
||||
<input placeholder="z.B. Clara" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Hinzufügen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── Zusammenführen (danger zone) — edit only ─── -->
|
||||
<sc-if value="{{ isEdit }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="margin-top:24px; background:var(--c-surface); border:1px solid var(--c-danger); border-top:3px solid var(--c-danger); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-danger); margin:0 0 6px">Zusammenführen</h2>
|
||||
<p style="font-family:var(--font-serif); font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0 0 18px; max-width:520px">Diese Person in eine andere überführen. Alle Briefe und Verknüpfungen wandern zur Zielperson — <span style="font-style:italic">{{ title }}</span> wird danach gelöscht.</p>
|
||||
|
||||
<div style="display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap">
|
||||
<label style="display:block; flex:1; min-width:240px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); margin-bottom:6px">Zielperson</span>
|
||||
<div style="position:relative">
|
||||
<input placeholder="Person suchen…" style="width:100%; border:1px solid var(--c-danger); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</label>
|
||||
<button disabled class="fa-link" title="Wählen Sie zuerst eine Zielperson" style="background:var(--c-surface); color:var(--c-danger); border:1px solid var(--c-danger); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:2px; opacity:.4; cursor:not-allowed">Zusammenführen</button>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ─── Save bar ─── -->
|
||||
<div style="margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--c-surface); border:1px solid var(--c-line); box-shadow:var(--shadow-sm); border-radius:2px; padding:16px 24px">
|
||||
<a href="{{ discardHref }}" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Verwerfen</a>
|
||||
<div style="display:flex; align-items:center; gap:18px">
|
||||
<sc-if value="{{ isEdit }}" hint-placeholder-val="{{ true }}">
|
||||
<a href="#" class="fa-link" style="display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none">Löschen</a>
|
||||
</sc-if>
|
||||
<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">{{ saveLabel }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1180,"height":1500},"variant":{"editor":"enum","options":["neu","bearbeiten"],"default":"bearbeiten","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
segments(activeLabel){
|
||||
const labels = ['Person','Institution','Gruppe','Unbekannt'];
|
||||
return labels.map((label, i) => {
|
||||
const active = label === activeLabel;
|
||||
const style = {
|
||||
fontFamily:'var(--font-sans)', fontSize:12, fontWeight:700, letterSpacing:'.08em',
|
||||
textTransform:'uppercase', padding:'10px 16px', cursor:'pointer',
|
||||
background: active ? 'var(--c-primary)' : 'var(--c-surface)',
|
||||
color: active ? 'var(--c-primary-fg)' : 'var(--c-ink-2)',
|
||||
};
|
||||
if (i > 0) style.borderLeft = '1px solid var(--c-line)';
|
||||
return { label, style };
|
||||
});
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
const variant = this.props.variant || 'bearbeiten';
|
||||
const isEdit = variant === 'bearbeiten';
|
||||
|
||||
const editing = {
|
||||
title:'Frau', firstName:'Clara', lastName:'Cram', alias:'Clärchen, geb. de Gruyter',
|
||||
birthDate:'24.09.1871', deathDate:'1953',
|
||||
notes:'Ehefrau von Herbert Cram. Über 440 Feldpostbriefe an sie gerichtet (1914–1918). Tochter von Walter und Eugenie de Gruyter.',
|
||||
};
|
||||
const blank = {
|
||||
title:'', firstName:'', lastName:'', alias:'',
|
||||
birthDate:'', deathDate:'', notes:'',
|
||||
};
|
||||
const f = isEdit ? editing : blank;
|
||||
|
||||
const aliasRows = [
|
||||
{ kind:'Geburtsname', name:'Clara de Gruyter' },
|
||||
{ kind:'Ehename', name:'Clara Cram' },
|
||||
];
|
||||
|
||||
const fullName = ((f.firstName + ' ' + f.lastName).trim()) || 'Neue Person';
|
||||
|
||||
return {
|
||||
isEdit,
|
||||
eyebrow: isEdit ? 'Person bearbeiten' : 'Neue Person',
|
||||
title: isEdit ? fullName : 'Neue Person',
|
||||
lede: isEdit
|
||||
? 'Pflegen Sie Stammdaten, Lebensdaten und Namensverlauf dieser Person.'
|
||||
: 'Legen Sie eine neue Person, Institution oder Gruppe für das Archiv an.',
|
||||
f,
|
||||
typeSegments: this.segments('Person'),
|
||||
hasAliases: isEdit,
|
||||
noAliases: !isEdit,
|
||||
aliasRows,
|
||||
discardHref: isEdit ? 'Person.dc.html' : 'Personen.dc.html',
|
||||
saveLabel: isEdit ? 'Änderungen speichern' : 'Person anlegen',
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="personen" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- PAGE HEADER (§3) -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Prüfen</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Personen prüfen</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Vom Import erzeugte, noch nicht bestätigte Personen. Bitte prüfen Sie jeden Eintrag — bestätigen, umbenennen, zusammenführen oder löschen.</p>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">12 zu prüfen</span>
|
||||
</div>
|
||||
|
||||
<!-- REVIEW ROWS -->
|
||||
<div style="display:flex; flex-direction:column; gap:14px">
|
||||
<sc-for list="{{ rows }}" as="r" hint-placeholder-count="4">
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:18px 20px">
|
||||
|
||||
<!-- ROW HEADER (always shown) -->
|
||||
<div style="display:flex; align-items:center; gap:14px; flex-wrap:wrap">
|
||||
<!-- 40px MUTED avatar — deliberate "unbestätigt" signal, never a colored avatar -->
|
||||
<span style="width:40px; height:40px; flex-shrink:0; border-radius:999px; background:var(--c-muted); display:inline-flex; align-items:center; justify-content:center" title="Unbestätigt">
|
||||
<img class="dgicon" src="assets/icons/Account-MD.svg" style="width:20px; height:20px; opacity:.5">
|
||||
</span>
|
||||
|
||||
<div style="flex:1; min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--c-ink); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">{{ r.name }}</div>
|
||||
<!-- MetaLine (§8) -->
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-top:4px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
<span>{{ r.docs }} Dokumente</span><span>·</span><span>zuerst gesehen {{ r.firstSeen }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ACTION CLUSTER — segmented-style button group + danger -->
|
||||
<div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap">
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
|
||||
<span class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 15px; cursor:pointer">Bestätigen</span>
|
||||
<span class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 15px; border-left:1px solid var(--c-line); cursor:pointer">Umbenennen</span>
|
||||
<span class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 15px; border-left:1px solid var(--c-line); cursor:pointer">Zusammenführen</span>
|
||||
</div>
|
||||
<a href="#" class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-danger); text-decoration:none; padding:0 6px">Löschen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UMBENENNEN sub-panel (§7 fields) -->
|
||||
<sc-if value="{{ r.rename }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="margin-top:16px; background:var(--c-muted); border-radius:2px; padding:18px 18px 16px">
|
||||
<div style="display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap">
|
||||
<label style="display:block; flex:1; min-width:160px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname</span>
|
||||
<input value="Margarethe" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block; flex:1; min-width:160px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname</span>
|
||||
<input value="Cram" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<div style="display:flex; gap:10px">
|
||||
<button class="fa-link" style="background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
|
||||
<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ZUSAMMENFÜHREN sub-panel — typeahead + disabled-until-selected danger merge -->
|
||||
<sc-if value="{{ r.merge }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="margin-top:16px; background:var(--c-muted); border-radius:2px; padding:18px 18px 16px">
|
||||
<div style="display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap">
|
||||
<label style="display:block; flex:1; min-width:220px">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Mit welcher Person zusammenführen?</span>
|
||||
<div style="position:relative">
|
||||
<input placeholder="z.B. Clara Cram, Herbert Cram…" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
</label>
|
||||
<button title="Bitte zuerst eine Zielperson wählen" style="background:var(--c-danger); color:#fff; border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:not-allowed; border-radius:2px; opacity:.4">Zusammenführen</button>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<!-- EMPTY STATE (§10) — shown as a quiet reference of the "nothing left" terminal state -->
|
||||
<div style="margin-top:14px; border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center">
|
||||
<div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Keine Personen zu prüfen.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Alle Einträge wurden bestätigt — neue erscheinen nach dem nächsten Import…</div>
|
||||
</div>
|
||||
|
||||
<!-- PAGINATION FOOTER -->
|
||||
<div style="margin-top:28px; display:flex; align-items:center; justify-content:center; gap:8px">
|
||||
<a href="#" class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3); border:1px solid var(--c-line); background:var(--c-surface); padding:10px 16px; text-decoration:none; border-radius:2px">Zurück</a>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:11px 15px; border-radius:2px">1</span>
|
||||
<a href="#" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); border:1px solid var(--c-line); background:var(--c-surface); padding:11px 15px; text-decoration:none; border-radius:2px">2</span>
|
||||
<a href="#" class="fa-link" style="min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); border:1px solid var(--c-line); background:var(--c-surface); padding:10px 16px; text-decoration:none; border-radius:2px">Weiter</a>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- CONFIRM DIALOG OVERLAY (destructive delete) — bg-black/20, NO blur (§8) -->
|
||||
<div style="position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; padding:24px">
|
||||
<div style="width:100%; max-width:440px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-md); border-radius:2px; padding:28px 26px">
|
||||
<h2 style="font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); margin:0 0 10px; line-height:1.2">Person löschen</h2>
|
||||
<p style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink-2); margin:0 0 22px; line-height:1.55">Diese Person wird endgültig gelöscht. Dokumentverweise bleiben erhalten, verlieren aber diese Person.</p>
|
||||
<div style="display:flex; justify-content:flex-end; gap:10px">
|
||||
<button class="fa-link" style="background:var(--c-surface); color:var(--c-ink-2); border:1px solid var(--c-line); padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Abbrechen</button>
|
||||
<button class="fa-link" style="background:var(--c-danger); color:#fff; border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Löschen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
rows(){
|
||||
// Each row shows a different triage state across the list.
|
||||
return [
|
||||
{ name:'Margarethe Cram', docs:5, firstSeen:'03.1916', rename:true, merge:false }, // UMBENENNEN expanded
|
||||
{ name:'Unbekannter Absender', docs:8, firstSeen:'07.1917', rename:false, merge:false }, // IDLE
|
||||
{ name:'H. Cram', docs:12, firstSeen:'11.1914', rename:false, merge:true }, // ZUSAMMENFÜHREN expanded
|
||||
{ name:'Eugenie de Gruyter', docs:3, firstSeen:'02.1920', rename:false, merge:false }, // IDLE
|
||||
];
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
return { rows: this.rows() };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="personen" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Verzeichnis</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Personen</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Jede Hand, die schrieb oder genannt wurde — Absender, Empfänger, Erwähnte.</p>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">38 Personen</span>
|
||||
</div>
|
||||
|
||||
<!-- search + filter -->
|
||||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap">
|
||||
<div style="position:relative; flex:1; min-width:240px">
|
||||
<input placeholder="z.B. Oma Frieda, Onkel Karl…" style="width:100%; box-sizing:border-box; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 40px 11px 14px; font-family:var(--font-serif); font-size:15px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
<img class="dgicon" src="assets/icons/Mag-Glass-MD.svg" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.4">
|
||||
</div>
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line)">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:10px 16px; cursor:pointer">Alle</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Personen</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Institutionen</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Gruppen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:18px">
|
||||
<sc-for list="{{ people }}" as="p" hint-placeholder-count="9">
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:20px">
|
||||
<div style="display:flex; align-items:flex-start; gap:14px">
|
||||
<span style="{{ p.a48 }}">{{ p.initials }}</span>
|
||||
<div style="flex:1; min-width:0">
|
||||
<h3 style="font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">{{ p.name }}</h3>
|
||||
<div style="margin-top:3px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ p.relation }}</div>
|
||||
</div>
|
||||
<sc-if value="{{ p.badge }}" hint-placeholder-val="{{ false }}">
|
||||
<span style="{{ p.badge.style }}">{{ p.badge.label }}</span>
|
||||
</sc-if>
|
||||
</div>
|
||||
<div style="height:1px; background:var(--c-line-2); margin:16px 0"></div>
|
||||
<div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
<span>{{ p.letters }} Briefe</span><span>·</span><span>{{ p.docCount }} Dokumente</span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name, a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
people(){
|
||||
const badge = (type) => {
|
||||
const map = {
|
||||
Institution:{ bg:'var(--c-badge-institution-bg)', tc:'var(--c-badge-institution-text)', bd:'var(--c-badge-institution-border)' },
|
||||
Gruppe:{ bg:'var(--c-badge-group-bg)', tc:'var(--c-badge-group-text)', bd:'var(--c-badge-group-border)' },
|
||||
Unbekannt:{ bg:'var(--c-badge-unknown-bg)', tc:'var(--c-badge-unknown-text)', bd:'var(--c-badge-unknown-border)' },
|
||||
};
|
||||
const m = map[type]; if(!m) return null;
|
||||
return { label:type, style:{ flexShrink:0, alignSelf:'flex-start', whiteSpace:'nowrap', background:m.bg, color:m.tc, border:'1px solid '+m.bd, padding:'3px 9px', borderRadius:4, fontFamily:'var(--font-sans)', fontSize:10, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase' } };
|
||||
};
|
||||
const raw = [
|
||||
{ name:'Frieda Rose', relation:'Großmutter', letters:42, docs:64, type:'Person' },
|
||||
{ name:'Heinrich Rose', relation:'Großvater', letters:31, docs:48, type:'Person' },
|
||||
{ name:'Anna Bauer', relation:'Schwester von Frieda', letters:23, docs:29, type:'Person' },
|
||||
{ name:'Wilhelm Rose', relation:'Sohn', letters:18, docs:22, type:'Person' },
|
||||
{ name:'Elise Vogt', relation:'Freundin der Familie', letters:11, docs:14, type:'Person' },
|
||||
{ name:'Karl Müller', relation:'Geschäftspartner', letters:9, docs:12, type:'Person' },
|
||||
{ name:'Margarete Hoffmann', relation:'Nachbarin', letters:6, docs:8, type:'Person' },
|
||||
{ name:'Otto Schmidt', relation:'Notar in Wien', letters:4, docs:5, type:'Person' },
|
||||
{ name:'Kaufhaus Mariahilf', relation:'Wien, VI. Bezirk', letters:3, docs:3, type:'Institution' },
|
||||
{ name:'Familie Rose', relation:'Sammeleintrag', letters:0, docs:31, type:'Gruppe' },
|
||||
{ name:'Unbekannter Absender', relation:'nicht zugeordnet', letters:5, docs:5, type:'Unbekannt' },
|
||||
];
|
||||
return raw.map(p => ({ ...this.av(p.name), relation:p.relation, letters:p.letters, docCount:p.docs, badge:badge(p.type) }));
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
return { people: this.people() };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
180
design_handoff_familienarchiv_redesign/prototypes/Profil.dc.html
Normal file
180
design_handoff_familienarchiv_redesign/prototypes/Profil.dc.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="profil" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- ============ VARIANT: profil (own settings) ============ -->
|
||||
<sc-if value="{{ isProfil }}" hint-placeholder-val="{{ true }}">
|
||||
|
||||
<!-- PageHeader (§3) -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Konto</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Profil</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Verwalten Sie Ihre persönlichen Daten, Ihr Passwort und Ihre Benachrichtigungen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success banner (token-driven: accent bg + accent border) -->
|
||||
<div style="margin-bottom:24px; display:flex; align-items:center; gap:10px; background:var(--c-accent-bg); border:1px solid var(--c-accent); border-radius:2px; padding:12px 16px">
|
||||
<img class="dgicon" src="assets/icons/Check-MD.svg" style="width:16px; height:16px; opacity:.5">
|
||||
<span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-2)">Ihre Änderungen wurden gespeichert.</span>
|
||||
</div>
|
||||
|
||||
<!-- 2-col card grid -->
|
||||
<div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:24px">
|
||||
|
||||
<!-- Persönliche Daten -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Persönliche Daten</h2>
|
||||
<div style="display:flex; flex-direction:column; gap:16px">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Vorname</span>
|
||||
<input value="Marcel" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Nachname</span>
|
||||
<input value="Raddatz" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">E-Mail</span>
|
||||
<input type="email" value="marcel@raddatz.cloud" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
<button class="fa-link" style="margin-top:20px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
|
||||
</div>
|
||||
|
||||
<!-- Passwort ändern -->
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 16px">Passwort ändern</h2>
|
||||
<div style="display:flex; flex-direction:column; gap:16px">
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Aktuelles Passwort</span>
|
||||
<input type="password" value="passwort123" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Neues Passwort</span>
|
||||
<input type="password" value="passwort123" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:6px">Neues Passwort bestätigen</span>
|
||||
<input type="password" value="passwort123" style="width:100%; border:1px solid var(--c-line); background:var(--c-surface); padding:11px 14px; font-family:var(--font-serif); font-size:16px; color:var(--c-ink); outline:none; border-radius:2px">
|
||||
</label>
|
||||
</div>
|
||||
<button class="fa-link" style="margin-top:20px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Passwort ändern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Benachrichtigungen -->
|
||||
<div style="margin-top:24px; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:24px">
|
||||
<h2 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Benachrichtigungen</h2>
|
||||
|
||||
<label class="fa-link" style="display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer; border-bottom:1px solid var(--c-line-2)">
|
||||
<input type="checkbox" checked style="width:16px; height:16px; accent-color:var(--c-primary); flex-shrink:0">
|
||||
<span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">E-Mail bei Antworten auf meine Beiträge</span>
|
||||
</label>
|
||||
<label class="fa-link" style="display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer">
|
||||
<input type="checkbox" style="width:16px; height:16px; accent-color:var(--c-primary); flex-shrink:0">
|
||||
<span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">E-Mail, wenn ich erwähnt werde</span>
|
||||
</label>
|
||||
|
||||
<button class="fa-link" style="margin-top:16px; background:var(--c-primary); color:var(--c-primary-fg); border:none; padding:11px 20px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px">Speichern</button>
|
||||
</div>
|
||||
|
||||
</sc-if>
|
||||
|
||||
<!-- ============ VARIANT: oeffentlich (public profile) ============ -->
|
||||
<sc-if value="{{ isOeffentlich }}" hint-placeholder-val="{{ false }}">
|
||||
|
||||
<!-- PageHeader (§3) — title = user name -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Mitglied</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">{{ av.name }}</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Mitglied des Familienarchivs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Centered profile card -->
|
||||
<div style="max-width:480px; margin:0 auto">
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:32px 28px">
|
||||
<!-- Avatar (§5 deterministic, a48) -->
|
||||
<div style="display:flex; justify-content:center; margin-bottom:18px">
|
||||
<span style="{{ av.a48 }}">{{ av.initials }}</span>
|
||||
</div>
|
||||
<!-- Name (Tinos) -->
|
||||
<div style="text-align:center; margin-bottom:24px">
|
||||
<h2 style="font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--c-ink); margin:0">{{ av.name }}</h2>
|
||||
</div>
|
||||
<!-- Field rows: caps eyebrow label over Tinos value -->
|
||||
<div style="display:flex; flex-direction:column; gap:18px">
|
||||
<div style="display:flex; flex-direction:column; gap:4px">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3)">E-Mail</span>
|
||||
<span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">marcel@raddatz.cloud</span>
|
||||
</div>
|
||||
<div style="height:1px; background:var(--c-line-2)"></div>
|
||||
<div style="display:flex; flex-direction:column; gap:4px">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3)">Kontakt</span>
|
||||
<span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">Berlin · erreichbar per E-Mail</span>
|
||||
</div>
|
||||
<div style="height:1px; background:var(--c-line-2)"></div>
|
||||
<div style="display:flex; flex-direction:column; gap:4px">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3)">Beigetreten</span>
|
||||
<span style="font-family:var(--font-serif); font-size:16px; color:var(--c-ink)">März 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</sc-if>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"variant":"profil"}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
renderVals(){
|
||||
const variant = this.props.variant || 'profil';
|
||||
return {
|
||||
isProfil: variant === 'profil',
|
||||
isOeffentlich: variant === 'oeffentlich',
|
||||
av: this.av('Marcel Raddatz')
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
130
design_handoff_familienarchiv_redesign/prototypes/Regeln.dc.html
Normal file
130
design_handoff_familienarchiv_redesign/prototypes/Regeln.dc.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="regeln" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<div style="margin-bottom:36px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-2); display:inline-block; border-bottom:2px solid var(--c-accent); padding-bottom:6px; margin-bottom:18px">Vereinheitlichtes System</div>
|
||||
<h1 style="font-family:var(--font-serif); font-size:44px; font-weight:700; line-height:1.08; margin:0 0 12px; color:var(--c-ink)">Ein Regelwerk für das Familienarchiv</h1>
|
||||
<p style="font-family:var(--font-serif); font-size:18px; line-height:1.6; color:var(--c-ink-2); max-width:640px; margin:0">Sieben Bausteine, die jede Seite teilt — damit Titel, Steuerung, Karten und Metadaten überall gleich klingen. Diese Richtung — „Mappe" — liegt allen Seiten zugrunde.</p>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:20px">
|
||||
|
||||
<!-- Typografie -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">01 — Typografie</div>
|
||||
<div style="display:flex; flex-direction:column; gap:14px">
|
||||
<div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding-bottom:14px">
|
||||
<span style="font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--c-ink)">Seitentitel</span>
|
||||
<span style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Tinos · Serif</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding-bottom:14px">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink)">Rubrik / Label</span>
|
||||
<span style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Montserrat · Versal</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--c-line-2); padding-bottom:14px">
|
||||
<span style="font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--c-ink)">Fließtext, Briefinhalt und Transkription</span>
|
||||
<span style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Tinos · 16</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:baseline; justify-content:space-between; gap:16px">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">14. März 1923 · 4 Personen</span>
|
||||
<span style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">Montserrat · Meta</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Farbe -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">02 — Farbe</div>
|
||||
<div style="display:flex; flex-direction:column; gap:10px">
|
||||
<div style="display:flex; align-items:center; gap:12px"><span style="width:28px; height:28px; background:#012851; border:1px solid var(--c-line)"></span><span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">Navy — Tinte & Primärfläche</span></div>
|
||||
<div style="display:flex; align-items:center; gap:12px"><span style="width:28px; height:28px; background:#f0efe9; border:1px solid var(--c-line)"></span><span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">Sand — Hintergrund</span></div>
|
||||
<div style="display:flex; align-items:center; gap:12px"><span style="width:28px; height:28px; background:#a1dcd8; border:1px solid var(--c-line)"></span><span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">Mint — nur Linie, Streifen, Unterton</span></div>
|
||||
<div style="display:flex; align-items:center; gap:12px"><span style="width:28px; height:28px; background:#00c7b1; border:1px solid var(--c-line)"></span><span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2)">Türkis — Transkriptionsmodus</span></div>
|
||||
</div>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:13px; color:var(--c-ink-3); margin:16px 0 0">Keine Verläufe. Mint trägt nie Text.</p>
|
||||
</section>
|
||||
|
||||
<!-- Seitenkopf -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px; grid-column:1 / -1">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">03 — Seitenkopf</div>
|
||||
<div style="padding:20px; background:var(--c-muted); border:1px solid var(--c-line-2); max-width:520px">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px">Geschichten</div>
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:14px"><div style="font-family:var(--font-serif); font-size:34px; font-weight:700; line-height:1.05; color:var(--c-ink)">Seitentitel</div></div>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:12px 0 0">Rubrik in Versalien, großer Serif-Titel, Mint-Steg links. Rechts steht die Zählung.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Steuerung -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">04 — Steuerung</div>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2); margin:0 0 14px">Segmentgruppe für Filter & Ansichten</p>
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line)">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:8px 14px">Alle</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:8px 14px; border-left:1px solid var(--c-line)">Veröffentlicht</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:8px 14px; border-left:1px solid var(--c-line)">Entwurf</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Avatare -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">05 — Personen & Avatare</div>
|
||||
<div style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px">
|
||||
<span style="width:36px; height:36px; border-radius:999px; background:#5a8a6a; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">FR</span>
|
||||
<span style="width:36px; height:36px; border-radius:999px; background:#7a4f9a; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">KM</span>
|
||||
<span style="width:36px; height:36px; border-radius:999px; background:#3060b0; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">AB</span>
|
||||
<span style="width:36px; height:36px; border-radius:999px; background:#c17a00; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">WR</span>
|
||||
<span style="width:36px; height:36px; border-radius:999px; background:#c0446e; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:13px; font-weight:700">MH</span>
|
||||
</div>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--c-ink-2); margin:0; line-height:1.6">Die Farbe wird je Person aus dem Namen berechnet und bleibt stabil — sie unterscheidet, sie schmückt nicht. Form immer rund, Initialen in Montserrat.</p>
|
||||
</section>
|
||||
|
||||
<!-- Metadaten & Leerzustände -->
|
||||
<section style="background:var(--c-surface); border:1px solid var(--c-line); padding:24px; grid-column:1 / -1">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:18px">06 — Metadaten & Leerzustände</div>
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:24px">
|
||||
<div>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2); margin:0 0 12px">Eine Metazeile, immer gleich getrennt mit ·</p>
|
||||
<div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">
|
||||
<img class="dgicon" src="assets/icons/Calendar-Add-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
<span>14. März 1923</span><span>·</span><span>14 Dokumente</span><span>·</span><span>4 Personen</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-left:1px solid var(--c-line); padding-left:24px">
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2); margin:0 0 12px">Leerzustand — ruhig, Sie-Form, mit Auslassung</p>
|
||||
<div style="border:1px dashed var(--c-line); padding:18px; text-align:center">
|
||||
<p style="font-family:var(--font-serif); font-size:15px; color:var(--c-ink-2); margin:0">Noch keine Geschichten angelegt.</p>
|
||||
<p style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin:6px 0 0">Beginnen Sie mit einem Brief…</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="stammbaum" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- §3 PageHeader -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Stammbaum</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Familie Cram</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Drei Generationen, verwoben durch Brief und Blut — wählen Sie eine Person, um ihre Linie zu verfolgen.</p>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">38 Personen · 4 Generationen</span>
|
||||
</div>
|
||||
|
||||
<!-- Tree + side panel -->
|
||||
<div style="display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap">
|
||||
|
||||
<!-- CANVAS: relative-positioned area holding absolutely-positioned node cards -->
|
||||
<div style="position:relative; flex:1; min-width:480px; height:540px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:2px; overflow:hidden">
|
||||
|
||||
<!-- Connector lines, drawn beneath the node cards -->
|
||||
<svg viewBox="0 0 760 540" preserveAspectRatio="none" style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none">
|
||||
<!-- Gen 1 couple bar (Friedrich + Eugenie) -->
|
||||
<line x1="170" y1="76" x2="430" y2="76" stroke="var(--c-line)" stroke-width="1.5"></line>
|
||||
<!-- Drop from Gen 1 couple to the Gen 2 sibling bar -->
|
||||
<line x1="300" y1="76" x2="300" y2="208" stroke="var(--c-line)" stroke-width="1.5"></line>
|
||||
<!-- Gen 2 sibling bar (Herbert · Clara · Marie) -->
|
||||
<line x1="110" y1="208" x2="540" y2="208" stroke="var(--c-line)" stroke-width="1.5"></line>
|
||||
<!-- Drops onto each Gen 2 child -->
|
||||
<line x1="110" y1="208" x2="110" y2="236" stroke="var(--c-line)" stroke-width="1.5"></line>
|
||||
<line x1="300" y1="208" x2="300" y2="236" stroke="var(--c-line)" stroke-width="1.5"></line>
|
||||
<line x1="540" y1="208" x2="540" y2="236" stroke="var(--c-line)" stroke-width="1.5"></line>
|
||||
<!-- Gen 2 marriage bar (Herbert + Wilhelmine) -->
|
||||
<line x1="110" y1="276" x2="240" y2="276" stroke="var(--c-line)" stroke-width="1.5"></line>
|
||||
<!-- Drop to Gen 3 sibling bar -->
|
||||
<line x1="175" y1="276" x2="175" y2="404" stroke="var(--c-accent)" stroke-width="2"></line>
|
||||
<!-- Gen 3 sibling bar (Gertrud · Karl) -->
|
||||
<line x1="110" y1="404" x2="300" y2="404" stroke="var(--c-accent)" stroke-width="2"></line>
|
||||
<line x1="110" y1="404" x2="110" y2="432" stroke="var(--c-accent)" stroke-width="2"></line>
|
||||
<line x1="300" y1="404" x2="300" y2="432" stroke="var(--c-accent)" stroke-width="2"></line>
|
||||
</svg>
|
||||
|
||||
<!-- Generation rail labels -->
|
||||
<div style="position:absolute; left:14px; top:44px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3)">G 1</div>
|
||||
<div style="position:absolute; left:14px; top:236px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3)">G 2</div>
|
||||
<div style="position:absolute; left:14px; top:432px; font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3)">G 3</div>
|
||||
|
||||
<!-- NODE CARDS (absolutely positioned via the data) -->
|
||||
<sc-for list="{{ nodes }}" as="n" hint-placeholder-count="8">
|
||||
<div style="{{ n.cardStyle }}">
|
||||
<span style="{{ n.av28 }}">{{ n.initials }}</span>
|
||||
<div style="min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:14px; font-weight:700; color:{{ n.nameColor }}; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ n.name }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:10px; letter-spacing:.04em; color:{{ n.dateColor }}; margin-top:1px">{{ n.dates }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
|
||||
<!-- Zoom controls: vertical control group, bottom-right, 44px targets -->
|
||||
<div style="position:absolute; right:16px; bottom:16px; display:flex; flex-direction:column; gap:1px; border:1px solid var(--c-line); border-radius:2px; overflow:hidden; box-shadow:var(--shadow-sm)">
|
||||
<button class="fa-link" title="Vergrößern" style="width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; background:var(--c-surface); cursor:pointer; font-family:var(--font-sans); font-size:20px; font-weight:700; color:var(--c-ink-2); line-height:1">+</button>
|
||||
<button class="fa-link" title="Verkleinern" style="width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; border-top:1px solid var(--c-line); background:var(--c-surface); cursor:pointer; font-family:var(--font-sans); font-size:20px; font-weight:700; color:var(--c-ink-2); line-height:1">−</button>
|
||||
<button class="fa-link" title="Ansicht einpassen" style="width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; border-top:1px solid var(--c-line); background:var(--c-surface); cursor:pointer">
|
||||
<img class="dgicon" src="assets/icons/View-More-MD.svg" style="width:18px; height:18px; opacity:.45">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL: selected node detail (3px mint top border) -->
|
||||
<aside style="width:320px; flex-shrink:0; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; padding:22px">
|
||||
<!-- Header: large avatar + name + dates -->
|
||||
<div style="display:flex; align-items:center; gap:14px; margin-bottom:18px">
|
||||
<span style="{{ selected.a48 }}">{{ selected.initials }}</span>
|
||||
<div style="min-width:0">
|
||||
<h2 style="font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--c-ink); margin:0; line-height:1.2">{{ selected.name }}</h2>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); margin-top:2px">{{ selected.dates }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Direct relationships as tag-style chips (dot + label, 4px radius) -->
|
||||
<h3 style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin:0 0 12px">Direkte Beziehungen</h3>
|
||||
<div style="display:flex; flex-direction:column; gap:8px; margin-bottom:22px">
|
||||
<sc-for list="{{ chips }}" as="c" hint-placeholder-count="4">
|
||||
<div style="display:flex; align-items:center; gap:9px">
|
||||
<span style="display:inline-flex; align-items:center; gap:6px; background:var(--c-muted); border:1px solid var(--c-line); border-radius:4px; padding:3px 9px; flex-shrink:0">
|
||||
<span style="width:7px; height:7px; border-radius:999px; background:{{ c.dot }}"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2)">{{ c.label }}</span>
|
||||
</span>
|
||||
<span style="font-family:var(--font-serif); font-size:14px; color:var(--c-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ c.person }}</span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
|
||||
<!-- Meta line (§8) -->
|
||||
<div style="display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; color:var(--c-ink-2); margin-bottom:18px">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
<span>{{ selected.letters }} Briefe</span><span>·</span><span>{{ selected.docs }} Dokumente</span>
|
||||
</div>
|
||||
|
||||
<a href="/persons/{{ selected.id }}" class="fa-link" style="display:inline-flex; align-items:center; gap:6px; min-height:44px; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-primary); text-decoration:none">
|
||||
Zur Person
|
||||
<img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:14px; height:14px; opacity:.5">
|
||||
</a>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Empty state (alternate — shown when no tree exists yet) -->
|
||||
<div style="margin-top:32px">
|
||||
<div style="font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:10px">Alternativ — leerer Zustand</div>
|
||||
<div style="border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center">
|
||||
<div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Noch kein Stammbaum vorhanden.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Verknüpfen Sie zwei Personen, um die erste Linie zu zeichnen…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
// Build one absolutely-positioned node card. state ∈ 'rest' | 'selected' | 'dim'.
|
||||
nodeCard(name, dates, x, y, state){
|
||||
const a = this.av(name);
|
||||
const NODE_W = 168;
|
||||
const card = {
|
||||
position:'absolute', left:x+'px', top:y+'px', width:NODE_W+'px',
|
||||
display:'flex', alignItems:'center', gap:'10px',
|
||||
background:'var(--c-surface)', border:'1px solid var(--c-line)',
|
||||
borderRadius:'2px', padding:'9px 11px', boxShadow:'var(--shadow-sm)', cursor:'pointer'
|
||||
};
|
||||
let nameColor = 'var(--c-ink)';
|
||||
let dateColor = 'var(--c-ink-3)';
|
||||
if (state === 'selected') {
|
||||
card.background = 'var(--c-muted)';
|
||||
card.border = '1px solid var(--c-accent)';
|
||||
card.borderLeft = '3px solid var(--c-accent)';
|
||||
card.paddingLeft = '9px';
|
||||
} else if (state === 'dim') {
|
||||
card.opacity = 0.45;
|
||||
}
|
||||
return {
|
||||
name, dates, initials:a.initials, av28:a.a28,
|
||||
cardStyle:card, nameColor, dateColor
|
||||
};
|
||||
}
|
||||
|
||||
nodes(){
|
||||
// 3 generations, 8 nodes. Highlighted lineage = Herbert → Gertrud/Karl line.
|
||||
// Selected: Herbert Cram. Dimmed: out-of-lineage (the non-ancestor branches).
|
||||
return [
|
||||
// Gen 1 — grandparents
|
||||
this.nodeCard('Friedrich Cram', '1868–1934', 6, 42, 'rest'),
|
||||
this.nodeCard('Eugenie de Gruyter','1872–1948', 262, 42, 'dim'),
|
||||
// Gen 2 — children + the spouse married in
|
||||
this.nodeCard('Herbert Cram', '1899–1945', 26, 242, 'selected'),
|
||||
this.nodeCard('Clara Cram', '1902–1989', 216, 242, 'dim'),
|
||||
this.nodeCard('Marie Cram', '1905–1992', 456, 242, 'dim'),
|
||||
this.nodeCard('Wilhelmine Voß', '1903–1981', 156, 242, 'dim'),
|
||||
// Gen 3 — grandchildren
|
||||
this.nodeCard('Gertrud Cram', '1928–2011', 26, 438, 'rest'),
|
||||
this.nodeCard('Karl Cram', '1931–1998', 216, 438, 'rest'),
|
||||
];
|
||||
}
|
||||
|
||||
selected(){
|
||||
const a = this.av('Herbert Cram');
|
||||
return { id:'herbert-cram', name:'Herbert Cram', dates:'1899–1945', initials:a.initials, a48:a.a48, letters:42, docs:64 };
|
||||
}
|
||||
|
||||
chips(){
|
||||
// Tag-style chips: colored dot + UPPERCASE label + person name.
|
||||
return [
|
||||
{ label:'Vater', dot:this.av('Friedrich Cram').bg, person:'Friedrich Cram' },
|
||||
{ label:'Mutter', dot:this.av('Eugenie de Gruyter').bg, person:'Eugenie de Gruyter' },
|
||||
{ label:'Ehefrau', dot:this.av('Wilhelmine Voß').bg, person:'Wilhelmine Voß' },
|
||||
{ label:'Tochter', dot:this.av('Gertrud Cram').bg, person:'Gertrud Cram' },
|
||||
{ label:'Sohn', dot:this.av('Karl Cram').bg, person:'Karl Cram' },
|
||||
];
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
return { nodes: this.nodes(), selected: this.selected(), chips: this.chips() };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
190
design_handoff_familienarchiv_redesign/prototypes/Themen.dc.html
Normal file
190
design_handoff_familienarchiv_redesign/prototypes/Themen.dc.html
Normal file
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button,textarea,select{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="themen" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 80px">
|
||||
|
||||
<!-- PageHeader (§3) -->
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Themen</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Themen</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Worüber die Familie schrieb — Schlagworte, nach denen Sie die Sammlung durchstöbern können.</p>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">24 Themen · 312 Dokumente</span>
|
||||
</div>
|
||||
|
||||
<!-- Segmented control (§6) -->
|
||||
<div style="margin-bottom:28px; display:inline-flex; border:1px solid var(--c-line)">
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:10px 16px; cursor:pointer">Alle</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Mit Dokumenten</span>
|
||||
<span class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:10px 16px; border-left:1px solid var(--c-line); cursor:pointer">Alphabetisch</span>
|
||||
</div>
|
||||
|
||||
<!-- tag-card grid -->
|
||||
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:18px">
|
||||
<sc-for list="{{ topics }}" as="t" hint-placeholder-count="9">
|
||||
<div style="background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); border-radius:2px; overflow:hidden">
|
||||
|
||||
<!-- parent-tag row -->
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:11px; min-height:56px; padding:14px 16px 12px; text-decoration:none">
|
||||
<span style="{{ t.dot }}"></span>
|
||||
<span style="font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--c-ink); line-height:1.2; flex:1; min-width:0">{{ t.name }}</span>
|
||||
<span style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">{{ t.count }}</span>
|
||||
</a>
|
||||
|
||||
<div style="height:1px; background:var(--c-line-2); margin:0 16px"></div>
|
||||
|
||||
<!-- child-tag rows -->
|
||||
<sc-for list="{{ t.children }}" as="c" hint-placeholder-count="4">
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 16px; text-decoration:none">
|
||||
<span style="{{ c.dot }}"></span>
|
||||
<span style="font-family:var(--font-sans); font-size:14px; color:var(--c-ink); flex:1; min-width:0">{{ c.name }}</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ c.count }}</span>
|
||||
</a>
|
||||
</sc-for>
|
||||
|
||||
<!-- + N weitere -->
|
||||
<sc-if value="{{ t.more }}" hint-placeholder-val="{{ false }}">
|
||||
<a href="#" class="fa-link" style="display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; text-decoration:none; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2)">
|
||||
<span>{{ t.more }} weitere</span>
|
||||
<img class="dgicon" src="assets/icons/Arrow-Right-MD.svg" style="width:14px; height:14px; opacity:.4">
|
||||
</a>
|
||||
</sc-if>
|
||||
|
||||
</div>
|
||||
</sc-for>
|
||||
|
||||
<!-- empty state (§10) -->
|
||||
<div style="border:1px dashed var(--c-line); border-radius:2px; padding:48px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center">
|
||||
<div style="font-family:var(--font-serif); font-size:20px; color:var(--c-ink); margin-bottom:8px">Noch kein Thema vergeben.</div>
|
||||
<div style="font-family:var(--font-sans); font-size:13px; color:var(--c-ink-3)">Verschlagworten Sie einen Brief, um hier ein Thema anzulegen…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
av(name){
|
||||
const pal = ['#5a8a6a','#a0522d','#c17a00','#607080','#7a4f9a','#c0446e','#3060b0','#4a7a3a','#9a8040','#c05540'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
const parts = name.trim().split(/\s+/);
|
||||
const initials = (parts[0][0] + (parts.length>1 ? parts[parts.length-1][0] : '')).toUpperCase();
|
||||
const bg = pal[h % pal.length];
|
||||
const base = { borderRadius:'999px', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-sans)', fontWeight:700, flexShrink:0, lineHeight:1, background:bg };
|
||||
return { bg, initials, name,
|
||||
a26:{ ...base, width:26, height:26, fontSize:10 },
|
||||
a28:{ ...base, width:28, height:28, fontSize:11 },
|
||||
a40:{ ...base, width:40, height:40, fontSize:14 },
|
||||
a48:{ ...base, width:48, height:48, fontSize:16 } };
|
||||
}
|
||||
|
||||
// deterministic-ish tag color from the §1 list, keyed by the topic name
|
||||
tagColor(name){
|
||||
const tokens = ['sage','sienna','amber','slate','violet','rose','cobalt','moss','sand-tag','coral'];
|
||||
let h = 0; for (let i=0;i<name.length;i++){ h = (h*31 + name.charCodeAt(i)) >>> 0; }
|
||||
return 'var(--c-tag-' + tokens[h % tokens.length] + ')';
|
||||
}
|
||||
|
||||
dot(name, size){
|
||||
return { display:'inline-block', width:size, height:size, borderRadius:'999px', background:this.tagColor(name), flexShrink:0 };
|
||||
}
|
||||
|
||||
topics(){
|
||||
const raw = [
|
||||
{ name:'Krieg & Feldpost', count:74, children:[
|
||||
{ name:'Feldpostbriefe', count:41 },
|
||||
{ name:'Lazarett & Verwundung', count:12 },
|
||||
{ name:'Gefangenschaft', count:9 },
|
||||
{ name:'Heimaturlaub', count:7 },
|
||||
{ name:'Vermisstenmeldungen', count:5 },
|
||||
], total:11 },
|
||||
{ name:'Familie & Kinder', count:58, children:[
|
||||
{ name:'Geburt & Taufe', count:14 },
|
||||
{ name:'Schule & Ausbildung', count:11 },
|
||||
{ name:'Großeltern', count:9 },
|
||||
{ name:'Erbschaft', count:6 },
|
||||
{ name:'Patenschaft', count:4 },
|
||||
], total:8 },
|
||||
{ name:'Orte', count:46, children:[
|
||||
{ name:'Wien', count:18 },
|
||||
{ name:'Berlin', count:12 },
|
||||
{ name:'Harz', count:7 },
|
||||
{ name:'München', count:5 },
|
||||
{ name:'Triest', count:4 },
|
||||
], total:9 },
|
||||
{ name:'Geschäft & Handel', count:33, children:[
|
||||
{ name:'Kaufhaus Mariahilf', count:11 },
|
||||
{ name:'Rechnungen', count:8 },
|
||||
{ name:'Verträge', count:6 },
|
||||
] },
|
||||
{ name:'Reisen', count:29, children:[
|
||||
{ name:'Italienreise 1924', count:9 },
|
||||
{ name:'Kuraufenthalt', count:7 },
|
||||
{ name:'Postkarten', count:13 },
|
||||
] },
|
||||
{ name:'Krankheit & Gesundheit', count:24, children:[
|
||||
{ name:'Sanatorium', count:8 },
|
||||
{ name:'Arztbriefe', count:6 },
|
||||
{ name:'Genesung', count:5 },
|
||||
] },
|
||||
{ name:'Feiertage', count:21, children:[
|
||||
{ name:'Weihnachten', count:12 },
|
||||
{ name:'Ostern', count:5 },
|
||||
{ name:'Geburtstage', count:4 },
|
||||
] },
|
||||
{ name:'Liebe & Verlobung', count:17, children:[
|
||||
{ name:'Liebesbriefe', count:9 },
|
||||
{ name:'Verlobung', count:5 },
|
||||
{ name:'Hochzeit', count:3 },
|
||||
] },
|
||||
{ name:'Behörde & Recht', count:14, children:[
|
||||
{ name:'Notariat', count:6 },
|
||||
{ name:'Meldewesen', count:5 },
|
||||
{ name:'Steuern', count:3 },
|
||||
] },
|
||||
];
|
||||
|
||||
const MAX = 5;
|
||||
return raw.map(t => {
|
||||
const shown = t.children.slice(0, MAX);
|
||||
const total = t.total || t.children.length;
|
||||
const more = total - shown.length;
|
||||
return {
|
||||
name: t.name,
|
||||
count: t.count,
|
||||
dot: this.dot(t.name, 7),
|
||||
children: shown.map(c => ({ name:c.name, count:c.count, dot:this.dot(c.name, 6) })),
|
||||
more: more > 0 ? more : null,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
return { topics: this.topics() };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;padding:0;background:#f0efe9}
|
||||
*{box-sizing:border-box}
|
||||
input,button{font-family:inherit}
|
||||
::selection{background:#a1dcd8;color:#012851}
|
||||
[data-theme='dark'] .dgicon{filter:invert(1) brightness(1.6)}
|
||||
.fa-link{transition:color .15s, background .15s, border-color .15s}
|
||||
</style>
|
||||
<script>(function(){try{if(localStorage.getItem('fa-theme')==='dark'){document.documentElement.dataset.theme='dark';}}catch(e){}})();</script>
|
||||
</helmet>
|
||||
<div style="min-height:100vh; background:var(--c-canvas); color:var(--c-ink); font-family:var(--font-serif)">
|
||||
<dc-import name="ArchiveHeader" active="zeitstrahl" hint-size="100%,68px"></dc-import>
|
||||
<main style="max-width:1180px; margin:0 auto; padding:40px 32px 90px">
|
||||
|
||||
<div style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap">
|
||||
<div style="border-left:4px solid var(--c-accent); padding-left:18px">
|
||||
<div style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px">Chronik</div>
|
||||
<h1 style="font-family:var(--font-serif); font-weight:700; font-size:46px; line-height:1.06; color:var(--c-ink); margin:0">Zeitstrahl</h1>
|
||||
<p style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px">Briefdichte, Lebensdaten und kuratierte Stationen — die Sammlung im Lauf der Jahre.</p>
|
||||
</div>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">147 Dokumente · 1914–1948</span>
|
||||
</div>
|
||||
|
||||
<!-- filter -->
|
||||
<div style="margin-bottom:38px; display:flex; align-items:center; gap:16px; flex-wrap:wrap">
|
||||
<div style="display:inline-flex; border:1px solid var(--c-line)">
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-fg); background:var(--c-primary); padding:9px 16px; cursor:pointer">Alle</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Briefe</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Personen</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-2); background:var(--c-surface); padding:9px 16px; border-left:1px solid var(--c-line); cursor:pointer">Ereignisse</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:16px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">
|
||||
<span style="display:inline-flex; align-items:center; gap:6px"><span style="width:10px; height:10px; border-radius:999px; background:var(--c-primary)"></span>Person</span>
|
||||
<span style="display:inline-flex; align-items:center; gap:6px"><span style="width:10px; height:10px; border-radius:2px; background:var(--c-accent)"></span>Kuratiert</span>
|
||||
<span style="display:inline-flex; align-items:center; gap:6px"><img class="dgicon" src="assets/icons/Globe-MD.svg" style="width:12px; height:12px; opacity:.4">Historisch</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- spine -->
|
||||
<div style="position:relative; max-width:760px; margin:0 auto">
|
||||
<div style="position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--c-accent); transform:translateX(-50%)"></div>
|
||||
<div style="position:relative; display:flex; flex-direction:column; align-items:center; gap:18px">
|
||||
<sc-for list="{{ items }}" as="it" hint-placeholder-count="10">
|
||||
|
||||
<sc-if value="{{ it.isYear }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="background:var(--c-primary); color:var(--c-primary-fg); font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.1em; padding:6px 16px; border-radius:2px">{{ it.label }}</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ it.isSummary }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="width:100%; background:var(--c-surface); border:1px solid var(--c-line); border-top:3px solid var(--c-accent); box-shadow:var(--shadow-sm); padding:22px 24px">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px">
|
||||
<div style="display:flex; align-items:center; gap:10px">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:18px; height:18px; opacity:.55">
|
||||
<span style="font-family:var(--font-sans); font-size:18px; font-weight:700; color:var(--c-ink)">{{ it.count }}</span>
|
||||
</div>
|
||||
<a href="#" class="fa-link" style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-2); text-decoration:none">Briefe anzeigen →</a>
|
||||
</div>
|
||||
<div style="display:flex; align-items:flex-end; gap:5px; height:60px">
|
||||
<sc-for list="{{ it.bars }}" as="bar" hint-placeholder-count="12">
|
||||
<div style="{{ bar.style }}"></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3)">
|
||||
<span>{{ it.from }}</span><span>Monats-Dichte</span><span>{{ it.to }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ it.isLetter }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="{{ it.rowStyle }}">
|
||||
<div style="{{ it.cardStyle }}">
|
||||
<div style="display:flex; align-items:flex-start; gap:9px; margin-bottom:5px">
|
||||
<img class="dgicon" src="assets/icons/Mail-MD.svg" style="width:15px; height:15px; opacity:.5; flex-shrink:0; margin-top:3px">
|
||||
<span style="font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--c-ink); line-height:1.3">{{ it.title }}</span>
|
||||
</div>
|
||||
<div style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3); padding-left:24px">{{ it.meta }}</div>
|
||||
<sc-if value="{{ it.tag }}" hint-placeholder-val="{{ false }}">
|
||||
<span style="display:inline-flex; align-items:center; gap:7px; margin:10px 0 0 24px; background:var(--c-surface); border:1px solid var(--c-line); padding:3px 11px; border-radius:999px; font-family:var(--font-sans); font-size:11px; color:var(--c-ink-2)"><span style="{{ it.tag.dot }}"></span>{{ it.tag.label }}</span>
|
||||
</sc-if>
|
||||
</div>
|
||||
<span style="{{ it.dotStyle }}"></span>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ it.isPerson }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="display:inline-flex; align-items:center; gap:12px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:2px; box-shadow:var(--shadow-sm); padding:10px 20px 10px 12px">
|
||||
<span style="width:28px; height:28px; border-radius:999px; background:var(--c-primary); color:var(--c-primary-fg); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0">{{ it.glyph }}</span>
|
||||
<div>
|
||||
<div style="font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--c-ink); line-height:1.2">{{ it.name }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-top:2px">{{ it.meta }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ it.isCurated }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="display:inline-flex; align-items:center; gap:12px; background:var(--c-surface); border:1px solid var(--c-line); border-left:3px solid var(--c-accent); border-radius:2px; box-shadow:var(--shadow-sm); padding:12px 16px 12px 13px; max-width:100%">
|
||||
<span style="width:28px; height:28px; border-radius:999px; background:var(--c-primary); color:var(--c-primary-fg); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0">★</span>
|
||||
<div style="min-width:0">
|
||||
<div style="font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--c-ink); line-height:1.25">{{ it.title }}</div>
|
||||
<div style="font-family:var(--font-sans); font-size:11px; color:var(--c-ink-3); margin-top:2px">{{ it.meta }}</div>
|
||||
</div>
|
||||
<img class="dgicon" src="assets/icons/Bookmarks-MD.svg" style="width:15px; height:15px; opacity:.4; flex-shrink:0">
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ it.isHistorical }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 16px; border-top:1px solid var(--c-line-2); border-bottom:1px solid var(--c-line-2); background:var(--c-canvas); flex-wrap:wrap">
|
||||
<img class="dgicon" src="assets/icons/Globe-MD.svg" style="width:15px; height:15px; opacity:.4">
|
||||
<span style="font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--c-ink-2)">{{ it.title }}</span>
|
||||
<span style="font-family:var(--font-sans); font-size:12px; color:var(--c-ink-3)">{{ it.meta }}</span>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{}">
|
||||
class Component extends DCLogic {
|
||||
bars(values){
|
||||
return values.map(v => ({ style: { flex:'1', height: v + '%', minHeight:'3px', background:'var(--c-accent)', borderRadius:'1px 1px 0 0' } }));
|
||||
}
|
||||
|
||||
items(){
|
||||
const L = (docId, date, place, sender, recipient, tag) => ({ kind:'letter', title:docId+' – '+date+' – '+place, meta:sender+' → '+recipient+' · '+date, tag });
|
||||
return [
|
||||
{ kind:'year', label:'1923' },
|
||||
{ kind:'summary', count:'188 Briefe', from:'Jan. 1923', to:'Dez. 1923', bars:[30,42,38,55,48,60,52,66,58,70,62,75] },
|
||||
L('FR-0142','21. Januar 1923','Wien','Frieda Rose','Anna Bauer',{ label:'Briefwechsel', color:'#3060b0' }),
|
||||
L('AB-0098','30. Januar 1923','Berlin','Anna Bauer','Frieda Rose'),
|
||||
L('HR-1412','16. Februar 1923','Harz','Heinrich Rose','Wilhelm Rose'),
|
||||
L('FR-0143','4. März 1923','Wien','Frieda Rose','Anna Bauer'),
|
||||
L('KM-0211','28. März 1923','Triest','Karl Müller','Frieda Rose',{ label:'Reise', color:'#c17a00' }),
|
||||
{ kind:'person', name:'Elise Vogt', meta:'1923 · abgeleitet', glyph:'✳' },
|
||||
L('FR-0148','21. September 1923','Wien','Frieda Rose','Anna Bauer'),
|
||||
L('MH-0033','4. Dezember 1923','München','Margarete Hoffmann','Heinrich Rose',{ label:'Weihnachten', color:'#c0446e' }),
|
||||
L('FR-0151','7. Dezember 1923','Wien','Frieda Rose','Anna Bauer'),
|
||||
{ kind:'curated', title:'Sommer 1923 – die Briefe aus dem Harz', meta:'Juli 1923 · kuratiert' },
|
||||
{ kind:'year', label:'1924' },
|
||||
{ kind:'summary', count:'271 Briefe', from:'Jan. 1924', to:'Dez. 1924', bars:[40,55,48,70,62,58,75,52,92,60,72,80] },
|
||||
L('OS-0019','19. Februar 1924','Wien','Otto Schmidt','Heinrich Rose',{ label:'Recht', color:'#607080' }),
|
||||
L('KM-0224','2. August 1924','Venedig','Karl Müller','Frieda Rose',{ label:'Reise', color:'#c17a00' }),
|
||||
{ kind:'person', name:'Heinrich Rose', meta:'1924 · abgeleitet', glyph:'†' },
|
||||
L('WR-0061','8. Oktober 1924','Leipzig','Wilhelm Rose','Frieda Rose'),
|
||||
{ kind:'historical', title:'Gründung der Rentenmark', meta:'1924 · historisch' },
|
||||
];
|
||||
}
|
||||
|
||||
renderVals(){
|
||||
let letterN = 0;
|
||||
const items = this.items().map(it => {
|
||||
const isLetter = it.kind==='letter';
|
||||
let rowStyle = null, cardStyle = null, dotStyle = null, tag = it.tag || null;
|
||||
if (isLetter){
|
||||
const left = (letterN % 2) === 0; letterN++;
|
||||
rowStyle = { position:'relative', width:'100%', display:'flex', justifyContent: left ? 'flex-start' : 'flex-end' };
|
||||
cardStyle = { width:'46%', background:'var(--c-surface)', border:'1px solid var(--c-line)', boxShadow:'var(--shadow-sm)', borderRadius:'2px', padding:'14px 18px' };
|
||||
dotStyle = { position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)', width:'13px', height:'13px', borderRadius:'999px', background:'var(--c-surface)', border:'2px solid var(--c-primary)', zIndex:1 };
|
||||
if (tag) tag = { label:tag.label, dot:{ display:'inline-block', width:7, height:7, borderRadius:'999px', background:tag.color, flexShrink:0 } };
|
||||
}
|
||||
return {
|
||||
...it,
|
||||
isYear: it.kind==='year',
|
||||
isSummary: it.kind==='summary',
|
||||
isPerson: it.kind==='person',
|
||||
isCurated: it.kind==='curated',
|
||||
isHistorical: it.kind==='historical',
|
||||
isLetter,
|
||||
rowStyle, cardStyle, dotStyle, tag,
|
||||
bars: it.bars ? this.bars(it.bars) : [],
|
||||
};
|
||||
});
|
||||
return { items };
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Account-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Account-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M12,6 C14.7614237,6 17,8.23857625 17,11 C17,12.3722504 16.4471943,13.6153861 15.5521301,14.5188599 L17.855,17.452 L19.1030012,19.0389904 L19.1030012,19.0389904 L19.1020055,19.039995 L19.0710678,19.0710678 C18.997228,19.1449077 18.9222387,19.2175981 18.8461293,19.28911 L19.1020055,19.039995 C19.0039559,19.1389028 18.9038547,19.2357734 18.8017708,19.3305377 C18.7171965,19.4090494 18.6311863,19.4861804 18.5438523,19.5618238 C18.5263469,19.5769851 18.5089856,19.5919182 18.4915726,19.6067925 C18.309932,19.7619691 18.122204,19.9110944 17.9291745,20.0534458 C17.9013947,20.0739295 17.8740517,20.0938783 17.8466043,20.1136912 C16.2028871,21.3004163 14.1831418,22 12,22 C9.81685818,22 7.79711289,21.3004163 6.15271505,20.1131998 L6.44094063,20.3137102 C6.31572015,20.2298139 6.19250037,20.1431636 6.07136795,20.0538458 C5.87779602,19.9110944 5.69006803,19.7619691 5.50799235,19.6064208 C5.4910144,19.5919182 5.47365307,19.5769851 5.45634375,19.5619936 C5.36881373,19.4861804 5.28280351,19.4090494 5.19815647,19.3304702 C5.18343312,19.3168025 5.16867872,19.3030231 5.15396618,19.2891997 C5.07776126,19.2175981 5.00277203,19.1449077 4.92893219,19.0710678 C4.91889576,19.0610327 4.9084335,19.0505254 4.8979945,19.039995 L8.44884397,14.5198429 C7.5532068,13.6162879 7,12.3727481 7,11 C7,8.23857625 9.23857625,6 12,6 Z M12,16 C11.3344438,16 10.69926,15.8699605 10.1184702,15.6339033 L7.68110661,18.7351936 C8.9268731,19.5356884 10.4092137,20 12,20 C13.5907863,20 15.0731269,19.5356884 16.3188934,18.7351936 L13.8815298,15.6339033 C13.30074,15.8699605 12.6655562,16 12,16 Z M12,2 C17.5228475,2 22,6.4771525 22,12 C22,14.0067927 21.408873,15.8755204 20.3912443,17.4415574 L19.0653983,15.7557316 C19.6619312,14.635851 20,13.3574056 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,13.3574056 4.33806879,14.635851 4.93460172,15.7557316 L3.60940596,17.442558 C2.59137888,15.8763164 2,14.0072202 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,8 C10.3431458,8 9,9.34314575 9,11 C9,12.6568542 10.3431458,14 12,14 C13.6568542,14 15,12.6568542 15,11 C15,9.34314575 13.6568542,8 12,8 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Arrow/Arrow-Right-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Arrow/Arrow-Right-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M8.468,4.00069609 L17,12 L8.468,19.9996961 L7.001,18.6236961 L14.0650029,12 L7.001,5.37669609 L8.468,4.00069609 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 547 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Bookmarks-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Bookmarks-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M21.3497504,3.6551887 L21.6777078,3.86309927 L22,4.0853485 L22,18.25 C21.3650372,17.7938243 20.6942363,17.4226854 20.0009587,17.1365834 L20,21.7544657 C18.6666667,20.5544657 17,19.9544657 15,19.9544657 C13.8333333,19.9544657 12.8335071,20.3500061 12.0005212,21.141087 C11.1668404,20.3500061 10.1666667,19.9544657 9,19.9544657 C7,19.9544657 5.33333333,20.5544657 4,21.7544657 L4.00045104,17.1359956 C3.42290002,17.374239 2.8609383,17.671489 2.32229219,18.0277508 L2,18.25 L2,4.0853485 C5.00310218,1.92783294 8.80785971,1.67249293 12.0007123,3.31932848 L12.0277538,3.30470469 C14.9881375,1.78996923 18.4697725,1.90679723 21.3497504,3.6551887 Z M6.00029079,16.5555343 L6,18.3814657 L6.19076597,18.3249848 C6.95960841,18.1089212 7.77427089,17.9872902 8.63050815,17.9602585 L9,17.9544657 C9.70153827,17.9544657 10.3709864,18.0578476 11.0007801,18.2619695 L11,17.037 L10.8155673,16.9686082 C9.25884239,16.4128684 7.60516433,16.275144 6.00029079,16.5555343 Z M13.0000078,17.0370934 L12.9996932,18.2620176 C13.5412606,18.0864227 14.1113753,17.9855173 14.7059769,17.9605913 L15,17.9544657 C15.9920333,17.9544657 16.930557,18.078055 17.809234,18.3249848 L18,18.3814657 L18.000458,16.5557194 C16.3318708,16.2641263 14.6104659,16.4245843 13.0000078,17.0370934 Z M4.18153178,5.0890821 L4,5.186 L4,15.005 L4.06303505,14.9835348 C6.30012607,14.2545182 8.70788476,14.2256848 11.0006279,14.9264631 L11,5.055 L10.8189038,4.96641438 C8.68672067,3.96697424 6.27082403,4.01779536 4.18153178,5.0890821 Z M13.2485233,4.93284704 L13,5.053 L13.000418,14.9237981 C15.2176022,14.24164 17.5523857,14.2497554 19.7373743,14.9197474 L20,15.004 L20,5.186 L19.7983923,5.07863244 C17.7203573,4.02022621 15.3279042,3.97173828 13.2485233,4.93284704 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Calendar/Calendar-Add-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Calendar/Calendar-Add-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M8,2 L8,4 L16,4 L16,2 L18,2 L18,4 L22,4 L22,22 L2,22 L2,4 L6,4 L6,2 L8,2 Z M20,6 L4,6 L4,20 L12,20 L12,12 L20,12 L20,6 Z M18,14 L16,14 L16,16 L14,16 L14,18 L16,18 L16,20 L18,20 L18,18 L20,18 L20,16 L18,15.999 L18,14 Z M10,16 L10,18 L6,18 L6,16 L10,16 Z M10,12 L10,14 L6,14 L6,12 L10,12 Z M18,8 L18,10 L8,10 L8,8 L18,8 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 761 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Chat-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Chat-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M22,2 L22,18 L20,18 L20,22 L12,18 L2,18 L2,2 L22,2 Z M20,4 L4,4 L4,16 L12.472136,16 L18,18.764 L18,16 L20,16 L20,4 Z M14,11 L14,13 L6,13 L6,11 L14,11 Z M18,7 L18,9 L6,9 L6,7 L18,7 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 589 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Check/Check-Isolation-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Check/Check-Isolation-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<polygon id="Primary" fill="#000000" points="7.09090909 20 2 15.0222222 3.45454545 13.6 7.09090909 17.1555556 20.5454545 4 22 5.42222222"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 544 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Copy-Item-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Copy-Item-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M12,2 L13.333,4 L20,4 L20,22 L8,22 L8,19 L4,19 L4,2 L12,2 Z M18,6 L14.667,6 L16,8 L16,19 L10,19 L10,20 L18,20 L18,6 Z M9,4 L6,4 L6,17 L14,17 L14,9 L9,9 L9,4 Z M12,12 L12,14 L8,14 L8,12 L12,12 Z M11,4.106 L11,7 L12.929,7 L11,4.106 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 649 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Edit-Content-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Edit-Content-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M14,2 L19,14 L15.5,19 L16.2,22 L7.8,22 L8.5,19 L5,14 L10,2 L14,2 Z M11,4.799 L7.269,13.754 L10.65062,18.5847269 L10.32,20 L13.679,20 L13.34938,18.5847269 L16.73,13.754 L13,4.802 L13.0010775,11.2681881 C13.5577563,11.5906726 13.9445763,12.1738636 13.9945143,12.8507377 L14,13 C14,14.1045695 13.1045695,15 12,15 C10.8954305,15 10,14.1045695 10,13 C10,12.2597476 10.4021661,11.6134261 10.9999275,11.2676063 L11,4.799 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 839 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Filter/Filter-Outline-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Filter/Filter-Outline-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M22,2 L22,6 L15,12 L15,18 L9,22 L9,12 L2,6 L2,2 L22,2 Z M20,4 L4,4 L4,5.08 L11,11.0801302 L11,18.262 L13,16.928 L13,11.0801302 L20,5.079 L20,4 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 586 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Folder-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Folder-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M7,5 L10.0003125,7 L18,7 L17.9992499,11 L22,11 L18,19 L3.78624992,19 L2.00024992,17.213 L2.00024992,5 L7,5 Z M18.764,13 L7.235,13 L5.235,17 L16.764,17 L18.764,13 Z M6.394,7 L4,7 L3.99924992,15.001 L6,11 L15.9992499,11 L16,9 L9.39481368,9 L6.394,7 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 660 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Globe-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Globe-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M12,2 C12.1003419,2 12.2003387,2.00147789 12.2999697,2.00441308 L12,2 C12.1537617,2 12.3067129,2.00347034 12.4587794,2.01033697 C12.4954521,2.01199421 12.5317231,2.01382935 12.5679426,2.01585723 C12.6264737,2.01913275 12.6851372,2.02293127 12.7436608,2.02723346 C12.7915316,2.03075478 12.8388385,2.03457179 12.8860514,2.03871689 C12.8982466,2.03978664 12.9111814,2.04094656 12.9241091,2.04213109 C18.0147981,2.50960486 22,6.78940554 22,12 C22,17.2105945 18.0147981,21.4903951 12.926111,21.9576853 L12.9241091,21.9578689 L12.8860514,21.9612831 C12.8388385,21.9654282 12.7915316,21.9692452 12.7441328,21.9727318 L12.9241091,21.9578689 C12.8058809,21.9687019 12.6870573,21.9774769 12.5676745,21.9841578 C12.5317231,21.9861707 12.4954521,21.9880058 12.4591307,21.9896472 C12.4057799,21.9920562 12.3526729,21.9940369 12.2994616,21.9956019 C12.2003387,21.9985221 12.1003419,22 12,22 C11.8996581,22 11.7996613,21.9985221 11.7000303,21.9955869 L12,22 C11.8492858,22 11.6993504,21.9966659 11.5502634,21.9900673 C11.5101985,21.9882925 11.4705955,21.9863044 11.431054,21.9840865 C11.3753284,21.9809613 11.3196693,21.9773757 11.2641361,21.9733367 C11.2121078,21.9695511 11.1604671,21.965392 11.1089387,21.960842 C11.0987512,21.9599432 11.087819,21.9589607 11.0768919,21.9579606 C5.98572453,21.4909563 2,17.2109361 2,12 C2,6.79145534 5.98206706,2.51297228 11.067884,2.04286798 L11.0698856,2.04268317 L11.1289827,2.03740833 C11.1844726,2.03262043 11.2400921,2.0282857 11.2958375,2.02440786 L11.0698856,2.04268317 C11.1795419,2.03256928 11.289711,2.02422582 11.4003642,2.01768164 C11.4684108,2.01365454 11.5370454,2.01029212 11.6058584,2.00762503 C11.6379601,2.00638212 11.6696885,2.00530261 11.7014541,2.00437123 C11.8003324,2.00146798 11.8999948,2 12,2 Z M14.9605708,13.0011053 L9.03942993,13.0011053 C9.2556374,15.7345351 10.3482037,18.1858104 12.0002978,20 C13.6518605,18.1858104 14.7443695,15.7345351 14.9605708,13.0011053 Z M7.03411742,13.0007857 L4.06201291,13.0009551 C4.43072038,15.9548613 6.40987685,18.408508 9.09305822,19.4554712 C7.91128979,17.5578463 7.19398687,15.3401075 7.03411742,13.0007857 Z M19.9379871,13.0009551 L16.9658883,13.000706 C16.8060361,15.3400045 16.0887799,17.5578096 14.9073876,19.4559914 C17.5901232,18.408508 19.5692796,15.9548613 19.9379871,13.0009551 Z M9.09228723,4.54397469 L8.94031619,4.60595876 C6.33467096,5.68538778 4.4232472,8.10203203 4.06188768,11.0000487 L7.03399151,10.9998221 C7.19349016,8.66134944 7.90999033,6.44350106 9.09228723,4.54397469 Z M12.0010044,4.00000006 L11.999,4 L11.8375134,4.1817898 L11.6215735,4.43792576 C10.1816087,6.20031489 9.23813979,8.48027149 9.03926591,10.9998612 L14.9607421,10.999963 C14.7450258,8.26670869 13.6530751,5.81544737 12.0016078,4.00098383 L12.0010044,4.00000006 Z M14.9069418,4.54452879 L14.9759,4.65460226 C16.116896,6.52836364 16.8095759,8.70587882 16.9660312,11.0002812 L19.9381123,11.0000487 C19.569728,8.04569458 17.5904271,5.59161056 14.9069418,4.54452879 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Library-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Library-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M20,20 L20,22 L4,22 L4,20 L20,20 Z M13,12 L13,18 L11,18 L11,12 L13,12 Z M18,12 L18,18 L16,18 L16,12 L18,12 Z M8,12 L8,18 L6,18 L6,12 L8,12 Z M12,2 L22,10 L2,10 L12,2 Z M12,4.561 L7.7,8 L16.299,8 L12,4.561 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 620 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Location-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Location-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M22,2 L12,22 L9.36956522,14.6304348 L2,12 L22,2 Z M17.528,6.471 L7.087,11.692 L10.9345531,13.0654469 L12.307,16.912 L17.528,6.471 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 547 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Mag-Glass-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Mag-Glass-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M15.4059165,4.30009164 C18.2686816,7.16285678 18.4591323,11.6859853 15.9772685,14.7696678 L16.7941446,15.4059165 L22,20.6117719 L20.6117719,22 L15.4059165,16.7941446 L14.7696678,15.9772685 C11.6859853,18.4591323 7.16285678,18.2686816 4.30009164,15.4059165 C1.23330279,12.3391276 1.23330279,7.36688049 4.30009164,4.30009164 C7.36688049,1.23330279 12.3391276,1.23330279 15.4059165,4.30009164 Z M5.54949693,5.54949693 C3.17273557,7.92625829 3.17273557,11.7797498 5.54949693,14.1565112 C7.92625829,16.5332726 11.7797498,16.5332726 14.1565112,14.1565112 C16.5332726,11.7797498 16.5332726,7.92625829 14.1565112,5.54949693 C11.7797498,3.17273557 7.92625829,3.17273557 5.54949693,5.54949693 Z" id="Shape" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Mail-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Mail-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M12,2 L22,8 L22,22 L2,22 L2,8 L12,2 Z M20,11.4 L12,16.2 L4,11.4 L4,20 L20,20 L20,11.4 Z M12,8.331 L7.386,11.099 L12,13.869 L16.614,11.099 L12,8.331 Z M12,4.331 L4.052,9.099 L5.443,9.934 L12,6 L18.557,9.934 L19.948,9.099 L12,4.331 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Refresh-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Refresh-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M4,12 C4,9.49542359 5.15094447,7.25966466 6.95278465,5.79277197 L8.5273711,7.10647326 C6.99782453,8.19385943 6,9.98040251 6,12 C6,15.3137085 8.6862915,18 12,18 L12,16 L16,19 L12,22 L12,20 L12,20 C7.581722,20 4,16.418278 4,12 Z M12,2 L12,4 L12,4 C16.418278,4 20,7.581722 20,12 C20,14.5045764 18.8490555,16.7403353 17.0472153,18.207228 L15.4716163,16.8942464 C17.0017351,15.806929 18,14.0200431 18,12 C18,8.6862915 15.3137085,6 12,6 L12,8 L8,5 L12,2 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 863 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/Upload-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/Upload-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M4,16 L4,20 L20,20 L20,16 L22,16 L22,22 L2,22 L2,16 L4,16 Z M12.0002405,2 L17.054,7.544 L15.658,8.963 L13,6.047 L13,18 L11,18 L11,6.049 L8.343,8.963 L6.947,7.543 L12.0002405,2 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 589 B |
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>🧩 Icons/Simple/Action/24px/View-More-MD</title>
|
||||
<g id="🧩-Icons/Simple/Action/24px/View-More-MD" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M19,9 C20.6568542,9 22,10.3431458 22,12 C22,13.6568542 20.6568542,15 19,15 C17.3431458,15 16,13.6568542 16,12 C16,10.3431458 17.3431458,9 19,9 Z M12,9 C13.6568542,9 15,10.3431458 15,12 C15,13.6568542 13.6568542,15 12,15 C10.3431458,15 9,13.6568542 9,12 C9,10.3431458 10.3431458,9 12,9 Z M5,9 C6.65685425,9 8,10.3431458 8,12 C8,13.6568542 6.65685425,15 5,15 C3.34314575,15 2,13.6568542 2,12 C2,10.3431458 3.34314575,9 5,9 Z M19.005,10.88 C18.3836797,10.88 17.88,11.3836797 17.88,12.005 C17.88,12.6263203 18.3836797,13.13 19.005,13.13 C19.6263203,13.13 20.13,12.6263203 20.13,12.005 C20.13,11.3836797 19.6263203,10.88 19.005,10.88 Z M12.005,10.88 C11.3836797,10.88 10.88,11.3836797 10.88,12.005 C10.88,12.6263203 11.3836797,13.13 12.005,13.13 C12.6263203,13.13 13.13,12.6263203 13.13,12.005 C13.13,11.3836797 12.6263203,10.88 12.005,10.88 Z M5.005,10.88 C4.38367966,10.88 3.88,11.3836797 3.88,12.005 C3.88,12.6263203 4.38367966,13.13 5.005,13.13 C5.62632034,13.13 6.13,12.6263203 6.13,12.005 C6.13,11.3836797 5.62632034,10.88 5.005,10.88 Z" id="Primary" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,254 @@
|
||||
/* ============================================================
|
||||
Familienarchiv — Design System Tokens
|
||||
Extracted from frontend/src/routes/layout.css
|
||||
============================================================ */
|
||||
|
||||
/* ─── Fonts ─── */
|
||||
/* Tinos = Times substitute, Montserrat = Gotham substitute
|
||||
(De Gruyter Brill CI) — loaded from Google Fonts. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* ─── Font families ─── */
|
||||
--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;
|
||||
|
||||
/* ─── Raw brand palette (never used directly in components) ─── */
|
||||
--palette-navy: #012851;
|
||||
--palette-mint: #a1dcd8;
|
||||
--palette-turquoise: #00c7b1;
|
||||
--palette-sand: #f0efe9;
|
||||
|
||||
/* ─── Semantic surfaces ─── */
|
||||
--c-canvas: #f0efe9; /* app background (sand) */
|
||||
--c-surface: #ffffff; /* cards / inputs */
|
||||
--c-overlay: #ffffff; /* menus, popovers */
|
||||
--c-muted: #f5f4ef; /* subtle fills */
|
||||
|
||||
/* ─── Borders ─── */
|
||||
--c-line: #e4e2d7;
|
||||
--c-line-2: #eeede8;
|
||||
|
||||
/* ─── Text (ink) ─── */
|
||||
--c-ink: #012851; /* navy — primary text */
|
||||
--c-ink-2: #4b5563; /* gray-600 — body secondary */
|
||||
--c-ink-3: #6b7280; /* gray-500 — meta / placeholder */
|
||||
|
||||
/* ─── Accent: decorative mint ─── */
|
||||
--c-accent: #a1dcd8;
|
||||
--c-accent-bg: rgba(161, 220, 216, 0.15);
|
||||
|
||||
/* ─── Primary interactive (navy) ─── */
|
||||
--c-primary: #012851;
|
||||
--c-primary-fg: #ffffff;
|
||||
|
||||
/* ─── Header — always brand-navy ─── */
|
||||
--c-header: #012851;
|
||||
|
||||
/* ─── Turquoise — transcription accent ─── */
|
||||
--c-turquoise: #00c7b1;
|
||||
--c-turquoise-fg: #ffffff;
|
||||
|
||||
/* ─── Focus ring (navy in light mode) ─── */
|
||||
--c-focus-ring: #012851;
|
||||
|
||||
/* ─── Danger ─── */
|
||||
--c-danger: #c0392b;
|
||||
--c-danger-fg: #ffffff;
|
||||
|
||||
/* ─── Warning (amber AA on white) ─── */
|
||||
--c-warning: #b45309;
|
||||
--c-warning-fg: #ffffff;
|
||||
|
||||
/* ─── PDF viewer chrome ─── */
|
||||
--c-pdf-bg: #ebebeb;
|
||||
--c-pdf-ctrl: #d8d8d8;
|
||||
--c-pdf-text: #333333;
|
||||
|
||||
/* ─── Tag dot colors (decorative) ─── */
|
||||
--c-tag-sage: #5a8a6a;
|
||||
--c-tag-sienna: #a0522d;
|
||||
--c-tag-amber: #c17a00;
|
||||
--c-tag-slate: #607080;
|
||||
--c-tag-violet: #7a4f9a;
|
||||
--c-tag-rose: #c0446e;
|
||||
--c-tag-cobalt: #3060b0;
|
||||
--c-tag-moss: #4a7a3a;
|
||||
--c-tag-sand: #9a8040;
|
||||
--c-tag-coral: #c05540;
|
||||
|
||||
/* ─── Person badge types ─── */
|
||||
--c-badge-institution-bg: #e8eff7;
|
||||
--c-badge-institution-text: #1a4971;
|
||||
--c-badge-institution-border: #c4d5e8;
|
||||
--c-badge-group-bg: #f0e8f5;
|
||||
--c-badge-group-text: #5a2d6f;
|
||||
--c-badge-group-border: #d8c5e3;
|
||||
--c-badge-unknown-bg: #fdf4e3;
|
||||
--c-badge-unknown-text: #7a5a0a;
|
||||
--c-badge-unknown-border: #f0ddb3;
|
||||
|
||||
/* ─── Spacing / radii ─── */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 2px; /* cards, inputs — "rounded-sm" in tailwind */
|
||||
--radius-md: 4px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* ─── Shadows ─── */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* ─── Breakpoints (reference only) ─── */
|
||||
--breakpoint-xs: 375px;
|
||||
|
||||
/* ─── Typographic sizes ─── */
|
||||
--text-huge: 4rem; /* 64px — hero */
|
||||
}
|
||||
|
||||
/* ─── Dark mode (navy-tinted) ─── */
|
||||
:root[data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--c-canvas: #010e1e;
|
||||
--c-surface: #011526;
|
||||
--c-overlay: #011e38;
|
||||
--c-muted: #011a30;
|
||||
|
||||
--c-line: #0d3358;
|
||||
--c-line-2: #092843;
|
||||
|
||||
--c-ink: #f0efe9;
|
||||
--c-ink-2: #9ca3af;
|
||||
--c-ink-3: #8b97a5;
|
||||
|
||||
--c-accent: #00c7b1;
|
||||
--c-accent-bg: rgba(0, 199, 177, 0.12);
|
||||
|
||||
--c-primary: #a1dcd8;
|
||||
--c-primary-fg: #012851;
|
||||
|
||||
--c-header: #012851;
|
||||
|
||||
--c-focus-ring: #a1dcd8;
|
||||
|
||||
--c-pdf-bg: #010e1e;
|
||||
--c-pdf-ctrl: #011526;
|
||||
--c-pdf-text: #f0efe9;
|
||||
|
||||
--c-danger: #e55347;
|
||||
--c-danger-fg: #ffffff;
|
||||
}
|
||||
|
||||
/* ─── Base element styles ─── */
|
||||
body {
|
||||
background-color: var(--c-canvas);
|
||||
color: var(--c-ink);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
/* ─── Semantic typography
|
||||
The app uses Montserrat for UI labels / headings / buttons and
|
||||
Tinos for body, letter content, transcriptions, and document
|
||||
titles. Labels are almost always UPPERCASE + tracking-widest. ─── */
|
||||
|
||||
.ds-display {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 64px; /* text-huge */
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.05;
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.ds-h1 {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em; /* tracking-widest */
|
||||
text-transform: uppercase;
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.ds-h2 {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.ds-h3 { /* section title — serif, used for documents */
|
||||
font-family: var(--font-serif);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.ds-body {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.ds-body-sm {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
color: var(--c-ink-2);
|
||||
}
|
||||
|
||||
.ds-meta { /* timestamps, counts, field meta */
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
color: var(--c-ink-3);
|
||||
}
|
||||
|
||||
.ds-label { /* form labels, section captions */
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--c-ink-2);
|
||||
}
|
||||
|
||||
.ds-label-xs { /* tag chip style — extra-tiny caps */
|
||||
font-family: var(--font-sans);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.ds-button-label { /* buttons, nav items */
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ds-link {
|
||||
color: var(--c-ink);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--c-accent);
|
||||
text-underline-offset: 4px;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.ds-italic-quote { /* search snippet / excerpt */
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
color: var(--c-ink-2);
|
||||
}
|
||||
1464
design_handoff_familienarchiv_redesign/prototypes/support.js
vendored
Normal file
1464
design_handoff_familienarchiv_redesign/prototypes/support.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,78 +0,0 @@
|
||||
# ADR-045 — The /zeitstrahl Ereignis/Thema regroup is client-side, over a computed letter→event link
|
||||
|
||||
**Status:** Accepted
|
||||
**Date:** 2026-06-15
|
||||
**Issue:** #827 (Zeitstrahl milestone; deferred follow-up to #779, builds on #835/PR #838 and #780)
|
||||
|
||||
## Context
|
||||
|
||||
#779 shipped `/zeitstrahl` in **Datum** mode only and deferred the Concept-A
|
||||
**Datum · Ereignis · Thema** segmented control, because the other two modes need data the
|
||||
`TimelineEntryDTO` did not carry: a letter's curated-event association (Ereignis) and a letter's
|
||||
primary root tag + colour (Thema). #835 (merged in PR #838) added the Thema fields
|
||||
(`rootTagId`/`rootTagName`/`rootTagColor`) and the batched `TimelineService → TagService`
|
||||
resolver. Meanwhile #780 added the **layer filter** — `/zeitstrahl/+page.svelte` owns
|
||||
`personalOn`/`historicalOn`/`lettersOn` `$state` and renders `TimelineView` over a client-side
|
||||
`filterTimeline(data.timeline, …)` view.
|
||||
|
||||
This ADR records the three forks specific to **#827** (the Thema enrichment + the
|
||||
`TimelineService → TagService` edge are #835's scope, not this one).
|
||||
|
||||
## Decisions
|
||||
|
||||
### 1. Grouping is a client-side presentation transform — no `grouping=` query param
|
||||
|
||||
`GET /api/timeline` already returns the whole timeline in one payload. Regrouping the loose
|
||||
letters is an in-memory transform in `lib/timeline/timelineGrouping.ts` (`bucketLetters`,
|
||||
`buildEventLookup`, `hasLooseLetters`), driven by a `groupingMode` `$state` in `+page.svelte`.
|
||||
A server-side `grouping=DATE|EVENT|TOPIC` parameter was rejected: it would add lasting API
|
||||
surface and a bucket query for zero benefit on an already-loaded payload, and switching modes
|
||||
must issue **zero** extra fetches (REQ-002). The blast radius stays inside the read view.
|
||||
|
||||
### 2. The letter→event link is computed, reusing `timeline_event_documents` — no new column
|
||||
|
||||
A letter clusters under a curated event iff that event's `documents` set (ADR-040;
|
||||
`@ManyToMany @BatchSize(50)` over join table `timeline_event_documents`) contains the letter's
|
||||
document. `TimelineService.assemble` resolves this in **one batched membership pass** —
|
||||
`resolveLetterEventLinks` builds a single `docId → eventId` map over the already-loaded events
|
||||
(no per-letter query), reusing the same `eventRepository.findAll()` it already iterates for the
|
||||
event entries. The result is exposed as one nullable DTO field, `linkedEventId`. A new persisted
|
||||
FK on the document/letter row was rejected: it duplicates an existing capability and opens a
|
||||
mutating write path + Flyway migration for no gain. **No new column, no migration, no new
|
||||
cross-domain edge** (the field derives from data `TimelineService` already loads). `linkedEventId`
|
||||
is deliberately **not** `@Schema(requiredMode = REQUIRED)` — it is null for non-letter entries and
|
||||
for letters under no curated event — so the generated TypeScript type stays optional.
|
||||
|
||||
### 3. Grouping composes with the #780 layer filter as **filter-then-group**
|
||||
|
||||
The pipeline is `data.timeline → filterTimeline() (#780) → groupingMode transform → TimelineView`.
|
||||
The grouping `$state` lives in `+page.svelte` beside the filter `$state`, and the regroup runs over
|
||||
the layer-**filtered** view, never the raw `data.timeline`. Grouping the raw timeline and filtering
|
||||
afterward was rejected: the counts and buckets would disagree with the layer toggles, re-opening
|
||||
the #780 count-mismatch the page already closed. Two consequences fall out of filter-then-group:
|
||||
|
||||
- **Letters layer off → the grouping control disables, kept in place (REQ-018).** With no loose
|
||||
letters in the filtered view there is nothing to regroup; the control renders `aria-disabled`
|
||||
(no header reflow), keeps its selected mode, and announces a screen-reader reason.
|
||||
- **A letter whose only linking event was filtered out falls back to "Weitere Briefe" (REQ-019).**
|
||||
`buildEventLookup` is built from the events present in the _filtered_ view, so Ereignis clusters
|
||||
only under events that survived the filter; everything else lands in the per-year fallback bucket.
|
||||
|
||||
The control is a `role="radiogroup"` (single-select), deliberately distinct from #780's
|
||||
`aria-pressed` toggle filter, stacked above the filter trigger so the two read as one control
|
||||
cluster — the top-right corner stays the #842 add-event CTA.
|
||||
|
||||
## Consequences
|
||||
|
||||
- One nullable field (`linkedEventId`) is added to `TimelineEntryDTO` (17 components); the
|
||||
regenerated `frontend/src/lib/generated/api.ts` is committed in the same PR. No table, column,
|
||||
Flyway migration, endpoint, `ErrorCode`, or `Permission` changes.
|
||||
- The regroup is pure and fully unit-tested independently of the components; `TimelineView`/
|
||||
`YearBand` render the axis-fixed event layer identically across all three modes (REQ-001) and
|
||||
only swap the loose-letter rendering for per-year `LetterBucket`s off Datum.
|
||||
- The new Thema bucket-header chip (`BucketHeaderChip`) is a filled variant tinted from
|
||||
`rootTagColor`; the shipped neutral per-letter `TagChip` (#838) is reused as-is and suppressed
|
||||
inside its own bucket (REQ-017). All `lib/timeline` components keep the `{...}`-escaping
|
||||
guarantee — a grep gate forbids `{@html}` (REQ-009).
|
||||
- Read-only feature: no new authn/authz surface beyond the existing `READ_ALL` on
|
||||
`GET /api/timeline`.
|
||||
@@ -1,374 +0,0 @@
|
||||
# Zeitstrahl grouped-view contained-card layout — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Replace the grouped-view's full-width bucket blocks with self-contained cards — a cluster (event or root tag) becomes one bordered card whose header is the event/tag and whose body shows the first 5 letters with a show-more toggle; the leftover bin collapses to a count-only drawer; a same-year curated event renders *as* its card header (no duplicate pill).
|
||||
|
||||
**Architecture:** Frontend-only, on branch `feat/issue-827-zeitstrahl-grouping` (worktree `.worktrees/issue-827-zeitstrahl-grouping`). Evolve `LetterBucket.svelte` into the contained card (preview cap + show-more + collapsed drawer + card chrome + optional event header) and rewire `YearBand.svelte`'s Ereignis branch so a same-year curated event becomes the card header instead of a separate pill. Datum mode is untouched. Design doc: `docs/superpowers/specs/2026-06-15-zeitstrahl-grouped-view-layout-design.md`.
|
||||
|
||||
**Tech Stack:** Svelte 5 (runes), Tailwind 4, Paraglide i18n, Vitest browser mode (`--project=client` for `*.svelte.spec.ts`, `--project=server` for plain `*.spec.ts`).
|
||||
|
||||
**Conventions (read before starting):**
|
||||
- Red→green TDD, one logical change per commit, `Refs #827` on the last body line.
|
||||
- Run only the specific spec file(s) — never the full suite. Client: `npx vitest run <file> --project=client`; server: `... --project=server`.
|
||||
- Before each commit: `npx prettier --write <changed files>`, then `git add <files>` + `git diff --cached --stat` to verify the staged set, then commit (the pre-commit hook runs `prettier --check` + `eslint`).
|
||||
- **No `new Set()`/`new Map()` inside a `.svelte` file** — `svelte/prefer-svelte-reactivity` errors even on transient locals. Use plain arrays (`find`/`some`/`filter`) inside `$derived`. (Pure `.ts` modules are fine.)
|
||||
- Prettier rewrites `class:foo` shorthand to `class:foo={foo}` — expect that.
|
||||
- Factories in `frontend/src/lib/timeline/test-factories.ts`: `makeEntry`, `makeYear`, `makeTimelineDTO`.
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
- `frontend/src/lib/timeline/timelineGrouping.ts` — add `CLUSTER_PREVIEW = 5`; remove `BUCKET_DENSE_THRESHOLD`/`isBucketDense` (no longer used). Keep `bucketLetters`, `buildEventLookup`, `hasLooseLetters`, `tagColorVar`.
|
||||
- `frontend/src/lib/timeline/LetterBucket.svelte` — the contained card: card chrome + colour rail + header variants (tag chip / event-header / cross-year text label / drawer label) + body (first-5 preview, show-more toggle, drawer collapsed-by-default). Drop the `YearLetterStrip` branch.
|
||||
- `frontend/src/lib/timeline/YearBand.svelte` — Ereignis branch: a same-year curated event renders as a `LetterBucket` card with `event={entry}` (no separate pill); letterless/derived/world events stay plain; cross-year clusters + the fallback drawer render after the axis entries.
|
||||
- `frontend/messages/{de,en,es}.json` — two new keys: `timeline_bucket_show_more` (`{count}`), `timeline_bucket_show_less`.
|
||||
- Specs: `LetterBucket.svelte.spec.ts`, `YearBand.svelte.spec.ts`, `messages.spec.ts` (extend), plus the route spec stays green.
|
||||
- `.specify/rtm.md` — update REQ-014/REQ-020 rows.
|
||||
|
||||
---
|
||||
|
||||
## Task 1: Preview cap + show-more toggle (drop the sparkline)
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/lib/timeline/timelineGrouping.ts`
|
||||
- Modify: `frontend/src/lib/timeline/LetterBucket.svelte`
|
||||
- Test: `frontend/src/lib/timeline/LetterBucket.svelte.spec.ts`
|
||||
|
||||
- [ ] **Step 1: Add the i18n keys** in all three locales (so the toggle has a label).
|
||||
|
||||
`frontend/messages/de.json` (next to the existing `timeline_bucket_*` keys):
|
||||
```json
|
||||
"timeline_bucket_show_more": "+ {count} weitere Briefe anzeigen",
|
||||
"timeline_bucket_show_less": "Weniger anzeigen",
|
||||
```
|
||||
`en.json`: `"+ {count} more letters"`, `"Show fewer"`. `es.json`: `"+ {count} cartas más"`, `"Mostrar menos"`.
|
||||
Run `npx @inlang/paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide` (from `frontend/`) or let the dev/test build compile them.
|
||||
|
||||
- [ ] **Step 2: Write the failing tests** in `LetterBucket.svelte.spec.ts` (replace the `manyLetters`-based density tests from PR #847 — the sparkline is going away).
|
||||
|
||||
```ts
|
||||
const manyLetters = (n: number) =>
|
||||
Array.from({ length: n }, (_, i) => makeEntry({ documentId: `d${i}`, eventDate: `1916-0${(i % 9) + 1}-01` }));
|
||||
|
||||
describe('LetterBucket — preview cap + show-more (#827 redesign)', () => {
|
||||
it('shows only the first 5 letters with a show-more toggle when the cluster is larger', () => {
|
||||
const bucket: Bucket = { key: 'tag:t1', kind: 'tag', title: 'Krieg', color: 'sienna', letters: manyLetters(8) };
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
|
||||
expect(document.querySelector('[data-testid="strip-expand"]')).toBeNull(); // sparkline gone
|
||||
});
|
||||
|
||||
it('expands to all letters and collapses back on toggle', async () => {
|
||||
const bucket: Bucket = { key: 'tag:t1', kind: 'tag', title: 'Krieg', color: 'sienna', letters: manyLetters(8) };
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
(document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement).click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(8);
|
||||
(document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement).click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
||||
});
|
||||
|
||||
it('shows all letters and no toggle for a small cluster (<= 5)', () => {
|
||||
const bucket: Bucket = { key: 'tag:t1', kind: 'tag', title: 'Tod', color: null, letters: manyLetters(3) };
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(3);
|
||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).toBeNull();
|
||||
});
|
||||
});
|
||||
```
|
||||
Add `import { tick } from 'svelte';` at the top of the spec if absent.
|
||||
|
||||
- [ ] **Step 3: Run the tests — verify they fail.** `npx vitest run src/lib/timeline/LetterBucket.svelte.spec.ts --project=client` → FAIL (still rendering the strip / all cards).
|
||||
|
||||
- [ ] **Step 4: Implement.** In `timelineGrouping.ts` remove `BUCKET_DENSE_THRESHOLD` + `isBucketDense`, add:
|
||||
```ts
|
||||
/** Letters shown before a cluster needs a "show more" toggle (#827 redesign). */
|
||||
export const CLUSTER_PREVIEW = 5;
|
||||
```
|
||||
In `LetterBucket.svelte`: remove the `YearLetterStrip` import + the `dense`/strip branch. Add expand state and a visible-slice derived; render `CLUSTER_PREVIEW` compact cards, then a toggle when there are more:
|
||||
```svelte
|
||||
import { CLUSTER_PREVIEW, tagColorVar, type LetterBucket } from './timelineGrouping';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
// ...
|
||||
let expanded = $state(false);
|
||||
const visible = $derived(expanded ? bucket.letters : bucket.letters.slice(0, CLUSTER_PREVIEW));
|
||||
const hiddenCount = $derived(bucket.letters.length - CLUSTER_PREVIEW);
|
||||
```
|
||||
Body markup (replace the `{#if dense}…{:else}…` block):
|
||||
```svelte
|
||||
<ul class="space-y-1.5">
|
||||
{#each visible as letter (entryKey(letter))}
|
||||
<li><LetterCard entry={letter} variant={cardVariant} suppressTagChip={mode === 'thema'} compact={true} /></li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if hiddenCount > 0}
|
||||
<button
|
||||
type="button"
|
||||
data-testid="bucket-show-more"
|
||||
aria-expanded={expanded}
|
||||
onclick={() => (expanded = !expanded)}
|
||||
style="display: inline-flex; align-items: center; min-height: 44px"
|
||||
class="mt-1 px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
>
|
||||
{expanded ? m.timeline_bucket_show_less() : m.timeline_bucket_show_more({ count: hiddenCount })}
|
||||
</button>
|
||||
{/if}
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Run the tests — verify they pass.** Same command → PASS. Also run `src/lib/timeline/timelineGrouping.spec.ts --project=server` (still green; only constants changed).
|
||||
|
||||
- [ ] **Step 6: Commit.**
|
||||
```bash
|
||||
npx prettier --write src/lib/timeline/LetterBucket.svelte src/lib/timeline/timelineGrouping.ts src/lib/timeline/LetterBucket.svelte.spec.ts messages/de.json messages/en.json messages/es.json
|
||||
cd .. && git add frontend/src/lib/timeline/LetterBucket.svelte frontend/src/lib/timeline/timelineGrouping.ts frontend/src/lib/timeline/LetterBucket.svelte.spec.ts frontend/messages/{de,en,es}.json
|
||||
git diff --cached --stat
|
||||
git commit -m "$(printf 'feat(timeline): cap grouped clusters at 5 letters with a show-more toggle\n\nReplaces the in-bucket month-density sparkline with a first-5 preview + show-more\n/ show-less toggle, the agreed grouped-view pattern. Datum mode keeps the >12\nYearLetterStrip.\n\nRefs #827')"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Collapsed drawer for the leftover bin
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/lib/timeline/LetterBucket.svelte`
|
||||
- Test: `frontend/src/lib/timeline/LetterBucket.svelte.spec.ts`
|
||||
|
||||
The fallback bucket (`kind === 'fallback'` — "Weitere Briefe"/"Ohne Thema") is a junk drawer: render it **collapsed** (count only, no letters) until the user reveals it; revealing shows the same first-5 + show-more body.
|
||||
|
||||
- [ ] **Step 1: Write the failing tests.**
|
||||
```ts
|
||||
describe('LetterBucket — leftover drawer (#827 redesign)', () => {
|
||||
const fb = (n: number, mode: 'event' | 'thema'): Bucket => ({
|
||||
key: '__fallback__', kind: 'fallback', color: null,
|
||||
letters: Array.from({ length: n }, (_, i) => makeEntry({ documentId: `f${i}`, eventDate: `1916-01-0${(i % 9) + 1}` }))
|
||||
});
|
||||
it('renders collapsed — count + reveal, no letter cards — until opened', () => {
|
||||
render(LetterBucket, { bucket: fb(20, 'event'), mode: 'event', year: 1916 });
|
||||
expect(document.querySelector('a.lcard')).toBeNull();
|
||||
expect(document.body.textContent).toContain(m.timeline_bucket_other_letters());
|
||||
expect(document.querySelector('[data-testid="bucket-reveal"]')).not.toBeNull();
|
||||
});
|
||||
it('reveals the first 5 letters when opened', async () => {
|
||||
render(LetterBucket, { bucket: fb(20, 'event'), mode: 'event', year: 1916 });
|
||||
(document.querySelector('[data-testid="bucket-reveal"]') as HTMLButtonElement).click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run — verify fail.** `npx vitest run src/lib/timeline/LetterBucket.svelte.spec.ts --project=client` → FAIL.
|
||||
|
||||
- [ ] **Step 3: Implement.** In `LetterBucket.svelte` add a `revealed` state defaulting to `bucket.kind !== 'fallback'` (non-drawers start open). Gate the body on it; when collapsed, render only the header + a reveal button:
|
||||
```svelte
|
||||
let revealed = $state(bucket.kind !== 'fallback');
|
||||
// header always renders; body only when revealed
|
||||
```
|
||||
Collapsed drawer markup (when `!revealed`): the fallback label + count already render in the header; add the reveal control:
|
||||
```svelte
|
||||
{#if !revealed}
|
||||
<button type="button" data-testid="bucket-reveal" onclick={() => (revealed = true)}
|
||||
style="display:inline-flex;align-items:center;min-height:44px"
|
||||
class="px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy">
|
||||
{m.timeline_bucket_show_more({ count: bucket.letters.length })}
|
||||
</button>
|
||||
{:else}
|
||||
<!-- the Task-1 body (ul + show-more) -->
|
||||
{/if}
|
||||
```
|
||||
Give the drawer a dashed neutral rail: add `class:border-dashed={bucket.kind === 'fallback'}` to the card.
|
||||
|
||||
- [ ] **Step 4: Run — verify pass.** Same command → PASS. Re-run the Task-1 tests too (still green).
|
||||
|
||||
- [ ] **Step 5: Commit.**
|
||||
```bash
|
||||
npx prettier --write src/lib/timeline/LetterBucket.svelte src/lib/timeline/LetterBucket.svelte.spec.ts
|
||||
cd .. && git add frontend/src/lib/timeline/LetterBucket.svelte frontend/src/lib/timeline/LetterBucket.svelte.spec.ts
|
||||
git diff --cached --stat
|
||||
git commit -m "$(printf 'feat(timeline): collapse the leftover Weitere-Briefe/Ohne-Thema bin to a drawer\n\nThe catch-all bucket renders count-only by default behind a reveal control, then\nexpands to the first-5 + show-more body. Keeps the junk drawer quiet instead of\nflooding the timeline.\n\nRefs #827')"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Card chrome (the cluster is one contained card)
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/lib/timeline/LetterBucket.svelte`
|
||||
- Test: `frontend/src/lib/timeline/LetterBucket.svelte.spec.ts`
|
||||
|
||||
Turn the `<section>` (rail-only, from PR #847) into a bordered card: `rounded` + `border border-line` + `bg-surface` + `shadow-sm`, keeping the coloured left rail (mint for event cluster, tag colour for tag, dashed neutral for the drawer). Header on a subtle `bg-canvas`/tint bar.
|
||||
|
||||
- [ ] **Step 1: Write the failing test.**
|
||||
```ts
|
||||
it('renders the cluster as a contained card (bordered, rounded, surface)', () => {
|
||||
const bucket: Bucket = { key: 'tag:t1', kind: 'tag', title: 'Krieg', color: 'sienna', letters: [makeEntry({ documentId: 'a' })] };
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
const card = document.querySelector('[data-testid="letter-bucket"]') as HTMLElement;
|
||||
expect(card.className).toMatch(/\brounded\b|rounded-/);
|
||||
expect(card.className).toContain('border');
|
||||
expect(card.className).toContain('bg-surface');
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run — verify fail.** → FAIL (current section is `my-3 border-l-2 pl-3`, no `bg-surface`/`rounded`/full `border`).
|
||||
|
||||
- [ ] **Step 3: Implement.** Update the `<section data-testid="letter-bucket">` classes to e.g.:
|
||||
```
|
||||
class="my-3 overflow-hidden rounded-md border border-line border-l-2 bg-surface shadow-sm"
|
||||
```
|
||||
keep `class:border-l-brand-mint={isEventCluster}`, `class:border-dashed={bucket.kind==='fallback'}`, and the inline `style={railStyle}` for the tag colour. Move the body padding inside (e.g. wrap header + body in a `px-3 py-2`), and give the header a tint bar (`bg-canvas` for events, plain for the drawer). Verify the existing "coloured left rail" test (`expect(section.style).toContain('var(--c-tag-sienna)')`) still holds — keep `railStyle` on the section.
|
||||
|
||||
- [ ] **Step 4: Run — verify pass.** Run the whole `LetterBucket.svelte.spec.ts` → all PASS (including the PR #847 rail test).
|
||||
|
||||
- [ ] **Step 5: Commit.**
|
||||
```bash
|
||||
npx prettier --write src/lib/timeline/LetterBucket.svelte src/lib/timeline/LetterBucket.svelte.spec.ts
|
||||
cd .. && git add frontend/src/lib/timeline/LetterBucket.svelte frontend/src/lib/timeline/LetterBucket.svelte.spec.ts
|
||||
git diff --cached --stat
|
||||
git commit -m "$(printf 'feat(timeline): make a grouped cluster one contained card\n\nWraps each cluster in a bordered, rounded surface card (keeping the colour rail)\nso the header and its letters read as a single unit.\n\nRefs #827')"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Same-year curated event becomes the card header (kills the duplicate)
|
||||
|
||||
**Files:**
|
||||
- Modify: `frontend/src/lib/timeline/LetterBucket.svelte` (add `event` + `canWrite` props + event-header rendering)
|
||||
- Modify: `frontend/src/lib/timeline/YearBand.svelte` (render the card in place of the pill for a same-year curated event)
|
||||
- Test: `frontend/src/lib/timeline/LetterBucket.svelte.spec.ts`, `frontend/src/lib/timeline/YearBand.svelte.spec.ts`
|
||||
|
||||
When a curated event has letters in the same band, the event IS the card header — no separate pill. Reuse `getAccentConfig` (glyph/label) + `timelineDateLabel` + the `kuratiert/abgeleitet` provenance + the `✎` edit affordance (curated + eventId + canWrite), mirroring `EventPill.svelte`.
|
||||
|
||||
- [ ] **Step 1: Write the failing tests.**
|
||||
|
||||
`LetterBucket.svelte.spec.ts`:
|
||||
```ts
|
||||
import { getAccentConfig } from './eventCardConfig';
|
||||
it('renders the curated event as the card header when given an `event` (no separate pill)', () => {
|
||||
const event = makeEntry({ kind: 'EVENT', type: 'PERSONAL', derived: false, eventId: 'e1',
|
||||
title: 'Ein gewaltiger Stadtbrand', eventDate: '1916-07-06', senderName: '', receiverName: '', documentId: undefined });
|
||||
const bucket: Bucket = { key: 'event:e1', kind: 'event', title: 'Ein gewaltiger Stadtbrand', color: null,
|
||||
letters: [makeEntry({ documentId: 'a', linkedEventId: 'e1' })] };
|
||||
render(LetterBucket, { bucket, mode: 'event', year: 1916, event, canWrite: true });
|
||||
const header = document.querySelector('[data-testid="bucket-event-header"]') as HTMLElement;
|
||||
expect(header.textContent).toContain('Ein gewaltiger Stadtbrand');
|
||||
expect(header.textContent).toContain(m.timeline_provenance_curated());
|
||||
expect(document.querySelector('[data-testid="event-edit"]')?.getAttribute('href')).toBe('/zeitstrahl/events/e1/edit');
|
||||
});
|
||||
it('shows no edit affordance in the header when canWrite is false', () => {
|
||||
const event = makeEntry({ kind: 'EVENT', type: 'PERSONAL', derived: false, eventId: 'e1', title: 'X', senderName: '', receiverName: '', documentId: undefined });
|
||||
const bucket: Bucket = { key: 'event:e1', kind: 'event', title: 'X', color: null, letters: [makeEntry({ documentId: 'a' })] };
|
||||
render(LetterBucket, { bucket, mode: 'event', year: 1916, event, canWrite: false });
|
||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||
});
|
||||
```
|
||||
|
||||
`YearBand.svelte.spec.ts` (replace/extend the PR #847 "nests an event cluster under its pill" test — the pill is now the card header):
|
||||
```ts
|
||||
it('renders a same-year curated event as one card header, with no separate pill and no duplicate title', () => {
|
||||
const pill = makeEntry({ kind: 'EVENT', type: 'PERSONAL', derived: false, eventId: 'e1',
|
||||
title: 'Ein gewaltiger Stadtbrand', eventDate: '1916-07-06', senderName: '', receiverName: '', documentId: undefined });
|
||||
const letter = makeEntry({ documentId: 'a', linkedEventId: 'e1', eventDate: '1916-07-06' });
|
||||
render(YearBand, { year: makeYear(1916, [pill, letter]), groupingMode: 'event', eventLookup: new Map([['e1', 'Ein gewaltiger Stadtbrand']]), canWrite: true });
|
||||
const occurrences = (document.body.textContent ?? '').split('Ein gewaltiger Stadtbrand').length - 1;
|
||||
expect(occurrences).toBe(1); // once — in the card header
|
||||
expect(document.querySelector('[data-testid="bucket-event-header"]')).not.toBeNull();
|
||||
expect(document.querySelector('a.lcard.ev')).not.toBeNull(); // its letter, inside
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run — verify fail.** Both specs → FAIL.
|
||||
|
||||
- [ ] **Step 3: Implement `LetterBucket` header.** Add props `event?: TimelineEntryDTO` and `canWrite = false`. Derive (mirroring `EventPill.svelte`):
|
||||
```svelte
|
||||
import { getAccentConfig } from './eventCardConfig';
|
||||
import { timelineDateLabel } from './dateLabel';
|
||||
// ...
|
||||
const accent = $derived(event ? getAccentConfig(event) : null);
|
||||
const eventDateLabel = $derived(event ? timelineDateLabel(event.eventDate, event.precision, event.eventDateEnd) : null);
|
||||
const provenance = $derived(event?.derived ? m.timeline_provenance_derived() : m.timeline_provenance_curated());
|
||||
const eventSubtitle = $derived(eventDateLabel ? `${eventDateLabel} · ${provenance}` : provenance);
|
||||
const canEdit = $derived(canWrite && !!event && !event.derived && event.eventId != null);
|
||||
```
|
||||
Header branch order: `if (event)` → event header (`data-testid="bucket-event-header"`: glyph from `accent.glyph` aria-hidden + sr-only `accent.label`, `event.title`, `eventSubtitle`, count, and the `✎` link `/zeitstrahl/events/{event.eventId}/edit` with `data-testid="event-edit"` when `canEdit`); else the existing `thema/tag` chip / `fallback` label branches.
|
||||
|
||||
- [ ] **Step 4: Implement `YearBand` Ereignis branch.** When a curated event entry has a matching same-year bucket, render the card *instead of* the pill, passing `event={entry}` + `canWrite`; do **not** also push the `{ t: 'event' }` pill row for it. Letterless/derived/world events still push their pill/band row. Sketch:
|
||||
```svelte
|
||||
if (groupingMode === 'event') {
|
||||
const buckets = bucketLetters(letters, 'event', eventLookup);
|
||||
const sameYear = (id) => buckets.find((b) => b.kind === 'event' && b.key === `event:${id}`);
|
||||
for (const entry of year.entries) {
|
||||
if (entry.kind !== 'EVENT') continue;
|
||||
const bucket = entry.eventId ? sameYear(entry.eventId) : undefined;
|
||||
if (bucket) out.push({ t: 'eventcard', entry, bucket }); // card replaces pill
|
||||
else out.push({ t: 'event', entry }); // plain pill/band
|
||||
}
|
||||
for (const bucket of buckets) {
|
||||
if (bucket.kind === 'fallback' || !year.entries.some((e) => e.kind === 'EVENT' && `event:${e.eventId}` === bucket.key))
|
||||
out.push({ t: 'bucket', bucket, nested: false }); // cross-year cluster / drawer
|
||||
}
|
||||
return out;
|
||||
}
|
||||
```
|
||||
Add a `Row` variant `{ t: 'eventcard'; entry: TimelineEntryDTO; bucket: LetterBucketModel }` and template branch:
|
||||
```svelte
|
||||
{:else if row.t === 'eventcard'}
|
||||
<LetterBucket bucket={row.bucket} mode="event" year={year.year} event={row.entry} canWrite={canWrite} />
|
||||
```
|
||||
Keep the existing `{ t: 'bucket' }` branch (cross-year clusters + drawer) rendering `<LetterBucket … nested={false} />` with no `event` prop → text header. Remember: **no `new Map`/`Set` in the component** — use `buckets.find` / `year.entries.some` as above.
|
||||
|
||||
- [ ] **Step 5: Run — verify pass.** `npx vitest run src/lib/timeline/LetterBucket.svelte.spec.ts src/lib/timeline/YearBand.svelte.spec.ts src/lib/timeline/grouping-event-layer-identity.svelte.spec.ts --project=client` → PASS. The identity spec (REQ-001) still passes because derived/world fixtures are unchanged; if a now-stale assertion expects a pill for a *curated-with-letters* event, update it to expect the card header (REQ-001 amendment) and note it in the commit.
|
||||
|
||||
- [ ] **Step 6: Commit.**
|
||||
```bash
|
||||
npx prettier --write src/lib/timeline/LetterBucket.svelte src/lib/timeline/YearBand.svelte src/lib/timeline/LetterBucket.svelte.spec.ts src/lib/timeline/YearBand.svelte.spec.ts
|
||||
cd .. && git add frontend/src/lib/timeline/LetterBucket.svelte frontend/src/lib/timeline/YearBand.svelte frontend/src/lib/timeline/LetterBucket.svelte.spec.ts frontend/src/lib/timeline/YearBand.svelte.spec.ts
|
||||
git diff --cached --stat
|
||||
git commit -m "$(printf 'feat(timeline): render a same-year curated event as its cluster card header\n\nA curated event with letters in its own band now becomes the contained card header\n(glyph, title, date, provenance, edit pencil) instead of a separate floating pill —\nthe title reads once. Derived life-events, world-bands, and letterless event pills\nare unchanged (REQ-001 amended for curated-with-letters).\n\nRefs #827')"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 5: Regression sweep + route view + docs
|
||||
|
||||
**Files:**
|
||||
- Verify: route + cross-year + thema specs
|
||||
- Modify: `.specify/rtm.md`
|
||||
|
||||
- [ ] **Step 1: Run the affected specs (client).**
|
||||
```
|
||||
npx vitest run \
|
||||
src/lib/timeline/BucketHeaderChip.svelte.spec.ts src/lib/timeline/LetterCard.svelte.spec.ts \
|
||||
src/lib/timeline/LetterBucket.svelte.spec.ts src/lib/timeline/YearBand.svelte.spec.ts \
|
||||
src/lib/timeline/GroupingControl.svelte.spec.ts src/lib/timeline/grouping-event-layer-identity.svelte.spec.ts \
|
||||
src/lib/timeline/TimelineView.svelte.spec.ts src/routes/zeitstrahl/page.svelte.spec.ts --project=client
|
||||
```
|
||||
Expected: all PASS. Fix any cross-year/thema spec that assumed the old header (it should now find the card; thema card header is still the `BucketHeaderChip`).
|
||||
|
||||
- [ ] **Step 2: Run the server specs.** `npx vitest run src/lib/timeline/timelineGrouping.spec.ts src/lib/timeline/timeline-no-raw-html.spec.ts src/lib/messages.spec.ts --project=server` → PASS. If `messages.spec.ts` parity fails, it's the two new keys — they must be in de/en/es.
|
||||
|
||||
- [ ] **Step 3: Type-check the changed files.** `npm run check 2>&1 | grep -E "LetterBucket|YearBand|timelineGrouping"` → no ERROR lines (baseline noise elsewhere is fine).
|
||||
|
||||
- [ ] **Step 4: Update the RTM.** In `.specify/rtm.md`, edit REQ-014 (event-clustered letters live inside a contained card whose header is the same-year event; first-5 + show-more) and REQ-020 (clusters are contained cards with a 5-letter preview + show-more; the leftover bin is a collapsed drawer; the sparkline is no longer used in grouped mode), citing the new tests.
|
||||
|
||||
- [ ] **Step 5: Commit.**
|
||||
```bash
|
||||
cd .. && git add .specify/rtm.md
|
||||
git diff --cached --stat
|
||||
git commit -m "$(printf 'docs(rtm): trace the grouped-view contained-card layout (#827)\n\nRefs #827')"
|
||||
```
|
||||
|
||||
- [ ] **Step 6: Push.** `git push origin feat/issue-827-zeitstrahl-grouping`
|
||||
|
||||
---
|
||||
|
||||
## Self-Review notes (author)
|
||||
|
||||
- **Spec coverage:** contained card (Task 3) ✓; first-5 + show-more (Task 1) ✓; collapsed drawer (Task 2) ✓; same-year event → card header / no duplicate (Task 4) ✓; derived/world unchanged (Task 4 keeps plain rows) ✓; thema chip header reused (existing, verified Task 5) ✓; cross-year text header (existing `{t:'bucket'}` path, verified Task 5) ✓; sparkline dropped from grouped mode (Task 1) ✓.
|
||||
- **Naming consistency:** `CLUSTER_PREVIEW` (Task 1) used in Tasks 1–2; testids `bucket-show-more` / `bucket-reveal` / `bucket-event-header` / `event-edit` consistent across tasks; `Row` variant `eventcard` defined and consumed in Task 4.
|
||||
- **REQ-001 amendment** is intentional and documented in the spec; Task 4 Step 5 flags fixing any stale identity assertion.
|
||||
@@ -1,102 +0,0 @@
|
||||
# Zeitstrahl grouped-view layout redesign
|
||||
|
||||
**Date:** 2026-06-15
|
||||
**Feature:** #827 (regroup `/zeitstrahl` by Ereignis/Thema) — layout follow-up on PR #847
|
||||
**Status:** Approved (brainstorm), pending implementation plan
|
||||
|
||||
> The REQ contract for #827 lives in the Gitea issue body (and the amendment comment of
|
||||
> 2026-06-15). This document records the **layout/visual design** agreed in the visual
|
||||
> brainstorm and the REQ deltas it implies. Mockups: `.superpowers/brainstorm/*/content/`.
|
||||
|
||||
## Problem
|
||||
|
||||
The first grouped-view implementation (PR #847) fixed the flood and the duplicate event title,
|
||||
but two issues remained on review of the live view:
|
||||
|
||||
1. **Weak belonging.** A clustered event's letters dropped below its centered pill as a
|
||||
full-width block with only a thin left rail. The connection between an event and its letters
|
||||
read weakly — the eye couldn't tell the letters belonged to the pill above.
|
||||
2. **Layout inconsistency.** In Datum mode letters alternate left/right of the centered spine
|
||||
(events/density centered). In grouped mode the letters became full-width, breaking that
|
||||
rhythm with no clear reason.
|
||||
|
||||
## Decision: a cluster is one contained card
|
||||
|
||||
A clustered event (Ereignis) or root tag (Thema) renders as **one bordered card** whose header
|
||||
is the event/tag itself and whose body holds that cluster's letters. Belonging becomes
|
||||
structural (a single container), not positional guesswork. This replaces the full-width block.
|
||||
|
||||
### Ereignis mode, per year band
|
||||
|
||||
1. **Derived life-events** (Geburt/Tod/Heirat, `abgeleitet`) never cluster — they carry no
|
||||
document links, so they are always **plain axis fixtures, unchanged from Datum mode**. A
|
||||
**world-band** (`historisch`) is normally letterless and stays a plain band; on the rare
|
||||
occasion a historical event has linked letters it follows rule 2 (becomes a card).
|
||||
2. **A curated event (PERSONAL or HISTORICAL) with letters in this band** → one mint-bordered card:
|
||||
- **Header** = the event's glyph + title + date + `kuratiert` + edit-✎ + count (the pill's
|
||||
content, laid out as a header bar). This *replaces* the separate floating pill for that
|
||||
event in this band — killing the duplicate title.
|
||||
- **Body** = the cluster's letters, **first 5 shown, then a "+ N weitere Briefe anzeigen"
|
||||
toggle** that expands/collapses the rest. Letters use the compact `LetterCard` variant.
|
||||
3. **A curated event with no letters in this band** → stays a plain centered pill (no empty card).
|
||||
4. **A curated event whose letters fall in a different year than its pill** → those letters form a
|
||||
labeled card in *their* year (header = event name as text, no ✎/pill since the pill lives
|
||||
elsewhere); the pill stays in its own band. No adjacent duplication.
|
||||
5. **Leftover letters** (linked to no surviving curated event) → a collapsed neutral, dashed
|
||||
**"✉ N Briefe ohne Ereignis · anzeigen ›"** drawer. Clicking expands to the same first-5 +
|
||||
show-more list. No preview letters until opened.
|
||||
|
||||
### Thema mode
|
||||
|
||||
Identical shape. Each card's header is the **tinted root-tag chip** (`● Krieg · 24`,
|
||||
`BucketHeaderChip`, fixed-ink label per the contrast fix) instead of an event pill; there is no
|
||||
axis pill for a tag, so every tag cluster is a standalone card. The per-letter `TagChip` stays
|
||||
suppressed inside its own card (REQ-017). The leftover drawer reads **"Ohne Thema"**.
|
||||
|
||||
### Layout / spine
|
||||
|
||||
- Cluster cards are **centered on the spine** (like events already are), not full-width-flush —
|
||||
consistent with how grouped units (events) relate to the axis. Individual chronological
|
||||
letters keep alternating left/right only in **Datum** mode.
|
||||
- Each card carries a colour left rail: **mint** for an Ereignis cluster, the **tag colour** for
|
||||
a Thema cluster, **neutral dashed** for the leftover drawer.
|
||||
|
||||
## Components affected
|
||||
|
||||
- `LetterBucket.svelte` — becomes the contained card: header slot (pill-content / tag chip /
|
||||
drawer label / cross-year text label) + body with the first-5 cap and the show-more toggle.
|
||||
Drop the `YearLetterStrip` (sparkline) branch from grouped mode.
|
||||
- `YearBand.svelte` — in Ereignis mode, a same-year curated event renders *as* the card header
|
||||
(merge pill into the card) instead of pill-then-nested-bucket; derived/world/letterless events
|
||||
stay plain; cross-year clusters and the leftover drawer render after the axis entries.
|
||||
- `LetterCard.svelte` — compact variant already exists (PR #847); reused inside cards.
|
||||
- `BucketHeaderChip.svelte` — reused as the Thema card header (contrast fix already shipped).
|
||||
- `timelineGrouping.ts` — the first-visible cap (`CLUSTER_PREVIEW = 5`) replaces
|
||||
`BUCKET_DENSE_THRESHOLD`; helpers unchanged otherwise.
|
||||
- Possibly a small `ClusterCard`/header sub-component if `LetterBucket` grows too large.
|
||||
|
||||
## REQ deltas (to fold into issue #827)
|
||||
|
||||
- **REQ-001 (amended):** derived life-events, world-bands, and *letterless* curated event pills
|
||||
render identically across modes; a curated event **that has letters** renders as its cluster
|
||||
card's header in grouped mode (no longer byte-identical to its Datum pill). Every event keeps
|
||||
its spine position (year).
|
||||
- **REQ-003 / REQ-014 (amended):** event-clustered letters live inside a contained card; the
|
||||
header is the event (same-year) or a text label (cross-year). First 5 shown + show-more.
|
||||
- **REQ-020 (amended):** grouped clusters are contained colour-railed cards with a first-5
|
||||
preview + show-more toggle; the leftover bin is a collapsed count-only drawer. The
|
||||
month-density `YearLetterStrip` is **no longer used in grouped mode** (still used in Datum
|
||||
dense years).
|
||||
|
||||
## Out of scope
|
||||
|
||||
- Datum mode (untouched — keeps the alternating-axis zigzag and the >12 sparkline strip).
|
||||
- Backend / DTO (`linkedEventId` and root-tag fields already shipped; no change).
|
||||
- New i18n beyond a show-more / drawer label string set.
|
||||
|
||||
## Testing approach
|
||||
|
||||
TDD per component, mirroring PR #847: `LetterBucket` (card header variants, first-5 cap,
|
||||
show-more expand/collapse, drawer collapsed-by-default, colour rail), `YearBand` (same-year merge
|
||||
= no duplicate title; cross-year keeps a label; derived/world pills unchanged), and the route
|
||||
spec for the assembled view. Run targeted `--project=client` / `--project=server` specs only.
|
||||
@@ -50,7 +50,7 @@ src/
|
||||
│ │ ├── relationship/ # Relationship form + chip components
|
||||
│ │ └── genealogy/ # Stammbaum (family tree) components
|
||||
│ ├── tag/ # Tag domain: TagInput, TagChipList, TagParentPicker
|
||||
│ ├── timeline/ # Timeline (Zeitstrahl) domain: TimelineView, YearBand, EventPill, WorldBand, LetterCard, LetterBucket, BucketHeaderChip, GroupingControl, TagChip, YearLetterStrip, GapSpan; dateLabel + timelineDensity + timelineFilter + timelineGrouping + eventCardConfig (imports $lib/shared only, never document/)
|
||||
│ ├── timeline/ # Timeline (Zeitstrahl) domain: TimelineView, YearBand, EventPill, WorldBand, LetterCard, YearLetterStrip, GapSpan; dateLabel + timelineDensity + eventCardConfig (imports $lib/shared only, never document/)
|
||||
│ ├── geschichte/ # Geschichte (story) domain: editor + card
|
||||
│ ├── notification/ # Notification bell + dropdown + store
|
||||
│ ├── activity/ # Activity feed (Chronik) components
|
||||
|
||||
@@ -1,123 +0,0 @@
|
||||
import AxeBuilder from '@axe-core/playwright';
|
||||
import { test, expect, type APIRequestContext } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* Global /zeitstrahl grouping toggle (#827). Runs against the real stack with the seeded admin
|
||||
* session (auth.setup). Covers REQ-002 (switching modes issues zero extra GET /api/timeline
|
||||
* requests — the regroup is client-side), REQ-011 (the control stays usable and overflow-free at
|
||||
* 320px with full-word aria-labels and ≥44px tap targets), and REQ-010g (a 320px axe pass over
|
||||
* the control in both light and dark mode).
|
||||
*
|
||||
* Per e2e/CLAUDE.md, E2E is not yet wired into CI — this gate runs locally for now, like the
|
||||
* #780 layer-filter spec it mirrors.
|
||||
*/
|
||||
|
||||
const stamp = () => new Date().toISOString().replace(/[^0-9]/g, '');
|
||||
|
||||
async function createPerson(request: APIRequestContext, firstName: string, lastName: string) {
|
||||
const res = await request.post('/api/persons', {
|
||||
data: { personType: 'PERSON', firstName, lastName }
|
||||
});
|
||||
if (!res.ok()) throw new Error(`create person failed: ${res.status()}`);
|
||||
return (await res.json()).id as string;
|
||||
}
|
||||
|
||||
/** Seeds one dated letter so the timeline has a loose letter and the grouping control is enabled. */
|
||||
async function seedDatedLetter(request: APIRequestContext, isoDate: string, title: string) {
|
||||
const senderId = await createPerson(request, 'Group-Test', `Absender ${stamp()}`);
|
||||
const receiverId = await createPerson(request, 'Group-Test', `Empfaenger ${stamp()}`);
|
||||
|
||||
const createRes = await request.post('/api/documents', { multipart: { title } });
|
||||
if (!createRes.ok()) throw new Error(`create document failed: ${createRes.status()}`);
|
||||
const docId = (await createRes.json()).id as string;
|
||||
|
||||
const put = await request.put(`/api/documents/${docId}`, {
|
||||
multipart: {
|
||||
title,
|
||||
documentDate: isoDate,
|
||||
metaDatePrecision: 'DAY',
|
||||
senderId,
|
||||
receiverIds: receiverId
|
||||
}
|
||||
});
|
||||
if (!put.ok()) throw new Error(`update document failed: ${put.status()}`);
|
||||
}
|
||||
|
||||
test.describe('Zeitstrahl — grouping toggle (#827)', () => {
|
||||
test('switching grouping modes issues no extra timeline fetch (REQ-002)', async ({
|
||||
page,
|
||||
request
|
||||
}) => {
|
||||
await seedDatedLetter(request, '1909-05-05', `E2E Group Brief ${stamp()}`);
|
||||
|
||||
let timelineRequests = 0;
|
||||
page.on('request', (req) => {
|
||||
if (req.url().includes('/api/timeline')) timelineRequests++;
|
||||
});
|
||||
|
||||
await page.goto('/zeitstrahl');
|
||||
await page.waitForSelector('[data-hydrated]');
|
||||
await expect(page.getByTestId('grouping-control')).toBeVisible();
|
||||
|
||||
const afterLoad = timelineRequests;
|
||||
await page.locator('[data-value="event"]').click();
|
||||
await page.locator('[data-value="thema"]').click();
|
||||
await page.locator('[data-value="date"]').click();
|
||||
|
||||
// the regroup is a pure client-side transform — not one more GET /api/timeline
|
||||
expect(timelineRequests).toBe(afterLoad);
|
||||
});
|
||||
|
||||
test('the control stays overflow-free and operable at 320px (REQ-011)', async ({
|
||||
page,
|
||||
request
|
||||
}) => {
|
||||
await seedDatedLetter(request, '1911-02-02', `E2E Group 320 ${stamp()}`);
|
||||
|
||||
await page.setViewportSize({ width: 320, height: 800 });
|
||||
await page.goto('/zeitstrahl');
|
||||
await page.waitForSelector('[data-hydrated]');
|
||||
|
||||
const control = page.getByTestId('grouping-control');
|
||||
await expect(control).toBeVisible();
|
||||
|
||||
// the control fits inside the 320px viewport — no horizontal overflow
|
||||
const box = await control.boundingBox();
|
||||
expect(box).not.toBeNull();
|
||||
expect(box!.x + box!.width).toBeLessThanOrEqual(321);
|
||||
|
||||
for (const [value, fullWord] of [
|
||||
['date', 'Datum'],
|
||||
['event', 'Ereignis'],
|
||||
['thema', 'Thema']
|
||||
]) {
|
||||
const radio = page.locator(`[data-value="${value}"]`);
|
||||
const radioBox = await radio.boundingBox();
|
||||
expect(radioBox!.height).toBeGreaterThanOrEqual(44);
|
||||
expect(radioBox!.width).toBeGreaterThanOrEqual(44);
|
||||
// the abbreviated segment still announces its full word
|
||||
expect(await radio.getAttribute('aria-label')).toBe(fullWord);
|
||||
}
|
||||
});
|
||||
|
||||
test('no wcag2a/wcag2aa violations on the grouping control at 320px (light + dark) (REQ-010g)', async ({
|
||||
page,
|
||||
request
|
||||
}) => {
|
||||
await seedDatedLetter(request, '1915-06-15', `E2E Group A11y ${stamp()}`);
|
||||
|
||||
await page.setViewportSize({ width: 320, height: 800 });
|
||||
await page.goto('/zeitstrahl');
|
||||
await page.waitForSelector('[data-hydrated]');
|
||||
await expect(page.getByTestId('grouping-control')).toBeVisible();
|
||||
|
||||
const scan = () => new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();
|
||||
|
||||
const light = await scan();
|
||||
expect(light.violations, JSON.stringify(light.violations, null, 2)).toEqual([]);
|
||||
|
||||
await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
|
||||
const dark = await scan();
|
||||
expect(dark.violations, JSON.stringify(dark.violations, null, 2)).toEqual([]);
|
||||
});
|
||||
});
|
||||
77
frontend/e2e/zeitstrahl-note.spec.ts
Normal file
77
frontend/e2e/zeitstrahl-note.spec.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import { test, expect, type APIRequestContext } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* Curator-note display on /zeitstrahl (#844) — validates that a description saved
|
||||
* against a curated timeline event surfaces in the DOM under that event's title.
|
||||
* Covers REQ-001 (description flows from backend) and REQ-004 (rendered below title).
|
||||
*/
|
||||
|
||||
const stamp = () => new Date().toISOString().replace(/[^0-9]/g, '');
|
||||
|
||||
async function createEvent(
|
||||
request: APIRequestContext,
|
||||
type: 'PERSONAL' | 'HISTORICAL',
|
||||
title: string,
|
||||
description: string
|
||||
): Promise<string> {
|
||||
const res = await request.post('/api/timeline/events', {
|
||||
data: {
|
||||
title,
|
||||
type,
|
||||
eventDate: '1918-11-11',
|
||||
precision: 'DAY',
|
||||
description
|
||||
}
|
||||
});
|
||||
if (!res.ok()) throw new Error(`create event failed: ${res.status()} ${await res.text()}`);
|
||||
return (await res.json()).id as string;
|
||||
}
|
||||
|
||||
async function deleteEvent(request: APIRequestContext, id: string): Promise<void> {
|
||||
await request.delete(`/api/timeline/events/${id}`);
|
||||
}
|
||||
|
||||
test.describe('Zeitstrahl event note (#844)', () => {
|
||||
let personalEventId: string;
|
||||
let historicalEventId: string;
|
||||
const personalTitle = `E2E Persönlich ${stamp()}`;
|
||||
const historicalTitle = `E2E Historisch ${stamp()}`;
|
||||
const personalNote = 'Persönliche Notiz für diesen Moment.';
|
||||
const historicalNote = 'Historischer Kontext für dieses Ereignis.';
|
||||
|
||||
test.beforeAll(async ({ request }) => {
|
||||
personalEventId = await createEvent(request, 'PERSONAL', personalTitle, personalNote);
|
||||
historicalEventId = await createEvent(request, 'HISTORICAL', historicalTitle, historicalNote);
|
||||
});
|
||||
|
||||
test.afterAll(async ({ request }) => {
|
||||
if (personalEventId) await deleteEvent(request, personalEventId);
|
||||
if (historicalEventId) await deleteEvent(request, historicalEventId);
|
||||
});
|
||||
|
||||
test('PERSONAL curated event note appears below its title on /zeitstrahl (REQ-001, REQ-004)', async ({
|
||||
page
|
||||
}) => {
|
||||
await page.goto('/zeitstrahl');
|
||||
|
||||
const personalEntry = page.locator('li').filter({ hasText: personalTitle }).first();
|
||||
await expect(personalEntry).toBeVisible({ timeout: 10000 });
|
||||
|
||||
const note = personalEntry.locator('[data-testid="event-note"]');
|
||||
await expect(note).toBeVisible();
|
||||
await expect(note).toContainText(personalNote);
|
||||
});
|
||||
|
||||
test('HISTORICAL curated event note appears below its title on /zeitstrahl (REQ-001, REQ-004)', async ({
|
||||
page
|
||||
}) => {
|
||||
await page.goto('/zeitstrahl');
|
||||
|
||||
const historicalEntry = page.locator('li').filter({ hasText: historicalTitle }).first();
|
||||
await expect(historicalEntry).toBeVisible({ timeout: 10000 });
|
||||
|
||||
const note = historicalEntry.locator('[data-testid="event-note"]');
|
||||
await expect(note).toBeVisible();
|
||||
await expect(note).toContainText(historicalNote);
|
||||
});
|
||||
});
|
||||
@@ -1049,25 +1049,12 @@
|
||||
"timeline_derived_birth": "Geburt",
|
||||
"timeline_derived_death": "Tod",
|
||||
"timeline_derived_marriage": "Heirat",
|
||||
"timeline_grouping_date": "Gruppierung: Datum",
|
||||
"timeline_grouping_event": "Gruppierung: Ereignis",
|
||||
"timeline_grouping_thema": "Gruppierung: Thema",
|
||||
"timeline_grouping_aria_label": "Gruppierung",
|
||||
"timeline_grouping_segment_date": "Datum",
|
||||
"timeline_grouping_segment_event": "Ereignis",
|
||||
"timeline_grouping_segment_thema": "Thema",
|
||||
"timeline_grouping_segment_date_short": "Dat.",
|
||||
"timeline_grouping_segment_event_short": "Ereig.",
|
||||
"timeline_grouping_segment_thema_short": "Thema",
|
||||
"timeline_grouping_disabled_reason": "Briefe sind ausgeblendet – es gibt nichts zu gruppieren.",
|
||||
"timeline_grouping_multitag_hint": "Brief mit mehreren Tags erscheint unter seinem primären Tag.",
|
||||
"timeline_bucket_other_letters": "Weitere Briefe",
|
||||
"timeline_bucket_no_topic": "Ohne Thema",
|
||||
"timeline_bucket_show_more": "+ {count} weitere Briefe anzeigen",
|
||||
"timeline_bucket_show_less": "Weniger anzeigen",
|
||||
"timeline_provenance_derived": "abgeleitet",
|
||||
"timeline_provenance_curated": "kuratiert",
|
||||
"timeline_bucket_show_more": "+ {count} weitere Briefe anzeigen",
|
||||
"timeline_bucket_show_less": "Weniger anzeigen",
|
||||
"timeline_letter_glyph_label": "Brief",
|
||||
"timeline_cluster_letter_count": "{count} Briefe",
|
||||
"timeline_tag_chip_label": "Thema",
|
||||
"timeline_layer_historical_suffix": "historisch",
|
||||
"timeline_strip_density_caption": "Monats-Dichte",
|
||||
@@ -1082,6 +1069,8 @@
|
||||
"timeline_filter_trigger_active": "Filter ({count} aktiv)",
|
||||
"timeline_filter_reset": "Filter zurücksetzen",
|
||||
"timeline_filter_empty_state": "Keine Einträge entsprechen diesen Filtern.",
|
||||
"timeline_note_show_more": "mehr anzeigen",
|
||||
"timeline_note_show_less": "weniger anzeigen",
|
||||
"event_editor_new_title": "Neues Ereignis",
|
||||
"event_editor_edit_title": "Ereignis bearbeiten",
|
||||
"event_editor_section_when": "Wann",
|
||||
|
||||
@@ -1049,25 +1049,12 @@
|
||||
"timeline_derived_birth": "Birth",
|
||||
"timeline_derived_death": "Death",
|
||||
"timeline_derived_marriage": "Marriage",
|
||||
"timeline_grouping_date": "Grouping: Date",
|
||||
"timeline_grouping_event": "Grouping: Event",
|
||||
"timeline_grouping_thema": "Grouping: Topic",
|
||||
"timeline_grouping_aria_label": "Grouping",
|
||||
"timeline_grouping_segment_date": "Date",
|
||||
"timeline_grouping_segment_event": "Event",
|
||||
"timeline_grouping_segment_thema": "Topic",
|
||||
"timeline_grouping_segment_date_short": "Date",
|
||||
"timeline_grouping_segment_event_short": "Event",
|
||||
"timeline_grouping_segment_thema_short": "Topic",
|
||||
"timeline_grouping_disabled_reason": "Letters are hidden — there is nothing to group.",
|
||||
"timeline_grouping_multitag_hint": "A letter with several tags appears under its primary tag.",
|
||||
"timeline_bucket_other_letters": "More letters",
|
||||
"timeline_bucket_no_topic": "No topic",
|
||||
"timeline_bucket_show_more": "+ {count} more letters",
|
||||
"timeline_bucket_show_less": "Show fewer",
|
||||
"timeline_provenance_derived": "derived",
|
||||
"timeline_provenance_curated": "curated",
|
||||
"timeline_bucket_show_more": "+ {count} more letters",
|
||||
"timeline_bucket_show_less": "Show fewer",
|
||||
"timeline_letter_glyph_label": "Letter",
|
||||
"timeline_cluster_letter_count": "{count} letters",
|
||||
"timeline_tag_chip_label": "Topic",
|
||||
"timeline_layer_historical_suffix": "historical",
|
||||
"timeline_strip_density_caption": "Monthly density",
|
||||
@@ -1082,6 +1069,8 @@
|
||||
"timeline_filter_trigger_active": "Filter ({count} active)",
|
||||
"timeline_filter_reset": "Reset filters",
|
||||
"timeline_filter_empty_state": "No entries match these filters.",
|
||||
"timeline_note_show_more": "show more",
|
||||
"timeline_note_show_less": "show less",
|
||||
"event_editor_new_title": "New event",
|
||||
"event_editor_edit_title": "Edit event",
|
||||
"event_editor_section_when": "When",
|
||||
|
||||
@@ -1049,25 +1049,12 @@
|
||||
"timeline_derived_birth": "Nacimiento",
|
||||
"timeline_derived_death": "Fallecimiento",
|
||||
"timeline_derived_marriage": "Matrimonio",
|
||||
"timeline_grouping_date": "Agrupación: Fecha",
|
||||
"timeline_grouping_event": "Agrupación: Evento",
|
||||
"timeline_grouping_thema": "Agrupación: Tema",
|
||||
"timeline_grouping_aria_label": "Agrupación",
|
||||
"timeline_grouping_segment_date": "Fecha",
|
||||
"timeline_grouping_segment_event": "Evento",
|
||||
"timeline_grouping_segment_thema": "Tema",
|
||||
"timeline_grouping_segment_date_short": "Fecha",
|
||||
"timeline_grouping_segment_event_short": "Evento",
|
||||
"timeline_grouping_segment_thema_short": "Tema",
|
||||
"timeline_grouping_disabled_reason": "Las cartas están ocultas: no hay nada que agrupar.",
|
||||
"timeline_grouping_multitag_hint": "Una carta con varias etiquetas aparece bajo su etiqueta principal.",
|
||||
"timeline_bucket_other_letters": "Más cartas",
|
||||
"timeline_bucket_no_topic": "Sin tema",
|
||||
"timeline_bucket_show_more": "+ {count} cartas más",
|
||||
"timeline_bucket_show_less": "Mostrar menos",
|
||||
"timeline_provenance_derived": "derivado",
|
||||
"timeline_provenance_curated": "curado",
|
||||
"timeline_bucket_show_more": "+ {count} cartas más",
|
||||
"timeline_bucket_show_less": "Mostrar menos",
|
||||
"timeline_letter_glyph_label": "Carta",
|
||||
"timeline_cluster_letter_count": "{count} cartas",
|
||||
"timeline_tag_chip_label": "Tema",
|
||||
"timeline_layer_historical_suffix": "histórico",
|
||||
"timeline_strip_density_caption": "Densidad mensual",
|
||||
@@ -1082,6 +1069,8 @@
|
||||
"timeline_filter_trigger_active": "Filtro ({count} activos)",
|
||||
"timeline_filter_reset": "Restablecer filtros",
|
||||
"timeline_filter_empty_state": "Ninguna entrada coincide con estos filtros.",
|
||||
"timeline_note_show_more": "mostrar más",
|
||||
"timeline_note_show_less": "mostrar menos",
|
||||
"event_editor_new_title": "Nuevo evento",
|
||||
"event_editor_edit_title": "Editar evento",
|
||||
"event_editor_section_when": "Cuándo",
|
||||
|
||||
6
frontend/package-lock.json
generated
6
frontend/package-lock.json
generated
@@ -9515,9 +9515,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.3.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.3.tgz",
|
||||
"integrity": "sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA==",
|
||||
"version": "7.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.5.tgz",
|
||||
"integrity": "sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.27.0",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { formatDate } from '$lib/shared/utils/date';
|
||||
import { formatDocumentStatus } from '$lib/document/documentStatusLabel';
|
||||
import { getInitials, personAvatarColor } from '$lib/person/personFormat';
|
||||
import Avatar from '$lib/shared/primitives/Avatar.svelte';
|
||||
import RelationshipPill from '$lib/person/relationship/RelationshipPill.svelte';
|
||||
import DocumentDate from './DocumentDate.svelte';
|
||||
import type { DatePrecision } from '$lib/shared/utils/documentDate';
|
||||
@@ -88,13 +88,7 @@ function getFullName(person: Person): string {
|
||||
href="/persons/{person.id}"
|
||||
class="group flex items-center gap-2.5 rounded px-2 py-1.5 transition-colors hover:bg-muted"
|
||||
>
|
||||
<span
|
||||
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
|
||||
style="background-color: {personAvatarColor(person.id)}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{getInitials(person.displayName)}
|
||||
</span>
|
||||
<Avatar name={person.displayName} size={28} decorative={true} />
|
||||
<span class="min-w-0 truncate font-serif text-sm text-ink">{getFullName(person)}</span>
|
||||
{#if relationLabel}
|
||||
<RelationshipPill label={relationLabel} />
|
||||
|
||||
@@ -2469,6 +2469,7 @@ export interface components {
|
||||
rootTagColor?: string;
|
||||
/** Format: uuid */
|
||||
linkedEventId?: string;
|
||||
description?: string;
|
||||
};
|
||||
TimelineYearDTO: {
|
||||
/** Format: int32 */
|
||||
@@ -2648,11 +2649,11 @@ export interface components {
|
||||
empty?: boolean;
|
||||
};
|
||||
PageableObject: {
|
||||
paged?: boolean;
|
||||
/** Format: int32 */
|
||||
pageNumber?: number;
|
||||
/** Format: int32 */
|
||||
pageSize?: number;
|
||||
paged?: boolean;
|
||||
/** Format: int64 */
|
||||
offset?: number;
|
||||
sort?: components["schemas"]["SortObject"];
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { plainExcerpt } from '$lib/shared/utils/extractText';
|
||||
import { getInitials, personAvatarColor } from '$lib/person/personFormat';
|
||||
import Avatar from '$lib/shared/primitives/Avatar.svelte';
|
||||
import { avatarFor } from '$lib/shared/avatar';
|
||||
import { formatAuthorName, formatPublishedAt } from './utils';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
@@ -26,13 +27,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
|
||||
>
|
||||
<!-- Meta column (desktop) -->
|
||||
<div class="hidden w-40 shrink-0 flex-col items-start gap-1 border-r border-line-2 p-3 sm:flex">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="flex h-7 w-7 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white"
|
||||
style="background-color: {personAvatarColor(authorName)}"
|
||||
>
|
||||
{getInitials(authorName)}
|
||||
</span>
|
||||
<Avatar name={authorName} size={28} decorative={true} />
|
||||
<span class="font-sans text-sm leading-tight font-semibold text-ink">{authorName}</span>
|
||||
{#if publishedAt}
|
||||
<span class="font-sans text-sm text-ink-3">{publishedAt}</span>
|
||||
@@ -63,7 +58,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="h-2.5 w-2.5 shrink-0 rounded-full"
|
||||
style="background-color: {personAvatarColor(authorName)}"
|
||||
style="background-color: {avatarFor(authorName).bg}"
|
||||
></span>
|
||||
<span class="font-sans text-sm font-semibold text-ink">{authorName}</span>
|
||||
{#if isDraft}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { safeHtml } from '$lib/shared/utils/sanitize';
|
||||
import { getInitials, personAvatarColor } from '$lib/person/personFormat';
|
||||
import Avatar from '$lib/shared/primitives/Avatar.svelte';
|
||||
import { formatDocumentMetaLine } from './utils';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
@@ -51,13 +51,7 @@ function personName(p: { firstName?: string; lastName?: string }): string {
|
||||
style="display: inline-flex; min-height: 44px"
|
||||
class="inline-flex min-h-[44px] items-center gap-2 rounded-full border border-line bg-surface px-3 py-1.5 font-sans text-sm font-medium text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full font-sans text-[8px] font-bold text-white"
|
||||
style="background-color: {personAvatarColor(p.id)}"
|
||||
>
|
||||
{getInitials(personName(p))}
|
||||
</span>
|
||||
<Avatar name={personName(p)} size={26} decorative={true} />
|
||||
{personName(p)}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -74,9 +74,10 @@ describe('message key parity', () => {
|
||||
// every locale so no surface ever falls back to a missing translation.
|
||||
it('zeitstrahl visual-fidelity keys are present in all locales (#833 REQ-015)', () => {
|
||||
const requiredKeys = [
|
||||
'timeline_grouping_date',
|
||||
'timeline_provenance_derived',
|
||||
'timeline_provenance_curated',
|
||||
'timeline_bucket_show_more',
|
||||
'timeline_bucket_show_less',
|
||||
'timeline_letter_glyph_label',
|
||||
'timeline_layer_historical_suffix',
|
||||
'timeline_strip_density_caption',
|
||||
@@ -99,6 +100,14 @@ describe('message key parity', () => {
|
||||
expect(es).toMatchObject({ timeline_tag_chip_label: 'Tema' });
|
||||
});
|
||||
|
||||
// #850 finding #6: the event-card letter count carries an sr-only "{count} Briefe" so the
|
||||
// bare "· 2" never announces to a screen reader without context.
|
||||
it('zeitstrahl cluster letter-count key is present in all locales (#850 finding #6)', () => {
|
||||
expect(de).toHaveProperty('timeline_cluster_letter_count');
|
||||
expect(en).toHaveProperty('timeline_cluster_letter_count');
|
||||
expect(es).toHaveProperty('timeline_cluster_letter_count');
|
||||
});
|
||||
|
||||
// #780 REQ-010: the layer-filter strings are Paraglide keys in every locale.
|
||||
// timeline_filter_trigger (0 active) and timeline_filter_trigger_active ({count},
|
||||
// ≥1 active) are distinct keys so the trigger never reads "Filter (0 aktiv)".
|
||||
@@ -133,33 +142,4 @@ describe('message key parity', () => {
|
||||
expect(es, `missing key in es: ${key}`).toHaveProperty(key);
|
||||
}
|
||||
});
|
||||
|
||||
// #827 REQ-012: the grouping toggle + bucket strings are new Paraglide keys in
|
||||
// every locale; the pre-existing timeline_grouping_date / timeline_tag_chip_label /
|
||||
// timeline_filter_* set is reused, never re-added.
|
||||
it('zeitstrahl grouping + bucket keys are present in all locales (#827 REQ-012)', () => {
|
||||
const requiredKeys = [
|
||||
'timeline_grouping_event',
|
||||
'timeline_grouping_thema',
|
||||
'timeline_grouping_aria_label',
|
||||
'timeline_grouping_segment_date',
|
||||
'timeline_grouping_segment_event',
|
||||
'timeline_grouping_segment_thema',
|
||||
'timeline_grouping_segment_date_short',
|
||||
'timeline_grouping_segment_event_short',
|
||||
'timeline_grouping_segment_thema_short',
|
||||
'timeline_grouping_disabled_reason',
|
||||
'timeline_grouping_multitag_hint',
|
||||
'timeline_bucket_other_letters',
|
||||
'timeline_bucket_no_topic'
|
||||
];
|
||||
for (const key of requiredKeys) {
|
||||
expect(de, `missing key in de: ${key}`).toHaveProperty(key);
|
||||
expect(en, `missing key in en: ${key}`).toHaveProperty(key);
|
||||
expect(es, `missing key in es: ${key}`).toHaveProperty(key);
|
||||
}
|
||||
// the pre-existing meta-line + chip keys are reused by #827, not re-declared
|
||||
expect(de).toHaveProperty('timeline_grouping_date');
|
||||
expect(de).toHaveProperty('timeline_tag_chip_label');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
|
||||
import Avatar from '$lib/shared/primitives/Avatar.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type Person = components['schemas']['PersonSummaryDTO'];
|
||||
@@ -25,12 +26,6 @@ const showGlyph = $derived(
|
||||
isUnconfirmed || hasNoName || (person.personType != null && person.personType !== 'PERSON')
|
||||
);
|
||||
|
||||
const initials = $derived.by(() => {
|
||||
const first = person.firstName?.[0] ?? '';
|
||||
const last = person.lastName?.[0] ?? '';
|
||||
return first ? first + last : last;
|
||||
});
|
||||
|
||||
const documentCount = $derived(person.documentCount ?? 0);
|
||||
</script>
|
||||
|
||||
@@ -38,15 +33,13 @@ const documentCount = $derived(person.documentCount ?? 0);
|
||||
<div
|
||||
class="flex h-full flex-col items-center gap-2 rounded border border-line bg-surface px-4 py-6 text-center shadow-sm transition-all duration-200 hover:border-l-4 hover:border-accent hover:shadow-md"
|
||||
>
|
||||
<!-- Avatar: confirmed persons get a primary-coloured initials disc; institutions/groups
|
||||
and unconfirmed entries get a neutral, muted glyph so "unverified" is pre-attentive. -->
|
||||
<div
|
||||
class={[
|
||||
'flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full font-serif text-base font-bold transition-colors',
|
||||
isUnconfirmed || hasNoName ? 'bg-muted text-ink-2' : 'bg-primary text-primary-fg'
|
||||
]}
|
||||
>
|
||||
{#if showGlyph}
|
||||
<!-- Avatar: confirmed persons get a deterministic name-hashed Avatar disc;
|
||||
institutions/groups and unconfirmed entries get a neutral, muted glyph
|
||||
so "unverified" is pre-attentive. -->
|
||||
{#if showGlyph}
|
||||
<div
|
||||
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-muted text-ink-2 transition-colors"
|
||||
>
|
||||
{#if person.personType === 'INSTITUTION'}
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
@@ -84,10 +77,11 @@ const documentCount = $derived(person.documentCount ?? 0);
|
||||
class="h-6 w-6 opacity-70"
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
{initials}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Confirmed person — deterministic name-hash Avatar (DESIGN_RULES §5) -->
|
||||
<Avatar name={person.displayName} size={48} decorative={true} />
|
||||
{/if}
|
||||
|
||||
<!-- Name -->
|
||||
<p class="font-serif text-sm font-bold text-ink group-hover:underline">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateName, getInitials, personAvatarColor } from '$lib/person/personFormat';
|
||||
import { abbreviateName } from '$lib/person/personFormat';
|
||||
import Avatar from '$lib/shared/primitives/Avatar.svelte';
|
||||
|
||||
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
|
||||
|
||||
@@ -11,20 +12,12 @@ type Props = {
|
||||
let { person, abbreviated }: Props = $props();
|
||||
|
||||
const name = $derived(abbreviated ? abbreviateName(person) : person.displayName);
|
||||
const avatarColor = $derived(personAvatarColor(person.id));
|
||||
const initials = $derived(getInitials(person.displayName));
|
||||
</script>
|
||||
|
||||
<a
|
||||
href="/persons/{person.id}"
|
||||
class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5 hover:border-primary hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
|
||||
class="inline-flex shrink-0 items-center gap-1.5 rounded-sm border border-line bg-muted px-2 py-0.5 hover:border-primary hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
|
||||
>
|
||||
<span
|
||||
class="flex h-[25px] w-[25px] shrink-0 items-center justify-center rounded-full text-[13px] font-bold text-white"
|
||||
style="background-color: {avatarColor}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{initials}
|
||||
</span>
|
||||
<Avatar name={person.displayName} size={26} decorative={true} />
|
||||
<span class="text-[14px] font-semibold text-ink">{name}</span>
|
||||
</a>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { getInitials, abbreviateName, formatXsMeta, personAvatarColor } from './personFormat';
|
||||
import { getInitials, abbreviateName, formatXsMeta } from './personFormat';
|
||||
import { formatDate } from '$lib/shared/utils/date';
|
||||
|
||||
// ─── getInitials ─────────────────────────────────────────────────────────────
|
||||
@@ -97,29 +97,6 @@ describe('formatXsMeta', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// ─── personAvatarColor ───────────────────────────────────────────────────────
|
||||
|
||||
const PALETTE = ['#012851', '#5A3080', '#007596', '#2A6040', '#803020'];
|
||||
|
||||
describe('personAvatarColor', () => {
|
||||
it('returns a value from the palette', () => {
|
||||
expect(PALETTE).toContain(personAvatarColor('abc'));
|
||||
});
|
||||
|
||||
it('is deterministic — same id always returns same color', () => {
|
||||
const id = '550e8400-e29b-41d4-a716-446655440000';
|
||||
expect(personAvatarColor(id)).toBe(personAvatarColor(id));
|
||||
});
|
||||
|
||||
it('all 5 palette entries are reachable across 1000 random UUIDs', () => {
|
||||
const seen = new Set<string>();
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
seen.add(personAvatarColor(crypto.randomUUID()));
|
||||
}
|
||||
expect(seen.size).toBe(5);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── formatDate ──────────────────────────────────────────────────────────────
|
||||
|
||||
describe('formatDate', () => {
|
||||
|
||||
@@ -8,16 +8,6 @@ type DocForMeta = {
|
||||
documentDate?: string | null;
|
||||
};
|
||||
|
||||
const AVATAR_PALETTE = ['#012851', '#5A3080', '#007596', '#2A6040', '#803020'] as const;
|
||||
|
||||
function djb2(str: string): number {
|
||||
let hash = 5381;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
hash = (hash * 33) ^ str.charCodeAt(i);
|
||||
}
|
||||
return Math.abs(hash);
|
||||
}
|
||||
|
||||
/** Localized fallback when a person has no name parts. */
|
||||
export function unknownPersonName(): string {
|
||||
return m.person_unknown();
|
||||
@@ -83,7 +73,3 @@ export function formatXsMeta(doc: DocForMeta): string {
|
||||
|
||||
return parts.join(' · ');
|
||||
}
|
||||
|
||||
export function personAvatarColor(personId: string): string {
|
||||
return AVATAR_PALETTE[djb2(personId) % AVATAR_PALETTE.length];
|
||||
}
|
||||
|
||||
92
frontend/src/lib/shared/avatar.spec.ts
Normal file
92
frontend/src/lib/shared/avatar.spec.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { avatarFor } from './avatar';
|
||||
import { AVATAR_PALETTE } from './avatarPalette';
|
||||
|
||||
// ─── palette ─────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('AVATAR_PALETTE via avatarFor', () => {
|
||||
it('palette has exactly 10 colors', () => {
|
||||
expect(AVATAR_PALETTE).toHaveLength(10);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── avatarFor ────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('avatarFor', () => {
|
||||
it('returns a bg color from the 10-color palette', () => {
|
||||
const result = avatarFor('Marcel Raddatz');
|
||||
expect(AVATAR_PALETTE as readonly string[]).toContain(result.bg);
|
||||
});
|
||||
|
||||
it('is deterministic — same name always returns same color', () => {
|
||||
expect(avatarFor('Karl Müller').bg).toBe(avatarFor('Karl Müller').bg);
|
||||
expect(avatarFor('Karl Müller').initials).toBe(avatarFor('Karl Müller').initials);
|
||||
});
|
||||
|
||||
it('returns first + last initial for a two-word name', () => {
|
||||
expect(avatarFor('Anna Raddatz').initials).toBe('AR');
|
||||
});
|
||||
|
||||
it('returns first + last initial for a three-word name (middle name ignored)', () => {
|
||||
expect(avatarFor('Anna Maria Raddatz').initials).toBe('AR');
|
||||
});
|
||||
|
||||
it('returns single initial for a single-word name', () => {
|
||||
expect(avatarFor('Raddatz').initials).toBe('R');
|
||||
});
|
||||
|
||||
it('returns empty initials and palette[0] for an empty string (guard)', () => {
|
||||
const result = avatarFor('');
|
||||
expect(result.initials).toBe('');
|
||||
expect(result.bg).toBe(AVATAR_PALETTE[0]);
|
||||
});
|
||||
|
||||
it('does not throw on whitespace-only name', () => {
|
||||
expect(() => avatarFor(' ')).not.toThrow();
|
||||
const result = avatarFor(' ');
|
||||
expect(result.initials).toBe('');
|
||||
});
|
||||
|
||||
it('initials are uppercased', () => {
|
||||
expect(avatarFor('anna raddatz').initials).toBe('AR');
|
||||
});
|
||||
|
||||
it('all 10 palette entries are reachable across varied names', () => {
|
||||
const names = [
|
||||
'Alpha Beta',
|
||||
'Gamma Delta',
|
||||
'Epsilon Zeta',
|
||||
'Eta Theta',
|
||||
'Iota Kappa',
|
||||
'Lambda Mu',
|
||||
'Nu Xi',
|
||||
'Omicron Pi',
|
||||
'Rho Sigma',
|
||||
'Tau Upsilon',
|
||||
'Phi Chi',
|
||||
'Psi Omega',
|
||||
'Anna Schmidt',
|
||||
'Karl Weber',
|
||||
'Maria Müller',
|
||||
'Heinrich Braun',
|
||||
'Clara Raddatz',
|
||||
'Ernst Wagner',
|
||||
'Helene Fischer',
|
||||
'Otto Klein'
|
||||
];
|
||||
const seen = new Set<string>();
|
||||
for (const n of names) seen.add(avatarFor(n).bg);
|
||||
// We should hit more than 1 color across 20 varied names
|
||||
expect(seen.size).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
it('uses h * 31 hash (name-keyed, not djb2)', () => {
|
||||
// Verify that the same name produces stable output across calls
|
||||
// (implementation-agnostic determinism test)
|
||||
const name = 'Herbert Cram';
|
||||
const r1 = avatarFor(name);
|
||||
const r2 = avatarFor(name);
|
||||
expect(r1.bg).toBe(r2.bg);
|
||||
expect(r1.initials).toBe(r2.initials);
|
||||
});
|
||||
});
|
||||
43
frontend/src/lib/shared/avatar.ts
Normal file
43
frontend/src/lib/shared/avatar.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { AVATAR_PALETTE } from './avatarPalette';
|
||||
|
||||
export type AvatarResult = {
|
||||
bg: string;
|
||||
initials: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Deterministic name-hashed avatar util (DESIGN_RULES §5).
|
||||
*
|
||||
* - Hash: `h = (h * 31 + charCode) >>> 0` (unsigned 32-bit, name-keyed)
|
||||
* - Initials: first char of first token + first char of last token, uppercased
|
||||
* - Empty name → safe fallback: empty initials, palette[0]
|
||||
* - Single-token name → one initial
|
||||
*
|
||||
* Lives in `$lib/shared/` so Avatar.svelte does not import from any domain.
|
||||
* Do NOT use this for id-hashing — the deliberate trade-off (stable across
|
||||
* screens, shifts on rename) is documented in issue #855.
|
||||
*/
|
||||
export function avatarFor(name: string): AvatarResult {
|
||||
const trimmed = name.trim();
|
||||
|
||||
// Empty / whitespace-only guard
|
||||
if (!trimmed) {
|
||||
return { bg: AVATAR_PALETTE[0], initials: '' };
|
||||
}
|
||||
|
||||
// Hash: h = (h * 31 + charCode) >>> 0
|
||||
let h = 0;
|
||||
for (let i = 0; i < trimmed.length; i++) {
|
||||
h = (h * 31 + trimmed.charCodeAt(i)) >>> 0;
|
||||
}
|
||||
|
||||
const bg = AVATAR_PALETTE[h % AVATAR_PALETTE.length];
|
||||
|
||||
// Initials: first + last token initial
|
||||
const parts = trimmed.split(/\s+/);
|
||||
const first = parts[0][0] ?? '';
|
||||
const last = parts.length > 1 ? (parts[parts.length - 1][0] ?? '') : '';
|
||||
const initials = (first + last).toUpperCase();
|
||||
|
||||
return { bg, initials };
|
||||
}
|
||||
50
frontend/src/lib/shared/avatarPalette.spec.ts
Normal file
50
frontend/src/lib/shared/avatarPalette.spec.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { AVATAR_PALETTE } from './avatarPalette';
|
||||
|
||||
// ─── WCAG 2.1 relative-luminance / contrast (1.4.3) ──────────────────────────
|
||||
// White initials sit on every palette color (DESIGN_RULES §5). The avatar
|
||||
// background is theme-invariant (same hex in light and dark), so a single
|
||||
// white-on-color check covers both themes.
|
||||
|
||||
function srgbToLinear(channel: number): number {
|
||||
const c = channel / 255;
|
||||
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
||||
}
|
||||
|
||||
function relativeLuminance(hex: string): number {
|
||||
const r = parseInt(hex.slice(1, 3), 16);
|
||||
const g = parseInt(hex.slice(3, 5), 16);
|
||||
const b = parseInt(hex.slice(5, 7), 16);
|
||||
return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
|
||||
}
|
||||
|
||||
function contrastRatio(a: string, b: string): number {
|
||||
const la = relativeLuminance(a);
|
||||
const lb = relativeLuminance(b);
|
||||
const [hi, lo] = la > lb ? [la, lb] : [lb, la];
|
||||
return (hi + 0.05) / (lo + 0.05);
|
||||
}
|
||||
|
||||
const WHITE = '#ffffff';
|
||||
|
||||
describe('AVATAR_PALETTE', () => {
|
||||
it('has exactly 10 colors (DESIGN_RULES §5)', () => {
|
||||
expect(AVATAR_PALETTE).toHaveLength(10);
|
||||
});
|
||||
|
||||
it('is all lowercase 6-digit hex', () => {
|
||||
for (const c of AVATAR_PALETTE) {
|
||||
expect(c).toMatch(/^#[0-9a-f]{6}$/);
|
||||
}
|
||||
});
|
||||
|
||||
it('has no duplicate colors (each person color is distinct)', () => {
|
||||
expect(new Set(AVATAR_PALETTE).size).toBe(AVATAR_PALETTE.length);
|
||||
});
|
||||
|
||||
it('every color meets WCAG AA (>=4.5:1) against white initials in both themes', () => {
|
||||
for (const c of AVATAR_PALETTE) {
|
||||
expect(contrastRatio(c, WHITE)).toBeGreaterThanOrEqual(4.5);
|
||||
}
|
||||
});
|
||||
});
|
||||
32
frontend/src/lib/shared/avatarPalette.ts
Normal file
32
frontend/src/lib/shared/avatarPalette.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* Canonical 10-color person/avatar palette — single source of truth.
|
||||
*
|
||||
* Used by `<Avatar>` (issue #855), hashed by name so the same person renders the
|
||||
* same color on every screen (DESIGN_RULES §5). Do not duplicate these values in
|
||||
* CSS or another module; import this constant instead.
|
||||
*
|
||||
* White Montserrat initials sit on each color, so every swatch must meet WCAG AA
|
||||
* (≥4.5:1) for normal text — avatar initials are 700-weight but ≤16px, below the
|
||||
* large-text threshold. The background is theme-invariant (identical hex in light
|
||||
* and dark, white initials in both), so one white-on-color check covers both
|
||||
* themes. Guarded by `avatarPalette.spec.ts`.
|
||||
*
|
||||
* Three §1 brand hues failed white-on-color and use AA-darkened variants here;
|
||||
* the bright originals remain the decorative tag-dot colors in `layout.css`
|
||||
* (tag dots carry no text, so the contrast floor does not apply to them):
|
||||
* sage #5a8a6a → #527e61 (3.98 → 4.65:1)
|
||||
* amber #c17a00 → #a46800 (3.47 → 4.61:1)
|
||||
* sand #9a8040 → #897239 (3.79 → 4.64:1)
|
||||
*/
|
||||
export const AVATAR_PALETTE = [
|
||||
'#527e61', // sage (AA-adjusted from #5a8a6a)
|
||||
'#a0522d', // sienna
|
||||
'#a46800', // amber (AA-adjusted from #c17a00)
|
||||
'#607080', // slate
|
||||
'#7a4f9a', // violet
|
||||
'#c0446e', // rose
|
||||
'#3060b0', // cobalt
|
||||
'#4a7a3a', // moss
|
||||
'#897239', // sand (AA-adjusted from #9a8040)
|
||||
'#c05540' // coral
|
||||
] as const;
|
||||
@@ -1,22 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { components } from '$lib/generated/api';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
|
||||
const AVATAR_PALETTE = ['#012851', '#5A3080', '#005F74', '#2A6040', '#803020'] as const;
|
||||
function djb2(str: string): number {
|
||||
let hash = 5381;
|
||||
for (let i = 0; i < str.length; i++) hash = (hash * 33) ^ str.charCodeAt(i);
|
||||
return Math.abs(hash);
|
||||
}
|
||||
function personAvatarColor(id: string): string {
|
||||
return AVATAR_PALETTE[djb2(id) % AVATAR_PALETTE.length];
|
||||
}
|
||||
function getInitials(name: string): string {
|
||||
const words = name.trim().split(/\s+/).filter(Boolean);
|
||||
if (words.length === 0) return '';
|
||||
if (words.length === 1) return words[0].charAt(0).toUpperCase();
|
||||
return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
|
||||
}
|
||||
import Avatar from '$lib/shared/primitives/Avatar.svelte';
|
||||
|
||||
type PersonSummaryDTO = components['schemas']['PersonSummaryDTO'];
|
||||
|
||||
@@ -37,11 +22,12 @@ const { persons }: Props = $props();
|
||||
href="/persons/{p.id}"
|
||||
class="group flex min-h-[44px] flex-col items-center gap-2 rounded border border-line bg-surface px-4 py-6 text-center no-underline shadow-sm transition-all duration-200 hover:border-l-4 hover:border-accent hover:shadow-md focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
|
||||
>
|
||||
<!-- Avatar: name-keyed deterministic color; dark:ring-1 dark:ring-white/10
|
||||
keeps the disc edge visible against --c-surface #011526 in dark mode -->
|
||||
<span
|
||||
class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-base font-bold text-white shadow-sm dark:shadow-none dark:ring-1 dark:ring-white/10"
|
||||
style="background-color: {personAvatarColor(p.id ?? '')}"
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full shadow-sm dark:shadow-none dark:ring-1 dark:ring-white/10"
|
||||
>
|
||||
{getInitials(p.displayName ?? p.lastName ?? '')}
|
||||
<Avatar name={p.displayName ?? p.lastName ?? ''} size={48} decorative={true} />
|
||||
</span>
|
||||
<span class="truncate font-serif text-sm font-bold text-ink group-hover:underline"
|
||||
>{p.displayName ?? p.lastName}</span
|
||||
|
||||
@@ -2,8 +2,7 @@
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import type { FlatMessage } from '$lib/shared/types';
|
||||
import { extractQuote } from '$lib/shared/discussion/comment';
|
||||
// eslint-disable-next-line boundaries/dependencies -- discussion UI needs person initials for avatars; move to shared if getInitials becomes generic
|
||||
import { getInitials } from '$lib/person/personFormat';
|
||||
import Avatar from '$lib/shared/primitives/Avatar.svelte';
|
||||
import { relativeTime } from '$lib/shared/utils/time';
|
||||
import { renderBody } from '$lib/shared/discussion/mention';
|
||||
|
||||
@@ -39,12 +38,8 @@ const parsed = $derived(extractQuote(message.content));
|
||||
tabindex="-1"
|
||||
class="flex gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2"
|
||||
>
|
||||
<!-- Avatar circle with initials -->
|
||||
<div
|
||||
class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-fg"
|
||||
>
|
||||
{getInitials(message.authorName)}
|
||||
</div>
|
||||
<!-- Avatar circle with initials — name-keyed deterministic color (DESIGN_RULES §5) -->
|
||||
<Avatar name={message.authorName} size={26} decorative={true} />
|
||||
|
||||
<!-- Content -->
|
||||
<div class="min-w-0 flex-1">
|
||||
|
||||
94
frontend/src/lib/shared/primitives/Avatar.svelte
Normal file
94
frontend/src/lib/shared/primitives/Avatar.svelte
Normal file
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { avatarFor } from '$lib/shared/avatar';
|
||||
|
||||
type AvatarSize = 26 | 28 | 40 | 48;
|
||||
|
||||
interface Props {
|
||||
/** Person name — plain string, never a domain entity */
|
||||
name?: string;
|
||||
/** Visual size in px */
|
||||
size?: AvatarSize;
|
||||
/** Stacked variant: negative margin + ring-surface ring */
|
||||
stacked?: boolean;
|
||||
/**
|
||||
* a11y mode:
|
||||
* - true (default when name is adjacent in layout) → aria-hidden
|
||||
* - false → role="img" + aria-label=name
|
||||
*/
|
||||
decorative?: boolean;
|
||||
/**
|
||||
* Overflow chip mode — renders "+N" instead of initials.
|
||||
* When set, name/initials are ignored.
|
||||
*/
|
||||
overflow?: number;
|
||||
/**
|
||||
* Placeholder mode — dashed border empty circle (for ContributorStack empty state).
|
||||
*/
|
||||
placeholder?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
name = '',
|
||||
size = 40,
|
||||
stacked = false,
|
||||
decorative = true,
|
||||
overflow,
|
||||
placeholder = false
|
||||
}: Props = $props();
|
||||
|
||||
const avatar = $derived(avatarFor(name));
|
||||
|
||||
const sizeClass: Record<AvatarSize, string> = {
|
||||
26: 'h-[26px] w-[26px] text-[10px]',
|
||||
28: 'h-[28px] w-[28px] text-[11px]',
|
||||
40: 'h-[40px] w-[40px] text-[14px]',
|
||||
48: 'h-[48px] w-[48px] text-[16px]'
|
||||
};
|
||||
|
||||
const classes = $derived(
|
||||
[
|
||||
'inline-flex shrink-0 items-center justify-center rounded-full font-sans font-bold text-white transition-colors',
|
||||
sizeClass[size] ?? sizeClass[40],
|
||||
stacked ? '-ml-1.5 ring-2 ring-surface dark:ring-surface' : '',
|
||||
placeholder ? 'border border-dashed border-line bg-transparent text-transparent' : ''
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if overflow !== undefined}
|
||||
<!-- Overflow "+N" chip -->
|
||||
<span
|
||||
data-testid="avatar"
|
||||
class="{classes} bg-muted text-ink-3"
|
||||
role="img"
|
||||
aria-label="Weitere Personen"
|
||||
>
|
||||
+{overflow}
|
||||
</span>
|
||||
{:else if placeholder}
|
||||
<!-- Empty placeholder (dashed border, no background) -->
|
||||
<span data-testid="avatar" class={classes} role="img" aria-label="Noch niemand angefangen"></span>
|
||||
{:else if decorative}
|
||||
<!-- Decorative: name is adjacent in layout — aria-hidden="true" -->
|
||||
<span
|
||||
data-testid="avatar"
|
||||
class={classes}
|
||||
style="background-color: {avatar.bg}"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{avatar.initials}
|
||||
</span>
|
||||
{:else}
|
||||
<!-- Standalone: expose name to screen readers via role="img" + aria-label -->
|
||||
<span
|
||||
data-testid="avatar"
|
||||
class={classes}
|
||||
style="background-color: {avatar.bg}"
|
||||
role="img"
|
||||
aria-label={name}
|
||||
>
|
||||
{avatar.initials}
|
||||
</span>
|
||||
{/if}
|
||||
105
frontend/src/lib/shared/primitives/Avatar.svelte.spec.ts
Normal file
105
frontend/src/lib/shared/primitives/Avatar.svelte.spec.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
|
||||
import Avatar from './Avatar.svelte';
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
function getAvatar(): HTMLElement | null {
|
||||
return document.querySelector('[data-testid="avatar"]');
|
||||
}
|
||||
|
||||
describe('Avatar', () => {
|
||||
it('renders initials from name', async () => {
|
||||
render(Avatar, { name: 'Anna Raddatz' });
|
||||
await expect.element(page.getByText('AR')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies size-26 class for size=26', async () => {
|
||||
render(Avatar, { name: 'Anna Raddatz', size: 26 });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.className).toMatch(/h-\[26px\]/);
|
||||
expect(el!.className).toMatch(/w-\[26px\]/);
|
||||
});
|
||||
|
||||
it('applies size-28 class for size=28', async () => {
|
||||
render(Avatar, { name: 'Karl Müller', size: 28 });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.className).toMatch(/h-\[28px\]/);
|
||||
expect(el!.className).toMatch(/w-\[28px\]/);
|
||||
});
|
||||
|
||||
it('applies size-40 class for size=40', async () => {
|
||||
render(Avatar, { name: 'Karl Müller', size: 40 });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.className).toMatch(/h-\[40px\]/);
|
||||
expect(el!.className).toMatch(/w-\[40px\]/);
|
||||
});
|
||||
|
||||
it('applies size-48 class for size=48', async () => {
|
||||
render(Avatar, { name: 'Herbert Cram', size: 48 });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.className).toMatch(/h-\[48px\]/);
|
||||
expect(el!.className).toMatch(/w-\[48px\]/);
|
||||
});
|
||||
|
||||
it('stacked variant adds -ml-1.5 and ring-2 ring-surface', async () => {
|
||||
render(Avatar, { name: 'Anna Raddatz', size: 26, stacked: true });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.className).toMatch(/-ml-1\.5/);
|
||||
expect(el!.className).toMatch(/ring-2/);
|
||||
expect(el!.className).toMatch(/ring-surface/);
|
||||
});
|
||||
|
||||
it('non-stacked variant does not have -ml-1.5', async () => {
|
||||
render(Avatar, { name: 'Anna Raddatz', size: 26, stacked: false });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.className).not.toMatch(/-ml-1\.5/);
|
||||
});
|
||||
|
||||
it('decorative mode: aria-hidden=true when decorative prop is true', async () => {
|
||||
render(Avatar, { name: 'Anna Raddatz', decorative: true });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.getAttribute('aria-hidden')).toBe('true');
|
||||
});
|
||||
|
||||
it('standalone mode: role=img and aria-label=name when decorative is false', async () => {
|
||||
render(Avatar, { name: 'Herbert Cram', decorative: false });
|
||||
await expect.element(page.getByRole('img', { name: 'Herbert Cram' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders overflow +N chip when overflow prop is set', async () => {
|
||||
render(Avatar, { overflow: 3 });
|
||||
await expect.element(page.getByText('+3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders placeholder (dashed border) when placeholder prop is true', async () => {
|
||||
render(Avatar, { placeholder: true, size: 26 });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.className).toMatch(/border-dashed/);
|
||||
});
|
||||
|
||||
it('has rounded-full class', async () => {
|
||||
render(Avatar, { name: 'Karl Müller', size: 40 });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
expect(el!.className).toMatch(/rounded-full/);
|
||||
});
|
||||
|
||||
it('stacked variant carries ring classes (dark mode edge on dark surface)', async () => {
|
||||
render(Avatar, { name: 'Karl Müller', size: 26, stacked: true });
|
||||
const el = getAvatar();
|
||||
expect(el).not.toBeNull();
|
||||
// ring-2 ring-surface keeps avatar edges visible on dark surface (#011526)
|
||||
expect(el!.className).toMatch(/ring/);
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { components } from '$lib/generated/api';
|
||||
import Avatar from '$lib/shared/primitives/Avatar.svelte';
|
||||
|
||||
type ActivityActorDTO = components['schemas']['ActivityActorDTO'];
|
||||
|
||||
@@ -11,36 +12,24 @@ interface Props {
|
||||
let { contributors, hasMore }: Props = $props();
|
||||
|
||||
const safeContributors = $derived(contributors ?? []);
|
||||
|
||||
function safeColor(color: string): string {
|
||||
return /^#[0-9a-fA-F]{6}$/.test(color) ? color : '#8c9aa3';
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if safeContributors.length === 0}
|
||||
<span
|
||||
role="img"
|
||||
aria-label="Noch niemand angefangen"
|
||||
class="inline-block h-[22px] w-[22px] flex-shrink-0 rounded-full border-[1.5px] border-dashed border-[#cdcbbf]"
|
||||
></span>
|
||||
<!-- Empty placeholder: dashed border circle (DESIGN_RULES §5) -->
|
||||
<Avatar placeholder={true} size={26} />
|
||||
{:else}
|
||||
<span class="inline-flex items-center">
|
||||
{#each safeContributors as actor, i (actor.initials + '-' + actor.color)}
|
||||
<span
|
||||
role="img"
|
||||
aria-label={actor.name ?? actor.initials}
|
||||
class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
|
||||
style="background-color: {safeColor(actor.color)};"
|
||||
title={actor.name ?? actor.initials}
|
||||
>
|
||||
{actor.initials}
|
||||
</span>
|
||||
<!-- Stacked avatar: ring-surface ring instead of legacy ring-white so edge
|
||||
works in both light and dark themes. First avatar has no negative margin. -->
|
||||
<Avatar name={actor.name ?? actor.initials} size={26} stacked={i > 0} decorative={false} />
|
||||
{/each}
|
||||
{#if hasMore}
|
||||
<!-- Overflow indicator — uses muted bg + ink-3 text, stacked -->
|
||||
<span
|
||||
role="img"
|
||||
aria-label="Weitere Mitwirkende"
|
||||
class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[10px] font-bold text-ink-3 ring-2 ring-white"
|
||||
class="-ml-1.5 inline-flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-full bg-muted font-sans text-[10px] font-bold text-ink-3 ring-2 ring-surface"
|
||||
>
|
||||
…
|
||||
</span>
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
|
||||
/**
|
||||
* The header chip of a Thema-mode root-tag bucket (#827, REQ-015): a *fully-tinted* chip whose
|
||||
* fill and label both derive from the root tag's `--c-tag-*` colour token — distinct from the
|
||||
* neutral per-letter {@link TagChip} (a surface pill with a tiny colour square). The label uses
|
||||
* the saturated token as text over a subtle `color-mix` wash of the same token, so the ≥4.5:1
|
||||
* label contrast holds in both light and dark themes. A `null` colour — or any value outside the
|
||||
* known token set (the §2 `krieg`/`weih`/`fam` are demo class names, not tokens) — falls back to a
|
||||
* neutral chip with no `var(--c-tag-)` reference, never a broken colour. The name is
|
||||
* curator/import-derived and rendered through default `{...}` escaping, never the raw-HTML
|
||||
* directive (REQ-009).
|
||||
*/
|
||||
const TAG_COLORS = new Set([
|
||||
'sage',
|
||||
'sienna',
|
||||
'amber',
|
||||
'slate',
|
||||
'violet',
|
||||
'rose',
|
||||
'cobalt',
|
||||
'moss',
|
||||
'sand',
|
||||
'coral'
|
||||
]);
|
||||
|
||||
let { name, color }: { name: string; color: string | null } = $props();
|
||||
|
||||
const token = $derived(color && TAG_COLORS.has(color) ? color : null);
|
||||
// The tint paints the chip's fill + dot only — never the label text. The saturated
|
||||
// --c-tag-* tokens used AS text over their own wash drop below WCAG AA 4.5:1 for the
|
||||
// light tokens (amber ≈3.0, sand ≈3.2, sage ≈3.4); a fixed dark ink keeps every token
|
||||
// legible while the 18% wash still reads as a genuinely tinted chip (REQ-015).
|
||||
const chipStyle = $derived(
|
||||
token ? `background-color: color-mix(in srgb, var(--c-tag-${token}) 18%, transparent)` : ''
|
||||
);
|
||||
const dotStyle = $derived(token ? `background-color: var(--c-tag-${token})` : '');
|
||||
</script>
|
||||
|
||||
<span
|
||||
data-testid="bucket-header-chip"
|
||||
title={name}
|
||||
style={chipStyle}
|
||||
class="inline-flex max-w-full items-center gap-1.5 rounded-full px-2.5 py-0.5 font-sans text-xs font-semibold"
|
||||
class:border={!token}
|
||||
class:border-line={!token}
|
||||
class:bg-surface={!token}
|
||||
>
|
||||
<span class="sr-only">{m.timeline_tag_chip_label()}: </span>
|
||||
<span
|
||||
data-testid="bucket-header-chip-dot"
|
||||
aria-hidden="true"
|
||||
style={dotStyle}
|
||||
class="inline-block h-2 w-2 flex-shrink-0 rounded-sm"
|
||||
class:bg-ink-3={!token}
|
||||
></span>
|
||||
<span
|
||||
data-testid="bucket-header-chip-label"
|
||||
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0"
|
||||
class:text-ink={token}
|
||||
class:text-ink-3={!token}>{name}</span
|
||||
>
|
||||
</span>
|
||||
@@ -1,57 +0,0 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import BucketHeaderChip from './BucketHeaderChip.svelte';
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
describe('BucketHeaderChip (REQ-015/009)', () => {
|
||||
it('renders the root-tag name', () => {
|
||||
render(BucketHeaderChip, { name: 'Krieg', color: 'sienna' });
|
||||
expect(document.body.textContent).toContain('Krieg');
|
||||
});
|
||||
|
||||
it('tints the chip with var(--c-tag-{token}) for a known colour token (REQ-015)', () => {
|
||||
render(BucketHeaderChip, { name: 'Krieg', color: 'sienna' });
|
||||
const chip = document.querySelector('[data-testid="bucket-header-chip"]') as HTMLElement;
|
||||
expect(chip.getAttribute('style')).toContain('var(--c-tag-sienna)');
|
||||
});
|
||||
|
||||
it('renders a neutral chip with no --c-tag- binding when colour is null (REQ-015)', () => {
|
||||
render(BucketHeaderChip, { name: 'Ohne Thema', color: null });
|
||||
expect(document.body.textContent).toContain('Ohne Thema');
|
||||
expect(document.body.innerHTML).not.toContain('var(--c-tag-');
|
||||
});
|
||||
|
||||
it('falls back to neutral for an unknown colour token, never a broken var (REQ-015)', () => {
|
||||
// "krieg" is a §2 demo class name, not a real --c-tag-* token.
|
||||
render(BucketHeaderChip, { name: 'Krieg', color: 'krieg' });
|
||||
expect(document.body.innerHTML).not.toContain('var(--c-tag-');
|
||||
});
|
||||
|
||||
it('prefixes the name with an sr-only theme label so colour is never the only cue', () => {
|
||||
render(BucketHeaderChip, { name: 'Krieg', color: 'sienna' });
|
||||
const srOnly = document.querySelector('.sr-only');
|
||||
expect(srOnly?.textContent).toContain(m.timeline_tag_chip_label());
|
||||
});
|
||||
|
||||
it('renders an HTML-bearing name as inert text, never markup (REQ-009)', () => {
|
||||
const evil = '<img src=x onerror="alert(1)">';
|
||||
render(BucketHeaderChip, { name: evil, color: null });
|
||||
expect(document.body.textContent).toContain(evil);
|
||||
expect(document.querySelector('img')).toBeNull();
|
||||
});
|
||||
|
||||
it('paints the label in a fixed ink colour, never the saturated tag token (contrast, REQ-015)', () => {
|
||||
// A saturated --c-tag-* token used as TEXT over its own wash fails 4.5:1 for the
|
||||
// light tokens (amber/sand/sage ≈ 3:1). The tint must go to the background + dot;
|
||||
// the label keeps a guaranteed-contrast ink token.
|
||||
render(BucketHeaderChip, { name: 'Weihnachten', color: 'amber' });
|
||||
const chip = document.querySelector('[data-testid="bucket-header-chip"]') as HTMLElement;
|
||||
expect(chip.getAttribute('style') ?? '').not.toContain('color: var(--c-tag-');
|
||||
const label = document.querySelector('[data-testid="bucket-header-chip-label"]') as HTMLElement;
|
||||
expect(label.className).toContain('text-ink');
|
||||
// still genuinely tinted — the token paints the wash and the dot
|
||||
expect(document.body.innerHTML).toContain('var(--c-tag-amber)');
|
||||
});
|
||||
});
|
||||
104
frontend/src/lib/timeline/EventCluster.svelte
Normal file
104
frontend/src/lib/timeline/EventCluster.svelte
Normal file
@@ -0,0 +1,104 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import LetterCard from './LetterCard.svelte';
|
||||
import GlyphLabel from './GlyphLabel.svelte';
|
||||
import EventHeader from './EventHeader.svelte';
|
||||
import { entryKey } from './entryKey';
|
||||
import { CLUSTER_PREVIEW } from './eventClustering';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
|
||||
/**
|
||||
* A curated event with linked letters, rendered as one contained card: the event IS the card's
|
||||
* header (so its title reads once — never also as a floating pill, #850 REQ-002), and its letters
|
||||
* sit inside as compact `.lcard.ev` cards.
|
||||
*
|
||||
* - Same-year event (`event` given): the shared EventHeader carries the accent glyph + sr-only
|
||||
* label, the title, a `{date} · {kuratiert|abgeleitet}` subtitle, the letter count, and — for a
|
||||
* curator on a curated event — an edit link to `/zeitstrahl/events/{eventId}/edit` (REQ-002).
|
||||
* - Cross-year (`title` given, no `event`): a plain `✉ {title}` text header, no edit link, no pill
|
||||
* chrome — it holds that other year's linked letters (REQ-004).
|
||||
*
|
||||
* A card shows its first {@link CLUSTER_PREVIEW} letters, then a keyboard-operable show-more/less
|
||||
* toggle reveals/collapses the rest instead of flooding the timeline (REQ-003).
|
||||
*/
|
||||
let {
|
||||
letters,
|
||||
event = undefined,
|
||||
title = '',
|
||||
canWrite = false
|
||||
}: {
|
||||
letters: TimelineEntryDTO[];
|
||||
/** The same-year curated event whose letters this card holds — renders as the header. */
|
||||
event?: TimelineEntryDTO;
|
||||
/** Header label for a cross-year card (no `event`). */
|
||||
title?: string;
|
||||
canWrite?: boolean;
|
||||
} = $props();
|
||||
|
||||
const count = $derived(letters.length);
|
||||
|
||||
// First-5 preview + show-more (REQ-003): a large cluster stays readable instead of dumping every
|
||||
// card into the timeline.
|
||||
let expanded = $state(false);
|
||||
const visible = $derived(expanded ? letters : letters.slice(0, CLUSTER_PREVIEW));
|
||||
const hiddenCount = $derived(letters.length - CLUSTER_PREVIEW);
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="my-3 overflow-hidden rounded-md border border-l-2 border-line border-l-brand-mint bg-surface shadow-sm"
|
||||
data-testid="event-card"
|
||||
>
|
||||
{#if event}
|
||||
<!-- A same-year curated event IS the card header (the shared EventHeader) — its title reads
|
||||
once here, never also as a floating pill (REQ-002); the edit pencil uses the single
|
||||
canEditEvent gate (REQ-010, #850 finding #5). -->
|
||||
<header
|
||||
data-testid="event-header"
|
||||
class="flex items-center gap-2 border-b border-line bg-canvas px-3 py-2"
|
||||
>
|
||||
<EventHeader entry={event} canWrite={canWrite} count={count} />
|
||||
</header>
|
||||
{:else}
|
||||
<!-- Cross-year card (REQ-004): the same event's letters in another year band get a plain
|
||||
✉ text header — no pill chrome, no edit link. -->
|
||||
<header
|
||||
data-testid="event-header"
|
||||
class="flex items-center gap-2 border-b border-line px-3 py-2"
|
||||
>
|
||||
<span class="font-serif text-sm font-bold whitespace-pre-line text-ink">
|
||||
<GlyphLabel glyph="✉" label={m.timeline_letter_glyph_label()} />
|
||||
{title}
|
||||
</span>
|
||||
<span data-testid="event-count" class="font-sans text-xs text-ink-3">
|
||||
<span aria-hidden="true">· {count}</span>
|
||||
<span class="sr-only">{m.timeline_cluster_letter_count({ count })}</span>
|
||||
</span>
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
<div class="px-3 py-2">
|
||||
<ul class="space-y-1.5">
|
||||
{#each visible as letter (entryKey(letter))}
|
||||
<li>
|
||||
<LetterCard entry={letter} variant="event" compact={true} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if hiddenCount > 0}
|
||||
<button
|
||||
type="button"
|
||||
data-testid="bucket-show-more"
|
||||
aria-expanded={expanded}
|
||||
onclick={() => (expanded = !expanded)}
|
||||
style="display: inline-flex; align-items: center; min-height: 44px"
|
||||
class="mt-1 px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
>
|
||||
{expanded
|
||||
? m.timeline_bucket_show_less()
|
||||
: m.timeline_bucket_show_more({ count: hiddenCount })}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
129
frontend/src/lib/timeline/EventCluster.svelte.spec.ts
Normal file
129
frontend/src/lib/timeline/EventCluster.svelte.spec.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { tick } from 'svelte';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import EventCluster from './EventCluster.svelte';
|
||||
import { makeEntry } from './test-factories';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
const EV_ID = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
|
||||
|
||||
const makeEvent = (overrides: Partial<TimelineEntryDTO> = {}): TimelineEntryDTO =>
|
||||
makeEntry({
|
||||
kind: 'EVENT',
|
||||
type: 'PERSONAL',
|
||||
documentId: undefined,
|
||||
eventId: EV_ID,
|
||||
eventDate: '1916-07-06',
|
||||
precision: 'DAY',
|
||||
title: 'Ein gewaltiger Stadtbrand',
|
||||
...overrides
|
||||
});
|
||||
|
||||
const letters = (n: number): TimelineEntryDTO[] =>
|
||||
Array.from({ length: n }, (_, i) =>
|
||||
makeEntry({ kind: 'LETTER', documentId: `doc-${i}`, title: `Brief ${i}`, linkedEventId: EV_ID })
|
||||
);
|
||||
|
||||
describe('EventCluster — contained event card (#850)', () => {
|
||||
it('renders a data-testid event-card with the event title once (REQ-002)', () => {
|
||||
render(EventCluster, { letters: letters(2), event: makeEvent() });
|
||||
expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
|
||||
const occurrences = (document.body.textContent?.match(/Ein gewaltiger Stadtbrand/g) ?? [])
|
||||
.length;
|
||||
expect(occurrences).toBe(1);
|
||||
});
|
||||
|
||||
it('shows the event-edit link for a curator on a curated event (REQ-002)', () => {
|
||||
render(EventCluster, { letters: letters(2), event: makeEvent(), canWrite: true });
|
||||
const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement;
|
||||
expect(edit).not.toBeNull();
|
||||
expect(edit.getAttribute('href')).toBe(`/zeitstrahl/events/${EV_ID}/edit`);
|
||||
});
|
||||
|
||||
it('hides the event-edit link when canWrite is false', () => {
|
||||
render(EventCluster, { letters: letters(2), event: makeEvent(), canWrite: false });
|
||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('hides the event-edit link for a derived event even with canWrite', () => {
|
||||
render(EventCluster, {
|
||||
letters: letters(2),
|
||||
event: makeEvent({ derived: true, eventId: undefined, derivedType: 'BIRTH' }),
|
||||
canWrite: true
|
||||
});
|
||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('renders its letters as compact a.lcard.ev cards (REQ-002)', () => {
|
||||
render(EventCluster, { letters: letters(2), event: makeEvent() });
|
||||
expect(document.querySelectorAll('a.lcard.ev').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('shows the first 5 of 8 letters + a show-more toggle that expands to 8 then back to 5 (REQ-003)', async () => {
|
||||
render(EventCluster, { letters: letters(8), event: makeEvent() });
|
||||
expect(document.querySelectorAll('a.lcard').length).toBe(5);
|
||||
const toggle = document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement;
|
||||
expect(toggle).not.toBeNull();
|
||||
expect(toggle.getAttribute('aria-expanded')).toBe('false');
|
||||
expect(toggle.getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
|
||||
|
||||
toggle.click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard').length).toBe(8);
|
||||
expect(toggle.getAttribute('aria-expanded')).toBe('true');
|
||||
|
||||
toggle.click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard').length).toBe(5);
|
||||
});
|
||||
|
||||
it('renders no show-more toggle when the cluster holds 5 or fewer letters', () => {
|
||||
render(EventCluster, { letters: letters(5), event: makeEvent() });
|
||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('renders a cross-year text header (✉ title, no event-edit, no pill) when no event is given (REQ-004)', () => {
|
||||
render(EventCluster, {
|
||||
letters: letters(2),
|
||||
title: 'Briefe von der Front',
|
||||
canWrite: true
|
||||
});
|
||||
expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
|
||||
expect(document.body.textContent).toContain('✉');
|
||||
expect(document.body.textContent).toContain('Briefe von der Front');
|
||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('pairs the cross-year ✉ glyph with an sr-only label so it is not a silent glyph (finding #6)', () => {
|
||||
render(EventCluster, { letters: letters(2), title: 'Briefe von der Front' });
|
||||
const header = document.querySelector('[data-testid="event-header"]') as HTMLElement;
|
||||
const hidden = header.querySelector('[aria-hidden="true"]');
|
||||
expect(hidden?.textContent).toContain('✉');
|
||||
const srOnly = header.querySelector('.sr-only');
|
||||
expect(srOnly?.textContent).toBe(m.timeline_letter_glyph_label());
|
||||
});
|
||||
|
||||
it('gives the letter count an sr-only "{count} Briefe" label so "· 2" is not announced bare (finding #6)', () => {
|
||||
render(EventCluster, { letters: letters(2), title: 'Briefe von der Front' });
|
||||
const count = document.querySelector('[data-testid="event-count"]') as HTMLElement;
|
||||
// the visible "· 2" stays aria-hidden; the sr-only sibling carries the meaning
|
||||
expect(count.querySelector('[aria-hidden="true"]')?.textContent).toContain('· 2');
|
||||
expect(count.querySelector('.sr-only')?.textContent).toBe(
|
||||
m.timeline_cluster_letter_count({ count: 2 })
|
||||
);
|
||||
});
|
||||
|
||||
it('renders an HTML-bearing event title verbatim as text, never as markup (REQ-010)', () => {
|
||||
render(EventCluster, {
|
||||
letters: letters(1),
|
||||
event: makeEvent({ title: '<img src=x onerror=alert(1)>' })
|
||||
});
|
||||
expect(document.querySelector('[data-testid="event-card"] img')).toBeNull();
|
||||
expect(document.body.textContent).toContain('<img src=x onerror=alert(1)>');
|
||||
});
|
||||
});
|
||||
69
frontend/src/lib/timeline/EventHeader.svelte
Normal file
69
frontend/src/lib/timeline/EventHeader.svelte
Normal file
@@ -0,0 +1,69 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import GlyphLabel from './GlyphLabel.svelte';
|
||||
import { getAccentConfig, canEditEvent } from './eventCardConfig';
|
||||
import { timelineDateLabel } from './dateLabel';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
|
||||
/**
|
||||
* The shared header for a curated or derived timeline event — the accent glyph circle, the title,
|
||||
* and the `{date} · {kuratiert|abgeleitet}` subtitle, plus a curator edit pencil gated by the
|
||||
* single canEditEvent() contract. Rendered by EventPill (inside the floating axis pill) and by
|
||||
* EventCluster (as a same-year event-card header), so the glyph/title/subtitle markup and the
|
||||
* security-relevant edit gate live in one place (#850 finding #5). It renders three sibling nodes
|
||||
* (glyph circle, text block, optional edit pencil) into the parent's flex row — the parent owns
|
||||
* the wrapper (pill vs card header). An optional letter `count` appends a screen-reader-labeled
|
||||
* "· {count}" for the event-card case.
|
||||
*/
|
||||
let {
|
||||
entry,
|
||||
canWrite = false,
|
||||
count = undefined
|
||||
}: { entry: TimelineEntryDTO; canWrite?: boolean; count?: number } = $props();
|
||||
|
||||
const config = $derived(getAccentConfig(entry));
|
||||
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
||||
// Provenance reads off entry.derived: a derived life-event is "abgeleitet", a curated event
|
||||
// "kuratiert"; the date is an optional prefix so an undated event still reads the provenance.
|
||||
const provenance = $derived(
|
||||
entry.derived ? m.timeline_provenance_derived() : m.timeline_provenance_curated()
|
||||
);
|
||||
const subtitle = $derived(dateLabel ? `${dateLabel} · ${provenance}` : provenance);
|
||||
const canEdit = $derived(canEditEvent(entry, canWrite));
|
||||
</script>
|
||||
|
||||
<span
|
||||
class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full {config.accent === 'curated'
|
||||
? 'bg-brand-mint text-brand-navy'
|
||||
: 'bg-brand-navy text-brand-mint'}"
|
||||
>
|
||||
<GlyphLabel glyph={config.glyph} label={config.label} />
|
||||
</span>
|
||||
<span class="min-w-0 text-left">
|
||||
{#if entry.title}
|
||||
<span class="block font-serif text-sm font-bold whitespace-pre-line text-brand-navy"
|
||||
>{entry.title}</span
|
||||
>
|
||||
{/if}
|
||||
<span class="block font-sans text-xs text-ink-3">
|
||||
{subtitle}
|
||||
{#if count !== undefined}
|
||||
<span data-testid="event-count">
|
||||
<span aria-hidden="true">· {count}</span>
|
||||
<span class="sr-only">{m.timeline_cluster_letter_count({ count })}</span>
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
</span>
|
||||
{#if canEdit}
|
||||
<a
|
||||
data-testid="event-edit"
|
||||
href="/zeitstrahl/events/{entry.eventId}/edit"
|
||||
class="ml-auto rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
>
|
||||
<span aria-hidden="true">✎</span>
|
||||
<span class="sr-only">{m.btn_edit()}</span>
|
||||
</a>
|
||||
{/if}
|
||||
66
frontend/src/lib/timeline/EventHeader.svelte.spec.ts
Normal file
66
frontend/src/lib/timeline/EventHeader.svelte.spec.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import EventHeader from './EventHeader.svelte';
|
||||
import { makeEntry } from './test-factories';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
const EV_ID = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
|
||||
|
||||
const curated = (overrides: Partial<TimelineEntryDTO> = {}): TimelineEntryDTO =>
|
||||
makeEntry({
|
||||
kind: 'EVENT',
|
||||
type: 'PERSONAL',
|
||||
derived: false,
|
||||
eventId: EV_ID,
|
||||
eventDate: '1916-07-06',
|
||||
precision: 'DAY',
|
||||
title: 'Ein gewaltiger Stadtbrand',
|
||||
documentId: undefined,
|
||||
...overrides
|
||||
});
|
||||
|
||||
describe('EventHeader', () => {
|
||||
it('renders the glyph with an sr-only label, the title, and the provenance subtitle', () => {
|
||||
render(EventHeader, { entry: curated() });
|
||||
expect(document.querySelector('.sr-only')?.textContent).toBe(m.timeline_layer_family());
|
||||
expect(document.body.textContent).toContain('Ein gewaltiger Stadtbrand');
|
||||
expect(document.body.textContent).toContain(m.timeline_provenance_curated());
|
||||
});
|
||||
|
||||
it('shows the edit pencil for a writer on a curated event (canEditEvent gate)', () => {
|
||||
render(EventHeader, { entry: curated(), canWrite: true });
|
||||
const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement;
|
||||
expect(edit).not.toBeNull();
|
||||
expect(edit.getAttribute('href')).toBe(`/zeitstrahl/events/${EV_ID}/edit`);
|
||||
});
|
||||
|
||||
it('hides the edit pencil without write, for a derived event, and for a null eventId', () => {
|
||||
render(EventHeader, { entry: curated(), canWrite: false });
|
||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||
cleanup();
|
||||
render(EventHeader, { entry: curated({ derived: true }), canWrite: true });
|
||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||
cleanup();
|
||||
render(EventHeader, { entry: curated({ eventId: undefined }), canWrite: true });
|
||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('renders a screen-reader-labeled letter count when a count is given', () => {
|
||||
render(EventHeader, { entry: curated(), count: 3 });
|
||||
const count = document.querySelector('[data-testid="event-count"]') as HTMLElement;
|
||||
expect(count.querySelector('[aria-hidden="true"]')?.textContent).toContain('· 3');
|
||||
expect(count.querySelector('.sr-only')?.textContent).toBe(
|
||||
m.timeline_cluster_letter_count({ count: 3 })
|
||||
);
|
||||
});
|
||||
|
||||
it('omits the letter count when no count is given (the pill case)', () => {
|
||||
render(EventHeader, { entry: curated() });
|
||||
expect(document.querySelector('[data-testid="event-count"]')).toBeNull();
|
||||
});
|
||||
});
|
||||
47
frontend/src/lib/timeline/EventNote.svelte
Normal file
47
frontend/src/lib/timeline/EventNote.svelte
Normal file
@@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
|
||||
let { description }: { description?: string | null } = $props();
|
||||
|
||||
let expanded = $state(false);
|
||||
let clamped = $state(false);
|
||||
let noteEl: HTMLElement | undefined = $state();
|
||||
|
||||
$effect(() => {
|
||||
if (noteEl) {
|
||||
clamped = noteEl.scrollHeight > noteEl.clientHeight;
|
||||
}
|
||||
});
|
||||
|
||||
function toggle() {
|
||||
expanded = !expanded;
|
||||
}
|
||||
|
||||
const hasContent = $derived(!!description && description.trim().length > 0);
|
||||
</script>
|
||||
|
||||
{#if hasContent}
|
||||
<div class="mt-1">
|
||||
<p
|
||||
data-testid="event-note"
|
||||
bind:this={noteEl}
|
||||
class="font-sans text-xs whitespace-pre-line text-ink-2"
|
||||
style={expanded
|
||||
? 'white-space:pre-line'
|
||||
: 'white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3'}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
{#if clamped || expanded}
|
||||
<button
|
||||
data-testid="note-toggle"
|
||||
type="button"
|
||||
class="mt-0.5 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
aria-expanded={expanded ? 'true' : 'false'}
|
||||
onclick={toggle}
|
||||
>
|
||||
{expanded ? m.timeline_note_show_less() : m.timeline_note_show_more()}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,67 +1,32 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import EventHeader from './EventHeader.svelte';
|
||||
import EventNote from './EventNote.svelte';
|
||||
import { getAccentConfig } from './eventCardConfig';
|
||||
import { timelineDateLabel } from './dateLabel';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
|
||||
/**
|
||||
* Centered axis pill for a derived life-event or a curated PERSONAL event
|
||||
* (REQ-007/008). The glyph is wrapped aria-hidden with an sr-only label sibling
|
||||
* (REQ-018). An edit affordance shows only for a curated event with an eventId
|
||||
* (never derived, never null — REQ-008) and only for a curator who holds
|
||||
* WRITE_ALL (`canWrite`, gate-closed by default — #842 REQ-005/007/008). The
|
||||
* gate is UX only; the real boundary is the #781 route guard + backend permission.
|
||||
* (REQ-007/008). The pill border keys off the accent (curated = mint, derived =
|
||||
* navy); its glyph, title, subtitle, and curator edit pencil are the shared
|
||||
* EventHeader, so the edit gate (canEditEvent) lives in one place — #842
|
||||
* REQ-005/007/008, #850 finding #5. The gate is UX only; the real boundary is the
|
||||
* #781 route guard + backend permission.
|
||||
*/
|
||||
let { entry, canWrite = false }: { entry: TimelineEntryDTO; canWrite?: boolean } = $props();
|
||||
|
||||
const config = $derived(getAccentConfig(entry));
|
||||
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
||||
// Provenance reads off entry.derived (not the accent): a derived life-event is
|
||||
// "abgeleitet", a curated PERSONAL event is "kuratiert" (REQ-007).
|
||||
const provenance = $derived(
|
||||
entry.derived ? m.timeline_provenance_derived() : m.timeline_provenance_curated()
|
||||
);
|
||||
// Provenance always shows; the date is an optional prefix so an undated event
|
||||
// still reads "abgeleitet"/"kuratiert" (REQ-007).
|
||||
const subtitle = $derived(dateLabel ? `${dateLabel} · ${provenance}` : provenance);
|
||||
const canEdit = $derived(canWrite && !entry.derived && entry.eventId != null);
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 rounded-full bg-surface px-3 py-1 shadow-sm {config.accent ===
|
||||
'curated'
|
||||
? 'border-2 border-brand-mint'
|
||||
: 'border border-brand-navy'}"
|
||||
>
|
||||
<span
|
||||
class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full {config.accent ===
|
||||
'curated'
|
||||
? 'bg-brand-mint text-brand-navy'
|
||||
: 'bg-brand-navy text-brand-mint'}"
|
||||
>
|
||||
<span aria-hidden="true">{config.glyph}</span>
|
||||
<span class="sr-only">{config.label}</span>
|
||||
</span>
|
||||
<span class="text-left">
|
||||
{#if entry.title}
|
||||
<span class="block font-serif text-sm font-bold whitespace-pre-line text-brand-navy"
|
||||
>{entry.title}</span
|
||||
>
|
||||
{/if}
|
||||
<span class="block font-sans text-xs text-ink-3">{subtitle}</span>
|
||||
</span>
|
||||
{#if canEdit}
|
||||
<a
|
||||
data-testid="event-edit"
|
||||
href="/zeitstrahl/events/{entry.eventId}/edit"
|
||||
class="ml-1 rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
>
|
||||
<span aria-hidden="true">✎</span>
|
||||
<span class="sr-only">{m.btn_edit()}</span>
|
||||
</a>
|
||||
{/if}
|
||||
<EventHeader entry={entry} canWrite={canWrite} />
|
||||
</div>
|
||||
<EventNote description={entry.description} />
|
||||
</div>
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import type { GroupingMode } from './timelineGrouping';
|
||||
|
||||
/**
|
||||
* The Datum·Ereignis·Thema segmented control (#827, REQ-010/011/018). An ARIA radiogroup with
|
||||
* roving tabindex — single selection, arrow-key navigable — deliberately distinct from #780's
|
||||
* `aria-pressed` layer-filter toggles. Defaults to Datum. Each segment is ≥44×44px, carries a
|
||||
* text label (full word as `aria-label`, an abbreviated label shown ≤360px so the control never
|
||||
* overflows at 320px), and uses semantic tokens so the selected/unselected contrast holds in dark
|
||||
* mode. When `disabled` (the Letters layer is off, nothing to regroup) the control stays in place
|
||||
* — no reflow — keeps its `aria-checked` selection so re-enabling restores the mode, and announces
|
||||
* a screen-reader reason.
|
||||
*/
|
||||
let {
|
||||
mode = $bindable('date'),
|
||||
disabled = false,
|
||||
ariaLabel = m.timeline_grouping_aria_label()
|
||||
}: { mode?: GroupingMode; disabled?: boolean; ariaLabel?: string } = $props();
|
||||
|
||||
interface Segment {
|
||||
value: GroupingMode;
|
||||
full: string;
|
||||
short: string;
|
||||
}
|
||||
|
||||
const segments: Segment[] = [
|
||||
{
|
||||
value: 'date',
|
||||
full: m.timeline_grouping_segment_date(),
|
||||
short: m.timeline_grouping_segment_date_short()
|
||||
},
|
||||
{
|
||||
value: 'event',
|
||||
full: m.timeline_grouping_segment_event(),
|
||||
short: m.timeline_grouping_segment_event_short()
|
||||
},
|
||||
{
|
||||
value: 'thema',
|
||||
full: m.timeline_grouping_segment_thema(),
|
||||
short: m.timeline_grouping_segment_thema_short()
|
||||
}
|
||||
];
|
||||
|
||||
function select(value: GroupingMode) {
|
||||
if (disabled) return;
|
||||
mode = value;
|
||||
}
|
||||
|
||||
function onKeydown(event: KeyboardEvent) {
|
||||
if (disabled) return;
|
||||
const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
|
||||
const backward = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
|
||||
if (!forward && !backward) return;
|
||||
event.preventDefault();
|
||||
const index = segments.findIndex((s) => s.value === mode);
|
||||
const delta = forward ? 1 : -1;
|
||||
const next = segments[(index + delta + segments.length) % segments.length];
|
||||
mode = next.value;
|
||||
const groupEl = event.currentTarget as HTMLElement;
|
||||
groupEl.querySelector<HTMLElement>(`[data-value="${next.value}"]`)?.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
role="radiogroup"
|
||||
tabindex="-1"
|
||||
aria-label={ariaLabel}
|
||||
aria-disabled={disabled}
|
||||
data-testid="grouping-control"
|
||||
class="inline-flex overflow-hidden rounded-md border border-line"
|
||||
onkeydown={onKeydown}
|
||||
>
|
||||
{#each segments as segment (segment.value)}
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
data-value={segment.value}
|
||||
aria-label={segment.full}
|
||||
aria-checked={mode === segment.value}
|
||||
tabindex={mode === segment.value ? 0 : -1}
|
||||
disabled={disabled}
|
||||
onclick={() => select(segment.value)}
|
||||
style="display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px"
|
||||
class="px-3 py-2 font-sans text-xs font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-inset"
|
||||
class:bg-brand-navy={mode === segment.value && !disabled}
|
||||
class:text-white={mode === segment.value && !disabled}
|
||||
class:bg-surface={mode !== segment.value || disabled}
|
||||
class:text-ink-3={mode !== segment.value || disabled}
|
||||
>
|
||||
<span class="seg-full">{segment.full}</span>
|
||||
<span class="seg-short">{segment.short}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if disabled}
|
||||
<span class="sr-only" role="status" data-testid="grouping-disabled-reason"
|
||||
>{m.timeline_grouping_disabled_reason()}</span
|
||||
>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.seg-short {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 360px) {
|
||||
.seg-full {
|
||||
display: none;
|
||||
}
|
||||
.seg-short {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,106 +0,0 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { tick } from 'svelte';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import GroupingControl from './GroupingControl.svelte';
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
const radios = () => Array.from(document.querySelectorAll('[role="radio"]')) as HTMLElement[];
|
||||
const group = () => document.querySelector('[role="radiogroup"]') as HTMLElement;
|
||||
const checkedValue = () =>
|
||||
radios()
|
||||
.find((r) => r.getAttribute('aria-checked') === 'true')
|
||||
?.getAttribute('data-value');
|
||||
|
||||
describe('GroupingControl (REQ-010)', () => {
|
||||
it('renders three radios inside a radiogroup, each with aria-checked (a)', () => {
|
||||
render(GroupingControl, {});
|
||||
expect(group()).not.toBeNull();
|
||||
const r = radios();
|
||||
expect(r).toHaveLength(3);
|
||||
r.forEach((radio) => expect(radio.hasAttribute('aria-checked')).toBe(true));
|
||||
});
|
||||
|
||||
it('defaults to Datum (f)', () => {
|
||||
render(GroupingControl, {});
|
||||
expect(radios().filter((r) => r.getAttribute('aria-checked') === 'true')).toHaveLength(1);
|
||||
expect(checkedValue()).toBe('date');
|
||||
});
|
||||
|
||||
it('exposes a text label on every segment, not colour alone (d)', () => {
|
||||
render(GroupingControl, {});
|
||||
radios().forEach((r) => expect((r.textContent ?? '').trim().length).toBeGreaterThan(0));
|
||||
});
|
||||
|
||||
it('gives the radiogroup an accessible name (e)', () => {
|
||||
render(GroupingControl, {});
|
||||
expect(group().getAttribute('aria-label')).toBe(m.timeline_grouping_aria_label());
|
||||
});
|
||||
|
||||
it('each segment has a tap target of at least 44×44px (c)', () => {
|
||||
render(GroupingControl, {});
|
||||
radios().forEach((r) => {
|
||||
const rect = r.getBoundingClientRect();
|
||||
expect(rect.width).toBeGreaterThanOrEqual(44);
|
||||
expect(rect.height).toBeGreaterThanOrEqual(44);
|
||||
});
|
||||
});
|
||||
|
||||
it('exposes each segment full word as an aria-label (REQ-011)', () => {
|
||||
render(GroupingControl, {});
|
||||
const labels = radios().map((r) => r.getAttribute('aria-label'));
|
||||
expect(labels).toEqual([
|
||||
m.timeline_grouping_segment_date(),
|
||||
m.timeline_grouping_segment_event(),
|
||||
m.timeline_grouping_segment_thema()
|
||||
]);
|
||||
});
|
||||
|
||||
it('moves the selection forward with the right arrow key (b)', async () => {
|
||||
render(GroupingControl, { mode: 'date' });
|
||||
group().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
|
||||
await tick();
|
||||
expect(checkedValue()).toBe('event');
|
||||
});
|
||||
|
||||
it('wraps to the last segment with the left arrow from Datum (b)', async () => {
|
||||
render(GroupingControl, { mode: 'date' });
|
||||
group().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
|
||||
await tick();
|
||||
expect(checkedValue()).toBe('thema');
|
||||
});
|
||||
|
||||
it('selects a segment on click', async () => {
|
||||
render(GroupingControl, { mode: 'date' });
|
||||
const thema = radios().find((r) => r.getAttribute('data-value') === 'thema')!;
|
||||
thema.click();
|
||||
await tick();
|
||||
expect(thema.getAttribute('aria-checked')).toBe('true');
|
||||
});
|
||||
});
|
||||
|
||||
describe('GroupingControl — disabled (REQ-018)', () => {
|
||||
it('marks the radiogroup aria-disabled and keeps all radios in the DOM', () => {
|
||||
render(GroupingControl, { mode: 'event', disabled: true });
|
||||
expect(group().getAttribute('aria-disabled')).toBe('true');
|
||||
expect(radios()).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('announces a screen-reader reason that letters are hidden', () => {
|
||||
render(GroupingControl, { disabled: true });
|
||||
const reason = document.querySelector('[data-testid="grouping-disabled-reason"]');
|
||||
expect(reason?.textContent).toContain(m.timeline_grouping_disabled_reason());
|
||||
});
|
||||
|
||||
it('retains the active mode while disabled (no reset to Datum)', () => {
|
||||
render(GroupingControl, { mode: 'thema', disabled: true });
|
||||
expect(checkedValue()).toBe('thema');
|
||||
});
|
||||
|
||||
it('ignores arrow keys while disabled', () => {
|
||||
render(GroupingControl, { mode: 'event', disabled: true });
|
||||
group().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
|
||||
expect(checkedValue()).toBe('event');
|
||||
});
|
||||
});
|
||||
@@ -1,195 +0,0 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import LetterCard from './LetterCard.svelte';
|
||||
import BucketHeaderChip from './BucketHeaderChip.svelte';
|
||||
import { entryKey } from './entryKey';
|
||||
import { getAccentConfig } from './eventCardConfig';
|
||||
import { timelineDateLabel } from './dateLabel';
|
||||
import { CLUSTER_PREVIEW, tagColorVar, type LetterBucket } from './timelineGrouping';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
|
||||
/**
|
||||
* One cluster of loose letters, bound together by a coloured left rail so the group reads as a
|
||||
* unit (#827). The axis-fixed world-band layer is rendered elsewhere — this is only the
|
||||
* loose-letter bundling.
|
||||
*
|
||||
* - Thema: a tinted root-tag header chip + a rail in the tag colour, over compact cards whose own
|
||||
* tag chip is suppressed (REQ-004/015/017).
|
||||
* - Ereignis: a same-year curated `event` becomes the card header (glyph, title, date,
|
||||
* provenance, edit pencil) so its title reads once — no separate floating pill (#827 redesign,
|
||||
* REQ-001/014). A cross-year cluster keeps a plain text header. The standalone "Weitere Briefe"
|
||||
* / "Ohne Thema" fallback keeps its label and a neutral dashed rail (REQ-006/007).
|
||||
*
|
||||
* A cluster shows its first `CLUSTER_PREVIEW` letters, then a show-more toggle reveals the rest
|
||||
* instead of flooding the timeline with every card (#827 redesign).
|
||||
*/
|
||||
let {
|
||||
bucket,
|
||||
mode,
|
||||
// `year` is the band's year — accepted for the cross-year label card seam (#827) but no
|
||||
// longer consumed here now the in-bucket month-density strip is gone (the year frames the
|
||||
// time from the band heading). Kept in the prop contract for callers/tests.
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
year = 0,
|
||||
nested = false,
|
||||
event = undefined,
|
||||
canWrite = false
|
||||
}: {
|
||||
bucket: LetterBucket;
|
||||
mode: 'event' | 'thema';
|
||||
year?: number;
|
||||
nested?: boolean;
|
||||
/** The same-year curated event whose letters this card holds — renders as the header. */
|
||||
event?: TimelineEntryDTO;
|
||||
canWrite?: boolean;
|
||||
} = $props();
|
||||
|
||||
const count = $derived(bucket.letters.length);
|
||||
const fallbackLabel = $derived(
|
||||
mode === 'event' ? m.timeline_bucket_other_letters() : m.timeline_bucket_no_topic()
|
||||
);
|
||||
|
||||
// Event-as-header (#827 redesign): a same-year curated event renders as this card's header,
|
||||
// mirroring EventPill — glyph + title + date · provenance + an edit pencil for a curator. The
|
||||
// title is never repeated as a separate floating pill.
|
||||
const accent = $derived(event ? getAccentConfig(event) : null);
|
||||
const eventDateLabel = $derived(
|
||||
event ? timelineDateLabel(event.eventDate, event.precision, event.eventDateEnd) : null
|
||||
);
|
||||
const provenance = $derived(
|
||||
event?.derived ? m.timeline_provenance_derived() : m.timeline_provenance_curated()
|
||||
);
|
||||
const eventSubtitle = $derived(eventDateLabel ? `${eventDateLabel} · ${provenance}` : provenance);
|
||||
const canEdit = $derived(canWrite && !!event && !event.derived && event.eventId != null);
|
||||
// The left rail binds the cluster: the tag colour in Thema, mint for an Ereignis cluster,
|
||||
// neutral for the fallback (and for a colourless/unknown tag token).
|
||||
const railColor = $derived(bucket.kind === 'tag' ? tagColorVar(bucket.color) : null);
|
||||
const railStyle = $derived(railColor ? `border-left-color: ${railColor}` : '');
|
||||
const isEventCluster = $derived(nested || bucket.kind === 'event');
|
||||
const cardVariant = $derived(mode === 'event' && isEventCluster ? 'event' : 'plain');
|
||||
|
||||
// First-5 preview + show-more (#827 redesign): a large cluster stays readable instead of
|
||||
// dumping every card into the timeline.
|
||||
let expanded = $state(false);
|
||||
const visible = $derived(expanded ? bucket.letters : bucket.letters.slice(0, CLUSTER_PREVIEW));
|
||||
const hiddenCount = $derived(bucket.letters.length - CLUSTER_PREVIEW);
|
||||
|
||||
// The catch-all "Weitere Briefe" / "Ohne Thema" bin is a junk drawer: render it count-only
|
||||
// behind a reveal control so it never floods the timeline; every other cluster starts open
|
||||
// (#827 redesign). The view re-creates a bucket per `{#each}` key, so the initial capture is
|
||||
// the right lifetime — `revealed` belongs to this bucket instance.
|
||||
const isDrawer = $derived(bucket.kind === 'fallback');
|
||||
// svelte-ignore state_referenced_locally
|
||||
let revealed = $state(bucket.kind !== 'fallback');
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="my-3 overflow-hidden rounded-md border border-l-2 border-line bg-surface shadow-sm"
|
||||
class:border-l-brand-mint={isEventCluster}
|
||||
class:border-dashed={isDrawer}
|
||||
style={railStyle}
|
||||
data-testid="letter-bucket"
|
||||
data-bucket-kind={bucket.kind}
|
||||
>
|
||||
{#if !nested}
|
||||
{#if event && accent}
|
||||
<!-- A same-year curated event IS the card header — its title reads once here, never
|
||||
also as a floating pill (#827 redesign, REQ-001/014). Glyph is aria-hidden with an
|
||||
sr-only label sibling (REQ-018); the edit pencil mirrors EventPill's gate. -->
|
||||
<header
|
||||
data-testid="bucket-event-header"
|
||||
class="flex items-center gap-2 border-b border-line bg-canvas px-3 py-2"
|
||||
>
|
||||
<span
|
||||
class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full {accent.accent ===
|
||||
'curated'
|
||||
? 'bg-brand-mint text-brand-navy'
|
||||
: 'bg-brand-navy text-brand-mint'}"
|
||||
>
|
||||
<span aria-hidden="true">{accent.glyph}</span>
|
||||
<span class="sr-only">{accent.label}</span>
|
||||
</span>
|
||||
<span class="min-w-0 text-left">
|
||||
<span class="block font-serif text-sm font-bold whitespace-pre-line text-brand-navy"
|
||||
>{event.title}</span
|
||||
>
|
||||
<span class="block font-sans text-xs text-ink-3">
|
||||
{eventSubtitle} <span data-testid="bucket-count">· {count}</span>
|
||||
</span>
|
||||
</span>
|
||||
{#if canEdit}
|
||||
<a
|
||||
data-testid="event-edit"
|
||||
href="/zeitstrahl/events/{event.eventId}/edit"
|
||||
class="ml-auto rounded-sm px-1 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
>
|
||||
<span aria-hidden="true">✎</span>
|
||||
<span class="sr-only">{m.btn_edit()}</span>
|
||||
</a>
|
||||
{/if}
|
||||
</header>
|
||||
{:else}
|
||||
<header
|
||||
class="flex items-center gap-2 px-3 py-2"
|
||||
class:bg-canvas={isEventCluster}
|
||||
class:border-b={!isDrawer}
|
||||
class:border-line={!isDrawer}
|
||||
>
|
||||
{#if mode === 'thema' && bucket.kind === 'tag'}
|
||||
<BucketHeaderChip name={bucket.title ?? ''} color={bucket.color} />
|
||||
{:else if mode === 'event' && bucket.kind === 'event'}
|
||||
<span class="font-serif text-sm font-bold text-ink">
|
||||
<span aria-hidden="true">✉</span>
|
||||
{bucket.title}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="font-sans text-xs font-semibold text-ink-3">{fallbackLabel}</span>
|
||||
{/if}
|
||||
<span data-testid="bucket-count" class="font-sans text-xs text-ink-3">· {count}</span>
|
||||
</header>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div class="px-3 py-2">
|
||||
{#if !revealed}
|
||||
<button
|
||||
type="button"
|
||||
data-testid="bucket-reveal"
|
||||
onclick={() => (revealed = true)}
|
||||
style="display: inline-flex; align-items: center; min-height: 44px"
|
||||
class="px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
>
|
||||
{m.timeline_bucket_show_more({ count: bucket.letters.length })}
|
||||
</button>
|
||||
{:else}
|
||||
<ul class="space-y-1.5">
|
||||
{#each visible as letter (entryKey(letter))}
|
||||
<li>
|
||||
<LetterCard
|
||||
entry={letter}
|
||||
variant={cardVariant}
|
||||
suppressTagChip={mode === 'thema'}
|
||||
compact={true}
|
||||
/>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if hiddenCount > 0}
|
||||
<button
|
||||
type="button"
|
||||
data-testid="bucket-show-more"
|
||||
aria-expanded={expanded}
|
||||
onclick={() => (expanded = !expanded)}
|
||||
style="display: inline-flex; align-items: center; min-height: 44px"
|
||||
class="mt-1 px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
||||
>
|
||||
{expanded
|
||||
? m.timeline_bucket_show_less()
|
||||
: m.timeline_bucket_show_more({ count: hiddenCount })}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,232 +0,0 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { tick } from 'svelte';
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import LetterBucket from './LetterBucket.svelte';
|
||||
import { makeEntry } from './test-factories';
|
||||
import type { LetterBucket as Bucket } from './timelineGrouping';
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
const eventBucket: Bucket = {
|
||||
key: 'event:e1',
|
||||
kind: 'event',
|
||||
title: 'Briefe von der Front',
|
||||
color: null,
|
||||
letters: [makeEntry({ documentId: 'a' }), makeEntry({ documentId: 'b' })]
|
||||
};
|
||||
|
||||
const tagBucket: Bucket = {
|
||||
key: 'tag:t1',
|
||||
kind: 'tag',
|
||||
title: 'Krieg',
|
||||
color: 'sienna',
|
||||
letters: [makeEntry({ documentId: 'c', rootTagName: 'Krieg', rootTagColor: 'sienna' })]
|
||||
};
|
||||
|
||||
describe('LetterBucket — Ereignis mode (REQ-003/006/014)', () => {
|
||||
it('shows the event title and the cluster count', () => {
|
||||
render(LetterBucket, { bucket: eventBucket, mode: 'event' });
|
||||
expect(document.body.textContent).toContain('Briefe von der Front');
|
||||
expect(document.querySelector('[data-testid="bucket-count"]')?.textContent).toContain('2');
|
||||
});
|
||||
|
||||
it('renders its letters as .lcard.ev event cards (REQ-014)', () => {
|
||||
render(LetterBucket, { bucket: eventBucket, mode: 'event' });
|
||||
expect(document.querySelectorAll('a.lcard.ev')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('uses the localized "Weitere Briefe" label and plain cards for the fallback bucket (REQ-006)', () => {
|
||||
const fb: Bucket = {
|
||||
key: '__fallback__',
|
||||
kind: 'fallback',
|
||||
color: null,
|
||||
letters: [makeEntry({ documentId: 'x' })]
|
||||
};
|
||||
render(LetterBucket, { bucket: fb, mode: 'event' });
|
||||
expect(document.body.textContent).toContain(m.timeline_bucket_other_letters());
|
||||
// fallback letters are not clustered under a curated event → plain card, never .lcard.ev
|
||||
expect(document.querySelector('a.ev')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('LetterBucket — Thema mode (REQ-004/007/015/017)', () => {
|
||||
it('renders a tinted bucket-header chip carrying the root-tag name (REQ-015)', () => {
|
||||
render(LetterBucket, { bucket: tagBucket, mode: 'thema' });
|
||||
const chip = document.querySelector('[data-testid="bucket-header-chip"]');
|
||||
expect(chip?.textContent).toContain('Krieg');
|
||||
});
|
||||
|
||||
it('suppresses the per-letter tag chip inside its own root-tag bucket (REQ-017)', () => {
|
||||
render(LetterBucket, { bucket: tagBucket, mode: 'thema' });
|
||||
expect(document.querySelector('[data-testid="tag-chip"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('uses the localized "Ohne Thema" label for the untagged fallback bucket (REQ-007)', () => {
|
||||
const fb: Bucket = {
|
||||
key: '__fallback__',
|
||||
kind: 'fallback',
|
||||
color: null,
|
||||
letters: [makeEntry({ documentId: 'y', rootTagName: undefined })]
|
||||
};
|
||||
render(LetterBucket, { bucket: fb, mode: 'thema' });
|
||||
expect(document.body.textContent).toContain(m.timeline_bucket_no_topic());
|
||||
});
|
||||
});
|
||||
|
||||
const manyLetters = (n: number) =>
|
||||
Array.from({ length: n }, (_, i) =>
|
||||
makeEntry({ documentId: `d${i}`, eventDate: `1916-0${(i % 9) + 1}-01` })
|
||||
);
|
||||
|
||||
describe('LetterBucket — preview cap + show-more (#827 redesign)', () => {
|
||||
it('shows only the first 5 letters with a show-more toggle when the cluster is larger', () => {
|
||||
const bucket: Bucket = {
|
||||
key: 'tag:t1',
|
||||
kind: 'tag',
|
||||
title: 'Krieg',
|
||||
color: 'sienna',
|
||||
letters: manyLetters(8)
|
||||
};
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
|
||||
expect(document.querySelector('[data-testid="strip-expand"]')).toBeNull(); // sparkline gone
|
||||
});
|
||||
|
||||
it('expands to all letters and collapses back on toggle', async () => {
|
||||
const bucket: Bucket = {
|
||||
key: 'tag:t1',
|
||||
kind: 'tag',
|
||||
title: 'Krieg',
|
||||
color: 'sienna',
|
||||
letters: manyLetters(8)
|
||||
};
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
(document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement).click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(8);
|
||||
(document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement).click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
||||
});
|
||||
|
||||
it('shows all letters and no toggle for a small cluster (<= 5)', () => {
|
||||
const bucket: Bucket = {
|
||||
key: 'tag:t1',
|
||||
kind: 'tag',
|
||||
title: 'Tod',
|
||||
color: null,
|
||||
letters: manyLetters(3)
|
||||
};
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(3);
|
||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('binds a tag bucket together with a coloured left rail from its token', () => {
|
||||
const bucket: Bucket = {
|
||||
key: 'tag:t1',
|
||||
kind: 'tag',
|
||||
title: 'Krieg',
|
||||
color: 'sienna',
|
||||
letters: manyLetters(1)
|
||||
};
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
const section = document.querySelector('[data-testid="letter-bucket"]') as HTMLElement;
|
||||
expect(section.getAttribute('style') ?? '').toContain('var(--c-tag-sienna)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('LetterBucket — leftover drawer (#827 redesign)', () => {
|
||||
const fb = (n: number): Bucket => ({
|
||||
key: '__fallback__',
|
||||
kind: 'fallback',
|
||||
color: null,
|
||||
letters: Array.from({ length: n }, (_, i) =>
|
||||
makeEntry({ documentId: `f${i}`, eventDate: `1916-01-0${(i % 9) + 1}` })
|
||||
)
|
||||
});
|
||||
it('renders collapsed — count + reveal, no letter cards — until opened', () => {
|
||||
render(LetterBucket, { bucket: fb(20), mode: 'event', year: 1916 });
|
||||
expect(document.querySelector('a.lcard')).toBeNull();
|
||||
expect(document.body.textContent).toContain(m.timeline_bucket_other_letters());
|
||||
expect(document.querySelector('[data-testid="bucket-reveal"]')).not.toBeNull();
|
||||
});
|
||||
it('reveals the first 5 letters when opened', async () => {
|
||||
render(LetterBucket, { bucket: fb(20), mode: 'event', year: 1916 });
|
||||
(document.querySelector('[data-testid="bucket-reveal"]') as HTMLButtonElement).click();
|
||||
await tick();
|
||||
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
|
||||
expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('LetterBucket — card chrome (#827 redesign)', () => {
|
||||
it('renders the cluster as a contained card (bordered, rounded, surface)', () => {
|
||||
const bucket: Bucket = {
|
||||
key: 'tag:t1',
|
||||
kind: 'tag',
|
||||
title: 'Krieg',
|
||||
color: 'sienna',
|
||||
letters: [makeEntry({ documentId: 'a' })]
|
||||
};
|
||||
render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
|
||||
const card = document.querySelector('[data-testid="letter-bucket"]') as HTMLElement;
|
||||
expect(card.className).toMatch(/\brounded\b|rounded-/);
|
||||
expect(card.className).toContain('border');
|
||||
expect(card.className).toContain('bg-surface');
|
||||
});
|
||||
});
|
||||
|
||||
describe('LetterBucket — event-as-header (#827 redesign)', () => {
|
||||
it('renders the curated event as the card header when given an `event` (no separate pill)', () => {
|
||||
const event = makeEntry({
|
||||
kind: 'EVENT',
|
||||
type: 'PERSONAL',
|
||||
derived: false,
|
||||
eventId: 'e1',
|
||||
title: 'Ein gewaltiger Stadtbrand',
|
||||
eventDate: '1916-07-06',
|
||||
senderName: '',
|
||||
receiverName: '',
|
||||
documentId: undefined
|
||||
});
|
||||
const bucket: Bucket = {
|
||||
key: 'event:e1',
|
||||
kind: 'event',
|
||||
title: 'Ein gewaltiger Stadtbrand',
|
||||
color: null,
|
||||
letters: [makeEntry({ documentId: 'a', linkedEventId: 'e1' })]
|
||||
};
|
||||
render(LetterBucket, { bucket, mode: 'event', year: 1916, event, canWrite: true });
|
||||
const header = document.querySelector('[data-testid="bucket-event-header"]') as HTMLElement;
|
||||
expect(header.textContent).toContain('Ein gewaltiger Stadtbrand');
|
||||
expect(header.textContent).toContain(m.timeline_provenance_curated());
|
||||
expect(document.querySelector('[data-testid="event-edit"]')?.getAttribute('href')).toBe(
|
||||
'/zeitstrahl/events/e1/edit'
|
||||
);
|
||||
});
|
||||
|
||||
it('shows no edit affordance in the header when canWrite is false', () => {
|
||||
const event = makeEntry({
|
||||
kind: 'EVENT',
|
||||
type: 'PERSONAL',
|
||||
derived: false,
|
||||
eventId: 'e1',
|
||||
title: 'X',
|
||||
senderName: '',
|
||||
receiverName: '',
|
||||
documentId: undefined
|
||||
});
|
||||
const bucket: Bucket = {
|
||||
key: 'event:e1',
|
||||
kind: 'event',
|
||||
title: 'X',
|
||||
color: null,
|
||||
letters: [makeEntry({ documentId: 'a' })]
|
||||
};
|
||||
render(LetterBucket, { bucket, mode: 'event', year: 1916, event, canWrite: false });
|
||||
expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -11,12 +11,12 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
* A single archive letter on the timeline: sender → receiver, title, and a
|
||||
* precision-aware date chip, linking to the document. Names/titles are
|
||||
* OCR/import-derived — rendered via default `{...}` escaping with
|
||||
* `whitespace-pre-line` for line breaks (REQ-021); never the raw-HTML directive.
|
||||
* `whitespace-pre-line` for line breaks (REQ-010); never the raw-HTML directive.
|
||||
*
|
||||
* In Ereignis mode the card sits inside an event cluster and renders as the
|
||||
* `.lcard.ev` variant (#827, REQ-014). In Thema mode the per-letter tag chip is
|
||||
* suppressed inside its own root-tag bucket, where the bucket header already
|
||||
* carries the topic (`suppressTagChip`, REQ-017).
|
||||
* Inside an event cluster the card sits in the contained event card and renders as
|
||||
* the `.lcard.ev` `compact` variant (#850, REQ-002): tighter row, and the redundant
|
||||
* date chip is dropped when the title already embeds the date. The per-letter tag
|
||||
* chip can be suppressed via `suppressTagChip` for callers that already convey it.
|
||||
*/
|
||||
let {
|
||||
entry,
|
||||
@@ -32,10 +32,12 @@ let {
|
||||
|
||||
const isEventVariant = $derived(variant === 'event');
|
||||
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
|
||||
// Inside a per-year bucket the year frames the time, and these archive titles already
|
||||
// embed the date — so the compact in-bucket card drops the redundant date chip when a
|
||||
// title is present, halving the row height and killing the duplicate date (#827).
|
||||
const showDate = $derived(!compact || !entry.title);
|
||||
// Inside an event card the band frames the time, so a compact in-card letter drops the
|
||||
// redundant date chip — but ONLY when the (free-form OCR) title actually embeds the formatted
|
||||
// date, e.g. "H-0023 – 6. Juli 1916". A title without the date keeps its chip, so a letter like
|
||||
// "Brief an Mutter" never loses its month/day (the band frames only the year) — #850, finding #4.
|
||||
const titleEmbedsDate = $derived(!!dateLabel && !!entry.title && entry.title.includes(dateLabel));
|
||||
const showDate = $derived(!compact || !titleEmbedsDate);
|
||||
const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
|
||||
const receiver = $derived(
|
||||
entry.receiverName === '' ? m.timeline_unknown_person() : entry.receiverName
|
||||
@@ -77,8 +79,8 @@ const receiver = $derived(
|
||||
</span>
|
||||
{#if entry.rootTagName && !suppressTagChip}
|
||||
<!-- The primary root-tag chip sits on its own line beneath the meta line
|
||||
(#835 §3); absent when the letter has no tag (REQ-005), and suppressed in
|
||||
Thema mode inside its own root-tag bucket where the header conveys it (REQ-017). -->
|
||||
(#835 §3); absent when the letter has no tag (REQ-006), and suppressed when
|
||||
the caller already conveys the topic (suppressTagChip). -->
|
||||
<TagChip name={entry.rootTagName} color={entry.rootTagColor ?? null} />
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
@@ -128,18 +128,18 @@ describe('LetterCard', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('LetterCard — grouping variants (#827, REQ-014/017)', () => {
|
||||
it('carries the .lcard.ev class in the event variant (REQ-014)', () => {
|
||||
describe('LetterCard — event-cluster variants (#850, REQ-002)', () => {
|
||||
it('carries the .lcard.ev class in the event variant (REQ-002)', () => {
|
||||
render(LetterCard, { entry: makeEntry(), variant: 'event' });
|
||||
expect(document.querySelector('a.lcard.ev')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('is a plain card with no .ev marker by default (REQ-014)', () => {
|
||||
it('is a plain card with no .ev marker by default (REQ-006)', () => {
|
||||
render(LetterCard, { entry: makeEntry() });
|
||||
expect(document.querySelector('a.ev')).toBeNull();
|
||||
});
|
||||
|
||||
it('suppresses the per-letter tag chip when asked, even with a root tag (REQ-017)', () => {
|
||||
it('suppresses the per-letter tag chip when asked, even with a root tag', () => {
|
||||
render(LetterCard, {
|
||||
entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }),
|
||||
suppressTagChip: true
|
||||
@@ -147,25 +147,37 @@ describe('LetterCard — grouping variants (#827, REQ-014/017)', () => {
|
||||
expect(document.querySelector('[data-testid="tag-chip"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('still shows the per-letter tag chip when not suppressed — Datum/Ereignis (REQ-017)', () => {
|
||||
it('still shows the per-letter tag chip when not suppressed', () => {
|
||||
render(LetterCard, { entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }) });
|
||||
expect(document.querySelector('[data-testid="tag-chip"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('drops the redundant date line in the compact variant when a title is present (#827)', () => {
|
||||
// Inside a per-year bucket the year already frames the time, and these archive
|
||||
// titles embed the date — so the compact in-bucket card omits the date chip.
|
||||
render(LetterCard, { entry: makeEntry({ title: 'H-0023 – 6. Juli 1916' }), compact: true });
|
||||
it('drops the compact date chip only when the title actually embeds the formatted date (#850)', () => {
|
||||
// An archive title like "H-0023 – 6. Juli 1916" already carries the date, so inside an
|
||||
// event card (where the band frames the time) the redundant chip is dropped.
|
||||
const entry = makeEntry({ eventDate: '1916-07-06', precision: 'DAY' });
|
||||
const dateLabel = timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd);
|
||||
render(LetterCard, { entry: { ...entry, title: `H-0023 – ${dateLabel}` }, compact: true });
|
||||
expect(document.querySelector('[data-testid="letter-date"]')).toBeNull();
|
||||
expect(document.body.textContent).toContain('Karl Raddatz'); // sender still shown
|
||||
});
|
||||
|
||||
it('keeps the date in the compact variant when the letter has no title (#827)', () => {
|
||||
it('keeps the compact date chip when the title does NOT embed the date (#850, finding #4)', () => {
|
||||
// Titles are free-form OCR text — a titled letter whose title carries no date must keep
|
||||
// its month/day, since inside an event card the band frames only the year.
|
||||
render(LetterCard, {
|
||||
entry: makeEntry({ eventDate: '1916-07-06', precision: 'DAY', title: 'Brief an Mutter' }),
|
||||
compact: true
|
||||
});
|
||||
expect(document.querySelector('[data-testid="letter-date"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('keeps the date in the compact variant when the letter has no title (#850)', () => {
|
||||
render(LetterCard, { entry: makeEntry({ title: undefined }), compact: true });
|
||||
expect(document.querySelector('[data-testid="letter-date"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders the compact variant on a single tighter row (#827)', () => {
|
||||
it('renders the compact variant on a single tighter row (#850)', () => {
|
||||
render(LetterCard, { entry: makeEntry(), compact: true });
|
||||
expect(document.querySelector('a.lcard.compact')).not.toBeNull();
|
||||
});
|
||||
|
||||
@@ -6,7 +6,7 @@ import LetterCard from './LetterCard.svelte';
|
||||
import EventPill from './EventPill.svelte';
|
||||
import WorldBand from './WorldBand.svelte';
|
||||
import { entryKey } from './entryKey';
|
||||
import { buildEventLookup, type GroupingMode } from './timelineGrouping';
|
||||
import { buildEventLookup } from './eventClustering';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineDTO = components['schemas']['TimelineDTO'];
|
||||
@@ -20,27 +20,18 @@ type TimelineYearDTO = components['schemas']['TimelineYearDTO'];
|
||||
* for the per-person rail (issue #10) and is undefined here; it is not passed to
|
||||
* leaf cards (REQ-025). Owns no <main> — the layout does.
|
||||
*
|
||||
* `groupingMode` (#827) flows down to each YearBand to re-bundle its loose letters;
|
||||
* the event lookup — the curated events present in this (already layer-filtered)
|
||||
* view — is resolved once here so Ereignis clusters never reference a filtered-out
|
||||
* event (filter-then-group, REQ-019). The undated bucket renders unchanged in every
|
||||
* mode (its letters have no year, so the per-year bucketing does not apply).
|
||||
* The event lookup is built once over the whole (already layer-filtered) timeline
|
||||
* and threaded to every band so a curated event's letters cluster under it inline
|
||||
* (#850, REQ-002). The undated bucket stays plain (events as pills, letters as
|
||||
* cards) — out of clustering scope.
|
||||
*/
|
||||
let {
|
||||
timeline,
|
||||
personId = undefined,
|
||||
canWrite = false,
|
||||
groupingMode = 'date'
|
||||
}: {
|
||||
timeline: TimelineDTO;
|
||||
personId?: string;
|
||||
canWrite?: boolean;
|
||||
groupingMode?: GroupingMode;
|
||||
} = $props();
|
||||
canWrite = false
|
||||
}: { timeline: TimelineDTO; personId?: string; canWrite?: boolean } = $props();
|
||||
|
||||
const eventLookup = $derived(
|
||||
groupingMode === 'date' ? new Map<string, string>() : buildEventLookup(timeline)
|
||||
);
|
||||
const eventLookup = $derived(buildEventLookup(timeline));
|
||||
|
||||
type Row = { t: 'band'; year: TimelineYearDTO } | { t: 'gap'; from: number; to: number };
|
||||
|
||||
@@ -71,12 +62,7 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
|
||||
{#each rows as row (row.t === 'band' ? `band-${row.year.year}` : `gap-${row.from}`)}
|
||||
<li>
|
||||
{#if row.t === 'band'}
|
||||
<YearBand
|
||||
year={row.year}
|
||||
canWrite={canWrite}
|
||||
groupingMode={groupingMode}
|
||||
eventLookup={eventLookup}
|
||||
/>
|
||||
<YearBand year={row.year} canWrite={canWrite} eventLookup={eventLookup} />
|
||||
{:else}
|
||||
<GapSpan from={row.from} to={row.to} />
|
||||
{/if}
|
||||
|
||||
@@ -341,4 +341,67 @@ describe('TimelineView', () => {
|
||||
expect(hrefs).toContain('/zeitstrahl/events/wb/edit');
|
||||
expect(hrefs).toContain('/zeitstrahl/events/wu/edit');
|
||||
});
|
||||
|
||||
it('builds the event lookup and clusters a curated event + same-year linked letter into an event-card (#850)', () => {
|
||||
const evId = 'eeeeeeee-eeee-eeee-eeee-eeeeeeeeeeee';
|
||||
const event = makeEntry({
|
||||
kind: 'EVENT',
|
||||
type: 'PERSONAL',
|
||||
derived: false,
|
||||
eventId: evId,
|
||||
eventDate: '1916-07-06',
|
||||
precision: 'DAY',
|
||||
title: 'Ein gewaltiger Stadtbrand',
|
||||
senderName: '',
|
||||
receiverName: '',
|
||||
documentId: undefined
|
||||
});
|
||||
const letter = makeEntry({
|
||||
eventDate: '1916-05-10',
|
||||
documentId: 'doc-linked',
|
||||
title: 'Brief',
|
||||
linkedEventId: evId
|
||||
});
|
||||
render(TimelineView, {
|
||||
timeline: makeTimelineDTO({ years: [makeYear(1916, [event, letter])] })
|
||||
});
|
||||
expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
|
||||
expect(document.querySelector('a.lcard.ev')).not.toBeNull();
|
||||
// the title reads once — the event is the card header, not also a loose pill
|
||||
const titles = (document.body.textContent?.match(/Ein gewaltiger Stadtbrand/g) ?? []).length;
|
||||
expect(titles).toBe(1);
|
||||
});
|
||||
|
||||
it('keeps a HISTORICAL event a WorldBand with a same-year linked letter — never clusters (REQ-014)', () => {
|
||||
const evId = 'dddddddd-dddd-dddd-dddd-dddddddddddd';
|
||||
const world = makeEntry({
|
||||
kind: 'EVENT',
|
||||
type: 'HISTORICAL',
|
||||
derived: false,
|
||||
eventId: evId,
|
||||
eventDate: '1916-07-01',
|
||||
precision: 'DAY',
|
||||
title: 'Schlacht an der Somme',
|
||||
senderName: '',
|
||||
receiverName: '',
|
||||
documentId: undefined
|
||||
});
|
||||
const letter = makeEntry({
|
||||
eventDate: '1916-05-10',
|
||||
documentId: 'doc-world-linked',
|
||||
title: 'Brief von der Front',
|
||||
linkedEventId: evId
|
||||
});
|
||||
render(TimelineView, {
|
||||
timeline: makeTimelineDTO({ years: [makeYear(1916, [world, letter])] })
|
||||
});
|
||||
// the world event stays a full-width band — no contained event card
|
||||
expect(document.querySelector('[data-testid="event-card"]')).toBeNull();
|
||||
expect(document.querySelector('a.lcard.ev')).toBeNull();
|
||||
// the linked letter renders loose on the spine, not inside a card
|
||||
expect(document.querySelector('.letter-row')).not.toBeNull();
|
||||
// and the band keeps its WorldBand "· historisch" register
|
||||
expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
|
||||
expect(document.body.textContent).toContain('Schlacht an der Somme');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import { getAccentConfig } from './eventCardConfig';
|
||||
import { getAccentConfig, canEditEvent } from './eventCardConfig';
|
||||
import { timelineDateLabel } from './dateLabel';
|
||||
import EventNote from './EventNote.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
@@ -26,9 +27,9 @@ const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYe
|
||||
// Every WorldBand is a HISTORICAL band, so the visible "historisch" register
|
||||
// always trails the subtitle as plain text — never a second pill (REQ-009).
|
||||
const historical = $derived(m.timeline_layer_historical_suffix());
|
||||
// A HISTORICAL event is never derived, so the edit gate is just the curator
|
||||
// flag plus a real eventId (#842 REQ-006/008).
|
||||
const canEdit = $derived(canWrite && entry.eventId != null);
|
||||
// A HISTORICAL event is never derived, so canEditEvent's derived check is a
|
||||
// no-op here — the gate is the curator flag plus a real eventId (#842 REQ-006/008).
|
||||
const canEdit = $derived(canEditEvent(entry, canWrite));
|
||||
</script>
|
||||
|
||||
<div class="my-3 border-y border-line bg-canvas px-4 py-2 text-center">
|
||||
@@ -61,4 +62,5 @@ const canEdit = $derived(canWrite && entry.eventId != null);
|
||||
<span class="sr-only">{m.btn_edit()}</span>
|
||||
</a>
|
||||
{/if}
|
||||
<EventNote description={entry.description} />
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,10 @@ import EventPill from './EventPill.svelte';
|
||||
import WorldBand from './WorldBand.svelte';
|
||||
import LetterCard from './LetterCard.svelte';
|
||||
import YearLetterStrip from './YearLetterStrip.svelte';
|
||||
import LetterBucket from './LetterBucket.svelte';
|
||||
import EventCluster from './EventCluster.svelte';
|
||||
import { isDense } from './timelineDensity';
|
||||
import { entryKey } from './entryKey';
|
||||
import {
|
||||
bucketLetters,
|
||||
type GroupingMode,
|
||||
type LetterBucket as LetterBucketModel
|
||||
} from './timelineGrouping';
|
||||
import { splitYearLetters, type EventCluster as EventClusterModel } from './eventClustering';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type TimelineYearDTO = components['schemas']['TimelineYearDTO'];
|
||||
@@ -18,102 +14,111 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
|
||||
|
||||
/**
|
||||
* One year of the timeline: a <section> with a sticky <h2> (REQ-006). Events
|
||||
* render in DTO order as pills/bands; letters render as individual cards while
|
||||
* the band holds ≤ 12 (REQ-011) or collapse to a single density strip above that
|
||||
* (REQ-012). Entries are never re-sorted — DTO order is preserved (REQ-003).
|
||||
* render in DTO order as pills/world-bands; entries are never re-sorted (REQ-003).
|
||||
*
|
||||
* In Ereignis/Thema mode (#827) the event pills/world-bands render identically
|
||||
* (REQ-001); only the loose letters re-bundle into per-year buckets below them
|
||||
* (REQ-002/003/004). Datum mode is the original individual-card / density-strip
|
||||
* path, untouched.
|
||||
* A curated event with letters linked to it (#850) becomes a contained event card:
|
||||
* the event IS the card header and its linked letters sit inside (no separate pill —
|
||||
* REQ-002). A curated event with letters in another year band renders here as a
|
||||
* cross-year text-header card (REQ-004). An event with no linked letters stays a
|
||||
* plain pill/world-band (REQ-005).
|
||||
*
|
||||
* Every other letter (no linkedEventId, or linking to an event the #780 layer filter
|
||||
* removed) stays loose: alternating left/right while the band holds ≤ 12 such loose
|
||||
* letters (REQ-006), folding into a single month-density strip above that (REQ-007).
|
||||
* The loose-letter layout and the strip count ONLY these loose letters — clustered
|
||||
* letters never re-appear loose (REQ-007).
|
||||
*/
|
||||
let {
|
||||
year,
|
||||
canWrite = false,
|
||||
groupingMode = 'date',
|
||||
eventLookup = new Map<string, string>()
|
||||
eventLookup
|
||||
}: {
|
||||
year: TimelineYearDTO;
|
||||
canWrite?: boolean;
|
||||
groupingMode?: GroupingMode;
|
||||
eventLookup?: Map<string, string>;
|
||||
} = $props();
|
||||
|
||||
type Row =
|
||||
| { t: 'event'; entry: TimelineEntryDTO }
|
||||
| { t: 'eventcard'; entry: TimelineEntryDTO; bucket: LetterBucketModel }
|
||||
| { t: 'eventcard'; event?: TimelineEntryDTO; cluster: EventClusterModel }
|
||||
| { t: 'letter'; entry: TimelineEntryDTO; side: 'left' | 'right' }
|
||||
| { t: 'strip' }
|
||||
| { t: 'bucket'; bucket: LetterBucketModel; nested: boolean };
|
||||
| { t: 'strip' };
|
||||
|
||||
const letters = $derived(year.entries.filter((e) => e.kind === 'LETTER'));
|
||||
const dense = $derived(isDense(letters.length));
|
||||
const bucketMode = $derived(groupingMode === 'thema' ? 'thema' : 'event');
|
||||
// Split this band's letters into event clusters and the loose remainder once; the loose
|
||||
// list alone drives the alternating layout and the density strip (REQ-007).
|
||||
const split = $derived(
|
||||
splitYearLetters(
|
||||
year.entries.filter((e) => e.kind === 'LETTER'),
|
||||
eventLookup
|
||||
)
|
||||
);
|
||||
const loose = $derived(split.loose);
|
||||
const dense = $derived(isDense(loose.length));
|
||||
// Clusters keyed by eventId (built once in splitYearLetters): row assembly looks a letter's
|
||||
// disposition up in O(1) — `byEvent.has(linkedEventId)` — instead of scanning the loose array
|
||||
// per letter (was O(L²) on a dense band), and resolves an event's card with `byEvent.get`.
|
||||
const byEvent = $derived(split.byEvent);
|
||||
|
||||
// Event ids that have a same-year EVENT entry in THIS band: those clusters render as that
|
||||
// event's header (at the EVENT position); every other cluster is cross-year (REQ-004/015).
|
||||
const sameYearEventIds = $derived.by<Record<string, true>>(() => {
|
||||
const ids: Record<string, true> = {};
|
||||
for (const entry of year.entries) {
|
||||
if (entry.kind === 'EVENT' && entry.eventId) ids[entry.eventId] = true;
|
||||
}
|
||||
return ids;
|
||||
});
|
||||
|
||||
const rows = $derived.by<Row[]>(() => {
|
||||
const out: Row[] = [];
|
||||
|
||||
// Ereignis: events stay on the axis (REQ-001). A curated event WITH letters in this band
|
||||
// becomes the contained card's header (no separate pill — its title reads once, #827
|
||||
// redesign); a letterless/derived/world event stays a plain pill/band. A cluster whose event
|
||||
// lives in another year band (or was filtered out) renders as a text-header card here, and
|
||||
// the unlinked letters fall to the single "Weitere Briefe" drawer (REQ-003/006/019).
|
||||
if (groupingMode === 'event') {
|
||||
const buckets = bucketLetters(letters, 'event', eventLookup);
|
||||
const sameYearBucket = (id: string | undefined) =>
|
||||
id ? buckets.find((b) => b.kind === 'event' && b.key === `event:${id}`) : undefined;
|
||||
for (const entry of year.entries) {
|
||||
if (entry.kind !== 'EVENT') continue;
|
||||
const bucket = sameYearBucket(entry.eventId);
|
||||
// A curated event with same-year letters becomes the card header (card replaces pill);
|
||||
// otherwise it stays a plain pill/world-band.
|
||||
if (bucket) out.push({ t: 'eventcard', entry, bucket });
|
||||
else out.push({ t: 'event', entry });
|
||||
}
|
||||
// Cross-year clusters (no matching event entry in this band) and the fallback drawer
|
||||
// render after the axis entries, with their own text header.
|
||||
for (const bucket of buckets) {
|
||||
if (
|
||||
bucket.kind === 'fallback' ||
|
||||
!year.entries.some((e) => e.kind === 'EVENT' && `event:${e.eventId}` === bucket.key)
|
||||
) {
|
||||
out.push({ t: 'bucket', bucket, nested: false });
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// Thema: events stay on the axis (REQ-001); loose letters re-bundle into per-year root-tag
|
||||
// buckets below them (REQ-004) — no axis pill exists for a tag, so every bucket keeps a header.
|
||||
if (groupingMode === 'thema') {
|
||||
for (const entry of year.entries) {
|
||||
if (entry.kind === 'EVENT') out.push({ t: 'event', entry });
|
||||
}
|
||||
for (const bucket of bucketLetters(letters, 'thema', eventLookup)) {
|
||||
out.push({ t: 'bucket', bucket, nested: false });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
const emitted: Record<string, true> = {};
|
||||
let stripInserted = false;
|
||||
let letterIndex = 0;
|
||||
|
||||
for (const entry of year.entries) {
|
||||
if (entry.kind === 'EVENT') {
|
||||
out.push({ t: 'event', entry });
|
||||
} else if (!dense) {
|
||||
out.push({ t: 'letter', entry, side: letterIndex % 2 === 0 ? 'left' : 'right' });
|
||||
letterIndex += 1;
|
||||
} else if (!stripInserted) {
|
||||
out.push({ t: 'strip' });
|
||||
stripInserted = true;
|
||||
// A curated event whose letters live in THIS band becomes the contained card's
|
||||
// header — its title reads once, no separate pill (REQ-002). Otherwise it stays a
|
||||
// plain pill/world-band (REQ-005).
|
||||
const cluster = entry.eventId ? byEvent.get(entry.eventId) : undefined;
|
||||
if (cluster) {
|
||||
out.push({ t: 'eventcard', event: entry, cluster });
|
||||
emitted[cluster.eventId] = true;
|
||||
} else {
|
||||
out.push({ t: 'event', entry });
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
const cluster = entry.linkedEventId ? byEvent.get(entry.linkedEventId) : undefined;
|
||||
if (!cluster) {
|
||||
// A loose letter (not clustered): alternate while sparse, or fold the whole loose set
|
||||
// into one density strip (inserted once, at the first loose letter) when dense.
|
||||
if (!dense) {
|
||||
out.push({ t: 'letter', entry, side: letterIndex % 2 === 0 ? 'left' : 'right' });
|
||||
letterIndex += 1;
|
||||
} else if (!stripInserted) {
|
||||
out.push({ t: 'strip' });
|
||||
stripInserted = true;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// A clustered letter. A same-year cluster is emitted at its EVENT entry, so skip it here.
|
||||
// A cross-year cluster has no EVENT anchor in this band — emit its ✉ card HERE, at the
|
||||
// position of its earliest linked letter, so the band stays in strict time order (REQ-015).
|
||||
if (!sameYearEventIds[cluster.eventId] && !emitted[cluster.eventId]) {
|
||||
out.push({ t: 'eventcard', cluster });
|
||||
emitted[cluster.eventId] = true;
|
||||
}
|
||||
}
|
||||
|
||||
return out;
|
||||
});
|
||||
|
||||
function rowKey(row: Row): string {
|
||||
if (row.t === 'strip') return `strip-${year.year}`;
|
||||
if (row.t === 'bucket') return row.bucket.key;
|
||||
if (row.t === 'eventcard') return `evcard:${row.cluster.eventId}`;
|
||||
return entryKey(row.entry);
|
||||
}
|
||||
</script>
|
||||
@@ -137,11 +142,10 @@ function rowKey(row: Row): string {
|
||||
<EventPill entry={row.entry} canWrite={canWrite} />
|
||||
{/if}
|
||||
{:else if row.t === 'eventcard'}
|
||||
<LetterBucket
|
||||
bucket={row.bucket}
|
||||
mode="event"
|
||||
year={year.year}
|
||||
event={row.entry}
|
||||
<EventCluster
|
||||
letters={row.cluster.letters}
|
||||
event={row.event}
|
||||
title={row.cluster.title}
|
||||
canWrite={canWrite}
|
||||
/>
|
||||
{:else if row.t === 'letter'}
|
||||
@@ -149,10 +153,8 @@ function rowKey(row: Row): string {
|
||||
<span data-testid="letter-dot" class="letter-dot bg-surface" aria-hidden="true"></span>
|
||||
<LetterCard entry={row.entry} />
|
||||
</div>
|
||||
{:else if row.t === 'bucket'}
|
||||
<LetterBucket bucket={row.bucket} mode={bucketMode} year={year.year} nested={row.nested} />
|
||||
{:else}
|
||||
<YearLetterStrip letters={letters} year={year.year} />
|
||||
<YearLetterStrip letters={loose} year={year.year} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user