eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity
Files
9b6547a4186ae1c403bc51b41d4ea8f2e451de5c
Aislo/B04_wf1_Surface/B04_wf1_Surface_UI_Style.css
T
eomsangdonandClaude Opus 5 9b6547a418 feat(B04/B05/공통): 7단계 명칭 통일, B05 패널 드래그 리사이즈, B04 계획선 레이어, 2D 지도 좌드래그 팬 제거 
- 진행단계 오버레이 버튼과 B그룹 페이지 제목을 파일입력/전처리/종단설계/횡단설계/
  상세설계/수량산출/설계도서로 통일(ko/en). i18n 키는 유지하고 값만 교체.
  B05 페이지 제목의 하드코딩 문구를 locale 참조로 교체.
- ui_template_resizer 공통 스플리터 신설. B05 하단 종단 패널은 위쪽 경계를 끌어
  높이 조절(늘어난 만큼 그래프만 신축, 도면 테이블 높이는 고정), 안쪽 우측
  배수유역 패널은 왼쪽 경계를 끌어 폭 조절(상한 = 하단 패널 폭의 70%).
  크기는 sessionStorage에만 저장하고 CSS 변수로 적용해 접기 규칙과 충돌하지 않게 함.
- B04 2D 지도에 계획선 레이어 추가. 계획노선 좌표를 주는
  GET /api/projects/{id}/planned-route 신설(B03 업로드 CSV → 사업지 좌표계 m).
  선 색·굵기는 MapRender에 상수로 두고 B05 배수유역도와 공유.
- B04 지도 오버레이 재배치: 객체 표시 라벨은 우측 최하단, 배수유역 정보는 좌측 최상단.
- B04 지도·B05 배수유역도에서 좌버튼 드래그 팬 제거(가운데 버튼 전용).
  유역선 핸들·배관 마커 편집은 좌버튼 그대로 유지, 팬 중에만 grabbing 커서.
- B05 배수유역도에 위성사진 표시 토글 추가(등고선 앞, 기본 on).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-01 14:05:58 +09:00

678 lines
15 KiB
CSS
Raw Blame History

