style(project): 멤버 배정 후보 카드를 아이콘/이름/체크박스 세로 배치로

아이콘 - 이름 - 체크박스 순 세로 스택으로 바꾸고 아이콘 크기를 2배(20px→
40px, 아바타 18px→36px)로 키움. 새 프로젝트 모달의 멤버 선택(가로 한 줄)
은 그대로 두고 pj-member-pick-stacked 를 따로 둬서 멤버 배정 모달에만 적용.
This commit is contained in:
2026-09-16 13:10:24 +09:00
parent 22c4997342
commit 81c8a77f89
5 changed files with 22 additions and 9 deletions
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260917f" />
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
@@ -45,5 +45,5 @@
{% endif %}
</div>
<script src="/static/project.js?v=20260917g" defer></script>
<script src="/static/project.js?v=20260917h" defer></script>
{% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260917f" />
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
@@ -393,5 +393,5 @@
<script>
window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
</script>
<script src="/static/project.js?v=20260917g" defer></script>
<script src="/static/project.js?v=20260917h" defer></script>
{% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260917f" />
<link rel="stylesheet" href="/static/project.css?v=20260917g" />
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
<!-- 타임라인 vis-timeline — self-host -->
@@ -461,5 +461,5 @@
</script>
<script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
<script src="/static/project.js?v=20260917g" defer></script>
<script src="/static/project.js?v=20260917h" defer></script>
{% endblock %}
+12
View File
@@ -547,6 +547,18 @@
.pj-member-pick { display: inline-flex !important; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500 !important; color: #333; width: auto !important; margin: 0 !important; }
.pj-member-pick input { width: auto !important; margin: 0 !important; }
/* 멤버 배정 모달의 후보 목록 — 위에서부터 아이콘 → 이름 → 체크박스 세로 배치,
아이콘은 다른 곳(pj-gicon-sm)보다 2배 크게(20px→40px, 아바타 18px→36px). */
.pj-member-pick-stacked {
flex-direction: column !important; gap: 4px !important;
padding: 8px 6px; border-radius: 8px;
}
.pj-member-pick-stacked:hover { background: #f5f6f8; }
.pj-member-pick-avatar { display: flex; }
.pj-member-pick-avatar .pj-member-pick-icon.material-symbols-outlined { font-size: 40px; }
.pj-member-pick-avatar img.pj-member-pick-icon { width: 36px; height: 36px; }
.pj-member-pick-stacked .pj-member-pick-name { font-size: 12.5px; }
/* ── 댓글만 보는 채팅형 팝업(카톡 대화창 느낌) ── */
/* 크기 고정(500x850) — 내용이 많아도 팝업 크기는 그대로, 목록만 스크롤. */
.pj-modal-chat {
+4 -3
View File
@@ -2633,9 +2633,10 @@
const existing = new Set(members.map(function (m) { return m.user_email; }));
const candidates = res.users.filter(function (u) { return !existing.has(u.email); });
box.innerHTML = candidates.length ? candidates.map(function (u) {
return '<label class="pj-member-pick">' +
'<input type="checkbox" value="' + u.email + '" data-name="' + escapeHtml(u.name) + '" /> ' +
avatarHtml(u.email, "pj-gicon-sm") + " " + escapeHtml(u.id) +
return '<label class="pj-member-pick pj-member-pick-stacked">' +
'<span class="pj-member-pick-avatar">' + avatarHtml(u.email, "pj-member-pick-icon") + "</span>" +
'<span class="pj-member-pick-name">' + escapeHtml(u.id) + "</span>" +
'<input type="checkbox" value="' + u.email + '" data-name="' + escapeHtml(u.name) + '" />' +
"</label>";
}).join("") : "<span class='pj-empty-sm'>배정 가능한 직원이 없습니다(권한 미부여 또는 전원 배정됨)</span>";
} catch (e) {