Projets/kanbante
1
1
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases 42 Wiki Activity

feat(frontend): panneau détail de carte, badges d'âge, limites WIP

Browse Source 
- drawer de détail: corps markdown rendu (marked + DOMPurify
  vendorés), commentaires, formulaire de commentaire vers Gitea;
  clic distingué du drag par la distance du pointeur
- badges ⏳ N j au-delà du seuil d'âge (rouge au double)
- en-têtes de colonnes: n/limite, classe .over en rouge, toast
  d'avertissement au dépôt dans une colonne saturée
- page activity.html, liens Activité dans dashboard et board
This commit is contained in:
Spark
2026-10-11 10:05:51 -04:00
parent a6d2ed9eae
commit 9bf24da04e
7 changed files with 321 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/style.css
+87
View File
@@ -382,6 +382,93 @@ footer {
.error-box h2 { margin-bottom: 12px; }
.error-box p { color: var(--text2); margin-bottom: 16px; line-height: 1.5; }
/* Aging badges + WIP over-limit */
.age-badge {
background: color-mix(in srgb, var(--yellow) 18%, transparent);
color: var(--yellow);
padding: 1px 7px;
border-radius: 10px;
font-weight: 600;
}
.age-badge.stale {
background: color-mix(in srgb, var(--red) 18%, transparent);
color: var(--red);
}
.column-count.over {
background: color-mix(in srgb, var(--red) 20%, transparent);
color: var(--red);
font-weight: 700;
}
/* Card detail drawer */
.detail-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 200;
}
.card-detail {
position: fixed; top: 0; right: 0;
width: min(480px, 94vw); height: 100vh;
background: var(--surface);
border-left: 1px solid var(--border);
z-index: 201;
padding: 20px;
overflow-y: auto;
box-shadow: var(--shadow);
}
.detail-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.detail-head .btn-sm { margin-left: auto; }
.card-detail h2 { font-size: 1.15rem; line-height: 1.35; margin-bottom: 8px; }
.detail-meta { color: var(--text2); font-size: 0.85rem; margin-bottom: 10px; }
.detail-body {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
font-size: 0.9rem;
line-height: 1.55;
margin: 12px 0;
word-break: break-word;
}
.detail-body p { margin-bottom: 10px; }
.detail-body pre { background: var(--surface2); padding: 10px; border-radius: 6px; overflow-x: auto; }
.detail-body code { font-size: 0.82rem; }
.detail-empty { color: var(--text2); font-style: italic; }
.detail-comments-title { font-size: 0.95rem; margin: 16px 0 10px; }
.comment {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 8px;
}
.comment-head { font-size: 0.75rem; color: var(--text2); margin-bottom: 6px; }
.comment-body { font-size: 0.88rem; line-height: 1.5; word-break: break-word; }
#comment-form textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
padding: 10px;
font-family: inherit;
font-size: 0.88rem;
resize: vertical;
}
.detail-foot { margin-top: 14px; font-size: 0.85rem; }
/* Activity feed */
.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-item {
display: flex; gap: 12px; align-items: baseline;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
font-size: 0.9rem;
}
.activity-date { color: var(--text2); font-size: 0.78rem; margin-left: 8px; }
/* Responsive */
@media (max-width: 768px) {
.board-container { flex-direction: column; }