diff --git a/A00_Common/app_shell.ts b/A00_Common/app_shell.ts index 0d95b131d..5ca816bc8 100644 --- a/A00_Common/app_shell.ts +++ b/A00_Common/app_shell.ts @@ -525,6 +525,16 @@ html.is-bm-route .app-burger { box-shadow: var(--shadow-lg); } html.is-bm-route[data-touch="on"] .app-burger { min-height: 44px; } +/* 좌측 패널이 펼쳐진 동안 ☰ 는 패널 제목 줄 앞 칸에 든 모양(테두리 · 바탕 · 그림자 없음 · 자리 그대로) — + 패널을 접으면 떠 있는 단추(위 규칙)로 돌아감(352-4) */ +html.is-bm-route:has(.ui-workflow-overlay__panel--title:not(.is-collapsed)) .app-burger { + border-color: transparent; + background: transparent; + box-shadow: none; +} +html.is-bm-route:has(.ui-workflow-overlay__panel--title:not(.is-collapsed)) .app-burger:hover { + background: color-mix(in srgb, var(--color-text) 10%, transparent); +} html.is-bm-route .app-header.is-drawer-open .app-drawer { left: 0; right: auto; @@ -535,7 +545,7 @@ html.is-bm-route .app-drawer__brand { min-height: 44px; padding-left: calc(var(--app-burger-inset) - var(--spacing-16)); } -html.is-bm-route .app-drawer__brand .app-brand { align-self: flex-start; } +html.is-bm-route .app-drawer__brand .app-brand { align-self: flex-end; } `; export function injectShellStyles(): void { diff --git a/resources/tester/test_device_drawer.py b/resources/tester/test_device_drawer.py index e7f454e3a..c791d30d0 100644 --- a/resources/tester/test_device_drawer.py +++ b/resources/tester/test_device_drawer.py @@ -6,6 +6,8 @@ ③ 휴대폰 · 공개 쪽(A01) = 위 줄 그대로(본문 위 끝 64) · ☰ 는 위 줄 오른쪽 ④ 데스크탑(1440 · 마우스) · 로그인 뒤 B 쪽 = 위 줄 걷힘 · ☰ 왼쪽 위 36×36 · 진행 판 없음 · 위 줄 항목이 모두 서랍에 · Esc 로 닫힘 ⑤ 데스크탑 · 공개 쪽(A01) = 위 줄 그대로 · ☰ 없음 +⑥ (352-4) 좌측 패널이 펼쳐진 동안 ☰ 는 제목 줄 앞 칸에 든 모양(테두리 · 바탕 · 그림자 없음 · 자리 8,8 그대로) + · 접으면 떠 있는 단추 · 서랍 첫 줄 로고 우측 · 프로젝트 이름 우측 끝 — 글로 봄(서버 없이) """ import json @@ -131,3 +133,22 @@ def test_drawer_holds_steps_and_header_folds(): assert desk.evaluate(OUTLET_TOP) == 64 assert not desk.evaluate("document.querySelector('.app-burger').getClientRects().length") browser.close() + + +def test_352_4_burger_in_panel_title_row_text(): + root = Path(__file__).resolve().parents[2] + shell = (root / "A00_Common/app_shell.ts").read_text(encoding="utf-8") + open_panel = ( + "html.is-bm-route:has(.ui-workflow-overlay__panel--title:not(.is-collapsed)) .app-burger {" + ) + assert open_panel in shell # 패널 펼침 = 제목 줄에 든 모양 + body = shell.split(open_panel, 1)[1].split("}", 1)[0] + for line in ("border-color: transparent;", "background: transparent;", "box-shadow: none;"): + assert line in body + # 자리(8,8 · 36)는 그대로 — 접으면 아래 기본 규칙(떠 있는 단추)으로 돌아감 + base = shell.split("html.is-bm-route .app-burger {", 1)[1].split("}", 1)[0] + assert "position: fixed;" in base and "left: var(--spacing-8);" in base + assert "html.is-bm-route .app-drawer__brand .app-brand { align-self: flex-end; }" in shell + overlay = (root / "ui_template/ui_template_overlay.css").read_text(encoding="utf-8") + project = overlay.split(".ui-workflow-overlay__project {", 1)[1].split("}", 1)[0] + assert "margin-left: auto;" in project diff --git a/ui_template/ui_template_overlay.css b/ui_template/ui_template_overlay.css index 7565877b4..2d672e9bb 100644 --- a/ui_template/ui_template_overlay.css +++ b/ui_template/ui_template_overlay.css @@ -131,6 +131,7 @@ .ui-workflow-overlay__project { flex: 0 1 auto; + margin-left: auto; max-width: 60%; min-width: 0; overflow: hidden;