4

BOUTONS_EDITION_ADMIN.md

@@ -0,0 +1,87 @@
+# 🔧 Boutons d'Édition Rapide pour Admins
+
+## ✅ Ce qui a été ajouté
+
+### 1. Sur la page de lecture d'un article (`read.html`)
+**Bouton flottant en bas à droite** :
+- 🟡 **Couleur** : Warning (jaune/orange)
+- 📍 **Position** : Fixe, en bas à droite
+- 🎨 **Style** : Bouton rond avec ombre
+- 👁️ **Visible** : Uniquement pour `user.is_staff` (admins)
+- 🔗 **Action** : Ouvre l'article dans l'admin Django (nouvel onglet)
+- 📱 **Responsive** : S'adapte sur mobile
+
+### 2. Sur la page de listing (`listing.html`)
+**Petit bouton "Éditer"** :
+- 🟡 **Couleur** : Warning (jaune/orange)
+- 📍 **Position** : Dans le footer de chaque article, après les catégories
+- 👁️ **Visible** : Uniquement pour les admins
+- 🔗 **Action** : Ouvre l'article dans l'admin (nouvel onglet)
+
+---
+
+## 🎯 Utilisation
+
+### En tant qu'Admin connecté :
+
+**Sur la liste des articles** :
+- Vous voyez un petit bouton "✏️ Éditer" sur chaque article
+- Cliquez dessus → ouvre l'admin dans un nouvel onglet
+
+**En lecture d'un article** :
+- Vous voyez un bouton flottant en bas à droite "✏️ Modifier"
+- Toujours visible même en scrollant
+- Cliquez → ouvre l'article dans l'admin
+
+### En tant que visiteur normal :
+- Aucun bouton visible
+- Aucun changement dans l'apparence
+
+---
+
+## 🔒 Sécurité
+
+La condition `{% if user.is_staff %}` vérifie que :
+- L'utilisateur est connecté
+- L'utilisateur a le statut "staff" (admin)
+
+Même si quelqu'un trouve l'URL, Django protège l'accès à l'admin.
+
+---
+
+## 🎨 Personnalisation
+
+### Changer la couleur du bouton flottant :
+```html
+<a href="..." class="btn btn-primary btn-edit-article">
+<!-- Au lieu de btn-warning -->
+```
+
+### Changer la position :
+```css
+.btn-edit-article {
+    bottom: 30px;  /* Distance du bas */
+    right: 30px;   /* Distance de la droite */
+    /* Ou pour le mettre à gauche : */
+    left: 30px;
+    right: auto;
+}
+```
+
+### Retirer le bouton flottant (garder uniquement le listing) :
+Supprimez le bloc `{% if user.is_staff %}...{% endif %}` dans `read.html`
+
+---
+
+## 🧪 Test
+
+1. Connectez-vous en tant qu'admin : **https://www.duhaz.fr/admin/**
+2. Allez sur le blog : **https://www.duhaz.fr/blog/**
+3. Vous devriez voir "✏️ Éditer" sur chaque article
+4. Cliquez sur un article
+5. Vous devriez voir le bouton flottant en bas à droite
+
+---
+
+**Date** : Octobre 30, 2025  
+**Statut** : ✅ Prêt à déployer

blog/templates/listing.html

@@ -228,6 +228,16 @@
 									</a>
 								{% endfor %}
 							{% endif %}
+							
+							<!-- Bouton édition pour les admins -->
+							{% if user.is_staff %}
+								<a href="/admin/blog/blog/{{item.id}}/change/" 
+								   class="btn btn-sm btn-warning" 
+								   target="_blank"
+								   title="Modifier cet article">
+									<i class="fas fa-edit"></i> Éditer
+								</a>
+							{% endif %}
 						</div>
 						<span class="text-muted">
 							<i class="far fa-eye"></i> {{item.b_reading}}

blog/templates/read.html

@@ -8,6 +8,49 @@
 {% if page.blog_art %}
 	{% for item in page.blog_art %}
 		<p class="card-text">{{item.b_contenu|safe}}</p>
+		
+		<!-- Bouton d'édition flottant pour les admins -->
+		{% if user.is_staff %}
+		<a href="/admin/blog/blog/{{item.id}}/change/" 
+		   class="btn btn-warning btn-edit-article" 
+		   target="_blank"
+		   title="Modifier cet article">
+			<i class="fas fa-edit"></i> Modifier
+		</a>
+		
+		<style>
+		.btn-edit-article {
+			position: fixed;
+			bottom: 30px;
+			right: 30px;
+			z-index: 1000;
+			padding: 12px 24px;
+			border-radius: 50px;
+			box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+			font-weight: 600;
+			transition: all 0.3s ease;
+			text-decoration: none;
+		}
+		
+		.btn-edit-article:hover {
+			transform: translateY(-3px);
+			box-shadow: 0 6px 20px rgba(0,0,0,0.4);
+		}
+		
+		.btn-edit-article i {
+			margin-right: 8px;
+		}
+		
+		@media (max-width: 768px) {
+			.btn-edit-article {
+				bottom: 20px;
+				right: 20px;
+				padding: 10px 20px;
+				font-size: 0.9rem;
+			}
+		}
+		</style>
+		{% endif %}
 	{% endfor %}
 {% endif %}
 </div>