Files
wyndham-ARR/.project-docs/50-evidence/topics/2026-07-30-daily-page-visual-polish.md
2026-07-31 15:11:42 +08:00

2.0 KiB

Daily Page Visual Polish

Metadata

  • Date: 2026-07-30
  • Status: Active
  • Scope: Desktop daily-page title hierarchy, task-log utility and XML upload composition
  • Confidence: Fact
  • Source: arr_web/static/, focused tests and live local browser verification
  • Last verified: 2026-07-30
  • Stale trigger: Masthead, daily heading, upload-panel or header-utility styling changes

User-Facing Outcome

  • ARR Report is the workspace identity and is visually larger than the daily page title at every verified width.
  • 任务日志 remains the same semantic dialog button but now has a compact outlined treatment and the same 13px label size as the adjacent database status.
  • The upload station is centered at desktop, fills the available shell at smaller widths and retains the real file-input/drop behavior.
  • Decorative 01 / UPLOAD and 本月留痕 labels were removed.
  • 开始处理 moved into a compact action footer without changing its disabled, loading or submission behavior.
  • No API, upload field, route, task-log scope or business rule changed.

Verification

  • node --check arr_web/static/app.js: passed.
  • Authenticated Web/auth/daily-visual/task-log tests: 33 passed.
  • 1440x900: workspace/daily titles compute to 24px/21px; the upload card is centered at 840px; task-log/status labels are both 13px; the compact action is 118x40.
  • 1024px: the upload card is centered at x=92 with width 840px.
  • 768px: the upload card fills the 720px shell.
  • 375x812: titles compute to 20px/18px; the upload card fills 347px; the action is 112x42.
  • All four widths have zero horizontal overflow. Browser warning/error count is zero.
  • Opening the restyled task-log button focuses the native dialog; closing it returns focus to the trigger.

Design Boundary

This is a preserve-mode operational-dashboard refinement. It keeps the existing dependency-free HTML/CSS, light neutral theme, single blue accent and rounded component language. No marketing-page imagery, glass effects, new font dependency or frontend framework was introduced.