fix(site): 모바일 헤더 재설계 — 크럼이 아니라 브랜드+액션 한 줄(v24)
v23 은 구조(단일 sticky 바)만 맞고 시각적 무게가 틀렸다 — 작은 회색 크럼 텍스트가 52px 바에 혼자 떠 있는 빈약한 헤더였다. 계측이 전부 통과해도 보기에 빈약하면 실패다. - 탑바에 브랜드(가 모노그램 타일+이름)를 이어받게 하고 크럼은 모바일에서 숨김 — 두레 앱바와 같은 문법(브랜드+액션). 화면 이름은 각 뷰 헤드와 활성 탭이 말한다 - 검증: 360/390/412px 오버플로 0·브랜드 노출, 스크롤 800에서 top=0, 탭 전환 scrollY=0, 비전 검수 통과, 시각 기준 갱신 후 verify L0~L6 전 통과 - 스킬 mobile-app-ux.md 규칙 갱신: 크럼 내보내기 금지 + 계측 통과에도 눈으로 봐야 한다
This commit is contained in:
parent
d637dd5e24
commit
8547bb11a6
30 changed files with 34 additions and 22 deletions
|
|
@ -146,6 +146,7 @@ h3 { font-size: var(--step-0); font-weight: 500; }
|
|||
background: var(--background);
|
||||
flex: none;
|
||||
}
|
||||
.topbar .brand { display: none; } /* 브랜드는 사이드바에 있다 — 모바일에서만 탑바가 이어받는다 */
|
||||
.crumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-0); color: var(--muted-foreground); }
|
||||
.crumb strong { color: var(--foreground); font-weight: 600; }
|
||||
.topbar-right { display: flex; align-items: center; gap: var(--space-3); }
|
||||
|
|
@ -600,16 +601,18 @@ tbody tr:hover { background: var(--muted); }
|
|||
/* ── 반응형 ── */
|
||||
@media (max-width: 900px) {
|
||||
.app { grid-template-columns: minmax(0, 1fr); }
|
||||
/* 모바일 앱 헤더 — 내비는 바텀 탭으로(HIG·M3). 헤더는 크럼 탑바 하나다:
|
||||
브랜드 줄(사이드)과 크럼이 서로 중복하는 데다 95px 크롬을 쌓아 옥에 끼는 느낌을 냈다.
|
||||
/* 모바일 앱 헤더 — 내비는 바텀 탭으로(HIG·M3). 헤더는 브랜드+액션 한 줄(두레 앱바 문법):
|
||||
화면 이름은 각 뷰 헤드와 활성 탭이 말하므로 크럼은 데스크톱 문법이다.
|
||||
탑바가 sticky 로 상단에 남고, safe-top 으로 노치/상태바를 피한다 */
|
||||
.side { display: none; }
|
||||
.topbar {
|
||||
position: sticky; top: 0; z-index: 40;
|
||||
height: auto; min-height: 52px; min-width: 0;
|
||||
height: auto; min-height: 56px; min-width: 0;
|
||||
padding: 0 max(var(--space-4), var(--safe-right)) 0 max(var(--space-4), var(--safe-left));
|
||||
padding-top: max(0px, var(--safe-top));
|
||||
}
|
||||
.topbar .brand { display: flex; flex: none; padding: 0; }
|
||||
.crumb { display: none; }
|
||||
.main { padding-bottom: calc(72px + var(--safe-bottom)); } /* 바텀 내비 + 홈 인디케이터 확보 */
|
||||
.dash-grid, .cal-layout, .counsel-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.week-panel { grid-row: auto; }
|
||||
|
|
@ -618,7 +621,6 @@ tbody tr:hover { background: var(--muted); }
|
|||
.view > *:not(.view-head) { margin-inline: var(--space-4); }
|
||||
.headline { gap: var(--space-2); }
|
||||
.term-badge { display: none; }
|
||||
.crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.cal-day { height: 56px; }
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue