feat(ui): readable order card — status as background tint, corner ✕ #58

2026-05-26T05:24:24Z

developer commented

2026-05-26 05:24:24 +00:00

Closes #46

F8-03 — повышаем читаемость карточки приказа в order-tab:

длинные подписи теперь переносятся (overflow-wrap: anywhere) вместо обрезки многоточием;
статус кодируется фоном карточки через токены --color-{success,danger,warning}-subtle (applied → зелёный; invalid/rejected/conflict → красный; draft/valid/submitting → жёлтый — «ещё не подтверждено сервером», в том числе оффлайн);
старая текстовая «плашка» статуса убрана из визуала, но остаётся в DOM как .sr-only — это сохраняет совместимость со скринридерами и существующими order-command-status-N testids;
кнопка удаления — маленький ✕ в рамке в правом верхнем углу карточки, абсолютно спозиционирован, виден всегда (не только при ховере), снабжён aria-label/title через ключ game.sidebar.order.command_delete.

Ни токены палитры, ни i18n-ключи не менялись, поведение store/синхронизации не затрагивается.

Files:

ui/frontend/src/lib/sidebar/order-tab.svelte — шаблон + scoped CSS;
ui/frontend/tests/order-tab.test.ts — два регрессионных ассерта (класс status-invalid на карточке + aria-label на кнопке);
ui/docs/order-composer.md — параграф «Visual encoding on the order tab».

Local checks:

npx vitest run tests/order-tab.test.ts — 8/8 pass;
npm run check (svelte-kit sync && svelte-check) — 0 errors, 0 warnings.

(Три wasm-теста локально падают из-за отсутствия static/wasm_exec.js, который собирается шагом Build core.wasm в ui-test.yaml — это ожидаемо в CI.)

Closes #46 F8-03 — повышаем читаемость карточки приказа в `order-tab`: - длинные подписи теперь переносятся (`overflow-wrap: anywhere`) вместо обрезки многоточием; - статус кодируется фоном карточки через токены `--color-{success,danger,warning}-subtle` (applied → зелёный; invalid/rejected/conflict → красный; draft/valid/submitting → жёлтый — «ещё не подтверждено сервером», в том числе оффлайн); - старая текстовая «плашка» статуса убрана из визуала, но остаётся в DOM как `.sr-only` — это сохраняет совместимость со скринридерами и существующими `order-command-status-N` testids; - кнопка удаления — маленький `✕` в рамке в правом верхнем углу карточки, абсолютно спозиционирован, виден всегда (не только при ховере), снабжён `aria-label`/`title` через ключ `game.sidebar.order.command_delete`. Ни токены палитры, ни i18n-ключи не менялись, поведение store/синхронизации не затрагивается. Files: - `ui/frontend/src/lib/sidebar/order-tab.svelte` — шаблон + scoped CSS; - `ui/frontend/tests/order-tab.test.ts` — два регрессионных ассерта (класс `status-invalid` на карточке + `aria-label` на кнопке); - `ui/docs/order-composer.md` — параграф «Visual encoding on the order tab». Local checks: - `npx vitest run tests/order-tab.test.ts` — 8/8 pass; - `npm run check` (`svelte-kit sync && svelte-check`) — 0 errors, 0 warnings. (Три wasm-теста локально падают из-за отсутствия `static/wasm_exec.js`, который собирается шагом `Build core.wasm` в `ui-test.yaml` — это ожидаемо в CI.)

developer added 1 commit 2026-05-26 05:24:24 +00:00

feat(ui): readable order card — status as background tint, corner ✕

Tests · UI / test (push) Waiting to run

Details

Tests · UI / test (pull_request) Successful in 2m48s

Details

5ca30df334

The order-tab row now wraps long labels (`overflow-wrap: anywhere`),
encodes status into the card background via the design-token subtle
palette (applied → success-subtle, invalid/rejected/conflict →
danger-subtle, draft/valid/submitting → warning-subtle), and exposes
a small framed `✕` delete button absolutely positioned in the
card's top-right corner — always visible, labelled by
`game.sidebar.order.command_delete` for assistive tech. The textual
status name remains in the DOM as an `.sr-only` node so screen
readers and the existing testids still observe it.

Refs #46

developer requested review from owner 2026-05-26 05:24:38 +00:00

developer referenced this pull request

2026-05-26 05:25:08 +00:00

[F8-03] Карточка приказа: читаемость #46

developer referenced this pull request

2026-05-26 05:30:53 +00:00

[F8-03] Карточка приказа: читаемость #46

owner requested changes 2026-05-26 05:46:24 +00:00

Dismissed

owner left a comment

Давай размер шрифта в карточке сделаем поменьше, как текст в calculator - думаю, будет идеально. А крестик удаления команды сделаем совсем маленьким, так, чтобы он помещался в правый верхний угол без отступа, т.е. был прилипшим к границе карточки, а размер крестика вмещался в padding-space между границей карточки и её текстом. Надеюсь, так получится?

developer referenced this issue from a commit

2026-05-26 06:29:03 +00:00

fix(ui): tighter order card — calculator-scale font, corner-flush ✕;

developer added 1 commit 2026-05-26 06:29:03 +00:00

fix(ui): tighter order card — calculator-scale font, corner-flush ✕;

Tests · UI / test (push) Has been cancelled

Details

Tests · UI / test (pull_request) Successful in 2m47s

Details

2294d8b3d9

stabilise report-sections e2e

Owner review on PR #58:

- shrink the order-card body to 0.8rem (matching the calculator's body
  text scale) so the order list reads as part of the sidebar's
  density, not its own larger surface;
- shrink the delete ✕ to 0.95rem and glue it flush to the card's
  top-right corner (no offset, sized to fit the corner padding-space);
- tighten the card padding to match the smaller text.

Independently — the same review asked to fix `report-sections › every
TOC anchor lands its section in view`, which had been a long-standing
e2e flake (run #366 on `development` already failed it twice before
passing on retry; my PR's run #367 simply exhausted all five retries).
The root cause is the smooth `scrollIntoView` settling slower than
Playwright's 5 s viewport wait under heavy CI load. The production
TOC already honours `prefers-reduced-motion: reduce` and swaps to an
instant scroll there; switching the Playwright config to that media
mode makes every spec deterministic without touching production code.

developer referenced this pull request

2026-05-26 06:33:12 +00:00

[F8-03] Карточка приказа: читаемость #46

developer requested review from owner 2026-05-26 06:33:18 +00:00

owner approved these changes 2026-05-26 06:36:15 +00:00

developer merged commit 793b709d8f into development

2026-05-26 06:39:09 +00:00

developer deleted branch feature/issue-46-order-card-readability

2026-05-26 06:39:10 +00:00

Sign in to join this conversation.