king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(malaysia): 랙 인쇄 레이아웃 — 번호 제거·용량 강조·박스 확대

Browse Source 
- 인쇄/미리보기에서 랙 번호 제거(불필요)
- 여백 축소(@page 4mm, 시트 2mm), 글자 전반 확대
- 상품명과 용량(750ml 등) 줄 분리, 용량을 최대(5.5cm)로 키워 원거리 가독
- 계산식의 박스 수(21box)를 굵게 3cm로 강조

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
king
2026-06-15 18:12:56 +09:00
parent 6763b2af68
commit e256c6c5ee
2 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/malaysia/templates/malaysia/rack_view.html
+18 -20
View File
@@ -42,26 +42,23 @@
}
.rvp-toolbar .rvp-title { margin-right:auto; color:#fff; font-weight:700; font-size:16px; }
.rvp-pages { display:flex; flex-direction:column; gap:18px; align-items:center; }
/* 화면 미리보기: A4 가로 비율(297:210) 시트 */
/* 화면 미리보기: A4 가로 비율(297:210) 시트 — 여백 최소, 글자 최대 */
.rvp-sheet {
background:#fff; width:min(100%, 1000px); aspect-ratio:297/210;
box-shadow:0 8px 24px rgba(0,0,0,.3); border-radius:4px;
display:flex; flex-direction:column; padding:4% 5%; box-sizing:border-box;
display:flex; flex-direction:column; padding:1.5%; box-sizing:border-box;
}
.rvp-cell-code {
font-weight:900; line-height:1; letter-spacing:.5px;
font-size:9vmin; color:#0f172a; border-bottom:4px solid #0f172a;
padding-bottom:2%; margin-bottom:3%; text-align:center;
}
.rvp-list { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:3%; }
.rvp-line { text-align:center; }
.rvp-line .rvp-name { display:block; font-weight:900; font-size:6.5vmin; color:#0f172a; line-height:1.1; }
.rvp-line .rvp-calc { display:block; font-weight:800; font-size:5vmin; color:#1e293b; margin-top:1%; }
.rvp-empty { text-align:center; font-weight:900; font-size:7vmin; color:#94a3b8; margin:auto 0; }
.rvp-list { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:4%; }
.rvp-line { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.5%; }
.rvp-line .rvp-name { font-weight:900; font-size:7vmin; color:#0f172a; line-height:1.05; }
.rvp-line .rvp-size { font-weight:900; font-size:14vmin; color:#0f172a; line-height:1; }
.rvp-line .rvp-calc { font-weight:800; font-size:6vmin; color:#1e293b; margin-top:1.5%; }
.rvp-line .rvp-calc .rvp-box { font-size:9.5vmin; font-weight:900; }
.rvp-empty { text-align:center; font-weight:900; font-size:9vmin; color:#94a3b8; margin:auto 0; }
/* ── 실제 인쇄 ── */
@media print {
@page { size: A4 landscape; margin: 8mm; }
@page { size: A4 landscape; margin: 4mm; }
body * { visibility: hidden !important; }
.rvp-overlay, .rvp-overlay * { visibility: visible !important; }
.rvp-overlay {
@@ -73,14 +70,15 @@
.rvp-sheet {
width:100% !important; height:100vh !important; aspect-ratio:auto !important;
box-shadow:none !important; border-radius:0 !important; page-break-after:always;
padding:0 !important;
padding:2mm !important;
}
.rvp-sheet:last-child { page-break-after:auto; }
/* 인쇄 시 글씨 더 크게(멀리서도 보이게) — cm/vh 기준 */
.rvp-cell-code { font-size:3cm; border-bottom-width:6px; }
.rvp-line .rvp-name { font-size:2.4cm; }
.rvp-line .rvp-calc { font-size:1.6cm; }
.rvp-empty { font-size:2.5cm; }
/* 인쇄 시 글씨 더 크게(멀리서도 보이게) — cm 기준 */
.rvp-line .rvp-name { font-size:2.6cm; }
.rvp-line .rvp-size { font-size:5.5cm; }
.rvp-line .rvp-calc { font-size:1.8cm; }
.rvp-line .rvp-calc .rvp-box { font-size:3cm; }
.rvp-empty { font-size:3cm; }
}
</style>
{% endblock %}
@@ -156,5 +154,5 @@
<div class="rvp-pages" id="rvp-pages"></div>
</div>
</section>
<script src="/static/malaysia_rack_view.js?v=20260615a"></script>
<script src="/static/malaysia_rack_view.js?v=20260615b"></script>
{% endblock %}
app/static/malaysia_rack_view.js
+20 -10
View File
@@ -14,6 +14,12 @@
function t(ko, en) { return lang() === "en" ? en : ko; }
function fmt(n) { return Number(n || 0).toLocaleString(); }
function nameOf(e) { return (lang() === "en" ? e.en : e.ko) || e.sku; }
// 상품명 끝의 용량 토큰(숫자 포함, 예 750ml)을 분리 → {main, size}
function splitName(full) {
var m = String(full || "").match(/^(.*\S)\s+(\S*\d\S*)$/);
if (m) return { main: m[1], size: m[2] };
return { main: full || "", size: "" };
}
function getEntries(cell) {
try { return JSON.parse(cell.getAttribute("data-entries") || "[]"); }
@@ -155,10 +161,6 @@
var arr = getEntries(cell);
var sheet = document.createElement("div");
sheet.className = "rvp-sheet";
var code = document.createElement("div");
code.className = "rvp-cell-code";
code.textContent = cell.getAttribute("data-cell");
sheet.appendChild(code);
var list = document.createElement("div");
list.className = "rvp-list";
if (!arr.length) {
@@ -169,16 +171,24 @@
} else {
arr.forEach(function (e) {
var total = (Number(e.upb) || 0) * (Number(e.box) || 0);
var nm = splitName(nameOf(e));
var line = document.createElement("div");
line.className = "rvp-line";
var nm = document.createElement("span");
nm.className = "rvp-name";
nm.textContent = nameOf(e);
var main = document.createElement("span");
main.className = "rvp-name";
main.textContent = nm.main;
line.appendChild(main);
if (nm.size) {
var size = document.createElement("span");
size.className = "rvp-size";
size.textContent = nm.size;
line.appendChild(size);
}
var calc = document.createElement("span");
calc.className = "rvp-calc";
calc.textContent = fmt(e.upb) + t("개", "ea") + " × " + fmt(e.box)
+ t("박스", "box") + " = " + fmt(total);
line.appendChild(nm);
calc.innerHTML = fmt(e.upb) + t("개", "ea") + " &times; "
+ "<b class=\"rvp-box\">" + fmt(e.box) + t("박스", "box") + "</b>"
+ " = " + fmt(total);
line.appendChild(calc);
list.appendChild(line);
});