feat(cupang): 선택일 출고 항목 hover 툴팁(제품명+수량, 커서 따라감)
- index sel_shipments 에 품목 요약(name/qty) 첨부 - 리스트 항목 hover 시 커서 왼쪽에 따라다니는 툴팁 표시 - 캐시 버전 m Co-Authored-By: Claude Opus 4.8 <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=20260530l" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530m" />{% 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=20260530l" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530m" />{% 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=20260530l" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530m" />{% 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=20260530l" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530m" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
@@ -109,4 +109,4 @@
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}<script src="/static/cupang.js?v=20260530l" defer></script>{% endblock %}
|
||||
{% block scripts %}<script src="/static/cupang.js?v=20260530m" defer></script>{% endblock %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530l" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530m" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
@@ -65,7 +65,8 @@
|
||||
<ul class="cpg-list">
|
||||
{% for s in sel_shipments %}
|
||||
<li class="cpg-list-item">
|
||||
<a href="/cupang/{{ s.id }}" class="cpg-list-link">
|
||||
<a href="/cupang/{{ s.id }}" class="cpg-list-link cpg-hover-item"
|
||||
data-items='{{ s.items | tojson }}'>
|
||||
<div class="cpg-list-top">
|
||||
<strong>{{ s.center_name_snapshot or '센터 미지정' }}</strong>
|
||||
{% set badge = 'erp-badge-neutral' %}
|
||||
@@ -89,5 +90,55 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- hover 툴팁 (마우스 따라다님, 커서 왼쪽) -->
|
||||
<div id="cpg-hover-tip" class="cpg-hover-tip" hidden></div>
|
||||
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
(function () {
|
||||
var tip = document.getElementById("cpg-hover-tip");
|
||||
if (!tip) return;
|
||||
|
||||
function buildHtml(items) {
|
||||
if (!items || !items.length) return '<div class="cpg-tip-empty">품목 없음</div>';
|
||||
var html = "";
|
||||
items.forEach(function (it) {
|
||||
var d1 = document.createElement("div");
|
||||
d1.className = "cpg-tip-row";
|
||||
var n = document.createElement("span"); n.className = "cpg-tip-name"; n.textContent = it.name || "";
|
||||
var q = document.createElement("span"); q.className = "cpg-tip-qty"; q.textContent = (it.qty != null ? it.qty : 0);
|
||||
d1.appendChild(n); d1.appendChild(q);
|
||||
html += d1.outerHTML;
|
||||
});
|
||||
return html;
|
||||
}
|
||||
|
||||
function move(e) {
|
||||
// 커서 왼쪽에 표시
|
||||
var w = tip.offsetWidth || 200;
|
||||
var x = e.clientX - w - 14;
|
||||
if (x < 6) x = e.clientX + 16; // 화면 왼쪽 벗어나면 오른쪽으로
|
||||
var y = e.clientY + 12;
|
||||
var maxY = window.innerHeight - tip.offsetHeight - 8;
|
||||
if (y > maxY) y = maxY;
|
||||
tip.style.left = x + "px";
|
||||
tip.style.top = y + "px";
|
||||
}
|
||||
|
||||
document.querySelectorAll(".cpg-hover-item").forEach(function (el) {
|
||||
el.addEventListener("mouseenter", function (e) {
|
||||
var items = [];
|
||||
try { items = JSON.parse(el.getAttribute("data-items") || "[]"); } catch (_) {}
|
||||
tip.innerHTML = buildHtml(items);
|
||||
tip.hidden = false;
|
||||
move(e);
|
||||
});
|
||||
el.addEventListener("mousemove", move);
|
||||
el.addEventListener("mouseleave", function () { tip.hidden = true; });
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530l" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260530m" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
|
||||
Reference in New Issue
Block a user