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

style(project): 업무 편집 모달 아사나식 레이아웃 (제목/메타/설명 순서 재배치)

Browse Source 
제목 입력을 큰 무테 필드로, 담당자/세션/우선순위/일정을 컴팩트한 메타 칩
행으로 묶고, 하위업무→첨부→연결프로젝트→댓글 순서로 재배열. 관련 CSS
토큰(.pj-t-title-input, .pj-meta-row/field/label, .pj-modal-kicker,
.pj-extra-label) 추가.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-15 20:30:13 +09:00
parent 9c07aefb29
commit 1eae308b9e
4 changed files with 121 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/project.css
+24
View File
@@ -312,6 +312,30 @@
.pj-modal-card { background: #fff; border-radius: 16px; padding: 22px; width: min(480px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 90vh; overflow-y: auto; }
.pj-modal-card h3 { margin: 0 0 16px; font-size: 17px; }
.pj-modal-hint { margin: -6px 0 14px; font-size: 12px; color: #6b7280; }
/* 업무 편집 팝업 — 아사나식 레이아웃(큰 무테 제목 + 작은 메타 칩 한 줄). */
.pj-modal-kicker { margin: 0 0 2px; font-size: 11px; font-weight: 700; color: var(--pj-ink-soft);
text-transform: uppercase; letter-spacing: .04em; }
.pj-t-title-input {
display: block; width: 100%; border: none !important; background: transparent !important;
font-size: 19px !important; font-weight: 700; padding: 4px 4px !important; margin: 0 0 14px !important;
color: var(--pj-ink); box-sizing: border-box;
}
.pj-t-title-input:focus { outline: none; background: #f6f7f8 !important; border-radius: 8px; }
.pj-meta-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pj-meta-field { flex: 1 1 110px; min-width: 100px; }
.pj-meta-label { display: block; font-size: 10.5px; font-weight: 700; color: var(--pj-ink-soft);
text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.pj-meta-field select, .pj-meta-field input {
display: block; width: 100%; margin: 0 !important; padding: 6px 8px !important;
border: 1px solid var(--pj-border) !important; border-radius: 8px !important;
font-size: 12.5px !important; font-family: inherit; background: #fafafa !important; box-sizing: border-box;
}
.pj-meta-field select:hover, .pj-meta-field input:hover,
.pj-meta-field select:focus, .pj-meta-field input:focus {
border-color: var(--pj-accent) !important; background: var(--pj-accent-tint) !important; outline: none;
}
.pj-extra-label { font-size: 12.5px; font-weight: 700; color: var(--pj-ink-soft); margin-right: auto; }
.pj-modal-card label { display: block; font-size: 12.5px; font-weight: 600; color: #525860; margin-bottom: 12px; }
.pj-modal-card input[type=text], .pj-modal-card input[type=date], .pj-modal-card textarea, .pj-modal-card select {
display: block; width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid #d8dce2; border-radius: 8px; font-size: 13.5px; font-family: inherit; box-sizing: border-box;