diff --git a/A00_Common/design/design_page.ts b/A00_Common/design/design_page.ts index b4ef131c6..dfff7f67f 100644 --- a/A00_Common/design/design_page.ts +++ b/A00_Common/design/design_page.ts @@ -49,9 +49,10 @@ import { peekSectionDetail, } from "../../B06_Section/B06_Section_Section_Store"; import "./design_page.css"; -// 클래스로 붙이는 부품(체크 · 빈 상태 · 보조 글 · 표)의 CSS — B05 · B06 화면 파일이 시험 때문에 import 없이 클래스만 씀(553-2) +// 클래스로 붙이는 부품(체크 · 빈 상태 · 범례 · 보조 글 · 표)의 CSS — B05 · B06 화면 파일이 시험 때문에 import 없이 클래스만 씀(553-2) import "@ui/ui_template_checkbox"; import "@ui/ui_template_empty"; +import "@ui/ui_template_flow_legend"; import "@ui/ui_template_table"; import "@ui/ui_template_text"; diff --git a/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts b/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts index f79b34212..bd281e2dc 100644 --- a/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts +++ b/B05_Profile/B05_Profile_UI_RouteEdit_Chrome.ts @@ -135,9 +135,11 @@ export function createRouteEditChrome(
노선을 읽는 중… - - 예상노선(원본) - 계획노선 + + 예상노선(원본) + 계획노선
-
- 예상노선(원본) - 창을 연 노선 - 미리 보기 +
+ 예상노선(원본) + 창을 연 노선 + 미리 보기
휠 = 확대 · 축소   끌기 = 이동   ↺ ↻ = 회전
diff --git a/B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Profile.ts b/B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Profile.ts index 17ca26898..d4a2944c2 100644 --- a/B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Profile.ts +++ b/B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Profile.ts @@ -181,13 +181,14 @@ export function profileSvg( ${initialPath}`; } -/** 그림 아래 범례 — 그린 선만. */ +/** 그림 아래 범례 — 그린 선만 · 부품 「범례」(553-2) · 색 = 그린 선 값. */ export function profileLegend(hasPlan: boolean, hasInitial: boolean): string { - const item = (cls: string, name: string): string => `${name}`; - return `
${[ - item("is-ground", "지반선"), - hasPlan ? item("is-plan", "균형 계획선") : "", - hasInitial ? item("is-initial", "적용될 초기 종단") : "", + const item = (cls: string, kind: string, color: string, name: string): string => + `${name}`; + return `
${[ + item("is-ground", "line", "var(--draw-text-secondary)", "지반선"), + hasPlan ? item("is-plan", "line", "var(--draw-primary)", "균형 계획선") : "", + hasInitial ? item("is-initial", "dash", "var(--map-route)", "적용될 초기 종단") : "", ].join("")}
`; } diff --git a/B05_Profile/B05_Profile_UI_Style_RouteEdit.css b/B05_Profile/B05_Profile_UI_Style_RouteEdit.css index 0ce9a81c4..a7da0314e 100644 --- a/B05_Profile/B05_Profile_UI_Style_RouteEdit.css +++ b/B05_Profile/B05_Profile_UI_Style_RouteEdit.css @@ -153,20 +153,9 @@ white-space: nowrap; } -.b05-routeedit__legend i { - display: inline-block; - width: 22px; - height: 0; - margin-right: 2px; - vertical-align: middle; -} - -.b05-routeedit__legend i.is-expected { - border-top: 2px dashed var(--color-text-secondary); -} - -.b05-routeedit__legend i.is-planned { - border-top: 2px solid var(--map-route, #f97316); +/* 범례 = 부품 「범례」 세로(553-2) · 줄 사이만 붙임 */ +.b05-routeedit__legend.ui-legend { + gap: 0; } /* 오른쪽 덮는 판 — 패널 양식(382-1 · `ui_template_side_panels` · 손잡이 · 머리 · 폭 끌기) 을 지도 위에 얹음 · diff --git a/B05_Profile/B05_Profile_UI_Style_RouteRecommend.css b/B05_Profile/B05_Profile_UI_Style_RouteRecommend.css index 9f95ff97b..2a3cd930a 100644 --- a/B05_Profile/B05_Profile_UI_Style_RouteRecommend.css +++ b/B05_Profile/B05_Profile_UI_Style_RouteRecommend.css @@ -244,34 +244,11 @@ font-size: var(--text-body-sm); } -.b05-routerec__legend { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-12); - color: var(--color-text-secondary); - font-size: var(--text-body-sm); -} - -.b05-routerec__legend i { - display: inline-block; - width: 22px; - margin-right: 6px; - vertical-align: middle; -} - -.b05-routerec__legend i.is-expected { - border-top: 2px dashed var(--color-text-secondary); -} - -.b05-routerec__legend i.is-current { - border-top: 2px solid var(--map-route, #f97316); +/* 범례 = 부품 「범례」(553-2) · 창을 연 노선은 지도처럼 흐림 */ +.b05-routerec__legend .is-current { opacity: 0.55; } -.b05-routerec__legend i.is-preview { - border-top: 3px solid var(--color-primary); -} - /* 옵션 겹창 — 지도 왼쪽 위 작은 칸(회전 단추는 오른쪽 위 · PLAN 77-4). 지도 끌기를 막지 않게 제 칸만. */ .b05-routerec__side { position: absolute; @@ -511,28 +488,9 @@ stroke-dasharray: 6 3; } +/* 그림 범례 = 부품 「범례」(553-2) */ .b05-routerec__plegend { - display: flex; - gap: var(--spacing-12); - margin-top: var(--spacing-4, 4px); - color: var(--color-text-secondary); - font-size: var(--text-caption); -} - -.b05-routerec__plegend i { - display: inline-block; - width: 16px; - margin-right: var(--spacing-4, 4px); - vertical-align: middle; - border-top: 2px solid var(--color-text-secondary); -} - -.b05-routerec__plegend i.is-plan { - border-top-color: var(--color-primary); -} - -.b05-routerec__plegend i.is-initial { - border-top: 2px dashed var(--map-route, #f97316); + margin-top: var(--spacing-4); } /* 이 모달에서 셈한 후보 표 — 절 · 성 · 반입 · 최대 종단경사. */