eomsangdonandClaude Opus 5
6080d122bb
- 4: volumeRange 기본 ±200㎥ 고정, 초과 시에만 확장 (B05·B06 공용) - 11: 진행단계 오버레이 최상단 대시보드(🏠) 버튼 — 항상 활성, B01 이동 - 6: 편집 버튼 방향색 — 올림(▲⇧) --color-danger, 내림(▼⇩) 파랑 #5b8def, hover 배경 포함 - 2: 구조물 목록 5개 높이 상한 + 내부 스크롤, 선택 항목 scrollIntoView - 5: 종단 렌더러 bottomInsetPx 옵션 신설 — B05만 X축·측점 라벨 17px 상향, ▼ 버튼과 오버랩 해소 (B06 무변화) - 1: 구조물 측점 열 기본값 미표기 — 측점 값 7행·곡선 2행 빈 셀, 선택 오버레이가 값 표시 - 8: B06 진입 stale 재계산을 측점별 순차 루프에서 일괄 프리뷰 1회로 교체 · preview API에 full_designs·rock_boundary_offsets 추가 · B05 세션 초안(readAlignmentDraft) 우선 사용해 두 화면 계획선 일치 - 7: 유토곡선을 1:1 분할에서 패널 바닥 오버레이 서브패널로 전환 · 종단도+테이블 배치 불변, 오버레이가 위를 덮음 · 높이는 공용 createPanelResizer(위 경계, 세션 보존), splitBar·MASS_SPLIT 제거 · 자체 가로 스크롤러 + 종단 스크롤러 양방향 동기화, 전용 ㎥ sticky Y축 · buildStickyYAxis 정의처를 MassHaul 모듈로 이동(Panel과 공용) typecheck·vite build·ruff 통과. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
115 lines
3.6 KiB
CSS
115 lines
3.6 KiB
CSS
/* =============================================================================
|
|
* B05_wf2_Route_UI_Style_MassHaul.css
|
|
* B05 계획 유토곡선 2차 슬라이드 패널 전용 스타일.
|
|
*
|
|
* 곡선·범례·요약 자체의 스타일은 공용(`common_util_mass_haul.css`)이 이미 정의한다.
|
|
* 여기서는 종단면 패널 안에서 그것들이 놓이는 **자리**만 잡는다.
|
|
* ========================================================================== */
|
|
|
|
/* 본문 칸을 세로로 쌓아 그래프 스크롤러 아래에 손잡이가 붙게 한다.
|
|
오버레이의 절대배치 기준이기도 하다. */
|
|
.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: 20px; /* 유토곡선 접기 손잡이(.b05-profile__masshaul-handle height) 몫 */
|
|
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). 세로는 잘라낸다. */
|
|
.b05-profile__masshaul-scroll {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-x: auto;
|
|
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차 슬라이드 손잡이 — 바깥 패널 손잡이와 같은 문법이되 본문 폭 안에 눕혀 놓는다. */
|
|
.b05-profile__masshaul-handle {
|
|
position: relative;
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-8);
|
|
height: 20px;
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-surface-raised);
|
|
}
|
|
|
|
.b05-profile__masshaul-caption {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.b05-profile__masshaul-handle.is-open .b05-profile__masshaul-caption {
|
|
color: var(--color-text-body);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 공용 손잡이 버튼은 부모 바닥 경계에 절대배치되도록 만들어졌다 — 이 줄에서는 흐름에 둔다. */
|
|
.b05-profile__masshaul-handle .ui-workflow-overlay__handle {
|
|
position: static;
|
|
transform: none;
|
|
margin: 0;
|
|
}
|