ypshim/Pier_v1
1
0 Fork 0
generated from disong/ITAM-test
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(view): fixed frame with its own scroll for the side panels, the table and the model

Browse Source 
On wide screens the page is one fixed-height frame: the left list, the centre (model band on top, table below) and the
right results each scroll on their own. The model band is 280–560 px (48vh) and the 3D view follows its container
through a ResizeObserver. The table header stays on top. Below 1100 px the panels stack with a 60vh height limit.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
This commit is contained in:
ypshimandClaude Haiku 5.5 committed 2026-10-23 11:08:20 +09:00
1 parent 61260413c6
commit 65e751e4bb
2 files changed
+28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/style.css
+26
View File
@@ -734,3 +734,29 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
.toast { display: flex; align-items: center; gap: 10px; background: #1b2733; color: #ffffff; padding: 10px 14px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.toast.error { background: #8a1c1c; }
.toast .btn { min-height: 44px; }
/* --- 고정 프레임 (승인 2026-10-23): 좌측 창 · 중앙 상단(모델) · 중앙 하단 · 우측 창, 각각 독립 스크롤 --- */
@media (min-width: 1101px) {
.app { height: 100vh; overflow: hidden; }
.top, .status-row { flex: none; }
.grid { flex: 1 1 auto; min-height: 0; height: auto; grid-template-rows: minmax(0, 1fr); padding-bottom: 12px; }
.grid > .panel, .grid > .center-col { min-height: 0; overflow: auto; }
.grid > #viewer-block { display: flex; flex-direction: column; }
.grid > #viewer-block .canvas { flex: 1 1 auto; height: auto; min-height: 240px; }
/* ②–④: the model keeps a fixed band at the top; the table scrolls below it. */
.center-col { display: grid; grid-template-rows: clamp(280px, 48vh, 560px) minmax(0, 1fr); gap: 12px; }
.viewer-slot { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.viewer-slot > .viewer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.viewer-slot .canvas { flex: 1 1 auto; height: auto; min-height: 180px; }
.center-col > .viewer { min-height: 0; overflow: auto; }
.rebar-table thead th, .quantity .rebar-table thead th { position: sticky; top: 0; background: #ffffff; z-index: 1; }
}
@media (max-width: 1100px) {
.app { min-height: 100vh; }
.grid { height: auto; }
.grid > .panel, .grid > .center-col { max-height: 60vh; overflow: auto; }
.center-col { display: flex; flex-direction: column; gap: 16px; }
.viewer-slot .canvas { height: 60vh; min-height: 420px; flex: none; }
.rebar-table thead th { position: sticky; top: 0; background: #ffffff; z-index: 1; }
}