feat(ui): en-tête Projets professionnel — titre sobre, bande KPI unifiée, barre d'outils unique
- Titre « Projets » + sous-titre discret (fini le Bonjour 👋),
en-tête deux fois plus compact.
- Les 4 statistiques deviennent une bande KPI bordée unique
(séparateurs fins, chiffres tabulaires, KPI journal cliquables
vers /activity).
- Onglets/filtre/tri/regroupement/vue réunis dans UNE barre :
contrôle segmenté avec pastilles de compte, filtre rectangle.
Crochets JS/Alpine inchangés ; .stat-tile conservée (briefing).
This commit is contained in:
Spark
@@ -11,16 +11,21 @@
|
||||
<body>
|
||||
{% include "_header.html" %}
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<h2>Bonjour 👋 Voici vos projets Gitea, en un coup d'œil.</h2>
|
||||
<p>Glissez les cartes, suivez ce qui avance, et laissez Gitea rester la source de vérité.</p>
|
||||
</div>
|
||||
<div class="stat-tiles">
|
||||
<div class="stat-tile"><span class="stat-num">{{ active_repos|length }}</span><span class="stat-label">projets actifs</span></div>
|
||||
<div class="stat-tile"><span class="stat-num">{{ metrics.closed }}</span><span class="stat-label">issues fermées · 30 j</span></div>
|
||||
<div class="stat-tile"><span class="stat-num">{{ metrics.moved }}</span><span class="stat-label">déplacements · 30 j</span></div>
|
||||
<div class="stat-tile"><span class="stat-num">{% if metrics.avg_cycle_days is not none %}{{ metrics.avg_cycle_days }} j{% else %}—{% endif %}</span><span class="stat-label">temps de cycle moyen</span></div>
|
||||
<!-- En-tête de page (refonte 0.20.0) : titre sobre, bande KPI
|
||||
unifiée, puis UNE barre d'outils (dans <main>) qui regroupe
|
||||
onglets, filtre, tri et vue — fini les rangées éparses. -->
|
||||
<section class="page-head">
|
||||
<div class="page-head-row">
|
||||
<div class="page-title">
|
||||
<h1>Projets</h1>
|
||||
<p class="page-sub">Vue d'ensemble de vos dépôts Gitea — Gitea reste la source de vérité.</p>
|
||||
</div>
|
||||
<div class="kpi-strip" aria-label="Indicateurs des 30 derniers jours">
|
||||
<div class="kpi"><span class="kpi-value">{{ active_repos|length }}</span><span class="kpi-label">Projets actifs</span></div>
|
||||
<a class="kpi" href="/activity"><span class="kpi-value">{{ metrics.closed }}</span><span class="kpi-label">Issues fermées · 30 j</span></a>
|
||||
<a class="kpi" href="/activity"><span class="kpi-value">{{ metrics.moved }}</span><span class="kpi-label">Déplacements · 30 j</span></a>
|
||||
<div class="kpi"><span class="kpi-value">{% if metrics.avg_cycle_days is not none %}{{ metrics.avg_cycle_days }}<span class="kpi-unit"> j</span>{% else %}—{% endif %}</span><span class="kpi-label">Temps de cycle moyen</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -40,31 +45,22 @@
|
||||
}
|
||||
</script>
|
||||
<main x-data="dashState()">
|
||||
<!-- Tabs: "actif" = mis à jour dans la fenêtre glissante;
|
||||
"archivé" = le vrai drapeau Gitea (repo.archived). -->
|
||||
<div class="tabs">
|
||||
<button :class="{ active: tab === 'active' }" @click="tab = 'active'">
|
||||
🟢 Actifs ({{ active_repos|length }})
|
||||
</button>
|
||||
<button :class="{ active: tab === 'inactive' }" @click="tab = 'inactive'">
|
||||
💤 Inactifs ({{ inactive_repos|length }})
|
||||
</button>
|
||||
<button :class="{ active: tab === 'archived' }" @click="tab = 'archived'">
|
||||
🗄️ Archivés ({{ archived_repos|length }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search: the repo name lives in a data-* attribute (HTML-escaped
|
||||
by Jinja), never interpolated into a JS string literal. -->
|
||||
<div class="search-bar">
|
||||
<input type="text" id="project-search" placeholder="🔍 Filtrer les projets..." x-model="search" autocomplete="off">
|
||||
<kbd class="kbd">/</kbd>
|
||||
</div>
|
||||
|
||||
<!-- Outils d'affichage (#21 tri/regroupement, #22 vue liste) :
|
||||
pilotés par dashboard.js, préférences en localStorage. -->
|
||||
<div class="dash-tools">
|
||||
<label class="dash-tool">↕️ Tri
|
||||
<!-- Barre d'outils unique (0.20.0) : onglets segmentés,
|
||||
filtre, tri/regroupement (#21) et vue (#22) alignés.
|
||||
Onglets : "actif" = fenêtre glissante ; "archivé" =
|
||||
le vrai drapeau Gitea (repo.archived). Le filtre lit
|
||||
des data-* échappés par Jinja, jamais des littéraux JS. -->
|
||||
<div class="dash-toolbar">
|
||||
<div class="seg-tabs" role="tablist" aria-label="État des projets">
|
||||
<button type="button" role="tab" :class="{ active: tab === 'active' }" @click="tab = 'active'">Actifs <span class="seg-count">{{ active_repos|length }}</span></button>
|
||||
<button type="button" role="tab" :class="{ active: tab === 'inactive' }" @click="tab = 'inactive'">Inactifs <span class="seg-count">{{ inactive_repos|length }}</span></button>
|
||||
<button type="button" role="tab" :class="{ active: tab === 'archived' }" @click="tab = 'archived'">Archivés <span class="seg-count">{{ archived_repos|length }}</span></button>
|
||||
</div>
|
||||
<div class="search-bar toolbar-search">
|
||||
<input type="text" id="project-search" placeholder="Filtrer les projets..." x-model="search" autocomplete="off">
|
||||
<kbd class="kbd">/</kbd>
|
||||
</div>
|
||||
<label class="dash-tool">Tri
|
||||
<select id="dash-sort">
|
||||
<option value="default">Par défaut</option>
|
||||
<option value="updated">Activité Gitea récente</option>
|
||||
@@ -74,7 +70,7 @@
|
||||
</select>
|
||||
</label>
|
||||
<label class="dash-tool dash-tool-check">
|
||||
<input type="checkbox" id="dash-group"> 🗂️ Grouper par propriétaire
|
||||
<input type="checkbox" id="dash-group"> Grouper par propriétaire
|
||||
</label>
|
||||
<div class="dash-view-toggle" role="group" aria-label="Mode d'affichage">
|
||||
<button type="button" :class="{ active: view === 'grid' }" @click="setView('grid')">▦ Grille</button>
|
||||
|
||||
Reference in New Issue
Block a user