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

style(cupang): 센터 분배 헤더/목록 구분, 박스 수량 입력란 축소

Browse Source 
센터 이름과 담긴 품목이 같은 평면에 있어 경계가 흐렸다. 헤더를 바로 만들어
분리하고(담긴 센터는 검정 바 + 흰 배지) 품목은 패널 안쪽에서 구분선으로
나눈다.

박스 수량은 세 자리를 넘지 않으므로 입력란을 62px → 46px 로 줄이고,
자리만 차지하던 number 스피너를 숨겼다. 고정폭 글꼴로 자릿수 정렬,
max=999·inputmode=numeric 추가.
This commit is contained in:
king
2026-08-31 12:40:02 +09:00
parent f261919cc2
commit bd53533b77
8 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/cupang.css
+44 -6
View File
@@ -705,16 +705,44 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
.cpg-dist-center {
border: 1px solid var(--color-subtle-ash);
border-radius: 10px;
padding: 10px 12px;
overflow: hidden;
background: var(--color-canvas-white);
}
.cpg-dist-center.has-items { border-color: var(--color-rich-black); }
/* 센터 헤더 = 회색 바, 아래 목록과 확실히 분리 */
.cpg-dist-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
font-size: 14px;
padding: 7px 10px;
background: var(--color-ghost-gray);
border-bottom: 1px solid var(--color-subtle-ash);
font-size: 13px;
}
.cpg-dist-head > strong {
flex: 1 1 auto; min-width: 0;
font-size: 13px; font-weight: 700; letter-spacing: .02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpg-dist-center.has-items .cpg-dist-head {
background: var(--color-rich-black);
border-bottom-color: var(--color-rich-black);
color: var(--color-canvas-white);
}
.cpg-dist-center.has-items .cpg-dist-head .erp-badge {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .28);
color: var(--color-canvas-white);
}
.cpg-dist-center.has-items .cpg-dist-close {
border-color: rgba(255, 255, 255, .35);
color: var(--color-canvas-white);
background: transparent;
}
.cpg-dist-center.has-items .cpg-dist-close:hover {
background: rgba(255, 255, 255, .16);
}
/* 드롭 대상은 센터 패널 전체 */
.cpg-dist-center { transition: background .15s ease, border-color .15s ease; }
@@ -723,7 +751,7 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
background: var(--color-ghost-gray);
}
.cpg-dist-hint {
margin: 0;
margin: 10px;
padding: 10px 8px;
border: 1.5px dashed var(--color-subtle-ash);
border-radius: 8px;
@@ -735,15 +763,25 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
.cpg-dist-close { padding: 0 6px; line-height: 1.5; }
.cpg-center-pick { margin-bottom: 10px; }
.cpg-center-pick .erp-select { flex: 1 1 auto; min-width: 0; }
.cpg-dist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cpg-dist-items { list-style: none; margin: 0; padding: 4px 10px 6px; display: flex; flex-direction: column; }
.cpg-dist-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
padding: 5px 0;
}
.cpg-dist-item + .cpg-dist-item { border-top: 1px solid var(--color-ghost-gray); }
.cpg-dist-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpg-dist-qty { width: 62px; min-width: 0; text-align: right; padding: 2px 6px; }
/* 박스 수량: 최대 세 자리 → 좁게. 스피너는 자리만 차지해 숨긴다. */
.cpg-dist-qty {
width: 46px; min-width: 0; flex: 0 0 auto;
text-align: center; padding: 2px 4px;
font-family: var(--font-geist-mono);
-moz-appearance: textfield;
}
.cpg-dist-qty::-webkit-outer-spin-button,
.cpg-dist-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cpg-dist-unit { font-size: 12px; color: var(--color-midtone-gray); }
.cpg-dist-del { padding: 2px 8px; line-height: 1.4; }