/* =============================================================================
* B04_wf1_Surface_UI_Style.css
* 1차 워크플로우(지표면 모델 분석) 페이지 전용 스타일.
*
* 원칙(frontend.md §1): 하드코딩 색상 금지. theme.css 변수(var(--...))만 참조.
* 공통 컴포넌트(ui-wf, ui-btn 등) 스타일은 ui_template_elements.ts가 주입하므로
* 여기서는 B04 고유 레이아웃(폼 그룹/모델 카드)만 정의한다.
* ========================================================================== */
/* --- 좌측 입력 폼 --- */
.b04-surface__form {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
padding: var(--spacing-16);
}
.b04-surface__group {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
margin: 0;
padding: var(--spacing-16);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background-color: var(--color-surface-raised);
}
.b04-surface__group-legend {
padding: 0 var(--spacing-8);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.b04-surface__check {
display: flex;
align-items: center;
gap: var(--spacing-8);
font-size: var(--text-body-sm);
color: var(--color-text-body);
cursor: pointer;
}
.b04-surface__check input {
accent-color: var(--color-primary);
}
.b04-surface__panel-title {
font-size: var(--text-body-sm);
color: var(--color-text);
}
.b04-surface__select {
width: 100%;
min-height: 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-inputs);
background: var(--color-canvas);
color: var(--color-text-body);
padding: var(--spacing-8);
}
.b04-surface__input-info,
.b04-surface__model-meta,
.b04-surface__stats {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.b04-surface__line {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-16);
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
.b04-surface__line strong {
color: var(--color-text-body);
text-align: right;
word-break: break-word;
}
/* --- 우측 결과 영역 --- */
.b04-surface__workspace {
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
min-height: calc(100vh - var(--spacing-64));
}
.b04-surface__workspace > .b04-surface__status {
justify-content: flex-end;
padding: var(--spacing-12) var(--spacing-24);
border-bottom: 1px solid var(--color-border);
}
.b04-surface__viewers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-16);
width: 100%;
padding: var(--spacing-16) var(--spacing-24);
box-sizing: border-box;
}
.b04-surface__viewers > * {
min-width: 0;
}
.b04-surface__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-16) var(--spacing-24);
border-bottom: 1px solid var(--color-border);
}
.b04-surface__topbar h3,
.b04-surface__section h3 {
font-size: var(--text-body);
}
.b04-surface__status {
display: flex;
align-items: center;
gap: var(--spacing-8);
color: var(--color-text-secondary);
font-size: var(--text-body-sm);
}
.b04-surface-viewer {
min-height: 360px;
height: 100%;
padding: 0 var(--spacing-24) var(--spacing-24);
box-sizing: border-box;
}
.b04-surface-viewer__canvas {
display: block;
width: 100%;
height: 100%;
border-radius: var(--radius-cards);
}
.b04-surface__bottom {
display: grid;
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
gap: var(--spacing-16);
padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
border-top: 1px solid var(--color-border);
}
.b04-surface__section {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
min-width: 0;
}
.b04-surface__result {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
padding: var(--spacing-24);
}
.b04-surface__result-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.b04-surface__result-head h3 {
font-size: var(--text-subheading);
color: var(--color-text);
}
.b04-surface__models {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--spacing-16);
}
.b04-surface__empty {
color: var(--color-text-muted);
font-size: var(--text-body-sm);
}
.b04-surface__model-card {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
padding: var(--spacing-16);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background-color: var(--color-surface-raised);
box-shadow: var(--shadow-sm);
}
.b04-surface__stat-card {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
padding: var(--spacing-16);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background-color: var(--color-surface-raised);
}
.b04-surface__model-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-8);
}
.b04-surface__model-head strong {
font-family: var(--font-display);
color: var(--color-plum-velvet);
text-transform: uppercase;
}
.b04-surface__model-meta {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
font-size: var(--text-caption);
color: var(--color-text-secondary);
word-break: break-all;
}
@media (max-width: 980px) {
.b04-surface__bottom {
grid-template-columns: 1fr;
}
}
.point-viewer {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
overflow: hidden;
background: var(--color-surface);
}
.terrain-model-group {
min-width: 0;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background: var(--color-surface);
}
.point-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-12);
padding: var(--spacing-12) var(--spacing-16);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-raised);
}
.point-toolbar--stacked {
align-items: flex-start;
flex-wrap: wrap;
}
.point-toolbar div {
display: flex;
align-items: baseline;
gap: var(--spacing-8);
flex-wrap: wrap;
}
.point-toolbar span {
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
.viewer-controls {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-8);
width: 100%;
}
.viewer-controls button {
width: 100%;
min-width: 0;
min-height: 32px;
padding: 0 var(--spacing-4);
font-size: var(--text-caption);
border: 1px solid var(--color-border);
border-radius: var(--radius-buttons);
background: var(--color-canvas);
color: var(--color-text);
cursor: pointer;
}
.viewer-controls button:hover {
border-color: var(--color-accent);
background: var(--color-mist-violet);
}
.toggle-label {
display: inline-flex;
align-items: center;
gap: var(--spacing-4);
min-height: 32px;
font-size: var(--text-caption);
color: var(--color-text-secondary);
cursor: pointer;
}
.viewer-options {
display: flex;
align-items: center;
gap: var(--spacing-16);
flex-wrap: wrap;
padding: var(--spacing-12) var(--spacing-16);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-raised);
}
.viewer-options label {
display: inline-flex;
align-items: center;
gap: var(--spacing-8);
font-size: var(--text-caption);
color: var(--color-text-secondary);
}
.viewer-options label.is-disabled {
color: var(--color-text-muted);
cursor: not-allowed;
opacity: 0.55;
}
.model-display-options {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-8);
width: 100%;
}
.model-display-options .toggle-button {
position: relative;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 34px;
padding: 0 var(--spacing-12);
border: 1px solid var(--color-border);
border-radius: var(--radius-buttons);
background: var(--color-canvas);
color: var(--color-text-secondary);
cursor: pointer;
user-select: none;
}
.model-display-options .toggle-button input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.model-display-options .toggle-button:has(input:checked) {
border-color: var(--color-accent);
background: var(--color-mist-violet);
color: var(--color-accent);
font-weight: var(--font-weight-semibold);
}
.model-display-options .toggle-button:has(input:focus-visible) {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.model-display-options .toggle-button.is-disabled {
cursor: not-allowed;
}
.contour-interval-form {
display: grid;
grid-column: 1 / -1;
grid-template-columns: auto minmax(64px, 1fr) auto auto;
align-items: center;
gap: var(--spacing-8);
width: 100%;
}
.contour-interval-input,
.contour-interval-submit {
min-height: 34px;
border: 1px solid var(--color-border);
border-radius: var(--radius-buttons);
background: var(--color-canvas);
color: var(--color-text);
}
.contour-interval-input {
width: 100%;
min-width: 0;
padding: 0 var(--spacing-8);
}
.contour-interval-submit {
padding: 0 var(--spacing-12);
cursor: pointer;
}
.contour-interval-submit:disabled {
cursor: wait;
opacity: 0.6;
}
.viewer-option-val {
font-variant-numeric: tabular-nums;
min-width: 38px;
display: inline-block;
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}
.subtle-notice {
color: var(--color-text-muted);
background: var(--color-surface-raised);
border-bottom: 1px solid var(--color-border);
padding: var(--spacing-8) var(--spacing-16);
font-size: var(--text-caption);
}
.three-viewer {
position: relative;
width: 100%;
height: 560px;
background: var(--color-canvas);
}
.b04-surface__status-info {
position: absolute;
top: var(--spacing-12);
left: var(--spacing-12);
z-index: 2;
padding: var(--spacing-4) var(--spacing-8);
border-radius: var(--radius-inputs);
background: var(--color-surface-raised);
color: var(--color-text-secondary);
font-size: var(--text-caption);
pointer-events: none;
}
.b04-surface__scale,
.b04-map__scale {
position: absolute;
bottom: var(--spacing-16);
left: var(--spacing-16);
z-index: 2;
height: var(--spacing-8);
border: 2px solid var(--color-text-body);
border-top: 0;
color: var(--color-text-body);
filter: drop-shadow(0 1px 1px var(--color-surface-raised));
pointer-events: none;
}
.b04-surface__scale span,
.b04-map__scale span {
position: absolute;
bottom: var(--spacing-8);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
text-shadow: 0 1px 2px var(--color-surface-raised);
}
/* --- 하단 2D 지도 --- */
.b04-map {
--b04-map-vector: var(--color-accent);
display: flex;
flex-direction: column;
gap: var(--spacing-12);
margin: var(--spacing-24);
padding: var(--spacing-16);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background: var(--color-surface-raised);
}
.b04-map__header,
.b04-map__controls,
.b04-map__control-group,
.b04-map__layer-buttons {
display: flex;
align-items: center;
}
.b04-map__header {
justify-content: space-between;
gap: var(--spacing-16);
}
.b04-map__header h3 {
font-size: var(--text-body);
color: var(--color-text);
}
.b04-map__controls {
gap: var(--spacing-12);
flex-wrap: wrap;
}
.b04-map__control-group {
gap: var(--spacing-8);
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
.b04-map__layer-buttons {
gap: var(--spacing-4);
flex-wrap: wrap;
}
.b04-map__controls button {
min-height: 34px;
padding: 0 var(--spacing-12);
border: 1px solid var(--color-border);
border-radius: var(--radius-inputs);
background: var(--color-canvas);
color: var(--color-text-body);
}
.b04-map__controls button {
cursor: pointer;
}
.b04-map__controls .b04-map__layer-button {
padding: var(--spacing-8);
opacity: 0.55;
}
.b04-map__layer-button.is-active {
opacity: 1;
box-shadow: inset 0 0 0 1px currentColor;
}
.b04-map__layer-button--gis {
border-color: var(--color-border);
color: var(--color-text-secondary);
}
.b04-map__layer-button--gis.is-active {
border-color: var(--b04-layer-color);
color: var(--b04-layer-color);
box-shadow: inset 0 0 0 1px var(--b04-layer-color);
}
.b04-map__viewport {
position: relative;
width: 100%;
height: 560px;
overflow: hidden;
touch-action: none;
/* 좌버튼은 선택 전용이라 손바닥(grab) 커서를 쓰지 않는다. 팬 중(가운데 버튼)에만
JS가 grabbing으로 바꾼다(2026-08-01 사용자 지시). */
cursor: default;
user-select: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background: var(--color-canvas);
}
.b04-map__image,
.b04-map__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.b04-map__image {
object-fit: contain;
transform-origin: center;
user-select: none;
pointer-events: none;
}
.b04-map__canvas {
pointer-events: none;
}
.b04-map__empty {
position: absolute;
z-index: 2;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
/* 지도 위 좌상단 문구 묶음 — 배수유역 정보 자리(2026-08-01 사용자 지시).
지도 조작을 가리지 않도록 포인터 이벤트는 통과시킨다. */
.b04-map__status-stack {
position: absolute;
z-index: 2;
top: var(--spacing-12);
left: var(--spacing-12);
display: flex;
max-width: min(62%, 900px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-4);
pointer-events: none;
}
/* 객체 표시(지형지물 개수) 라벨 자리 — 우측 최하단(2026-08-01 사용자 지시).
축척은 좌하단이라 서로 겹치지 않는다. */
.b04-map__status-corner {
position: absolute;
z-index: 2;
right: var(--spacing-12);
bottom: var(--spacing-12);
display: flex;
max-width: min(50%, 480px);
flex-direction: column;
align-items: flex-end;
gap: var(--spacing-4);
pointer-events: none;
}
/* 배수유역 전용 상태 줄 — 지도 자체 상태(.b04-map__status)와 칸을 나눠 쓰면
나중에 끝난 쪽이 상대 문구를 지운다. 그래서 줄을 따로 둔다.
배경지도(위성·지적·등고선)가 복잡해 글자가 묻히므로 배경 칩을 깐다. */
.b04-map__status,
.b04-map__watershed-status {
display: block;
padding: var(--spacing-4) var(--spacing-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-inputs);
background: color-mix(in srgb, var(--color-surface-raised) 92%, transparent);
color: var(--color-text-body);
font-size: var(--text-caption);
line-height: 1.5;
word-break: keep-all;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.b04-map__watershed-status[hidden] {
display: none;
}
@media (max-width: 760px) {
.b04-map__header {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 1180px) {
.b04-surface__viewers {
grid-template-columns: 1fr;
}
}
Reference in New Issue View Git Blame Copy Permalink