eomsangdonandClaude Sonnet 5.5
6bb0a5312d
- 놓기 칸 = 파일 놓기 칸 부품(한 줄로 눕힘) · 임시 보관함 창 = 모달 + 고르는 카드 + 빈 상태 · 교체 확인 = 확인창 - 업로드 도중 window.confirm 둘 → 확인창 부품(글 그대로 · 단추 이름으로 선택 안내) · 예정노선 고름 줄 = 목록 줄 - 모달 CSS · 임시 목록 옛 CSS 걷음 · 가이드 촬영 선택자 · 지킴 시험 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
165 lines
5.8 KiB
CSS
165 lines
5.8 KiB
CSS
.b03-file {
|
|
min-height: calc(100dvh - var(--app-header-height, 0px));
|
|
background: linear-gradient(180deg, var(--color-canvas) 0%, var(--color-accent-soft) 100%);
|
|
padding: 0 var(--spacing-24) var(--spacing-48) var(--spacing-24); /* 상단 여백은 main-layout 마진으로 조정하므로 padding-top은 0 */
|
|
}
|
|
|
|
.b03-file__main-layout {
|
|
max-width: var(--page-max-width, 1200px);
|
|
margin: var(--spacing-40) auto 0 auto; /* 상단 구분선(헤더)과의 간격을 확실하게 40px 벌림 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-32);
|
|
/* ⚠ flex 자식은 기본이 `min-width: auto` 라 **내용보다 안 줄어든다** — 그래서 안쪽
|
|
격자가 넘치면 페이지 몸통이 통째로 가로로 밀렸다(2026-09-08). 여기서 끊는다. */
|
|
min-width: 0;
|
|
}
|
|
|
|
.b03-file__main-layout > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.b03-file__control-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
.b03-file__cards-container-panel {
|
|
margin-top: 0; /* 단일 layout gap에 의해 제어되도록 설정 */
|
|
}
|
|
|
|
.b03-file__slot-input {
|
|
display: none;
|
|
}
|
|
|
|
/* 고르는 자리 한 줄 — [입력 파일 선택] · [임시 보관함] · [파일 업로드](2026-09-03).
|
|
좁아지면 아래로 접히되, 선택 영역이 남는 폭을 먹는다. */
|
|
/* 셋을 같은 폭·같은 높이로 나눈다 — 열 1:1:1(2026-09-03 사용자 지시).
|
|
flex 로는 버튼·드롭존의 내용 폭이 배분에 섞여 288·254·288 로 어긋났다. 격자는
|
|
칸을 먼저 나누므로 내용과 무관하게 정확히 1:1:1 이 된다. 좁아지면 칸이 접힌다. */
|
|
.b03-file__pick-row {
|
|
display: grid;
|
|
/* ⚠ 좁은 폭에서는 200px 도 넘친다 — `min(200px, 100%)` 로 컨테이너까지만 줄인다. */
|
|
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
|
|
align-items: stretch;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b03-file__pick-row > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 칸을 꽉 채워야 세 칸의 높이가 같아진다 — 버튼은 기본이 내용 크기다. */
|
|
.b03-file__pick-row .b03-file__temp-picker > .ui-btn,
|
|
.b03-file__pick-row > .ui-btn {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 한 줄 바(2026-09-03) — 파일 놓기 칸 부품을 [아이콘 · 글 · 고르기] 한 줄로 눕힌다. 종전 160px 블록은
|
|
안내 문구를 담느라 컸고 문구는 좌측 패널로 갔다. 칸을 꽉 채워 세 칸 높이를 맞춘다. */
|
|
.b03-file__dropzone {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
}
|
|
|
|
/* 빈 오류 줄이 자리를 잡고 있으면 토글 아래가 통째로 비어 보인다 — 글자가 있을 때만 자리를 차지한다. */
|
|
.b03-file__error:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* 띠 알림(부품)을 담는 자리 — 글이 있을 때(is-visible)만 선다. */
|
|
.b03-file__resume,
|
|
.b03-file__overview {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
margin-top: var(--spacing-8);
|
|
}
|
|
|
|
.b03-file__resume.is-visible,
|
|
.b03-file__overview.is-visible {
|
|
display: flex;
|
|
}
|
|
|
|
/* 계획노선 | 지형(LAS) — 컨테이너를 둘로 나눈다(2026-08-31 사용자 지시).
|
|
노선은 카드 5장(shapefile 한 벌), 지형은 4장이라 폭을 5:4 비슷하게 준다.
|
|
|
|
⚠ **좁아지면 한 줄로 접는다**(2026-09-08 사용자 지적) — 2열을 고정하면 좁은 폭에서
|
|
각 열이 카드 하나도 못 담아 내용이 컨테이너 밖으로 넘치고 글자가 안 읽혔다.
|
|
`auto-fit` + `min(360px, 100%)` 이라, 폭이 모자라면 칸 수가 스스로 1로 줄고
|
|
**최소폭이 컨테이너를 넘지 않는다**(고정 minmax 는 그 아래에서 넘친다). */
|
|
.b03-file__columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
|
|
gap: var(--spacing-16);
|
|
align-items: start;
|
|
}
|
|
|
|
/* LAS 없이 설계 — 켜기 부품(스위치) · 자리만 정함 */
|
|
.b03-file__lasfree {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* LAS 없이 설계를 켜면 지형 컨테이너는 받지 않는다 — 잠긴 것이 보이게 흐린다. */
|
|
.b03-file__group--disabled {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.b03-file__card--disabled {
|
|
background: var(--color-surface);
|
|
border-style: dashed;
|
|
}
|
|
|
|
.b03-file__card--disabled .b03-file__card-select {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 좌측 안내 패널이 열리면 본문을 그만큼 밀어낸다 — 공용 워크플로 레이아웃(B04·B05)의
|
|
`.ui-workflow-layout__body` 규칙과 같은 값. 접히면 손잡이 폭만 남긴다. */
|
|
.b03-file__main-layout {
|
|
transition: padding-left var(--transition-base);
|
|
}
|
|
|
|
.b03-file.is-options-open .b03-file__main-layout {
|
|
padding-left: min(var(--wf-left-panel-width), calc(100vw - var(--spacing-48)));
|
|
}
|
|
|
|
.b03-file:not(.is-options-open) .b03-file__main-layout {
|
|
padding-left: var(--spacing-24);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.b03-file.is-options-open .b03-file__main-layout {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
/* --- 좌측 패널 — 현황 배너 + 아래 단추 줄(안내 글은 [?] 설명서로 옮김 · 54-2) --- */
|
|
.b03-file__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
padding: var(--spacing-16);
|
|
}
|
|
|
|
.b03-file__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
/* 카드가 좁아지면 한 줄에 제목·상태·[선택]이 못 들어가 제목이 글자 단위로 접힌다
|
|
(2026-09-03 실측: 안내 패널을 연 상태에서 카드 폭 210px). 폭이 모자라면 열을 줄인다. */
|
|
/* ⚠ `minmax(260px, …)` 는 **칸이 260px 보다 좁아질 수 없다**는 뜻이라, 컨테이너가
|
|
그보다 좁아지면 카드가 밖으로 넘친다(2026-09-08 좁은 폭 실측). `min(260px, 100%)`
|
|
으로 두면 좁을 때 **컨테이너 폭까지 줄어들어** 넘치지 않는다. */
|
|
.b03-file__group-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
|
|
gap: var(--spacing-12);
|
|
}
|