fix(cupang): 도장은 또렷하게, 애니메이션은 방금 완료된 것만
- 혼합 박스 도장이 흐리게 보이던 원인: 부모(.cpg-box-title)에 opacity 를 주면 자식 도장까지 함께 흐려진다 → 제목은 색만 낮추고 도장은 opacity 1. - 렌더할 때마다 모든 도장에 애니메이션이 다시 걸리던 문제: 이미 찍힌 항목을 stamped 로 기억해 새로 완료된 도장(.is-new)에만 애니메이션. 잔여가 다시 생기거나 재계산하면 기록을 지워 다음 완료 때 다시 찍힌다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829j" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829k" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
@@ -248,7 +248,8 @@
|
||||
});
|
||||
});
|
||||
var had = Object.keys(alloc).some(function (k) { return alloc[k].length; });
|
||||
alloc = {}; // 계산이 바뀌면 이전 배분은 근거가 사라지므로 비운다.
|
||||
alloc = {};
|
||||
stamped = {}; // 계산이 바뀌면 이전 배분은 근거가 사라지므로 비운다.
|
||||
render();
|
||||
msg.textContent = "계산 완료 (" + calc.results.length + "건)" + (had ? " — 센터 분배 초기화됨" : "");
|
||||
})
|
||||
@@ -303,9 +304,12 @@
|
||||
"</svg>";
|
||||
}
|
||||
|
||||
// 배분이 끝난 카드에 찍는 도장.
|
||||
function stampHtml() {
|
||||
return '<span class="cpg-stamp" aria-label="배분 완료">배분 완료</span>';
|
||||
// 배분이 끝난 카드에 찍는 도장. 애니메이션은 "이번에 막 완료된" 것만.
|
||||
var stamped = {}; // key -> 이미 도장이 찍혀 있던 항목
|
||||
function stampHtml(key) {
|
||||
var fresh = !stamped[key];
|
||||
stamped[key] = true;
|
||||
return '<span class="cpg-stamp' + (fresh ? " is-new" : "") + '" aria-label="배분 완료">배분 완료</span>';
|
||||
}
|
||||
|
||||
function kpi(label, value, hint) {
|
||||
@@ -348,11 +352,12 @@
|
||||
var key = prodKey(r.product_code);
|
||||
var remain = remainFor(key);
|
||||
var used = r.full_boxes - remain;
|
||||
if (remain) delete stamped[key];
|
||||
ph += '<div class="cpg-sum-prod' + (remain ? " is-draggable" : " is-done") + '"' +
|
||||
' data-key="' + esc(key) + '">' +
|
||||
'<div class="cpg-sum-prod-head">' +
|
||||
'<span class="cpg-sum-prod-name">' + esc(r.product_name) + "</span>" +
|
||||
(remain ? "" : stampHtml()) +
|
||||
(remain ? "" : stampHtml(key)) +
|
||||
"</div>" +
|
||||
'<div class="cpg-sum-prod-nums">' +
|
||||
"<strong>" + remain + "박스</strong>" +
|
||||
@@ -376,6 +381,7 @@
|
||||
m.boxes.forEach(function (b, i) {
|
||||
var key = mixKey(m.box_name, i);
|
||||
var remain = remainFor(key);
|
||||
if (remain) delete stamped[key];
|
||||
var items = b.items.map(function (it) {
|
||||
return "<li><span>" + esc(it.product_name) + "</span><b>" + it.quantity + "개</b></li>";
|
||||
}).join("");
|
||||
@@ -385,7 +391,7 @@
|
||||
'<div class="cpg-box-art">' + boxSvg(b.fill_percent, m.box_name) + "</div>" +
|
||||
'<div class="cpg-box-info">' +
|
||||
'<div class="cpg-box-title">' + esc(m.box_name) + " 혼합 #" + (i + 1) +
|
||||
(remain ? "" : stampHtml()) + "</div>" +
|
||||
(remain ? "" : stampHtml(key)) + "</div>" +
|
||||
'<ul class="cpg-box-items">' + items + "</ul>" +
|
||||
'<div class="cpg-box-bar"><span style="width:' + b.fill_percent + '%"></span></div>' +
|
||||
'<div class="cpg-box-fillnum">' + b.fill_percent + "% 채움 · " + units[key] + "개</div>" +
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829j" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829k" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829j" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829k" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829j" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829k" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829j" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829k" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829j" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829k" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829j" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829k" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
|
||||
Reference in New Issue
Block a user