Amélioration visuelle des checkboxes avec design personnalisé moderne
## Nouvelles fonctionnalités visuelles ### Checkboxes personnalisées élégantes - Création d'un fichier CSS dédié avec design moderne - Dégradé bleu et coins arrondis pour un look contemporain - Animations fluides sur hover, focus et sélection - Coche vectorielle animée avec transition élégante ### Expérience utilisateur améliorée - Effet hover avec scale et glow subtil - État indéterminé avec barre orange pour sélection partielle - Mise en surbrillance des lignes sélectionnées - Support optimisé pour les écrans tactiles ### Intégration complète - Remplacement des classes Tailwind par classes personnalisées - Mise à jour cohérente côté serveur et client - Inclusion du CSS dans le template HTML - Maintien de toutes les fonctionnalités existantes ## Améliorations techniques - CSS moderne avec animations CSS3 - Performance optimisée avec transitions fluides - Design responsive et accessible - Code CSS modulaire et maintenable
This commit is contained in:
unfr
parent
8d55c06c2b
commit
b085828350
@ -65,7 +65,7 @@ function updateTable(rows) {
|
||||
var tr =
|
||||
'<tr id="row-' + row.id + '" data-status="' + row.status + '" class="odd:bg-gray-800 even:bg-gray-700">' +
|
||||
'<td class="px-4 py-2 border border-gray-700 text-center">' +
|
||||
'<input type="checkbox" class="row-checkbox rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500" data-id="' + row.id + '" data-name="' + esc(row.nom) + '">' +
|
||||
'<input type="checkbox" class="row-checkbox checkbox-custom" data-id="' + row.id + '" data-name="' + esc(row.nom) + '">' +
|
||||
'</td>' +
|
||||
'<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">' + esc(row.nom) + '</td>' +
|
||||
'<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ' + statusClass + '">' + statusText + '</td>' +
|
||||
|
||||
141
autopost/public/checkboxes.css
Normal file
141
autopost/public/checkboxes.css
Normal file
@ -0,0 +1,141 @@
|
||||
/* Checkboxes personnalisées modernes */
|
||||
|
||||
/* Style de base pour toutes les checkboxes */
|
||||
.checkbox-custom {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #4b5563;
|
||||
border-radius: 4px;
|
||||
background: #1f2937;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* État hover */
|
||||
.checkbox-custom:hover {
|
||||
border-color: #6b7280;
|
||||
background: #374151;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* État focus */
|
||||
.checkbox-custom:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* État checked */
|
||||
.checkbox-custom:checked {
|
||||
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
||||
border-color: #3b82f6;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Icône de validation */
|
||||
.checkbox-custom:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
border: 2px solid white;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
transform: rotate(-45deg);
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
animation: checkmark 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Animation de la coche */
|
||||
@keyframes checkmark {
|
||||
0% {
|
||||
transform: rotate(-45deg) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-45deg) scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-45deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* État indéterminé pour "Tout sélectionner" */
|
||||
.checkbox-custom:indeterminate {
|
||||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||
border-color: #f59e0b;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.checkbox-custom:indeterminate::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 1px;
|
||||
animation: indeterminate 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Animation de l'état indéterminé */
|
||||
@keyframes indeterminate {
|
||||
0% {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
width: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Effet de selection pour les lignes avec checkbox cochée */
|
||||
tr:has(.checkbox-custom:checked) {
|
||||
background-color: rgba(59, 130, 246, 0.05) !important;
|
||||
border-left: 3px solid #3b82f6;
|
||||
}
|
||||
|
||||
/* Animation d'apparition lors du chargement */
|
||||
.checkbox-custom {
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Amélioration pour les écrans tactiles */
|
||||
@media (hover: none) {
|
||||
.checkbox-custom:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.checkbox-custom:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
@ -92,7 +92,7 @@ function renderRow(row) {
|
||||
return `
|
||||
<tr id="row-${row.id}" data-status="${row.status}" class="odd:bg-gray-800 even:bg-gray-700">
|
||||
<td class="px-4 py-2 border border-gray-700 text-center">
|
||||
<input type="checkbox" class="row-checkbox rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500" data-id="${row.id}" data-name="${esc(row.nom)}">
|
||||
<input type="checkbox" class="row-checkbox checkbox-custom" data-id="${row.id}" data-name="${esc(row.nom)}">
|
||||
</td>
|
||||
<td class="px-4 py-2 border border-gray-700">${esc(row.nom)}</td>
|
||||
<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ${statusClass}">${statusText}</td>
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<title>{{TITLE}}</title>
|
||||
<meta name="csrf-token" content="{{CSRF_TOKEN}}">
|
||||
<link rel="icon" href="/autopost/favicon.ico" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="checkboxes.css">
|
||||
<script src="js/index.global.js"></script>
|
||||
<script src="jquery/jquery.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
|
||||
@ -135,7 +136,7 @@
|
||||
<thead class="bg-gray-900 text-gray-300 uppercase text-sm">
|
||||
<tr>
|
||||
<th class="px-4 py-2">
|
||||
<input type="checkbox" id="selectAll" class="rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500">
|
||||
<input type="checkbox" id="selectAll" class="checkbox-custom">
|
||||
</th>
|
||||
<th class="px-4 py-2">Name</th>
|
||||
<th class="px-4 py-2">Status</th>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user