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

fix(cupang): 달마다 다르던 달력 칸 크기 통일

Browse Source 
주 수(5주/6주)에 따라 1fr 로 나뉘던 행 높이를 고정값(--mcal-row)으로 바꿔
두 달의 칸 크기와 세로 간격을 동일하게 맞춘다. 화면 높이에 따라 84/72/62px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-02 14:38:02 +09:00
parent ba2478d461
commit bf8f36bc40
6 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/cupang.css
+11 -6
View File
@@ -31,7 +31,7 @@
@media (max-width: 980px) { .cpg-layout { grid-template-columns: 1fr; } }
.cpg-cal-card, .cpg-list-card { padding: 16px; }
.cpg-cal-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cpg-cal-card { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.cpg-list-card { min-height: 0; overflow-y: auto; }
.cpg-cal-head {
@@ -1080,7 +1080,7 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
@media (max-width: 1200px) {
.cpg-mcal-months { grid-template-columns: minmax(0, 1fr); }
}
.cpg-mcal { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cpg-mcal { display: flex; flex-direction: column; min-height: 0; min-width: 0; align-self: start; }
/* 달 머리글 — 가운데 정렬, 출고 건수는 오른쪽 끝에 겹쳐 놓는다 */
.cpg-mcal-h {
@@ -1099,15 +1099,19 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
background: var(--color-deep-black); color: #fff;
}
/* 날짜 격자 */
/* 날짜 격자 — 주 수(5주/6주)가 달라도 칸 크기가 같도록 행 높이를 고정한다.
(1fr 로 남은 높이를 나누면 5주 달과 6주 달의 칸 높이가 달라진다) */
.cpg-mcal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: auto; /* 요일 행은 내용 높이만 */
grid-auto-rows: minmax(0, 1fr); /* 주 행만 남은 높이 균등 분할 */
grid-auto-rows: var(--mcal-row, 84px);
gap: 4px;
flex: 1 1 auto; min-height: 0;
flex: 0 0 auto; min-height: 0;
align-content: start;
}
@media (max-height: 900px) { .cpg-mcal-grid { --mcal-row: 72px; } }
@media (max-height: 780px) { .cpg-mcal-grid { --mcal-row: 62px; } }
.cpg-mcal-wd {
display: flex; align-items: center; justify-content: center;
height: 34px; padding: 0;
@@ -1121,7 +1125,8 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
.cpg-mcal-cell {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 4px;
min-height: 70px; min-width: 0; padding: 6px 4px 7px;
height: 100%; min-height: 0; min-width: 0; padding: 6px 4px 7px;
justify-content: flex-start;
border: 1px solid var(--color-subtle-ash);
border-radius: 8px;
background: #fff;