fix(cupang): ③ 센터 분배는 내용만큼 늘어나게 (클리핑 제거)
혼합 상자를 추가하면 칸이 아래로 늘어나야 하는데 카드/목록에 걸어둔 max-height + overflow:hidden 이 잘라내고 있었다. ③ 은 높이 제한과 클리핑을 없애고 넘치면 페이지가 스크롤되게 한다. ①(입력 표) ②(요약 목록) 의 내부 스크롤은 그대로 유지. 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=20260901u" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901v" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cpg">
|
||||
@@ -1066,33 +1066,25 @@
|
||||
syncConfirm();
|
||||
}
|
||||
|
||||
// ── 스크롤 영역 높이 고정 ──────────────────────────
|
||||
// CSS(flex/grid) 만으로는 브라우저에 따라 높이가 안 잡혀 카드가 계속
|
||||
// 늘어난다. 화면에서 실제 위치를 재서 max-height 를 픽셀로 지정한다.
|
||||
// ── ①② 스크롤 영역 높이 ──────────────────────────
|
||||
// ③ 센터 분배는 내용만큼 아래로 늘어나야 하므로 건드리지 않는다
|
||||
// (넘치면 페이지가 스크롤된다).
|
||||
function fitScrollAreas() {
|
||||
var panes = [
|
||||
document.querySelector(".cpg-calc-card .erp-table-wrap"),
|
||||
document.querySelector(".cpg-calc-sum .cpg-sum-scroll"),
|
||||
distList
|
||||
document.querySelector(".cpg-calc-sum .cpg-sum-scroll")
|
||||
];
|
||||
panes.forEach(function (el) {
|
||||
if (!el) return;
|
||||
var top = el.getBoundingClientRect().top;
|
||||
var avail = window.innerHeight - top - 24;
|
||||
// 화면 아래로 내려가 있는(3열이 접힌) 영역은 창 높이의 60% 를 쓴다.
|
||||
// 그대로 두면 음수가 되어 아주 작은 높이로 잘린다.
|
||||
var h = avail > 260 ? avail : Math.round(window.innerHeight * 0.6);
|
||||
// !important 로 박아 넣는다 — 다른 규칙에 밀리지 않게
|
||||
el.style.setProperty("max-height", h + "px", "important");
|
||||
el.style.setProperty("overflow-y", "auto", "important");
|
||||
el.style.setProperty("min-height", "0", "important");
|
||||
el.setAttribute("data-fit", h);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("resize", fitScrollAreas);
|
||||
var pageScroller = document.querySelector(".erp-page");
|
||||
if (pageScroller) pageScroller.addEventListener("scroll", fitScrollAreas, { passive: true });
|
||||
|
||||
function render() { renderSummary(); renderDist(); fitScrollAreas(); }
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901u" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901v" />{% 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=20260901u" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901v" />{% 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=20260901u" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901v" />{% 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=20260901u" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901v" />{% 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=20260901u" />{% endblock %}
|
||||
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901v" />{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #}
|
||||
|
||||
+14
-4
@@ -1494,10 +1494,10 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
|
||||
.cpg-dist-card::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); }
|
||||
|
||||
/* ── 스크롤 최종 보정 — id 선택자 + !important 로 확정 ── */
|
||||
/* ③ 센터 목록은 내용만큼 늘어난다(자르지 않음). 넘치면 페이지가 스크롤. */
|
||||
#cpg-dist-list {
|
||||
max-height: 60vh !important;
|
||||
overflow-y: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.cpg-calc-card .erp-table-wrap {
|
||||
max-height: 52vh !important;
|
||||
@@ -1507,4 +1507,14 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
|
||||
max-height: 52vh !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.cpg-calc3 > .erp-card { max-height: 86vh !important; }
|
||||
.cpg-calc3 > .cpg-dist-card { max-height: none !important; overflow: visible !important; }
|
||||
|
||||
/* ③ 센터 분배 — 내용에 따라 높이가 늘어나도록 (클리핑/스크롤 제거) */
|
||||
.cpg-dist-card,
|
||||
.cpg-calc3 > .cpg-dist-card { max-height: none !important; overflow: visible !important; }
|
||||
.cpg-dist-card .cpg-dist-list,
|
||||
#cpg-dist-list {
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user