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

ui(vacation): 달력 날짜 정사각형 셀 + 큰 글자 + 안쪽 테두리 + bar 오버레이

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
king
2026-05-30 08:33:15 +09:00
parent 8c6539d6cb
commit bec9c5e5a6
6 changed files with 59 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/vacation/templates/vacation/detail.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
{% block content %}
<section class="vac">
app/modules/vacation/templates/vacation/form.html
+2 -2
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
{% block content %}
<section class="vac">
@@ -68,4 +68,4 @@
</section>
{% endblock %}
{% block scripts %}<script src="/static/vacation.js?v=20260530a" defer></script>{% endblock %}
{% block scripts %}<script src="/static/vacation.js?v=20260530b" defer></script>{% endblock %}
app/modules/vacation/templates/vacation/index.html
+7 -4
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
{% block content %}
<section class="vac">
@@ -49,31 +49,34 @@
</div>
{% for week in weeks %}
<div class="vac-week" style="--lanes: {{ week.lane_count }}">
<div class="vac-week">
<div class="vac-week-days">
{% for cell in week.days %}
<a class="vac-day
{% if not cell.in_month %}vac-out{% endif %}
{% if cell.is_today %}vac-today{% endif %}
{% if cell.is_selected %}vac-selected{% endif %}"
style="grid-column: {{ loop.index }}; grid-row: 1;"
href="/vacation/?year={{ year }}&month={{ month }}&date={{ cell.date }}"
{% if cell.holiday_name %}title="{{ cell.holiday_name }}"{% endif %}>
<span class="vac-day-num
{% if cell.is_sunday or cell.is_holiday %}vac-red{% elif cell.is_saturday %}vac-blue{% endif %}">{{ cell.day }}</span>
</a>
{% endfor %}
</div>
<div class="vac-week-bars">
{% for bar in week.bars %}
<a class="vac-bar {{ bar.status_class }}
{% if bar.continues_left %}vac-bar-l{% endif %}
{% if bar.continues_right %}vac-bar-r{% endif %}"
style="grid-column: {{ bar.start_col + 1 }} / span {{ bar.span }}; grid-row: {{ bar.lane + 2 }};"
style="grid-column: {{ bar.start_col + 1 }} / span {{ bar.span }}; grid-row: {{ bar.lane + 1 }};"
href="/vacation/{{ bar.id }}"
title="{{ bar.label }} ({{ bar.days }}일 · {{ bar.status }})">
<span class="vac-bar-label">{{ bar.label }}</span>
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
app/modules/vacation/templates/vacation/pending.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
{% block content %}
<section class="vac">
app/modules/vacation/templates/vacation/settings.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
{% block content %}
<section class="vac">
app/static/vacation.css
+27 -21
View File
@@ -57,46 +57,52 @@
background: var(--vac-ghost); border-bottom: 1px solid var(--vac-ash);
}
.vac-wd {
text-align: center; padding: 6px 0; font-size: 13px; font-weight: 500;
text-align: center; padding: 8px 0; font-size: 15px; font-weight: 600;
color: var(--vac-black);
border-right: 1px solid var(--vac-ash);
}
.vac-wd:last-child { border-right: none; }
/* 주(week) — 1행=날짜, 2행+=bar lane */
.vac-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: 30px;
grid-auto-rows: 21px;
border-bottom: 1px solid var(--vac-ash);
padding-bottom: 4px;
position: relative;
}
/* 주(week) — 정사각형 날짜 셀 위에 bar 레이어를 오버레이 */
.vac-week { position: relative; border-bottom: 1px solid var(--vac-ash); }
.vac-week:last-child { border-bottom: none; }
.vac-day {
border-right: 1px solid var(--vac-ash);
padding: 4px 6px; text-decoration: none;
display: block; min-height: 30px;
.vac-week-days {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.vac-day:nth-child(7n) { border-right: none; }
.vac-day-num { font-size: 13px; font-weight: 500; color: var(--vac-black); }
.vac-day {
aspect-ratio: 1 / 1; /* 정사각형 */
border-right: 1px solid var(--vac-ash);
padding: 6px 8px; text-decoration: none;
display: block; box-sizing: border-box;
}
.vac-day:last-child { border-right: none; }
.vac-day-num { font-size: 16px; font-weight: 600; color: var(--vac-black); }
.vac-out { background: #fafafa; }
.vac-out .vac-day-num { color: #bbb; }
.vac-today { background: #f5f5f5; }
.vac-today .vac-day-num {
background: var(--vac-black); color: #fff; border-radius: 9999px;
padding: 1px 7px;
padding: 2px 9px;
}
.vac-selected { box-shadow: inset 0 0 0 2px var(--vac-black); }
.vac-red { color: var(--vac-red) !important; }
.vac-blue { color: var(--vac-blue) !important; }
/* bar 오버레이 — 날짜 숫자 아래(top)부터 7열 그리드로 겹쳐 그림 */
.vac-week-bars {
position: absolute; left: 0; right: 0; top: 30px; bottom: 4px;
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
grid-auto-rows: 22px; row-gap: 3px;
pointer-events: none;
}
/* ── 휴가 bar (구글 달력 스타일) ── */
.vac-bar {
margin: 1px 3px; padding: 0 6px; height: 18px; line-height: 18px;
border-radius: 6px; font-size: 11px; text-decoration: none;
margin: 0 3px; padding: 0 8px; height: 20px; line-height: 20px;
border-radius: 6px; font-size: 13px; text-decoration: none;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
align-self: center;
align-self: center; pointer-events: auto;
}
.vac-bar-label { pointer-events: none; }
.vac-bar-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }