style(malaysia): 랙 보드 세로 적층 + 상단 정보바 한 줄

- Side A/B 를 세로로 적층(각 면 풀폭) → 칸·입력란 넓게, 한 화면 활용
- 상단 정보(날짜/창고/상태/안내/저장)를 mys-info-bar 로 한 줄 고정
  (erp-card 중앙정렬에 먹혀 세로로 쌓이던 문제 해결)
- 칸 넓어진 만큼 입력란 폭·폰트 확대

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-14 16:41:41 +09:00
parent d92da186f3
commit 4c7eb9467f
@@ -23,30 +23,43 @@
<style> <style>
.mys-compact .erp-table th, .mys-compact .erp-table th,
.mys-compact .erp-table td { padding-top:4px; padding-bottom:4px; } .mys-compact .erp-table td { padding-top:4px; padding-bottom:4px; }
/* 랙 보드 — 두 면을 한 화면에 나란히 */ /* 상단 정보 바 — 한 줄 */
.rack-board { display:flex; gap:16px; flex-wrap:wrap; } .mys-info-bar {
.rack-side { flex:1 1 460px; min-width:0; } display:flex; align-items:center; gap:16px; flex-wrap:nowrap;
border:1px solid #e2e8f0; border-radius:10px; background:#fff; padding:10px 14px;
}
.mys-info-bar h2 { margin:0; white-space:nowrap; }
.mys-info-bar > div { white-space:nowrap; }
.mys-info-bar .mys-hint {
flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; font-size:12px;
}
.mys-info-bar > button { flex:0 0 auto; }
/* 랙 보드 — 두 면을 세로로 적층(각 면 풀폭 → 칸 넓게) */
.rack-board { display:flex; flex-direction:column; gap:18px; }
.rack-side { width:100%; }
.rack-side h3 { text-align:center; margin:0 0 8px; } .rack-side h3 { text-align:center; margin:0 0 8px; }
.rack-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; margin-bottom:5px; } .rack-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin-bottom:6px; }
.rack-cell { .rack-cell {
border:1px solid #cbd5e1; border-radius:6px; padding:3px; border:1px solid #cbd5e1; border-radius:6px; padding:4px;
background:#f8fafc; min-height:78px; display:flex; flex-direction:column; min-width:0; background:#f8fafc; min-height:70px; display:flex; flex-direction:column; min-width:0;
} }
.rack-cell-head { .rack-cell-head {
display:flex; align-items:center; gap:3px; justify-content:space-between; display:flex; align-items:center; gap:4px; justify-content:space-between;
font-size:10px; font-weight:600; color:#475569; margin-bottom:3px; font-size:11px; font-weight:600; color:#475569; margin-bottom:4px;
} }
.rack-cell-head .rk-cell-total { color:#0f172a; white-space:nowrap; } .rack-cell-head .rk-cell-total { color:#0f172a; white-space:nowrap; }
.rack-cell-head .rk-add { .rack-cell-head .rk-add {
border:1px solid #94a3b8; background:#fff; border-radius:4px; border:1px solid #94a3b8; background:#fff; border-radius:4px;
width:18px; height:18px; line-height:1; padding:0; cursor:pointer; font-weight:700; flex:0 0 auto; width:20px; height:20px; line-height:1; padding:0; cursor:pointer; font-weight:700; flex:0 0 auto;
} }
.rk-rows { display:flex; flex-direction:column; gap:3px; } .rk-rows { display:flex; flex-direction:column; gap:4px; }
.rk-row { display:grid; grid-template-columns: minmax(0,1fr) 34px 7px 30px 26px 14px; gap:2px; align-items:center; } .rk-row { display:grid; grid-template-columns: minmax(0,1fr) 52px 8px 44px 38px 16px; gap:4px; align-items:center; }
.rk-row .rk-sku { font-size:10px; padding:1px 2px; min-width:0; } .rk-row .rk-sku { font-size:12px; padding:2px 4px; min-width:0; }
.rk-row .rk-upb, .rk-row .rk-box { font-size:10px; padding:1px 2px; text-align:right; min-width:0; } .rk-row .rk-upb, .rk-row .rk-box { font-size:12px; padding:2px 4px; text-align:right; min-width:0; }
.rk-row .rk-x { font-size:10px; color:#94a3b8; text-align:center; } .rk-row .rk-x { font-size:11px; color:#94a3b8; text-align:center; }
.rk-row .rk-sub { font-size:10px; text-align:right; color:#2563eb; font-weight:600; } .rk-row .rk-sub { font-size:12px; text-align:right; color:#2563eb; font-weight:600; }
.rk-row .rk-del { .rk-row .rk-del {
border:none; background:transparent; color:#dc2626; cursor:pointer; border:none; background:transparent; color:#dc2626; cursor:pointer;
font-size:13px; line-height:1; padding:0; font-size:13px; line-height:1; padding:0;
@@ -62,9 +75,9 @@
</div> </div>
<form method="post" action="/malaysia/stocktakes/{{ stocktake.id }}/rack/bulk"> <form method="post" action="/malaysia/stocktakes/{{ stocktake.id }}/rack/bulk">
<!-- 상단 정보 스트립 --> <!-- 상단 정보 스트립 (한 줄) -->
<div class="erp-card" style="display:flex;align-items:center;gap:18px;flex-wrap:wrap;"> <div class="mys-info-bar">
<h2 style="margin:0;"><span class="i18n">재고조사</span> #{{ stocktake.id }}</h2> <h2><span class="i18n">재고조사</span> #{{ stocktake.id }}</h2>
<div><span class="erp-muted">날짜</span> {{ stocktake.stocktake_date }}</div> <div><span class="erp-muted">날짜</span> {{ stocktake.stocktake_date }}</div>
<div><span class="erp-muted">창고</span> {{ stocktake.warehouse_code }}</div> <div><span class="erp-muted">창고</span> {{ stocktake.warehouse_code }}</div>
<div><span class="erp-muted">상태</span> <div><span class="erp-muted">상태</span>
@@ -73,8 +86,8 @@
{% else %}<span class="erp-badge erp-badge-inverse">작성중</span>{% endif %} {% else %}<span class="erp-badge erp-badge-inverse">작성중</span>{% endif %}
</div> </div>
{% if stocktake.finalized_at %}<div><span class="erp-muted">확정시각</span> {{ stocktake.finalized_at }}</div>{% endif %} {% if stocktake.finalized_at %}<div><span class="erp-muted">확정시각</span> {{ stocktake.finalized_at }}</div>{% endif %}
{% if missing_bom %}<span style="color:#b91c1c;font-weight:600;">⚠ BOM 없는 콤보: {{ missing_bom|join(', ') }}</span>{% endif %} {% if missing_bom %}<span style="color:#b91c1c;font-weight:600;white-space:nowrap;">⚠ BOM 누락: {{ missing_bom|join(', ') }}</span>{% endif %}
<span class="erp-muted i18n" style="flex:1 1 220px;font-size:12px;">랙 칸에 아이템·입수량(박스당 개수)·박스 수를 입력하면 낱개/콤보 수량이 자동 집계됩니다. 한 칸에 여러 아이템은 + 로 추가하세요.</span> <span class="erp-muted i18n mys-hint">랙 칸에 아이템·입수량(박스당 개수)·박스 수를 입력하면 낱개/콤보 수량이 자동 집계됩니다. 한 칸에 여러 아이템은 + 로 추가하세요.</span>
{% if is_draft %}<button type="submit" class="erp-btn erp-btn-primary">입력 저장</button>{% endif %} {% if is_draft %}<button type="submit" class="erp-btn erp-btn-primary">입력 저장</button>{% endif %}
</div> </div>