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:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user