fix(sw): widen the step header text logo to its content
- SWProcessHeader logoText: at least 58px and as wide as the text, instead of a fixed 58px place that cut longer words (home >= 106px) - Align JSDoc (SWHeader, SWViewerHeader, SWProcessHeader) and docs with the content-width logo slot: DESIGN_RULES §1 common rule and §14, COMPONENT_CATALOG, VIEWER.md, SW Header / Step Header specs - No prop or public API change
This commit is contained in:
1 parent
9a861a8d55
commit
e70082550e
9 files changed
+24
-16
No files matched your search
@@ -38,7 +38,7 @@ Strana Grid의 별 비율을 CSS flex 비율로 옮겼습니다. 숨김 단계·
|
||||
|
||||
| 영역 | Strana | 구현 |
|
||||
|---|---|---|
|
||||
| 홈 | 106 × 48, 오른쪽 17px이 파일명 위로 겹침 | **SWHeader 우선(2026-11-03):** `SWHeaderHome` 그대로 = 12 + 로고 칸(높이 17, 로고 비율 폭) + 36, 32 × 17 로고 → 80. 오른쪽 15px이 파일명과 겹친 뒤 2px 간격(SWHeader bar gap, `margin-right: -15px`). `logoText`는 18px 700, 58px 칸(→ 106) |
|
||||
| 홈 | 106 × 48, 오른쪽 17px이 파일명 위로 겹침 | **SWHeader 우선(2026-11-03):** `SWHeaderHome` 그대로 = 12 + 로고 칸(높이 17, 로고 비율 폭) + 36, 32 × 17 로고 → 80. 오른쪽 15px이 파일명과 겹친 뒤 2px 간격(SWHeader bar gap, `margin-right: -15px`). `logoText`는 18px 700·`--hm-sw-header-text-color`·SW 외곽선·한 줄(줄바꿈 없음), 최소 58px 칸 가운데(→ 홈 최소 106). 글자가 더 넓으면 칸이 글자 폭만큼 넓어지고 홈(클릭 영역)·사선 배경·파일명 시작 위치가 따라감(2026-11-05, 잘림 없음). 홈은 줄지 않으므로(`flex: 0 0 auto`) 늘어난 폭만큼 파일명(최소 100)과 가운데 영역이 flex 비율대로 줄어듦. 참고 실측(Noto Sans KR, 글꼴에 따라 다름): StrAna 59.29 → 홈 107.29, Accessway 93.72 → 홈 141.72 |
|
||||
| 파일명 | `286*`, 최소 100, 최대 286, 글자 시작 22 | 폭만 Strana: `flex: 286 1 0`, `min-width: 100px`, `max-width: 286px`. 글자는 SWHeader 그대로(x 65 시작, padding 5 / 12 → 글자 x 70, 14px 700·자간 0.84px·SW 외곽선·세로 가운데), SW 화살표 숨김 |
|
||||
| 가운데 | `1260*` | `flex: 1260 1 0` |
|
||||
| 프로세스 | `1003*` | `flex: 1003 1 0` |
|
||||
@@ -229,6 +229,7 @@ Hanmac 열이 기본값입니다. 다른 테마는 Header의 `style`(가장 바
|
||||
| 폭 측정(파일명 / 프로세스 / Layer 칸 / 창 영역) | 1920: 280.8 / 984.8 / 252.3 / 313 = Strana 별 비율 계산값. 1100: 129.1 / 416.9 / 152(최소) / 313. 1366: 178.3 / 625.4 / 160.3 / 313. 2560: 286(최대) / 1615 / 257(최대) / 313. 넘침 없음. 홈 80(SWHeader 기준, 2026-11-03) 이후 파일명 / 프로세스: 1100 133.7 / 437, 1366 182.9 / 641.4, 1920 285.4 / 1000.8, 2560 286 / 1639.7, 창 영역 312, 넘침 없음 |
|
||||
| Strana 캡처 비교(1.5배, 나란히) | Hanmac 1920 Modeling · Results, 1366, 1100 — 배치·면·발광·화살표·탭·Layer·도구·창 버튼 일치. 차이: 글자 외곽선 두께, 파일명 자간, 좁은 폭의 말줄임(§5) |
|
||||
| 동작 | 탭 클릭·Arrow·Home·End(비활성 건너뜀), 같은 탭 재클릭 시 Callback 없음, 전구·필드 분리, 최대화/복원 전환, 로고 열림 모양, 도구 눌림 모양, Hover(종료 `#E40000`, 최소화, Layer 링, 탭 글자), Focus outline |
|
||||
| 로고 폭(2026-11-05, Chromium, `multi`, 1440·1100) | 기준: 글자 잘림 0, 홈 = 12 + 로고 칸 + 36, 사선 배경 = 홈 + 12(왼쪽 −8 · 오른쪽 +4, 홈 끝을 따라감), 홈·파일명 겹침 15, Header 49, 단계 클릭·Enter 동작 유지. 참고 실측: Accessway 홈 106 → 141.72에서 가운데 영역 1440 1024.2 → 992.5(−31.7), 1100 728 → 696.89(−31.11), 파일명 151.47 → 146.78 / 107.67 → 103.06. 더 긴 글자(187.44)는 파일명이 최소 100에서 멈춤. 이미지 로고(32 × 17) Story는 `default`·`multi` 모두 홈 80 그대로. 커스텀 `logo`는 코드 경로만 확인(같은 로고 칸) |
|
||||
| 기존 `SWHeader` | 변경 전후 빌드에서 `SW/Header` Overview · Responsive More 출력 HTML 동일, `dist/styles.css`의 기존 내용 동일(새 규칙만 추가) |
|
||||
|
||||
Strana 비교 캡처는 `D:\Strana\_verification\header-rework-20261029\renders\Hanmac-{1100,1366,1920}-*.png`(최종 Commit 7173e82 · b7f412c 이전 렌더)입니다. 분할 버튼 변경(b7f412c) 이후 최신 캡처와 다른 테마(Dark · Light · HighContrast)의 화면 비교는 미확인입니다. Firefox · Safari는 확인하지 않았습니다.
|
||||
|
||||
Reference in new issue
Block a user