eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(☰ · 서랍): ☰ 중심 = 좌측 패널 제목 줄 중심(52) · 서랍 간격 8/12 · 줄 높이 40/44 · 글 왼쪽 16 · 로고 줄 ☰ 높이 가운데 (389-1 · 2)

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy
This commit is contained in:
eomsangdon
2026-10-17 17:20:05 +09:00
co-authored by Claude Sonnet 5.5
parent 1b327b3613
commit c53cea0a4e
3 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
A00_Common/app_shell.ts
+20 -10
View File
@@ -459,39 +459,45 @@ html:is([data-burger="on"], .is-bm-route) .app-burger { display: inline-flex; }
.app-header.is-drawer-open .app-drawer {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
gap: var(--spacing-12);
position: fixed;
top: var(--app-header-h);
right: 0;
bottom: 0;
width: min(240px, 100vw);
padding: var(--spacing-16);
padding: var(--spacing-16) 0;
overflow-y: auto;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
}
/* 서랍 간격 8/12 — 묶음 안 8 · 묶음 사이 12 + 선 + 12 · 줄 높이 마우스 40 · 손가락 44 · 글 왼쪽 16(389-2) */
.app-drawer__nav {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
gap: var(--spacing-8);
}
.app-drawer__nav > * { justify-content: flex-start; min-height: 44px; }
.app-drawer__nav > * { justify-content: flex-start; margin-inline: 8px; padding-left: 7px; min-height: var(--spacing-40); }
.app-drawer__site { display: block; }
.app-drawer__site > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.app-drawer__site > nav { margin-top: var(--spacing-4); }
.app-drawer__site > summary { min-height: var(--spacing-40); display: flex; align-items: center; padding-left: 16px; cursor: pointer; font-weight: 600; }
.app-drawer__site > nav { margin-top: var(--spacing-8); }
.app-drawer__steps .ui-workflow-layout__step { min-height: var(--spacing-40); margin-inline: 8px; width: auto; padding-left: 7px; }
.app-drawer__steps .ui-workflow-layout__step--home { margin-bottom: 0; }
html[data-touch="on"] :is(.app-drawer__nav > *, .app-drawer__site > summary, .app-drawer__steps .ui-workflow-layout__step, .app-drawer__row > *) { min-height: 44px; }
.app-drawer__row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
padding-inline: 16px;
}
.app-drawer__row > * { min-height: var(--spacing-40); }
.app-drawer__group {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.app-drawer__group + .app-drawer__group {
padding-top: var(--spacing-16);
padding-top: var(--spacing-12);
border-top: 1px solid var(--color-border);
}
.app-drawer__steps:empty { display: none; }
@@ -499,9 +505,11 @@ html:is([data-burger="on"], .is-bm-route) .app-burger { display: inline-flex; }
display: flex;
flex-direction: column;
gap: var(--spacing-8);
padding-left: 16px;
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
.app-drawer__touch .app-drawer__row { padding-inline: 0; }
.app-drawer__touch [aria-checked="true"] {
background: var(--color-mist-violet);
color: var(--color-accent);
@@ -550,11 +558,13 @@ html.is-bm-route .app-header.is-drawer-open .app-drawer {
border-left: 0;
border-right: 2px solid var(--color-accent);
}
.app-drawer__brand { flex-direction: row; align-items: center; min-height: 44px; padding-left: 16px; }
html.is-bm-route .app-header.is-drawer-open .app-drawer { padding-top: var(--spacing-8); }
html.is-bm-route .app-drawer__brand {
min-height: 44px;
padding-left: calc(var(--app-burger-inset) - var(--spacing-16));
min-height: var(--app-burger-w);
padding-left: var(--app-burger-inset);
}
html.is-bm-route .app-drawer__brand .app-brand { align-self: flex-end; }
html.is-bm-route[data-touch="on"] .app-drawer__brand { min-height: 44px; }
`;
export function injectShellStyles(): void {
resources/tester/test_device_drawer.py
+23 -1
View File
@@ -26,6 +26,11 @@ BURGER = (
" return [Math.round(r.left), Math.round(r.top), Math.round(r.width), Math.round(r.height),"
" Math.round(r.right)]; })()"
)
TITLE_ROW_CY = (
"(() => { const r = document.querySelector("
"'.ui-workflow-overlay__panel--title > .ui-workflow-overlay__header').getBoundingClientRect();"
" return Math.round(r.top + r.height / 2); })()"
)
PROGRESS_HIDDEN = (
"!document.querySelector('.ui-workflow-overlay__panel--progress').getClientRects().length"
)
@@ -135,6 +140,8 @@ def test_drawer_holds_steps_and_header_folds():
assert desk.evaluate(OUTLET_TOP) == 0
assert desk.evaluate(BURGER)[:4] == [8, 8, 36, 36]
assert desk.evaluate(PROGRESS_HIDDEN)
# 389-1: ☰ 중심 = 좌측 패널 제목 줄 중심
assert desk.evaluate(TITLE_ROW_CY) == 26
head_nav = desk.evaluate(LABELS, ".app-nav button")
head_actions = desk.evaluate(LABELS, ".app-actions button")
assert head_nav and head_actions
@@ -170,7 +177,22 @@ def test_352_4_burger_in_panel_title_row_text():
# 자리(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
# 389-1: 마우스 제목 줄 높이 = 8×2 + ☰ 높이(36) = 52 → 중심 26 = ☰ 중심
overlay_css = (root / "ui_template/ui_template_overlay.css").read_text(encoding="utf-8")
title_row = overlay_css.split(
"html.is-bm-route .ui-workflow-overlay__panel--title > .ui-workflow-overlay__header {", 1
)[1].split("}", 1)[0]
assert "min-height: calc(var(--spacing-8) * 2 + var(--app-burger-w));" in title_row
# 389-2: 서랍 8/12 체계 — 묶음 사이 12 + 선 + 12 · 로고 줄 = ☰ 높이 가운데
assert (
"gap: var(--spacing-12);" in shell.split(".app-header.is-drawer-open .app-drawer {", 1)[1]
)
assert "padding-top: var(--spacing-12);" in shell.split(".app-drawer__group + ", 1)[1]
assert (
"min-height: var(--app-burger-w);"
in shell.split("html.is-bm-route .app-drawer__brand {", 1)[1]
)
assert "align-self: flex-end" not in shell
# 378-1: 프로젝트 화면 서랍 오른쪽 가장자리 = 강조색 2 px
assert "border-right: 2px solid var(--color-accent);" in shell
overlay = (root / "ui_template/ui_template_overlay.css").read_text(encoding="utf-8")
ui_template/ui_template_overlay.css
+1
View File
@@ -557,6 +557,7 @@ html:is([data-size="compact"], [data-size="medium"])
/* ☰ 들여쓰기(7-2) — 왼쪽 위에 뜬 ☰ 자리만큼 좌측 패널 제목 줄을 비킴 · 손가락 ☰(높이 44)는 제목 줄도 그만큼 높임 */
html.is-bm-route .ui-workflow-overlay__panel--title > .ui-workflow-overlay__header {
padding-left: max(var(--spacing-16), var(--app-burger-inset));
min-height: calc(var(--spacing-8) * 2 + var(--app-burger-w));
}
html.is-bm-route[data-touch="on"]