diff --git a/M02_MasterTemplete/M02_MasterTemplete_Structure.css b/M02_MasterTemplete/M02_MasterTemplete_Structure.css index 674d1bd2d..2284bcbfe 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Structure.css +++ b/M02_MasterTemplete/M02_MasterTemplete_Structure.css @@ -18,9 +18,7 @@ flex: none; grid-auto-rows: var(--m02-struct-card-h); grid-template-columns: repeat(3, minmax(0, 1fr)); /* 도면 · 일위대가 · 면적산출(40-2) */ - padding-top: var(--spacing-12); - border-top: 1px solid var(--color-border); - min-width: 0; + min-width: 0; /* 표와 사이 = 메인 칸 간격 하나 · 구분선 없음(45-5) */ } /* 상세 칸이 좁으면(카드 하나 300px 아래) 1열 — 좌측 패널을 접어도 맞게 상세 칸 폭으로 잼 @@ -46,9 +44,18 @@ overflow-y: auto; } -/* 표는 줄어들지 않음(줄면 표가 카드 위로 넘침) */ +/* 표는 줄어들지 않음(줄면 표가 카드 위로 넘침) · 표 높이만큼만(빈 칸 최소 높이 없음 · 45-5) */ .m02-main:has(> .m02-main__extra > .m02-struct:not([hidden])) > .m02-main__host { flex-shrink: 0; + min-height: 0; +} + +/* 분류 표 틀 아래 줄 없음 — 마지막 줄 칸 선이 표를 닫음(45-5) */ +.m02-main:has(> .m02-main__extra > .m02-struct:not([hidden])) + > .m02-main__host + > .ui-sheet--combo + > .ui-sheet__scroll { + border-bottom: 0; } /* 카드 = 제목 + 머리 + 본문 — 본문이 남는 높이를 채움 · 넘치면 카드 안 스크롤 */ diff --git a/resources/tester/ui_checks/45-5_분류표_카드_간격.js b/resources/tester/ui_checks/45-5_분류표_카드_간격.js new file mode 100644 index 000000000..1cf8bcf97 --- /dev/null +++ b/resources/tester/ui_checks/45-5_분류표_카드_간격.js @@ -0,0 +1,32 @@ +/* 45-5 — M02 구조물 조합 상세(항목 고른 화면) · 분류 표와 카드 셋(도면 정보 · 일위대가 · 면적산출) 사이 간격 · 구분선 + * 시작 화면: M02 마스터 템플릿 · 마스터 층(#/m02-master-template?open=구조물조합&root=master) · 나무에 item1 이 있음 + * 부르는 법: orca eval --expression "$(cat 이 파일)" (async 식 · JSON 글을 돌려줌) + * 기대 수치: + * - gap = 표 틀 아래 끝 ~ 첫 카드 위 끝 = 메인 칸 간격(12px 안팎 · 옛 107px) + * - tableLine = 0(표 틀 아래 줄 없음) · lastRow > 0(마지막 줄 칸 선이 표를 닫음) + * - cardsLine = 0 · cardsPad = 0(카드 칸 위 줄 · 안쪽 여백 없음) · hr = 0 + */ +(async () => { + const w = (ms) => new Promise((r) => setTimeout(r, ms)); + document.querySelector('[data-node="i|item1"]').click(); + for ( + let t = 0; + t < 5000 && !document.querySelector(".m02-struct:not([hidden]) .m02-struct__card"); + t += 100 + ) + await w(100); + await w(300); + const scroll = document.querySelector(".m02-main__host .ui-sheet__scroll"); + const struct = document.querySelector(".m02-struct"); + const card = struct.querySelector(".m02-struct__card"); + const cells = scroll.querySelectorAll("th, td"); + const cs = (e) => getComputedStyle(e); + return JSON.stringify({ + gap: Math.round(card.getBoundingClientRect().top - scroll.getBoundingClientRect().bottom), + tableLine: parseFloat(cs(scroll).borderBottomWidth), + lastRow: parseFloat(cs(cells[cells.length - 1]).borderBottomWidth), + cardsLine: parseFloat(cs(struct).borderTopWidth), + cardsPad: parseFloat(cs(struct).paddingTop), + hr: document.querySelectorAll(".m02-main hr").length, + }); +})();