feat(wall): Wallboard plein écran /wall — issue #14 de la feuille de route
Rotation automatique entre projets actifs (30 s), compteurs des six colonnes, cartes en vol avec âge, fermées du jour (journal), horloge; rafraîchissement en direct par le flux SSE (rechargement, aucune interaction à protéger) + filet de sécurité à 5 min. ?repo= fige un projet. Lien de navigation ajouté partout.
This commit is contained in:
Spark
@@ -20,6 +20,7 @@
|
||||
<a href="/activity" class="nav-pill active">📰 Activité</a>
|
||||
<a href="/briefing" class="nav-pill">📊 Briefing</a>
|
||||
<a href="/search" class="nav-pill">🔍 Recherche</a>
|
||||
<a href="/wall" class="nav-pill">🖥️ Wallboard</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
<a href="/my" class="nav-pill">👤 Mes issues</a>
|
||||
<a href="/activity" class="nav-pill">📰 Activité</a>
|
||||
<a href="/search" class="nav-pill">🔍 Recherche</a>
|
||||
<a href="/wall" class="nav-pill">🖥️ Wallboard</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
<a href="/activity" class="nav-pill">📰 Activité</a>
|
||||
<a href="/briefing" class="nav-pill">📊 Briefing</a>
|
||||
<a href="/search" class="nav-pill">🔍 Recherche</a>
|
||||
<a href="/wall" class="nav-pill">🖥️ Wallboard</a>
|
||||
<span class="badge">{{ groups|map(attribute='cards')|map('length')|sum }} cartes en cours</span>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/my" class="nav-pill active">👤 Mes issues</a>
|
||||
<a href="/activity" class="nav-pill">📰 Activité</a>
|
||||
<a href="/search" class="nav-pill">🔍 Recherche</a>
|
||||
<a href="/wall" class="nav-pill">🖥️ Wallboard</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<a href="/my" class="nav-pill">👤 Mes issues</a>
|
||||
<a href="/activity" class="nav-pill">📰 Activité</a>
|
||||
<a href="/search" class="nav-pill active">🔍 Recherche</a>
|
||||
<a href="/wall" class="nav-pill">🖥️ Wallboard</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kanbante — Wallboard</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body class="wall-body">
|
||||
{% if slides %}
|
||||
<div class="wall-stage" id="wall-stage">
|
||||
{% for slide in slides %}
|
||||
<section class="wall-slide{% if loop.first %} active{% endif %}">
|
||||
<header class="wall-head">
|
||||
<div>
|
||||
<div class="wall-kicker">📂 Projet</div>
|
||||
<h1 class="wall-project">{{ slide.full_name }}</h1>
|
||||
</div>
|
||||
<div class="wall-clock">
|
||||
<div class="wall-time" data-clock>--:--</div>
|
||||
<div class="wall-date" data-date></div>
|
||||
{% if not single and slides|length > 1 %}
|
||||
<div class="wall-rotation">{{ loop.index }} / {{ slides|length }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wall-counts">
|
||||
{% for col in columns %}
|
||||
<div class="wall-count" style="--col: {{ column_colors[col] }}">
|
||||
<span class="wall-count-n">{{ slide.counts[col] }}</span>
|
||||
<span class="wall-count-l">{{ column_labels[col] }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if slide.cards %}
|
||||
<ul class="wall-cards">
|
||||
{% for card in slide.cards %}
|
||||
<li class="wall-card">
|
||||
<span class="wall-card-col" style="--col: {{ column_colors[card.column] }}">{{ card.column_label }}</span>
|
||||
<span class="wall-card-title">#{{ card.number }} · {{ card.title }}</span>
|
||||
{% if card.age_days is not none and card.age_days >= 1 %}
|
||||
<span class="wall-card-age{% if card.aging %} hot{% endif %}">⏳ {{ card.age_days }} j</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p class="wall-idle">🌿 Rien en vol pour le moment — tout est au Backlog ou terminé.</p>
|
||||
{% endif %}
|
||||
|
||||
<footer class="wall-foot">
|
||||
<span>✅ Fermées aujourd'hui : <strong>{{ slide.closed_today }}</strong></span>
|
||||
<span>📋 Ouvertes : <strong>{{ slide.open_total }}</strong></span>
|
||||
<span class="wall-live">● EN DIRECT</span>
|
||||
</footer>
|
||||
</section>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="wall-empty">
|
||||
<h1>🖥️ Wallboard</h1>
|
||||
<p>Aucun projet actif à afficher{% if single %} pour ce dépôt{% endif %}.</p>
|
||||
<p class="wall-empty-hint">Astuce : <code>/wall?repo=Proprietaire/depot</code> fige un seul projet.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
<script src="/static/js/wall.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -893,3 +893,77 @@ footer {
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Wallboard (0.6.0) : affichage plein écran, lisible à 3 mètres ── */
|
||||
.wall-body {
|
||||
background: #0b1220;
|
||||
color: #e5ecf5;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
.wall-stage { position: relative; min-height: 100vh; }
|
||||
.wall-slide {
|
||||
display: none;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 4vh 4vw;
|
||||
flex-direction: column;
|
||||
gap: 3vh;
|
||||
}
|
||||
.wall-slide.active { display: flex; animation: wall-in 0.45s ease; }
|
||||
@keyframes wall-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
.wall-head {
|
||||
display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
|
||||
}
|
||||
.wall-kicker { font-size: 1rem; letter-spacing: 0.22em; text-transform: uppercase; color: #8fa3bf; }
|
||||
.wall-project { font-size: clamp(2.2rem, 5.2vw, 4.2rem); margin: 0.4rem 0 0; line-height: 1.05; }
|
||||
.wall-clock { text-align: right; }
|
||||
.wall-time { font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 800; line-height: 1; }
|
||||
.wall-date { color: #8fa3bf; font-size: 1.15rem; margin-top: 0.35rem; text-transform: capitalize; }
|
||||
.wall-rotation { color: #5b6b84; margin-top: 0.4rem; font-size: 1rem; }
|
||||
.wall-counts {
|
||||
display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
|
||||
}
|
||||
.wall-count {
|
||||
border: 1.5px solid var(--col);
|
||||
border-top: 6px solid var(--col);
|
||||
border-radius: 14px;
|
||||
padding: 14px 10px 12px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
.wall-count-n { display: block; font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; }
|
||||
.wall-count-l { display: block; color: #aebdd2; font-size: clamp(0.78rem, 1.25vw, 1.02rem); margin-top: 2px; }
|
||||
.wall-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
|
||||
.wall-card {
|
||||
display: flex; align-items: center; gap: 18px;
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
border-radius: 14px;
|
||||
padding: 16px 20px;
|
||||
font-size: clamp(1.15rem, 2.1vw, 1.7rem);
|
||||
}
|
||||
.wall-card-col {
|
||||
border: 1.5px solid var(--col); color: var(--col);
|
||||
border-radius: 999px; padding: 4px 14px;
|
||||
font-size: 0.62em; font-weight: 700; white-space: nowrap;
|
||||
}
|
||||
.wall-card-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.wall-card-age { color: #fbbf24; font-weight: 700; white-space: nowrap; }
|
||||
.wall-card-age.hot { color: #f87171; }
|
||||
.wall-idle { font-size: 1.5rem; color: #8fa3bf; }
|
||||
.wall-foot {
|
||||
margin-top: auto;
|
||||
display: flex; gap: 36px; flex-wrap: wrap;
|
||||
font-size: clamp(1rem, 1.7vw, 1.35rem); color: #aebdd2;
|
||||
}
|
||||
.wall-live { color: #34d399; font-weight: 700; letter-spacing: 0.08em; }
|
||||
.wall-empty {
|
||||
min-height: 100vh; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; gap: 10px; text-align: center;
|
||||
color: #aebdd2; padding: 24px;
|
||||
}
|
||||
.wall-empty h1 { color: #e5ecf5; font-size: 2.6rem; margin: 0; }
|
||||
.wall-empty code { background: rgba(255,255,255,0.08); padding: 2px 8px; border-radius: 6px; }
|
||||
@media (max-width: 900px) {
|
||||
.wall-counts { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Kanbante — Wallboard: slide rotation, clock, live refresh.
|
||||
*
|
||||
* The wall is a display, not a workspace: no interaction to protect,
|
||||
* so a realtime event simply reloads the page (plus a slow safety
|
||||
* reload in case the stream drops silently).
|
||||
*/
|
||||
(function () {
|
||||
var slides = Array.from(document.querySelectorAll('.wall-slide'));
|
||||
var ROTATE_MS = 30000;
|
||||
var current = 0;
|
||||
|
||||
if (slides.length > 1) {
|
||||
setInterval(function () {
|
||||
slides[current].classList.remove('active');
|
||||
current = (current + 1) % slides.length;
|
||||
slides[current].classList.add('active');
|
||||
}, ROTATE_MS);
|
||||
}
|
||||
|
||||
function tickClock() {
|
||||
var now = new Date();
|
||||
var time = now.toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit' });
|
||||
var date = now.toLocaleDateString('fr-CA', {
|
||||
weekday: 'long', day: 'numeric', month: 'long',
|
||||
});
|
||||
document.querySelectorAll('[data-clock]').forEach(function (el) { el.textContent = time; });
|
||||
document.querySelectorAll('[data-date]').forEach(function (el) { el.textContent = date; });
|
||||
}
|
||||
tickClock();
|
||||
setInterval(tickClock, 15000);
|
||||
|
||||
// Live: any board activity refreshes the wall.
|
||||
try {
|
||||
var source = new EventSource('/api/stream');
|
||||
source.onmessage = function () { location.reload(); };
|
||||
} catch (err) {
|
||||
console.warn('Wallboard live stream unavailable:', err);
|
||||
}
|
||||
// Safety net.
|
||||
setTimeout(function () { location.reload(); }, 5 * 60 * 1000);
|
||||
})();
|
||||
Reference in New Issue
Block a user