eomsangdonandClaude Opus 5
6bcd6d1209
- 27: 종단 X라벨↔버튼 간격 70%로(bottomInset 19→15) - 28: 사이드 패널 접힘 시 본문 24px 거터 — 손잡이가 Y축 라벨을 덮지 않음(B04~B07 공용) - 29: B06 종단·유토곡선 가로 스크롤 고정 Y축 — buildStickyYAxis 재사용, yaxis CSS 정의처를 MassHaul css로 이동(B05·B06 공용). 앵커를 첫 자식으로 넣고 유토축 inner를 종단 높이만큼 내려 자기 구간만 덮음. 스크롤 600px 블리드 테스트 통과 - 30: 배관 측점 곡선 L·R 항상 표기(R 필수), 이웃 곡선 셀 근접 시 배관 셀만 우측 비킴, 선택 오버레이는 한 열 원위치 유지 Playwright: sticky 앵커 2개(x 고정), 거터 24px, gap 7px, 곡선 셀 8, 오류 0. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
135 lines
4.5 KiB
CSS
135 lines
4.5 KiB
CSS
/* =============================================================================
|
|
* B05_wf2_Route_UI_Style_MassHaul.css
|
|
* B05 계획 유토곡선 2차 슬라이드 패널 전용 스타일.
|
|
*
|
|
* 곡선·범례·요약 자체의 스타일은 공용(`common_util_mass_haul.css`)이 이미 정의한다.
|
|
* 여기서는 종단면 패널 안에서 그것들이 놓이는 **자리**만 잡는다.
|
|
* ========================================================================== */
|
|
|
|
/* 가로 스크롤에도 고정되는 Y축(눈금 오버레이) — buildStickyYAxis(이 파일을 import하는
|
|
_UI_Profile_MassHaul.ts)가 만든다. B05 종단·유토곡선과 B06 종단·유토곡선이 함께 쓰므로
|
|
여기가 정의처다. 0크기 sticky 앵커에 축을 절대배치해 레이아웃 불변. */
|
|
.b05-profile__yaxis {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 3;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.b05-profile__yaxis-inner {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
box-sizing: border-box;
|
|
/* 자기 그래프 영역 밖으로 눈금이 새면 아래 그래프의 축처럼 읽힌다. */
|
|
overflow: hidden;
|
|
/* SVG 배경(b06-chart__bg)과 같은 색으로 스크롤되는 그래프를 가려 값 누출을 막는다. */
|
|
background: var(--color-surface-raised);
|
|
border-right: 1px solid var(--color-text-secondary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b05-profile__yaxis-tick {
|
|
position: absolute;
|
|
right: 6px;
|
|
color: var(--color-text-secondary);
|
|
font-size: 10px;
|
|
white-space: nowrap;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* 본문 칸을 세로로 쌓아 그래프 스크롤러 아래에 손잡이가 붙게 한다.
|
|
오버레이의 절대배치 기준이기도 하다. */
|
|
.b05-route-profile__body-wrap {
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 오버레이 서브패널 — 패널 바닥(접기 손잡이 위)에 붙어 종단도·테이블 위를 덮는다
|
|
(2026-08-04 사용자 확정). 높이는 위 경계 리사이저가 --b05-masshaul-height로 조절한다. */
|
|
.b05-profile__masshaul-overlay {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0; /* 손잡이는 표준 삼각형(중앙, z-index 6)이라 자리를 차지하지 않는다 */
|
|
left: 0;
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: var(--b05-masshaul-height, 280px);
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: 0 -4px 12px rgb(0 0 0 / 18%);
|
|
}
|
|
|
|
/* 공용 리사이저는 절대배치라 오버레이 위 경계에 그대로 앉는다. */
|
|
.b05-profile__masshaul-overlay > .ui-resizer--vertical {
|
|
top: -3px;
|
|
}
|
|
|
|
.b05-profile__masshaul-bar {
|
|
display: flex;
|
|
flex: none;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8) var(--spacing-16);
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
/* 곡선 가로 스크롤러 — 종단 스크롤러와 scrollLeft를 동기화한다(JS). 세로는 잘라낸다.
|
|
스크롤바는 항상 표시(scroll) — auto면 생겼다 없어질 때 곡선 높이가 널뛰고,
|
|
clientHeight 기반 높이 계산도 함께 흔들린다. */
|
|
.b05-profile__masshaul-scroll {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* 범례 오버레이 — 유토곡선 우상단에 절대배치(B06과 같은 문법). 요약 막대 아래에 앉힌다.
|
|
공용 범례(.b06-masshaul__legend)가 이미 absolute + right 배치라 top만 이 래퍼가 정한다. */
|
|
.b05-profile__masshaul-legend {
|
|
position: absolute;
|
|
top: 34px;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b05-profile__masshaul-legend .b06-masshaul__legend {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.b05-profile__masshaul-bar .b06-masshaul__summary {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.b05-profile__masshaul-empty {
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
/* 2차 슬라이드 손잡이 — 다른 패널들과 **같은 표준 삼각형 손잡이**를 그대로 쓴다
|
|
(2026-08-04 사용자 지시). 패널 본문 바닥 중앙에 붙고, 오버레이(z-index 5) 위에 뜬다. */
|
|
.b05-profile__masshaul-handle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
z-index: 6;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* 공용 손잡이는 부모 경계 밖(top: -24px) 절대배치로 만들어졌다 — 여기서는 래퍼가
|
|
자리를 잡으므로 흐름에 되돌린다. 크기·모양(64×24 삼각형)은 공용 규칙 그대로다. */
|
|
.b05-profile__masshaul-handle .ui-workflow-overlay__handle {
|
|
position: static;
|
|
transform: none;
|
|
margin: 0;
|
|
}
|