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">
|
||||
|
||||
@@ -748,8 +748,8 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
|
||||
opacity: .85;
|
||||
transform: rotate(-7deg);
|
||||
box-shadow: inset 0 0 0 1px rgba(29, 95, 208, .25);
|
||||
animation: cpg-stamp-in .22s ease-out;
|
||||
}
|
||||
.cpg-stamp.is-new { animation: cpg-stamp-in .22s ease-out; }
|
||||
@keyframes cpg-stamp-in {
|
||||
from { opacity: 0; transform: rotate(-7deg) scale(1.6); }
|
||||
to { opacity: .85; transform: rotate(-7deg) scale(1); }
|
||||
@@ -758,12 +758,13 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
|
||||
/* 배분이 끝난 카드는 흐리게 — 글자·상자 아이콘 모두 */
|
||||
.cpg-sum-prod.is-done, .cpg-box-card.is-done { opacity: 1; }
|
||||
.cpg-sum-prod.is-done .cpg-sum-prod-name,
|
||||
.cpg-box-card.is-done .cpg-box-title { color: var(--color-midtone-gray); }
|
||||
.cpg-sum-prod.is-done .cpg-sum-prod-nums,
|
||||
.cpg-box-card.is-done .cpg-box-title,
|
||||
.cpg-box-card.is-done .cpg-box-items,
|
||||
.cpg-box-card.is-done .cpg-box-fillnum { color: var(--color-midtone-gray); opacity: .6; }
|
||||
.cpg-sum-prod.is-done .cpg-sum-prod-nums strong,
|
||||
.cpg-box-card.is-done .cpg-box-items b { color: var(--color-midtone-gray); }
|
||||
.cpg-box-card.is-done .cpg-box-svg { filter: grayscale(1); opacity: .45; }
|
||||
.cpg-box-card.is-done .cpg-box-bar { opacity: .4; }
|
||||
.cpg-sum-prod.is-done .cpg-stamp, .cpg-box-card.is-done .cpg-stamp { opacity: .85; }
|
||||
/* 도장은 카드가 흐려져도 또렷하게 유지 */
|
||||
.cpg-sum-prod.is-done .cpg-stamp, .cpg-box-card.is-done .cpg-stamp { opacity: 1; }
|
||||
|
||||
Reference in New Issue
Block a user