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

feat(project): 내 업무 패널 스크롤 + 프로젝트 폴더 펼치기/접기 토글

Browse Source 
- .pj-home-side 에 max-height+overflow-y:auto 추가 — 목록이 길어지면
  패널 안에서만 스크롤(프로젝트 상세 화면은 기존 height:100% 우선 적용).
- "내 업무"의 프로젝트별 폴더 아이콘을 별도 토글 버튼으로 분리(이름은
  계속 프로젝트로 이동하는 링크) — 클릭 시 하위 업무 목록 펼침/접힘,
  아이콘도 folder_open/folder 로 전환. localStorage로 접힘 상태 기억.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-15 23:08:52 +09:00
parent 29ce3c7730
commit ecd4bd829e
5 changed files with 67 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/project.css
+13 -3
View File
@@ -116,7 +116,10 @@
.pj-section-head-done { margin-top: 22px; }
.pj-section-head-done h2 { font-size: 14px; color: #6b7280; }
.pj-home-side { width: 300px; border-left: 1px solid #eef0f2; padding-left: 24px; }
/* max-height 는 항상 값을 갖는 안전한 fallback(홈 화면처럼 부모가 고정
높이가 아닌 곳에서도 동작) — 프로젝트 상세 화면은 .pj-project-mytasks 가
더 구체적인 height:100% 로 덮어써서 화면 꽉 채움 레이아웃을 그대로 쓴다. */
.pj-home-side { width: 300px; border-left: 1px solid #eef0f2; padding-left: 24px; max-height: calc(100vh - 160px); overflow-y: auto; }
@media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; } }
.pj-mytask-list { list-style: none; margin: 0; padding: 0; }
.pj-mytask a { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-radius: 8px; text-decoration: none; color: inherit; }
@@ -294,11 +297,18 @@
.pj-th-resize { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; }
.pj-th-resize:hover { background: linear-gradient(90deg, transparent 40%, #c9d4ea 40%, #c9d4ea 60%, transparent 60%); }
/* ── 내 업무 트리(홈) ── */
/* ── 내 업무 트리(홈) — 폴더 아이콘은 토글 버튼(열림/닫힘), 이름은 별도 링크 ── */
.pj-mytree-group { margin-bottom: 14px; }
.pj-mytree-proj { display: flex; align-items: center; gap: 7px; text-decoration: none; color: #1e1f21; font-weight: 700; font-size: 13.5px; padding: 4px 2px; border-radius: 7px; }
.pj-mytree-head { display: flex; align-items: center; gap: 2px; }
.pj-mytree-toggle {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0; border: none; background: transparent; border-radius: 7px; cursor: pointer;
}
.pj-mytree-toggle:hover { background: #f1f2f4; }
.pj-mytree-proj { display: flex; align-items: center; gap: 7px; text-decoration: none; color: #1e1f21; font-weight: 700; font-size: 13.5px; padding: 4px 2px; border-radius: 7px; flex: 1 1 auto; min-width: 0; }
.pj-mytree-proj:hover { background: #f6f7f8; }
.pj-mytree-tasks { list-style: none; margin: 2px 0 0; padding: 0 0 0 8px; border-left: 2px solid #eef0f2; margin-left: 10px; }
.pj-mytree-group.is-collapsed .pj-mytree-tasks { display: none; }
.pj-mytree-task a { display: flex; align-items: flex-start; gap: 7px; padding: 6px 6px; border-radius: 7px; text-decoration: none; color: inherit; }
.pj-mytree-task a:hover { background: #f6f7f8; }
/* 댓글 아이콘 자리 — 댓글이 없어도 폭을 고정해 제목이 항상 같은 위치에서 시작(세로 정렬)되게 한다. */