From 4eb4844dab2673f0d8ab3a6219535fed0431d429 Mon Sep 17 00:00:00 2001
From: Esenjin <esenjin@sangigi-fuchsia.fr>
Date: Mon, 24 Feb 2025 18:59:05 +0100
Subject: [PATCH] revue des boutons (partie 1)
---
admin/index.php | 42 ++++++--
assets/css/buttons.css | 220 ++++++++++++++++++++++++++++++++++++++
assets/css/components.css | 9 +-
assets/css/main.css | 3 +-
assets/js/admin.js | 88 +++++++++++----
5 files changed, 326 insertions(+), 36 deletions(-)
create mode 100644 assets/css/buttons.css
diff --git a/admin/index.php b/admin/index.php
index 18c2167..2b8687b 100644
--- a/admin/index.php
+++ b/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; ?>
diff --git a/assets/css/buttons.css b/assets/css/buttons.css
new file mode 100644
index 0000000..4c3d4ad
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/assets/css/components.css b/assets/css/components.css
index d042a1e..8defa3a 100644
--- a/assets/css/components.css
+++ b/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 {
diff --git a/assets/css/main.css b/assets/css/main.css
index c89749c..c5433ff 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3,4 +3,5 @@
@import 'layout.css';
@import 'components.css';
@import 'forms.css';
-@import 'editor.css';
\ No newline at end of file
+@import 'editor.css';
+@import 'buttons.css';
\ No newline at end of file
diff --git a/assets/js/admin.js b/assets/js/admin.js
index 183f88b..312ffff 100644
--- a/assets/js/admin.js
+++ b/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) {