quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add unsaved changes tracking with banner and button state management in picks tab

Browse Source
This commit is contained in:
Mathieu Moran
2025-12-27 23:38:23 -05:00
parent dc726b9b71
commit 7d8077774b
2 changed files with 221 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/picks.html
+54 -2
View File
@@ -29,10 +29,57 @@
.nominee-option {
cursor: pointer;
transition: all 0.2s;
position: relative;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.nominee-option:hover {
opacity: 0.8;
transform: scale(1.05);
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nominee-option.selected {
font-weight: 600;
box-shadow: 0 2px 6px rgba(13, 110, 253, 0.3);
}
.nominee-checkmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
font-size: 0.75rem;
font-weight: bold;
}
.nominee-option.selected .nominee-checkmark {
background-color: rgba(255, 255, 255, 0.9);
color: #0d6efd;
}
.picks-table {
border-collapse: separate;
border-spacing: 0;
}
.picks-table tbody tr {
transition: background-color 0.2s;
}
.picks-table tbody tr:hover {
background-color: rgba(13, 110, 253, 0.05);
}
.picks-table tbody tr.has-selection {
background-color: rgba(13, 110, 253, 0.08);
border-left: 3px solid #0d6efd;
}
.selected-choice-badge {
font-weight: 600;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.table-sm td {
padding: 0.5rem;
@@ -125,6 +172,11 @@
</div>
</div>
<div id="unsaved-changes-banner" class="alert alert-warning alert-dismissible fade d-none" role="alert">
<strong>⚠️ Modifications en attente:</strong> Vous avez des modifications non enregistrées. N'oubliez pas d'enregistrer vos choix avant de quitter cette page.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div id="categories-container">
<div class="text-center py-3 text-muted small">Chargement des catégories…</div>
</div>