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

fix(cupang): 박스 계산 화면 2열 배치·표 잘림 방지

Browse Source 
입력표와 요약을 좌우 2열 그리드로 배치(1280px 이하는 세로 쌓기).
입력표는 자체 스크롤(max-height + sticky thead)로 행이 늘어도 카드가
잘리지 않게 하고, 요약 그리드 최소 폭을 줄여 좁은 열에서도 카드가
한 줄에 맞게 조정.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-08-28 12:31:33 +09:00
parent c6ee37ee48
commit 127f396366
8 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/cupang/templates/cupang/box_calc.html
+5 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828t" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
@@ -19,6 +19,8 @@
</div> </div>
{% else %} {% else %}
<div class="cpg-calc-layout">
<div class="erp-card cpg-form-card cpg-calc-card"> <div class="erp-card cpg-form-card cpg-calc-card">
<div class="cpg-card-head"> <div class="cpg-card-head">
<h2>박스 계산</h2> <h2>박스 계산</h2>
@@ -66,6 +68,8 @@
<div class="cpg-sum-boxes" id="cpg-sum-boxes"></div> <div class="cpg-sum-boxes" id="cpg-sum-boxes"></div>
</div> </div>
</div><!-- /cpg-calc-layout -->
<script type="application/json" id="cpg-calc-rules">{{ box_rules | tojson }}</script> <script type="application/json" id="cpg-calc-rules">{{ box_rules | tojson }}</script>
<script> <script>
// 박스 계산기 — 행 추가/삭제, 수량 수정 후 재계산. // 박스 계산기 — 행 추가/삭제, 수량 수정 후 재계산.
app/modules/cupang/templates/cupang/box_rules.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828t" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/centers.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828t" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/detail.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828t" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/form.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828t" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/index.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828t" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/modules/cupang/templates/cupang/products.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828t" />{% endblock %} {% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
{% block content %} {% block content %}
<section class="cpg"> <section class="cpg">
app/static/cupang.css
+28 -3
View File
@@ -346,7 +346,7 @@
.cpg-sum-kpis { .cpg-sum-kpis {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; gap: 10px;
} }
.cpg-kpi { .cpg-kpi {
@@ -364,7 +364,7 @@
.cpg-sum-prods { .cpg-sum-prods {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 8px; gap: 8px;
} }
.cpg-sum-prod { .cpg-sum-prod {
@@ -394,7 +394,7 @@
/* 혼합 박스 카드 */ /* 혼합 박스 카드 */
.cpg-sum-boxes { .cpg-sum-boxes {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px; gap: 12px;
} }
.cpg-box-card { .cpg-box-card {
@@ -489,3 +489,28 @@
} }
.cpg-box-fill { opacity: .16; } .cpg-box-fill { opacity: .16; }
} }
/* 박스 계산 2열 레이아웃 — 왼쪽 입력표 / 오른쪽 요약. 좁으면 세로로 쌓임. */
.cpg-calc-layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.cpg-calc-layout > .erp-card { margin-bottom: 0; }
@media (max-width: 1280px) {
.cpg-calc-layout { grid-template-columns: minmax(0, 1fr); }
}
/* 행이 많아도 카드가 잘리지 않도록 표 자체를 스크롤시킨다. */
.cpg-calc-card .erp-table-wrap {
overflow: auto;
max-height: min(58vh, 560px);
}
.cpg-calc-card .cpg-calc-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--color-canvas-white);
}
.cpg-calc-actions { flex-wrap: wrap; }