feat(z01): 좌측 패널을 B03~B09 도킹 사이드바 양식으로(상자 둘 — 기초단가 · 마스터 트리) · 기초단가 다섯(노임·기계·자재·유가·요율) 표 + 칸 고치기(editable 만 · 못 고치는 칸은 까닭·산출근거) · 덮개 판정은 서버 state 만(원본 바뀜·주인 없음은 줄째 또렷이 · 단추 글자에 값) · 요율 알림 · 고친 것 모아 보기(서버 정렬) · 공용 오버레이에 진행단계·프로젝트 이름 끄기 선택(브레인)
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016VBGFXB9AbJBwXP19z75Qq
This commit is contained in:
Claude Opus 5
@@ -1,24 +1,66 @@
|
||||
/* Z01 마스터 데이터 — 좌 트리 / 우 표 */
|
||||
/* Z01 마스터 데이터 — 좌측 도킹 사이드바(기초단가 · 마스터 트리) / 우측 표 */
|
||||
.z01-master [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.z01-master__content {
|
||||
/* ── 좌측 패널: B08 과 같은 상자 틀(겉선·접기는 공용 ui-sidebar-section · ui-collapsible) ── */
|
||||
.z01-master__side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-8);
|
||||
padding-top: var(--spacing-8);
|
||||
}
|
||||
|
||||
.z01-master__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4);
|
||||
margin: 0;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-cards);
|
||||
background-color: var(--color-surface-raised);
|
||||
}
|
||||
|
||||
.z01-master__section-title {
|
||||
margin: 0 0 2px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.z01-master__base-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
|
||||
gap: var(--spacing-24);
|
||||
align-items: start;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.z01-master__base {
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-buttons);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-body);
|
||||
font: inherit;
|
||||
font-size: var(--text-body-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.z01-master__base--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.z01-master__base:hover,
|
||||
.z01-master__table:hover {
|
||||
background: var(--color-paper);
|
||||
}
|
||||
|
||||
.z01-master__base.is-active,
|
||||
.z01-master__table.is-active {
|
||||
background: var(--color-mist-violet);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.z01-master__tree {
|
||||
position: sticky;
|
||||
top: var(--spacing-16);
|
||||
max-height: calc(100vh - 160px);
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-8);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-cards);
|
||||
background: var(--color-surface);
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
@@ -26,7 +68,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-8);
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
padding: var(--spacing-4) var(--spacing-4);
|
||||
cursor: pointer;
|
||||
color: var(--color-text-body);
|
||||
}
|
||||
@@ -68,20 +110,13 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.z01-master__table:hover {
|
||||
background: var(--color-surface-raised);
|
||||
}
|
||||
|
||||
.z01-master__table.is-active {
|
||||
background: var(--color-mist-violet);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── 우측 표 ── */
|
||||
.z01-master__panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-16);
|
||||
gap: var(--spacing-12);
|
||||
min-width: 0;
|
||||
padding: var(--spacing-16) var(--spacing-24);
|
||||
}
|
||||
|
||||
.z01-master__title {
|
||||
@@ -90,6 +125,16 @@
|
||||
font-size: var(--text-body);
|
||||
}
|
||||
|
||||
/* 요율 알림 — 막지 않고 알리기만 */
|
||||
.z01-master__notice {
|
||||
margin: 0;
|
||||
padding: var(--spacing-8) var(--spacing-12);
|
||||
border-left: 4px solid var(--color-warning);
|
||||
background: var(--color-paper);
|
||||
color: var(--color-text-body);
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
.z01-master__toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -105,8 +150,30 @@
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
/* 칸 설명 줄 — 고칠 수 있나 · 까닭 · 원래 값 · 산출근거 */
|
||||
.z01-master__detail {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4) var(--spacing-12);
|
||||
padding: var(--spacing-8) var(--spacing-12);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-cards);
|
||||
background: var(--color-surface);
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
.z01-master__detail-line {
|
||||
color: var(--color-text-body);
|
||||
}
|
||||
|
||||
.z01-master__detail-line.is-warning {
|
||||
color: var(--color-danger);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.z01-master__grid-wrap {
|
||||
max-height: calc(100vh - 300px);
|
||||
max-height: calc(100vh - 320px);
|
||||
overflow: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-cards);
|
||||
@@ -146,6 +213,52 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.z01-master__mark {
|
||||
margin-left: var(--spacing-4);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.z01-master__grid td.is-editable {
|
||||
cursor: text;
|
||||
text-decoration: underline dotted var(--color-text-muted);
|
||||
}
|
||||
|
||||
.z01-master__grid td.is-selected {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* 고쳐짐 — 덮개 값을 쓰는 칸 */
|
||||
.z01-master__grid td.is-overridden {
|
||||
background: var(--color-mist-violet);
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* 원본 바뀜 · 주인 없음 · 판정 없음 — 줄째 또렷이(흐리면 옛 값이 조용히 쓰임) */
|
||||
.z01-master__grid tr.has-warning td {
|
||||
background: color-mix(in srgb, var(--color-danger) 8%, var(--color-canvas));
|
||||
}
|
||||
|
||||
.z01-master__grid tr.has-warning td:first-child {
|
||||
box-shadow: inset 4px 0 0 var(--color-danger);
|
||||
}
|
||||
|
||||
/* tr 을 넣어 줄 배경(tr.has-warning td)보다 무겁게 — 칸이 줄보다 더 진해야 함 */
|
||||
.z01-master__grid tr td.is-source-changed,
|
||||
.z01-master__grid tr td.is-orphan,
|
||||
.z01-master__grid tr td.is-missing {
|
||||
background: color-mix(in srgb, var(--color-danger) 22%, var(--color-canvas));
|
||||
color: var(--color-danger);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.z01-master__cell-input {
|
||||
width: 100%;
|
||||
min-width: 6em;
|
||||
padding: 2px var(--spacing-4);
|
||||
}
|
||||
|
||||
.z01-master__pager {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -159,14 +272,3 @@
|
||||
width: 6em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.z01-master__content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.z01-master__tree {
|
||||
position: static;
|
||||
margin-bottom: var(--spacing-24);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user