diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor.css b/M02_MasterTemplete/M02_MasterTemplete_Labor.css index 2ddad1ccc..8d18b5f90 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor.css +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor.css @@ -122,3 +122,92 @@ margin: 0; font-size: var(--text-body-sm); } + +/* 보기 갈래가 좁으면(면적산출 오른쪽 패널 등) 표를 줄마다 카드로 — 가로 스크롤 없이. + 줄 = 이름 한 줄(차례 · 단위 곁) → 금액 넷 한 줄(칸 이름은 `data-label` · 합계만 굵게) · + 자재 = 코드 · 이름 · 규격 한 줄 → 단위 · 수량 · 기준 단가 · 반영 금액 한 줄. 넓은 상세는 그대로 */ +.m02-labview { + container: m02-labview / inline-size; +} + +@container m02-labview (max-width: 640px) { + .m02-labrow, + .m02-labrow tbody, + .m02-labrow tfoot { + display: block; + width: 100%; + } + + .m02-labrow thead { + display: none; + } + + .m02-labrow tr { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 2px var(--spacing-8); + padding: var(--spacing-8) 0; + border-bottom: 1px solid var(--color-border); + } + + .m02-labrow td { + display: block; + min-width: 0; + padding: 0; + border: 0; + overflow-wrap: anywhere; + } + + /* 이름 줄 — 차례 · 이름 · 결과 단위(자재 = 코드 · 이름 · 규격) */ + .m02-labrow .m02-labrow__name { + display: flex; + flex-direction: column; + grid-column: 1 / -1; + order: 1; + min-width: 0; + } + + .m02-labrow .m02-labrow__no, + .m02-labrow .m02-labrow__unit:not([data-label]), + .m02-labrow .m02-labrow__code, + .m02-labrow .m02-labrow__spec { + grid-column: span 2; + color: var(--color-text-secondary); + font-size: var(--text-caption); + } + + .m02-labrow .m02-labrow__unit:not([data-label]), + .m02-labrow .m02-labrow__spec { + text-align: right; + } + + .m02-labrow__sum .m02-labrow__no, + .m02-labrow__sum .m02-labrow__unit { + display: none; + } + + /* 금액 · 수 칸 — 칸 이름을 위에 작게 */ + .m02-labrow [data-label] { + order: 2; + text-align: right; + white-space: normal; + font-size: var(--text-caption); + } + + .m02-labrow [data-label]::before { + content: attr(data-label); + display: block; + color: var(--color-text-secondary); + font-size: var(--text-caption); + } + + .m02-labrow .m02-labrow__money:last-of-type .m02-labrow__applied { + font-weight: 700; + } + + .m02-labrow__move { + grid-column: 1 / -1; + order: 3; + text-align: right; + } +} diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts index 9e3bc3fbe..df7c2515d 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts @@ -46,16 +46,18 @@ export function qtyText( return `${tc("Labor_Qty")} ${cell} = ${v}`; } -/** 금액 칸 하나 — 위 기준(작게) · 아래 반영 */ +/** 금액 칸 하나 — 위 기준(작게) · 아래 반영 · `label` = 좁은 칸에서 칸 이름(머리 줄 대신) */ function moneyCell( base: number | null | undefined, applied: number | null | undefined, wait: boolean, + label: string, ): HTMLElement { const show = (v: number | null | undefined): string => wait ? "…" : v === null || v === undefined ? "—" : formatMoney(v); return el("td", { className: "m02-labrow__money", + attrs: { "data-label": label }, children: [ el("small", { className: "m02-labrow__base", @@ -134,7 +136,7 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement className: on ? "m02-labrow__row is-open" : "m02-labrow__row", attrs: { "data-labor-logic": row.로직 }, children: [ - el("td", { text: String(i + 1) }), + el("td", { className: "m02-labrow__no", text: String(i + 1) }), el("td", { className: "m02-labrow__name", children: [ @@ -160,8 +162,8 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement : []), ], }), - el("td", { text: unit }), - ...COSTS.map((c) => moneyCell(line?.기준?.[c], line?.반영?.[c], wait)), + el("td", { className: "m02-labrow__unit", text: unit }), + ...COSTS.map((c) => moneyCell(line?.기준?.[c], line?.반영?.[c], wait, tc(HEAD[c]))), ...(move && remove ? [ el("td", { @@ -186,11 +188,11 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement el("tr", { className: "m02-labrow__sum", children: [ - el("td", { text: "" }), - el("td", { text: tc("Prev_Sum") }), - el("td", { text: "" }), + el("td", { className: "m02-labrow__no", text: "" }), + el("td", { className: "m02-labrow__name", text: tc("Prev_Sum") }), + el("td", { className: "m02-labrow__unit", text: "" }), ...COSTS.map((c) => - moneyCell(sum(data.calc?.기준합, c), sum(data.calc?.반영합, c), wait), + moneyCell(sum(data.calc?.기준합, c), sum(data.calc?.반영합, c), wait, tc(HEAD[c])), ), ...(tools ? [el("td", { text: "" })] : []), ], @@ -229,7 +231,7 @@ export function matTable(data: MatTableData, on?: Omit): HT className: on ? "m02-labrow__row is-open" : "m02-labrow__row", attrs: { "data-labor-mat": mat.코드 }, children: [ - el("td", { text: mat.코드 }), + el("td", { className: "m02-labrow__code", text: mat.코드 }), el("td", { className: "m02-labrow__name", children: [ @@ -239,15 +241,30 @@ export function matTable(data: MatTableData, on?: Omit): HT : []), ], }), - el("td", { text: mat.규격 ?? "" }), - el("td", { text: mat.단위 ?? "" }), + el("td", { className: "m02-labrow__spec", text: mat.규격 ?? "" }), + el("td", { + className: "m02-labrow__unit", + text: mat.단위 ?? "", + attrs: { "data-label": tc("Labor_Unit") }, + }), el("td", { className: "m02-labrow__num", text: qty, - attrs: { title: qtyText(line, mat.단위 ?? "", data.cells) }, + attrs: { + title: qtyText(line, mat.단위 ?? "", data.cells), + "data-label": tc("Labor_Qty"), + }, + }), + el("td", { + className: "m02-labrow__num", + text: show(line?.기준단가), + attrs: { "data-label": tc("Labor_BasePrice") }, + }), + el("td", { + className: "m02-labrow__num", + text: show(line?.반영), + attrs: { "data-label": tc("Labor_AppliedSum") }, }), - el("td", { className: "m02-labrow__num", text: show(line?.기준단가) }), - el("td", { className: "m02-labrow__num", text: show(line?.반영) }), ...(remove ? [ el("td", {