revue des boutons (partie 1)

admin/index.php

@@ -31,6 +31,7 @@ $users = Auth::getAllUsers(false);
         <link rel="icon" type="image/png" href="../assets/images/site/favicon.png">
     <?php endif; ?>
     <link rel="stylesheet" href="../assets/css/main.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <style>
         .version-banner {
             position: fixed;
@@ -58,18 +59,31 @@ $users = Auth::getAllUsers(false);
             <?php endif; ?>
             <span>Administration</span>
         </div>
-        <!-- Le bouton hamburger sera inséré par JS -->
         <div class="nav-menu">
-            <a href="../index.php" target="_blank" class="button">Visiter le site</a>
-            <a href="profile.php" class="button">Profil</a>
+            <a href="../index.php" target="_blank" class="button tooltip" data-tooltip="Visiter le site">
+                <i class="fa-solid fa-house"></i>
+            </a>
+            <a href="profile.php" class="button tooltip" data-tooltip="Profil">
+                <i class="fas fa-user"></i>
+            </a>
             <?php if (Auth::isAdmin() || Auth::hasAdminRole()): ?>
-            <a href="users.php" class="button">Utilisateurs</a>
+            <a href="users.php" class="button tooltip" data-tooltip="Utilisateurs">
+                <i class="fas fa-users"></i>
+            </a>
             <?php endif; ?>
-            <a href="story-edit.php" class="button">Nouveau roman</a>
-            <a href="options.php" class="button">Options</a>
-            <a href="export-import.php" class="button">Import/Export</a>
+            <a href="story-edit.php" class="button tooltip" data-tooltip="Nouveau roman">
+                <i class="fa-solid fa-book"></i>
+            </a>
+            <a href="options.php" class="button tooltip" data-tooltip="Options">
+                <i class="fas fa-cog"></i>
+            </a>
+            <a href="export-import.php" class="button tooltip" data-tooltip="Import/Export">
+                <i class="fa-solid fa-upload"></i>
+            </a>
             <form method="POST" action="logout.php" class="logout-form">
-                <button type="submit">Déconnexion</button>
+                <button type="submit" class="tooltip" data-tooltip="Déconnexion">
+                    <i class="fas fa-sign-out-alt"></i>
+                </button>
             </form>
         </div>
     </nav>
@@ -92,11 +106,17 @@ $users = Auth::getAllUsers(false);
                     </p>
                 </div>
                 <div class="story-actions">
-                    <a href="story-edit.php?id=<?= htmlspecialchars($story['id']) ?>" class="button">Modifier</a>
+                    <a href="story-edit.php?id=<?= htmlspecialchars($story['id']) ?>" class="button tooltip" data-tooltip="Modifier">
+                        <i class="fas fa-edit"></i>
+                    </a>
                     <?php if (Auth::isAdmin() || Auth::hasAdminRole()): ?>
-                    <button type="button" class="button manage-access" data-id="<?= htmlspecialchars($story['id']) ?>">Accès</button>
+                    <button type="button" class="button tooltip manage-access" data-tooltip="Accès" data-id="<?= htmlspecialchars($story['id']) ?>">
+                        <i class="fas fa-users-cog"></i>
+                    </button>
                     <?php endif; ?>
-                    <button type="button" class="button delete-story" data-id="<?= htmlspecialchars($story['id']) ?>">Supprimer</button>
+                    <button type="button" class="button tooltip delete-story" data-tooltip="Supprimer" data-id="<?= htmlspecialchars($story['id']) ?>">
+                        <i class="fas fa-trash-alt"></i>
+                    </button>
                 </div>
             </div>
             <?php endforeach; ?>

assets/css/buttons.css

@@ -0,0 +1,220 @@
+/* buttons.css - Styles pour les boutons, tooltips et menu */
+
+/* Styles pour les boutons avec icônes */
+.button.tooltip,
+.tooltip {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    transition: var(--transition-fast);
+}
+
+.button.tooltip i,
+.tooltip i {
+    font-size: 1.2rem;
+}
+
+/* Style pour le bouton de déconnexion */
+.logout-form button {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    padding: 0;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+    position: relative;
+}
+
+.logout-form button:hover {
+    background-color: var(--error-color);
+}
+
+.logout-form button i {
+    font-size: 1.2rem;
+}
+
+/* Tooltip styles */
+.tooltip::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: -35px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    padding: 5px 10px;
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s, visibility 0.3s;
+    z-index: 100;
+    pointer-events: none;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--border-color);
+}
+
+.tooltip:hover::after {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Styles pour le texte à côté des icônes (mobile) */
+.tooltip-text {
+    display: none;
+    margin-left: var(--spacing-md);
+}
+
+/* Menu toggle button */
+.menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: var(--spacing-sm);
+}
+
+/* Styles pour la barre de navigation */
+.admin-nav {
+    position: relative;
+}
+
+.nav-menu {
+    display: flex;
+    gap: var(--spacing-md);
+    justify-content: flex-end;
+}
+
+/* Styles pour les boutons d'action des romans */
+.story-actions {
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+/* Style spécifique pour le bouton d'édition */
+.story-actions a.button {
+    background-color: var(--accent-primary);
+    color: var(--text-tertiary);
+}
+
+.story-actions a.button:hover {
+    background-color: var(--accent-secondary);
+}
+
+/* Style spécifique pour le bouton d'accès */
+.story-actions .manage-access {
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.story-actions .manage-access:hover {
+    background-color: var(--accent-primary);
+    color: var(--text-tertiary);
+}
+
+/* Style spécifique pour le bouton de suppression */
+.story-actions .delete-story {
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.story-actions .delete-story:hover {
+    background-color: var(--error-color);
+    color: var(--text-tertiary);
+}
+
+/* Media queries pour le menu mobile */
+@media (max-width: 768px) {
+    .menu-toggle {
+        display: block;
+        position: absolute;
+        right: var(--spacing-md);
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 101;
+    }
+    
+    .nav-menu {
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        background-color: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-sm);
+        padding: var(--spacing-md);
+        z-index: 100;
+        width: 200px;
+        gap: var(--spacing-sm);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        
+        /* État caché par défaut */
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all var(--transition-fast);
+    }
+    
+    .nav-menu.active {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+    
+    /* Style des boutons en mode mobile */
+    .nav-menu.active .button,
+    .nav-menu.active .logout-form button {
+        width: 100%;
+        justify-content: flex-start;
+        padding: var(--spacing-sm) var(--spacing-md);
+        gap: var(--spacing-md);
+    }
+    
+    /* Afficher le texte des tooltips en mode mobile */
+    .nav-menu.active .tooltip-text {
+        display: inline-block;
+    }
+    
+    /* Cacher les tooltips standards sur mobile */
+    .tooltip::after {
+        display: none;
+    }
+    
+    .logout-form {
+        width: 100%;
+    }
+    
+    /* Afficher le texte des tooltips en mode mobile pour les actions des romans */
+    .story-actions.active .tooltip-text {
+        display: inline-block;
+        margin-left: var(--spacing-sm);
+    }
+    
+    .story-actions.active .button {
+        width: auto;
+        padding: var(--spacing-xs) var(--spacing-sm);
+    }
+}
+
+/* Pour les très petits écrans */
+@media (max-width: 480px) {
+    .story-actions {
+        justify-content: space-between;
+    }
+    
+    .story-actions .button {
+        flex: 1;
+    }
+}

assets/css/components.css

@@ -5,9 +5,10 @@
     border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: var(--spacing-lg);
     transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+    position: relative;
 }
 
 .story-item:hover {
@@ -16,7 +17,7 @@
 }
 
 .story-cover {
-    width: 200px;
+    width: 180px;
     height: 120px;
     object-fit: cover;
     border-radius: var(--radius-sm);
@@ -35,6 +36,10 @@
 
 .story-info {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 120px;
 }
 
 .story-info p {

assets/css/main.css

@@ -3,4 +3,5 @@
 @import 'layout.css';
 @import 'components.css';
 @import 'forms.css';
-@import 'editor.css';
+@import 'editor.css';
+@import 'buttons.css';

assets/js/admin.js

@@ -133,33 +133,77 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
     
-        // Gestion du menu mobile
-        const navMenu = document.querySelector('.nav-menu');
-        const navBrand = document.querySelector('.nav-brand');
+    // Gestion du menu mobile
+    const navMenu = document.querySelector('.nav-menu');
+    
+    // Créer le bouton hamburger s'il n'existe pas déjà
+    if (!document.querySelector('.menu-toggle')) {
+        const menuToggle = document.createElement('button');
+        menuToggle.className = 'menu-toggle';
+        menuToggle.innerHTML = '☰';
+        menuToggle.setAttribute('aria-label', 'Menu');
         
-        // Créer le bouton hamburger s'il n'existe pas déjà
-        if (!document.querySelector('.menu-toggle')) {
-            const menuToggle = document.createElement('button');
-            menuToggle.className = 'menu-toggle';
-            menuToggle.innerHTML = '☰';
-            menuToggle.setAttribute('aria-label', 'Menu');
-            
-            // Insérer le bouton avant le menu
-            navMenu.parentNode.insertBefore(menuToggle, navMenu);
-            
-            // Gérer les clics sur le bouton
-            menuToggle.addEventListener('click', function() {
-                navMenu.classList.toggle('active');
-            });
-            
-            // Fermer le menu au clic en dehors
-            document.addEventListener('click', function(e) {
-                if (!navMenu.contains(e.target) && !menuToggle.contains(e.target)) {
-                    navMenu.classList.remove('active');
+        // Insérer le bouton avant le menu
+        navMenu.parentNode.insertBefore(menuToggle, navMenu);
+        
+        // Ajouter le texte des tooltips à côté des icônes pour mobile
+        document.querySelectorAll('.nav-menu .tooltip').forEach(button => {
+            const tooltip = button.getAttribute('data-tooltip');
+            const tooltipSpan = document.createElement('span');
+            tooltipSpan.className = 'tooltip-text';
+            tooltipSpan.textContent = tooltip;
+            button.appendChild(tooltipSpan);
+        });
+        
+        // Gérer les clics sur le bouton
+        menuToggle.addEventListener('click', function() {
+            navMenu.classList.toggle('active');
+        });
+        
+        // Fermer le menu au clic en dehors
+        document.addEventListener('click', function(e) {
+            if (!navMenu.contains(e.target) && !menuToggle.contains(e.target)) {
+                navMenu.classList.remove('active');
+            }
+        });
+    }
+
+        // Ajouter le texte des tooltips à côté des icônes pour mobile - pour tous les tooltips
+        function addTooltipText() {
+            document.querySelectorAll('.tooltip').forEach(button => {
+                // Vérifier si le tooltip-text n'existe pas déjà
+                if (!button.querySelector('.tooltip-text')) {
+                    const tooltip = button.getAttribute('data-tooltip');
+                    const tooltipSpan = document.createElement('span');
+                    tooltipSpan.className = 'tooltip-text';
+                    tooltipSpan.textContent = tooltip;
+                    button.appendChild(tooltipSpan);
                 }
             });
         }
         
+        // Appliquer à tous les tooltips du site
+        addTooltipText();
+        
+        // Détection de la taille d'écran pour activer le mode mobile
+        function checkMobileMode() {
+            const isMobile = window.innerWidth <= 768;
+            
+            // Gestion des actions pour les romans
+            const storyActions = document.querySelectorAll('.story-actions');
+            storyActions.forEach(action => {
+                if (isMobile) {
+                    action.classList.add('active');
+                } else {
+                    action.classList.remove('active');
+                }
+            });
+        }
+        
+        // Vérifier au chargement et au redimensionnement
+        checkMobileMode();
+        window.addEventListener('resize', checkMobileMode);
+        
     // Gestion de la suppression des romans
     const storyList = document.querySelector('.stories-list');
     if (storyList) {