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

ui(shell): 뷰포트(1883x938) 고정 — 문서 세로 스크롤 제거

Browse Source 
- erp 셸 height:100vh + body overflow:hidden, .erp-page 가 남은 높이 채우고 내부 스크롤
- 휴가 달력: 6주 행이 가용 높이 균등 분할(유동), 날짜 셀 height:100%, 선택일 패널 내부 스크롤
- 쿠팡 출고 폼: 라인 패널 고정 900px 높이 → 가용 높이 채움
- CORM/Order 는 별도 창이라 해당 없음

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
king
2026-05-30 18:12:41 +09:00
parent fde2c9c2e9
commit 9f361c4e6a
15 changed files with 61 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/vacation.css
+26 -9
View File
@@ -20,7 +20,7 @@
/* ── 페이지 액션 + 잔여 요약 ── */
.vac-actions {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
gap: 12px; flex-wrap: wrap; flex-shrink: 0;
}
.vac-actions-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vac-mini { margin-left: 4px; }
@@ -38,26 +38,36 @@
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 16px;
align-items: start;
align-items: stretch;
flex: 1 1 auto; min-height: 0; /* 남은 높이 채움 → 문서 스크롤 방지 */
}
@media (max-width: 1100px) {
.vac-layout { grid-template-columns: 1fr; }
}
/* ── 달력 카드 ── */
.vac-cal-card { padding: 16px; }
.vac-cal-card {
padding: 16px;
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.vac-cal-head {
display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
flex-shrink: 0;
}
.vac-cal-title { font-size: 18pt; font-weight: 600; margin: 0; letter-spacing: -0.45px; }
.vac-nav-btn { padding: 4px 12px; font-size: 18pt; line-height: 1; }
.vac-today-btn { margin-left: auto; }
.vac-cal { border: 1px solid var(--vac-ash); border-radius: 10px; overflow: hidden; }
.vac-cal {
border: 1px solid var(--vac-ash); border-radius: 10px; overflow: hidden;
flex: 1 1 auto; min-height: 0;
display: flex; flex-direction: column;
}
.vac-wd-row {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
background: var(--vac-ghost); border-bottom: 1px solid var(--vac-ash);
flex-shrink: 0;
}
.vac-wd {
text-align: center; padding: 8px 0; font-size: 15px; font-weight: 600;
@@ -66,15 +76,20 @@
}
.vac-wd:last-child { border-right: none; }
/* 주(week) — 정사각형 날짜 셀 위에 bar 레이어를 오버레이 */
.vac-week { position: relative; border-bottom: 1px solid var(--vac-ash); }
/* 주(week) — 날짜 셀 위에 bar 레이어를 오버레이. 6주가 높이를 균등 분할(유동). */
.vac-week {
position: relative; border-bottom: 1px solid var(--vac-ash);
flex: 1 1 0; min-height: 88px;
display: flex; flex-direction: column;
}
.vac-week:last-child { border-bottom: none; }
.vac-week-days {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
flex: 1 1 auto; min-height: 0;
}
.vac-day {
height: 125px;
height: 100%;
border-right: 1px solid var(--vac-ash);
padding: 6px 8px; text-decoration: none;
display: block; box-sizing: border-box;
@@ -122,12 +137,14 @@
.vac-bar-cancel { background: #fff; border: 1px dashed var(--vac-ash); color: #bbb; opacity: 0.7; }
/* 범례 */
.vac-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.vac-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; flex-shrink: 0; }
.vac-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vac-muted); }
.vac-dot { width: 14px; height: 12px; border-radius: 4px; display: inline-block; }
/* ── 선택일 리스트 ── */
.vac-list-card { padding: 16px; }
.vac-list-card {
padding: 16px; min-height: 0; overflow-y: auto; /* 긴 목록은 패널 내부 스크롤 */
}
.vac-list-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.vac-list-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
.vac-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }