Spark
dbda3bcf5a
- en-tête vitré sticky, navigation en pastilles avec état actif, logo en tuile dégradée, fil d'Ariane projet - dashboard: hero + tuiles de synthèse (actifs, fermées/déplacements 30 j, cycle moyen), barre de progression par projet, états vides guidés, raccourci clavier / - board: sélecteur de milestones + bandeau de progression, colonnes à défilement indépendant, placeholders de colonnes vides, hint sur le panneau de notes, toast et drawer animés - live.js: recharge douce conditionnelle (visible, pas de drawer, pas de saisie, pas de drag) sinon pastille d'actualisation - accessibilité: anneau de focus visible, prefers-reduced-motion, responsive retravaillé; board.js: drapeau de drag partagé avec live.js + raccourci / vers le filtre
181 lines
8.8 KiB
HTML
181 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="csrf-token" content="{{ csrf_token }}">
|
||
<title>{{ repo }} — Kanbante</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<script src="/static/vendor/htmx.min.js"></script>
|
||
<script src="/static/vendor/sortable.min.js"></script>
|
||
<script src="/static/vendor/marked.min.js"></script>
|
||
<script src="/static/vendor/purify.min.js"></script>
|
||
<script src="/static/js/board.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<header class="app-header">
|
||
<div class="brand">
|
||
<a href="/" class="logo" aria-label="Kanbante — accueil"><span class="logo-mark">📋</span><span class="gradient-text">Kanbante</span></a>
|
||
<span class="crumb"><span class="sep">/</span> {{ owner }} / <strong>{{ repo }}</strong></span>
|
||
</div>
|
||
<nav class="nav-pills">
|
||
<a href="/" class="nav-pill">🏠 Projets</a>
|
||
<a href="/focus" class="nav-pill">🎯 Focus</a>
|
||
<a href="/activity" class="nav-pill">📰 Activité</a>
|
||
{% if repo_info.html_url %}
|
||
<a href="{{ repo_info.html_url }}" target="_blank" class="nav-pill">🔗 Gitea ↗</a>
|
||
{% endif %}
|
||
</nav>
|
||
</header>
|
||
|
||
{% if milestones %}
|
||
<div class="milestone-bar">
|
||
<span class="milestone-label">🎯 Milestone</span>
|
||
<a href="/board/{{ owner }}/{{ repo }}" class="milestone-chip{% if not milestone_param %} active{% endif %}">Toutes</a>
|
||
{% for m in milestones %}
|
||
<a href="/board/{{ owner }}/{{ repo }}?milestone={{ m.title|urlencode }}"
|
||
class="milestone-chip{% if milestone_param == m.title or milestone_param == m.id|string %} active{% endif %}">{{ m.title }}</a>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
{% if milestone_progress %}
|
||
<div class="milestone-banner">
|
||
<div class="milestone-info">
|
||
<strong>🎯 {{ milestone_progress.title }}</strong>
|
||
{% if milestone_progress.due_on %}
|
||
<span class="milestone-due">📅 échéance {{ milestone_progress.due_on[:10] }}</span>
|
||
{% endif %}
|
||
<span class="milestone-count">{{ milestone_progress.closed }}/{{ milestone_progress.total }} issues terminées</span>
|
||
</div>
|
||
<div class="progress progress-lg"><span style="width: {{ milestone_progress.pct }}%"></span></div>
|
||
<span class="milestone-pct">{{ milestone_progress.pct }}%</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Toolbar: text + label filters, and issue creation (Gitea-backed) -->
|
||
<div class="board-toolbar">
|
||
<input type="text" id="card-filter" placeholder="🔍 Filtrer les cartes... ( / )">
|
||
<select id="label-filter">
|
||
<option value="">Toutes les étiquettes</option>
|
||
{% for label in labels %}
|
||
<option value="{{ label.name }}">{{ label.name }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<form id="create-issue-form">
|
||
<input type="text" id="new-issue-title" maxlength="255"
|
||
placeholder="➕ Nouvelle issue (titre)..." required>
|
||
<button type="submit" class="btn-save btn-inline">Créer</button>
|
||
</form>
|
||
</div>
|
||
|
||
<main class="board-container">
|
||
<div class="kanban-board">
|
||
{% for col in ['backlog','todo','in_progress','review','done'] %}
|
||
<div class="kanban-column"
|
||
data-column="{{ col }}">
|
||
<div class="column-header" style="border-top: 3px solid {{ column_colors[col] }}">
|
||
<span class="column-title">{{ column_labels[col] }}</span>
|
||
{% set limit = wip_limits.get(col) %}
|
||
<span class="column-count{% if limit and columns[col]|length > limit %} over{% endif %}"
|
||
{% if limit %}data-limit="{{ limit }}" title="Limite WIP : {{ limit }}"{% endif %}>{% if limit %}{{ columns[col]|length }}/{{ limit }}{% else %}{{ columns[col]|length }}{% endif %}</span>
|
||
</div>
|
||
<div class="column-cards" data-column="{{ col }}">
|
||
{% if not columns[col] %}
|
||
<p class="column-empty">Glissez une carte ici</p>
|
||
{% endif %}
|
||
{% for issue in columns[col] %}
|
||
<div class="kanban-card"
|
||
data-issue="{{ issue.number }}"
|
||
data-repo="{{ full_name }}"
|
||
data-title="{{ issue.title|lower }}"
|
||
data-labels="{{ issue.labels|map(attribute='name')|join(',')|lower }}">
|
||
<div class="card-id">
|
||
#{{ issue.number }}
|
||
{% if issue.html_url %}
|
||
<a href="{{ issue.html_url }}" target="_blank" title="Ouvrir dans Gitea">↗</a>
|
||
{% endif %}
|
||
</div>
|
||
<div class="card-title">{{ issue.title }}</div>
|
||
{% if issue.labels %}
|
||
<div class="card-labels">
|
||
{% for label in issue.labels %}
|
||
<span class="label-tag" style="background: #{{ label.color }}30; color: #{{ label.color }}">
|
||
{{ label.name }}
|
||
</span>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
<div class="card-meta">
|
||
{% if issue.assignee %}
|
||
<img src="{{ issue.assignee.avatar_url }}" class="avatar" alt="{{ issue.assignee.login }}">
|
||
{% endif %}
|
||
<span class="card-date">{{ issue.created_at[:10] }}</span>
|
||
{% set age = ages.get(issue.number) %}
|
||
{% if age and age.days >= aging_days %}
|
||
<span class="age-badge{% if age.days >= aging_days * 2 %} stale{% endif %}"
|
||
title="Dans cette colonne depuis le {{ age.since[:10] }}">⏳ {{ age.days }} j</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- Notes panel -->
|
||
<aside class="notes-panel">
|
||
<h3>📝 Notes du projet</h3>
|
||
<p class="notes-hint">Contexte libre, propre à Kanbante — il ne part pas dans Gitea.</p>
|
||
<form hx-post="/api/notes" hx-swap="none"
|
||
hx-on::after-request="if(event.detail.successful) showNotesSaved()">
|
||
<input type="hidden" name="repo_full_name" value="{{ full_name }}">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||
<textarea name="note" rows="10"
|
||
placeholder="Notes, idées, liens...">{{ notes }}</textarea>
|
||
<button type="submit" class="btn-save">💾 Sauvegarder</button>
|
||
</form>
|
||
</aside>
|
||
</main>
|
||
|
||
<!-- Card detail drawer: issue body, comments, comment form -->
|
||
<div id="detail-overlay" class="detail-overlay" hidden></div>
|
||
<aside id="card-detail" class="card-detail" hidden>
|
||
<div class="detail-head">
|
||
<span id="detail-number" class="card-id"></span>
|
||
<span id="detail-state" class="chip"></span>
|
||
<button id="detail-close" class="btn-sm" type="button">✕</button>
|
||
</div>
|
||
<h2 id="detail-title"></h2>
|
||
<div id="detail-meta" class="detail-meta"></div>
|
||
<div id="detail-labels" class="card-labels"></div>
|
||
<div id="detail-body" class="detail-body"></div>
|
||
<h3 class="detail-comments-title">💬 Commentaires</h3>
|
||
<div id="detail-comments"></div>
|
||
<form id="comment-form">
|
||
<textarea id="comment-body" rows="3" maxlength="10000"
|
||
placeholder="Écrire un commentaire (markdown)..."></textarea>
|
||
<button type="submit" class="btn-save">💬 Commenter dans Gitea</button>
|
||
</form>
|
||
<p class="detail-foot"><a id="detail-gitea-link" href="#" target="_blank">Ouvrir dans Gitea ↗</a></p>
|
||
</aside>
|
||
|
||
<footer>
|
||
<span>{{ full_name }}</span>
|
||
{% if repo_info.updated_at %}
|
||
<span>Mis à jour {{ repo_info.updated_at[:10] }}</span>
|
||
{% endif %}
|
||
</footer>
|
||
<script src="/static/js/live.js" defer></script>
|
||
<script>
|
||
function showNotesSaved() {
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast';
|
||
toast.textContent = '✅ Notes sauvegardées';
|
||
document.body.appendChild(toast);
|
||
setTimeout(() => toast.remove(), 2000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|