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

fix(project): 홈 화면도 한 화면 채움 레이아웃 — 내 업무 패널 자체 스크롤 확정

Browse Source 
홈 화면의 내 업무 패널이 max-height:calc(100vh-160px) 로는 뷰포트에 맞게
잘리지 않아 페이지 전체가 스크롤되고 패널 자체 스크롤바가 안 생겼다.
프로젝트 상세와 같은 방식으로 .pj-wrap 을 flex:1 로 늘리고 .pj-home 의
행을 1fr 로 확정해, 프로젝트 목록(좌)·내 업무(우)가 각자 안에서만 스크롤
하도록 변경. 커스텀 스크롤바는 트랙까지 연회색으로 그려 항상 보이게 하고
.pj-home-main 에도 적용.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-15 23:28:19 +09:00
parent 3596e79096
commit 872a369c7c
4 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/project/templates/project/inbox.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916o" /> <link rel="stylesheet" href="/static/project.css?v=20260916p" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %} {% endblock %}
app/modules/project/templates/project/index.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916o" /> <link rel="stylesheet" href="/static/project.css?v=20260916p" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %} {% endblock %}
app/modules/project/templates/project/project.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916o" /> <link rel="stylesheet" href="/static/project.css?v=20260916p" />
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host --> <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
<!-- 타임라인 vis-timeline — self-host --> <!-- 타임라인 vis-timeline — self-host -->
app/static/project.css
+34 -19
View File
@@ -43,9 +43,22 @@
.pj-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef0f2; color: #525860; font-size: 11px; font-weight: 600; } .pj-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef0f2; color: #525860; font-size: 11px; font-weight: 600; }
.pj-chip-sm { padding: 1px 6px; font-size: 10px; } .pj-chip-sm { padding: 1px 6px; font-size: 10px; }
/* ── 홈 ── */ /* ── 홈 — 프로젝트 상세와 같은 "한 화면 채움" 레이아웃. 페이지(.erp-page)는
.pj-home { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; } 스크롤하지 않고 프로젝트 목록(좌)·내 업무(우)가 각자 안에서만 스크롤.
@media (max-width: 980px) { .pj-home { grid-template-columns: 1fr; } } .erp-page 는 flex column 이라 .pj-wrap 을 flex:1 로 늘려 남은 높이를
확보하고, .pj-home 의 행을 1fr 로 확정해야 자식 height:100% 가 먹는다. */
.erp-page > .pj-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 8px; }
.pj-home {
flex: 1 1 auto; min-height: 0;
display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr);
gap: 28px; align-items: stretch;
}
.pj-home-main { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; padding-right: 4px; }
@media (max-width: 980px) {
.erp-page > .pj-wrap:not(.pj-project-view) { display: block; }
.pj-home { display: block; }
.pj-home-main { height: auto; overflow: visible; }
}
.pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; } .pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.pj-project-card { .pj-project-card {
@@ -116,11 +129,13 @@
.pj-section-head-done { margin-top: 22px; } .pj-section-head-done { margin-top: 22px; }
.pj-section-head-done h2 { font-size: 14px; color: #6b7280; } .pj-section-head-done h2 { font-size: 14px; color: #6b7280; }
/* max-height 는 항상 값을 갖는 안전한 fallback(홈 화면처럼 부모가 고정 /* 홈/프로젝트 상세 공통 "내 업무" 패널 — 부모 grid 행(1fr)에 맞춰 높이를
높이가 아닌 곳에서도 동작) — 프로젝트 상세 화면은 .pj-project-mytasks 가 확정하고 자기 안에서만 스크롤. 300px 는 padding 포함(border-box). */
더 구체적인 height:100% 로 덮어써서 화면 꽉 채움 레이아웃을 그대로 쓴다. */ .pj-home-side {
.pj-home-side { width: 300px; border-left: 1px solid #eef0f2; padding-left: 24px; max-height: calc(100vh - 160px); overflow-y: auto; } width: 300px; box-sizing: border-box; min-height: 0; height: 100%; overflow-y: auto;
@media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; } } border-left: 1px solid #eef0f2; padding-left: 24px; padding-right: 4px;
}
@media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; height: auto; overflow: visible; } }
.pj-mytask-list { list-style: none; margin: 0; padding: 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; } .pj-mytask a { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-radius: 8px; text-decoration: none; color: inherit; }
.pj-mytask a:hover { background: #f6f7f8; } .pj-mytask a:hover { background: #f6f7f8; }
@@ -155,26 +170,26 @@
스크롤바 때문(호버해야만 잠깐 보이는 스타일). 여기 자체 스크롤 패널들은 스크롤바 때문(호버해야만 잠깐 보이는 스타일). 여기 자체 스크롤 패널들은
막대가 항상 보이도록 커스텀 스크롤바를 그린다(윈도우 설정과 무관하게 막대가 항상 보이도록 커스텀 스크롤바를 그린다(윈도우 설정과 무관하게
고정 표시). */ 고정 표시). */
.pj-home-side, .pj-project-mytasks, .pj-side, .pj-board { .pj-home-side, .pj-home-main, .pj-project-mytasks, .pj-side, .pj-board {
scrollbar-width: thin; scrollbar-color: #c7c9cf transparent; scrollbar-width: thin; scrollbar-color: #b9bcc4 #f1f2f4;
} }
.pj-home-side::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar, .pj-home-side::-webkit-scrollbar, .pj-home-main::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar,
.pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 8px; height: 8px; } .pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 9px; height: 9px; }
.pj-home-side::-webkit-scrollbar-track, .pj-project-mytasks::-webkit-scrollbar-track, .pj-home-side::-webkit-scrollbar-track, .pj-home-main::-webkit-scrollbar-track, .pj-project-mytasks::-webkit-scrollbar-track,
.pj-side::-webkit-scrollbar-track, .pj-board::-webkit-scrollbar-track { background: transparent; } .pj-side::-webkit-scrollbar-track, .pj-board::-webkit-scrollbar-track { background: #f1f2f4; border-radius: 999px; }
.pj-home-side::-webkit-scrollbar-thumb, .pj-project-mytasks::-webkit-scrollbar-thumb, .pj-home-side::-webkit-scrollbar-thumb, .pj-home-main::-webkit-scrollbar-thumb, .pj-project-mytasks::-webkit-scrollbar-thumb,
.pj-side::-webkit-scrollbar-thumb, .pj-board::-webkit-scrollbar-thumb { .pj-side::-webkit-scrollbar-thumb, .pj-board::-webkit-scrollbar-thumb {
background-color: #c7c9cf; border-radius: 999px; background-color: #b9bcc4; border-radius: 999px;
} }
.pj-home-side::-webkit-scrollbar-thumb:hover, .pj-project-mytasks::-webkit-scrollbar-thumb:hover, .pj-home-side::-webkit-scrollbar-thumb:hover, .pj-home-main::-webkit-scrollbar-thumb:hover, .pj-project-mytasks::-webkit-scrollbar-thumb:hover,
.pj-side::-webkit-scrollbar-thumb:hover, .pj-board::-webkit-scrollbar-thumb:hover { background-color: #a7aab3; } .pj-side::-webkit-scrollbar-thumb:hover, .pj-board::-webkit-scrollbar-thumb:hover { background-color: #979ba5; }
@media (max-width: 1280px) { @media (max-width: 1280px) {
.pj-layout { grid-template-columns: 230px 1fr; } .pj-layout { grid-template-columns: 230px 1fr; }
.pj-project-mytasks { display: none; } .pj-project-mytasks { display: none; }
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.erp-page:has(> .pj-wrap) { max-width: 1550px; } .erp-page:has(> .pj-wrap) { max-width: 1550px; }
.pj-project-view { display: block; } .erp-page > .pj-wrap.pj-project-view { display: block; }
.pj-layout { display: block; height: auto; } .pj-layout { display: block; height: auto; }
.pj-side, .pj-main { height: auto; overflow: visible; } .pj-side, .pj-main { height: auto; overflow: visible; }
} }