Kahroba/team-presence
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand kanban assignment and filtering
Test and publish / verify (push) Successful in 2m22s
Details

Browse Source
This commit is contained in:
nfel
2026-07-29 13:53:31 +03:30
parent e1475d0df0
commit 5a3ca4eb40
7 changed files with 432 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/app/static/style.css
+55 -9
View File
@@ -262,7 +262,7 @@ blockquote { margin: 10px 0; padding-left: 12px; border-left: 2px solid #d8dfdb;
.new-task-panel > summary { list-style: none; user-select: none; }
.new-task-panel > summary::-webkit-details-marker { display: none; }
.new-task-panel[open] > summary { background: var(--ink); }
.new-task-form { position: absolute; z-index: 60; top: calc(100% + 9px); right: 0; display: grid; gap: 14px; width: min(430px, calc(100vw - 40px)); padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); box-shadow: 0 22px 60px rgba(24, 36, 31, .22); }
.new-task-form { position: absolute; z-index: 60; top: calc(100% + 9px); right: 0; display: grid; gap: 14px; width: min(430px, calc(100vw - 40px)); max-height: calc(100vh - 110px); padding: 22px; overflow-y: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--white); box-shadow: 0 22px 60px rgba(24, 36, 31, .22); }
.new-task-form-head h2 { margin-bottom: 0; }
.tag-manager-panel { position: relative; }
.tag-manager-panel > summary { list-style: none; user-select: none; }
@@ -304,6 +304,26 @@ blockquote { margin: 10px 0; padding-left: 12px; border-left: 2px solid #d8dfdb;
.inline-tag-fields { display: grid; grid-template-columns: 1fr 105px; gap: 8px; margin-top: 10px; }
.inline-tag-fields input, .inline-tag-fields select { margin-top: 5px; padding-top: 9px; padding-bottom: 9px; background: var(--white); }
.inline-tag-creator > small { display: block; margin-top: 7px; color: var(--muted); font-size: .57rem; }
.assignee-picker, .compact-assignee-picker { margin: 0; padding: 0; border: 0; }
.assignee-picker legend, .compact-assignee-picker legend { width: 100%; margin-bottom: 8px; color: #49564f; font-size: .72rem; font-weight: 700; }
.assignee-picker legend small { float: right; color: #9aa39e; font-weight: 500; }
.assignee-picker > div, .compact-assignee-picker > div { display: flex; flex-wrap: wrap; gap: 6px; }
.assignee-picker label, .compact-assignee-picker label { position: relative; cursor: pointer; }
.assignee-picker input, .compact-assignee-picker input { position: absolute; opacity: 0; pointer-events: none; }
.assignee-picker label > span, .compact-assignee-picker label > span { display: inline-flex; gap: 6px; align-items: center; min-height: 31px; padding: 4px 9px 4px 5px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--muted); font-size: .59rem; font-weight: 700; }
.assignee-picker label > span .avatar, .compact-assignee-picker label > span .avatar { width: 21px; height: 21px; font-size: .5rem; }
.assignee-picker input:checked + span, .compact-assignee-picker input:checked + span { border-color: #5f8f78; background: #edf6f1; color: var(--green-2); box-shadow: inset 0 0 0 1px #5f8f78; }
.assignee-picker input:focus-visible + span, .compact-assignee-picker input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.board-filter-bar { display: flex; gap: 16px; align-items: center; max-width: 1380px; margin: 0 auto 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); box-shadow: var(--shadow); }
.board-filter-title { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; padding-right: 15px; border-right: 1px solid var(--line); color: var(--ink); font-size: .66rem; }
.board-filter-title span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: var(--mint); color: var(--green); font-size: .9rem; }
.board-filter-bar form { display: grid; grid-template-columns: repeat(3, minmax(135px, 180px)) auto; gap: 8px; align-items: end; }
.board-filter-bar label { min-width: 0; color: var(--muted); font-size: .52rem; }
.board-filter-bar label > span { display: block; padding-left: 2px; }
.board-filter-bar select { min-height: 33px; margin-top: 3px; padding: 6px 27px 6px 9px; border-radius: 8px; background-color: var(--paper); font-size: .59rem; }
.board-filter-actions { display: flex; gap: 7px; align-items: center; min-height: 33px; }
.board-filter-actions .button { min-height: 33px; padding: 6px 13px; font-size: .59rem; }
.board-filter-actions .text-button { padding: 6px 2px; color: var(--muted); font-size: .57rem; }
.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(270px, 1fr)); gap: 14px; align-items: start; max-width: 1380px; margin: 0 auto; overflow-x: auto; padding-bottom: 18px; }
.kanban-column { min-width: 270px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #eef2ef; }
.kanban-column-head { display: flex; justify-content: space-between; align-items: start; min-height: 51px; padding: 4px 5px 12px; }
@@ -322,24 +342,39 @@ blockquote { margin: 10px 0; padding-left: 12px; border-left: 2px solid #d8dfdb;
.kanban-card.dragging { opacity: .45; transform: rotate(1.5deg); }
.kanban-card.moving { opacity: .35; pointer-events: none; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; }
.card-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.card-topline { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 9px; }
.card-signals { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.task-id { color: #9aa39e; font-size: .58rem; font-weight: 700; }
.task-due { padding: 4px 6px; border-radius: 6px; background: var(--sand); color: #786039; font-size: .55rem; font-weight: 700; }
.importance-badge { padding: 4px 6px; border-radius: 6px; background: var(--paper); color: var(--muted); font-size: .53rem; font-weight: 800; text-transform: uppercase; }
.importance-badge.low { background: #edf0ee; color: #68736e; }
.importance-badge.high { background: #f6eddc; color: #87662c; }
.importance-badge.urgent { background: #f5e6e4; color: #9d4a44; }
.kanban-card h3 { margin-bottom: 7px; font-size: .84rem; line-height: 1.35; }
.kanban-card > p { display: -webkit-box; overflow: hidden; margin-bottom: 13px; color: #64706a; font-size: .68rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.task-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.task-assignees { display: flex; min-width: 0; flex-wrap: wrap; gap: 7px; }
.task-assignee { display: flex; min-width: 0; gap: 6px; align-items: center; color: #53605a; font-size: .61rem; font-weight: 700; }
.task-assignee i { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--blue); color: #4d6e94; font-size: .59rem; font-style: normal; }
.task-assignee i.avatar { width: 24px; height: 24px; }
.task-assignee span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-assignee.unassigned { color: var(--muted); font-weight: 500; }
.task-creator { overflow: hidden; color: #9aa39e; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
.card-tag-editor { position: relative; margin-top: 9px; }
.card-tag-editor > summary { width: max-content; color: var(--muted); font-size: .56rem; font-weight: 700; cursor: pointer; list-style: none; text-decoration: underline; }
.card-tag-editor > summary::-webkit-details-marker { display: none; }
.card-tag-editor form { position: absolute; z-index: 8; top: calc(100% + 5px); left: -7px; width: 230px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 12px 28px rgba(24, 36, 31, .2); }
.card-tag-editor form .button { min-height: 31px; margin-top: 10px; font-size: .62rem; }
.task-actions { display: flex; justify-content: space-between; align-items: center; margin: 11px -3px -5px; }
.card-controls { margin: 10px -3px -5px; }
.card-controls > summary { display: flex; justify-content: space-between; align-items: center; padding: 5px 3px; color: var(--muted); font-size: .57rem; font-weight: 700; cursor: pointer; list-style: none; }
.card-controls > summary::-webkit-details-marker { display: none; }
.card-controls > summary i { font-size: .8rem; font-style: normal; transition: transform .15s ease; }
.card-controls[open] > summary i { transform: rotate(180deg); }
.card-controls-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 8px; border-top: 1px dashed var(--line); }
.card-tag-editor, .card-detail-editor { position: relative; }
.card-tag-editor > summary, .card-detail-editor > summary { width: max-content; color: var(--muted); font-size: .56rem; font-weight: 700; cursor: pointer; list-style: none; text-decoration: underline; }
.card-tag-editor > summary::-webkit-details-marker, .card-detail-editor > summary::-webkit-details-marker { display: none; }
.card-tag-editor form, .card-detail-editor form { position: absolute; z-index: 8; top: calc(100% + 5px); left: -7px; width: 250px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 12px 28px rgba(24, 36, 31, .2); }
.card-tag-editor form .button, .card-detail-editor form .button { min-height: 31px; margin-top: 10px; font-size: .62rem; }
.card-detail-editor form { display: grid; gap: 10px; width: 270px; }
.compact-assignee-picker > div { max-height: 120px; overflow-y: auto; }
.card-detail-editor select { margin-top: 5px; padding-top: 7px; padding-bottom: 7px; }
.task-actions { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.task-actions > form:first-child { display: flex; gap: 4px; align-items: center; }
.task-actions select { width: auto; min-width: 104px; margin: 0; padding: 5px 25px 5px 7px; border: 0; background-color: var(--paper); font-size: .58rem; font-weight: 700; }
.task-actions .text-button { margin: 0; }
@@ -586,12 +621,17 @@ html[data-theme="dark"] .metric.pending,
html[data-theme="dark"] .pending-icon { background: #453820; color: #e3bd72; }
html[data-theme="dark"] .new-task-form { box-shadow: 0 22px 65px rgba(0, 0, 0, .52); }
html[data-theme="dark"] .tag-manager,
html[data-theme="dark"] .card-tag-editor form { box-shadow: 0 22px 65px rgba(0, 0, 0, .52); }
html[data-theme="dark"] .card-tag-editor form,
html[data-theme="dark"] .card-detail-editor form { box-shadow: 0 22px 65px rgba(0, 0, 0, .52); }
html[data-theme="dark"] .assignee-picker input:checked + span,
html[data-theme="dark"] .compact-assignee-picker input:checked + span { border-color: #5c9b7b; background: #1b3027; color: #9ed4b9; }
html[data-theme="dark"] .kanban-column { background: #141d18; }
html[data-theme="dark"] .kanban-card { border-color: #35443d; box-shadow: 0 4px 13px rgba(0, 0, 0, .22); }
html[data-theme="dark"] .kanban-card > p { color: #aab6b0; }
html[data-theme="dark"] .task-assignee { color: #bdc8c2; }
html[data-theme="dark"] .task-due { background: #3b3222; color: #dec18b; }
html[data-theme="dark"] .importance-badge.high { background: #453820; color: #e3bd72; }
html[data-theme="dark"] .importance-badge.urgent { background: #432725; color: #efa09a; }
html[data-theme="dark"] .kanban-cards.drag-over { background: rgba(107, 172, 142, .1); }
@media (max-width: 980px) {
@@ -678,6 +718,12 @@ html[data-theme="dark"] .kanban-cards.drag-over { background: rgba(107, 172, 142
.tag-manager { position: fixed; top: 76px; right: 15px; left: 15px; width: auto; max-height: calc(100vh - 100px); overflow-y: auto; }
.tag-create-form { grid-template-columns: 1fr 1fr; }
.tag-create-form .button { grid-column: 1 / -1; }
.board-filter-bar { display: block; padding: 10px; }
.board-filter-title { margin-bottom: 9px; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }
.board-filter-title span { width: 27px; height: 27px; }
.board-filter-bar form { grid-template-columns: 1fr 1fr; }
.board-filter-bar form > label:nth-child(3) { grid-column: 1 / -1; }
.board-filter-actions { justify-content: flex-end; }
.kanban-board { grid-template-columns: repeat(4, 82vw); margin-right: -15px; padding-right: 0; padding-left: 15px; scroll-snap-type: x mandatory; }
.kanban-column { scroll-snap-align: start; }
.archived-card { align-items: flex-start; flex-direction: column; gap: 11px; }