Refactor admin winners tab UI and functionality
Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
co-authored by
mathieumoran1
parent
d51372dc21
commit
c1653b4fe9
+101
-29
@@ -754,43 +754,115 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab-pane fade" id="admin-winners" role="tabpanel" aria-labelledby="admin-winners-tab">
|
<div class="tab-pane fade" id="admin-winners" role="tabpanel" aria-labelledby="admin-winners-tab">
|
||||||
<div class="row g-3">
|
<div class="card p-3">
|
||||||
<div class="col-12 col-xxl-8">
|
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2">
|
||||||
<div class="card p-3">
|
<div>
|
||||||
<h4 class="mb-1">Définir les gagnants par année (égalité)</h4>
|
<h4 class="mb-1">Gagnants</h4>
|
||||||
<div class="text-muted mb-3">
|
<div class="text-muted">Définis un ou plusieurs gagnants par année (égalité possible).</div>
|
||||||
Tu peux ajouter plusieurs gagnants pour la même année (ex: égalité au même nombre de points).
|
</div>
|
||||||
Choisis un utilisateur + des points (optionnel), puis clique <strong>Ajouter</strong>.
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<ul class="nav nav-pills admin-subtabs mt-3" id="adminWinnersSubTabs" role="tablist">
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button class="nav-link active" id="admin-winners-subtab-set" data-bs-toggle="tab" data-bs-target="#admin-winners-pane-set" type="button" role="tab" aria-controls="admin-winners-pane-set" aria-selected="true">
|
||||||
|
Définir
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button class="nav-link" id="admin-winners-subtab-current" data-bs-toggle="tab" data-bs-target="#admin-winners-pane-current" type="button" role="tab" aria-controls="admin-winners-pane-current" aria-selected="false">
|
||||||
|
Actuels
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button class="nav-link" id="admin-winners-subtab-help" data-bs-toggle="tab" data-bs-target="#admin-winners-pane-help" type="button" role="tab" aria-controls="admin-winners-pane-help" aria-selected="false">
|
||||||
|
Aide
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tab-content pt-3">
|
||||||
|
<!-- Set -->
|
||||||
|
<div class="tab-pane fade show active" id="admin-winners-pane-set" role="tabpanel" aria-labelledby="admin-winners-subtab-set" tabindex="0">
|
||||||
<div class="row g-3">
|
<div class="row g-3">
|
||||||
<div class="col-md-4">
|
<div class="col-12 col-xxl-7">
|
||||||
<label for="winner_year" class="form-label">Année</label>
|
<div class="border rounded p-3 bg-light">
|
||||||
<select id="winner_year" class="form-select"></select>
|
<div class="fw-semibold mb-1">Ajouter un gagnant</div>
|
||||||
<div class="form-text">Basé sur les années présentes dans les films.</div>
|
<div class="text-muted small mb-3">
|
||||||
|
Tu peux ajouter plusieurs gagnants pour une même année (égalité).
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-12 col-md-4">
|
||||||
|
<label for="winner_year" class="form-label">Année</label>
|
||||||
|
<select id="winner_year" class="form-select"></select>
|
||||||
|
<div class="form-text">Basé sur les années présentes dans les films.</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-5">
|
||||||
|
<label for="winner_user" class="form-label">Utilisateur</label>
|
||||||
|
<select id="winner_user" class="form-select">
|
||||||
|
<option value="">—</option>
|
||||||
|
</select>
|
||||||
|
<div class="form-text">Pour retirer: onglet “Actuels”.</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-3">
|
||||||
|
<label for="winner_points" class="form-label">Points (optionnel)</label>
|
||||||
|
<input id="winner_points" type="number" class="form-control" placeholder="ex: 42" min="0" step="1">
|
||||||
|
<div class="form-text">Laisse vide si non applicable.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex flex-wrap justify-content-end gap-2 mt-3">
|
||||||
|
<button type="button" id="winner_reload" class="btn btn-outline-secondary">Recharger</button>
|
||||||
|
<button type="button" id="winner_clear" class="btn btn-outline-danger">Tout supprimer</button>
|
||||||
|
<button type="button" id="winner_save" class="btn btn-warning">Ajouter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5">
|
|
||||||
<label for="winner_user" class="form-label">Utilisateur</label>
|
<div class="col-12 col-xxl-5">
|
||||||
<select id="winner_user" class="form-select">
|
<div class="border rounded p-3 bg-white">
|
||||||
<option value="">—</option>
|
<div class="fw-semibold mb-2">Raccourci</div>
|
||||||
</select>
|
<div class="text-muted">
|
||||||
<div class="form-text">Pour retirer un gagnant, utilise la liste “Gagnants actuels” ci-dessous.</div>
|
Le bouton “Tout supprimer” efface uniquement les gagnants de l’année sélectionnée.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3">
|
</div>
|
||||||
<label for="winner_points" class="form-label">Points (optionnel)</label>
|
</div>
|
||||||
<input id="winner_points" type="number" class="form-control" placeholder="ex: 42" min="0" step="1">
|
|
||||||
|
<!-- Current -->
|
||||||
|
<div class="tab-pane fade" id="admin-winners-pane-current" role="tabpanel" aria-labelledby="admin-winners-subtab-current" tabindex="0">
|
||||||
|
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-2">
|
||||||
|
<div>
|
||||||
|
<div class="fw-semibold">Gagnants actuels</div>
|
||||||
|
<div class="text-muted small">La liste dépend de l’année sélectionnée.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex flex-wrap justify-content-end gap-2 mt-3">
|
<div id="winner_current" class="border rounded p-2 bg-light">—</div>
|
||||||
<button type="button" id="winner_reload" class="btn btn-outline-primary">Recharger</button>
|
</div>
|
||||||
<button type="button" id="winner_clear" class="btn btn-outline-danger">Tout supprimer</button>
|
|
||||||
<button type="button" id="winner_save" class="btn btn-warning">Ajouter</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-3">
|
<!-- Help -->
|
||||||
<div class="text-muted small mb-1">Gagnants actuels</div>
|
<div class="tab-pane fade" id="admin-winners-pane-help" role="tabpanel" aria-labelledby="admin-winners-subtab-help" tabindex="0">
|
||||||
<div id="winner_current" class="border rounded p-2 bg-light">—</div>
|
<div class="row g-3">
|
||||||
|
<div class="col-12 col-xxl-8">
|
||||||
|
<div class="border rounded p-3 bg-white">
|
||||||
|
<div class="fw-semibold mb-2">Comment ça marche</div>
|
||||||
|
<ul class="mb-0 text-muted">
|
||||||
|
<li>Une année peut avoir <strong>plusieurs gagnants</strong> (égalité).</li>
|
||||||
|
<li>Les points sont <strong>optionnels</strong> (affichage uniquement).</li>
|
||||||
|
<li>Pour retirer un gagnant, utilise le bouton “Retirer” dans l’onglet “Actuels”.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-xxl-4">
|
||||||
|
<div class="border rounded p-3 bg-light">
|
||||||
|
<div class="fw-semibold mb-2">Astuce</div>
|
||||||
|
<div class="text-muted">
|
||||||
|
Si tu changes l’année active du site, vérifie aussi les gagnants de cette année.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user