chore(headers): standardize titles + refresh icon across tools

Cross-tool header inconsistencies cleaned up after the audit
prompted by the browse Phase 2 work:

  - landing/template.html: title was 'ZDDC Archive' (a holdover from
    when landing WAS the archive). The page is now the project
    picker — title shortened to plain 'ZDDC'. Browser tab title
    follows: 'ZDDC Archive — Projects' → 'ZDDC — Projects'. Title +
    build label wrapped in title-group div for layout consistency
    with archive/classifier/mdedit/browse.
  - form/template.html: title was bare; same title-group wrapping.
    The id='form-title' stays — its content is overwritten at
    runtime by form.js based on the form schema's name.
  - classifier/template.html: refresh button text 'Refresh' →
    '⟳' icon to match archive + browse. Same title attribute, just
    smaller visual weight.

Untouched (intentionally):
  - archive's button stays 'Add Local Directory' + addDirectoryBtn
    id — semantically different from the others (archive
    accumulates multiple directories; everyone else operates on
    one). The naming reflects that.
  - transmittal — different layout entirely (page-header with
    sender/receiver logo cells); not a candidate for app-header
    standardization.
This commit is contained in:
ZDDC 2026-05-03 20:42:49 -05:00
parent d874643af5
commit a6c3c9df5e
3 changed files with 10 additions and 6 deletions

View file

@ -30,7 +30,7 @@
<span class="build-timestamp">{{BUILD_LABEL}}</span> <span class="build-timestamp">{{BUILD_LABEL}}</span>
</div> </div>
<button id="selectDirectoryBtn" class="btn btn-primary">Select Directory</button> <button id="selectDirectoryBtn" class="btn btn-primary">Select Directory</button>
<button id="refreshBtn" class="btn btn-secondary hidden" title="Refresh and rescan directory">Refresh</button> <button id="refreshBtn" class="btn btn-secondary hidden" title="Refresh and rescan directory" aria-label="Refresh" style="font-size:1.1rem;"></button>
</div> </div>
<div class="header-right"> <div class="header-right">
<button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)"></button> <button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)"></button>

View file

@ -20,9 +20,11 @@
<rect x="14" y="43" width="36" height="7"/> <rect x="14" y="43" width="36" height="7"/>
</g> </g>
</svg> </svg>
<div class="header-title-group">
<span class="app-header__title" id="form-title">ZDDC Form</span> <span class="app-header__title" id="form-title">ZDDC Form</span>
<span class="build-timestamp">{{BUILD_LABEL}}</span> <span class="build-timestamp">{{BUILD_LABEL}}</span>
</div> </div>
</div>
<div class="header-right"> <div class="header-right">
<button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)"></button> <button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)"></button>
</div> </div>

View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDDC Archive — Projects</title> <title>ZDDC — Projects</title>
<link rel="icon" type="image/svg+xml" href="{{FAVICON}}"> <link rel="icon" type="image/svg+xml" href="{{FAVICON}}">
<style> <style>
{{CSS_PLACEHOLDER}} {{CSS_PLACEHOLDER}}
@ -20,9 +20,11 @@
<rect x="14" y="43" width="36" height="7"/> <rect x="14" y="43" width="36" height="7"/>
</g> </g>
</svg> </svg>
<span class="app-header__title">ZDDC Archive</span> <div class="header-title-group">
<span class="app-header__title">ZDDC</span>
<span class="build-timestamp">{{BUILD_LABEL}}</span> <span class="build-timestamp">{{BUILD_LABEL}}</span>
</div> </div>
</div>
<div class="header-right"> <div class="header-right">
<button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)"></button> <button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)"></button>
</div> </div>