blog-duhaz-v3/blog/templates/read.html

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block main %}

<div class="card-body">
{% 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>
{% endblock %}

{% block right_panel %}
<div class="card" style="background-color: rgba(250,250,250,0.88);" >
<div class="card-body">
	
	{% for item in page.blog_art %}
	{% if item.b_description_img != "" %}
		<p><img src="{{item.b_description_img}}"></p>
		<h4> Indroduction </h4>
		<p>{{item.b_description|safe|urlize}}</p>
		<p class="card-text">{{page.p_right|safe|urlize}}</p>
	{% endif %}
	<p>
		<b>Nombre de Lectures </b>: {{item.b_reading}}<br>
		<b>Date de mise en ligne </b>: {{item.b_publdate|date:"m N Y à H:i"}}
	</p>
	<h4> Les Catégories </h4>
	<p>
		{% for cat in item.b_cat.all %}
			<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">{{cat.cb_titre}}</a>
		{% endfor %}
	{% endfor %}
	</p>

	{% if page.retour %}
		<p class="card-text">
			<a href="{% url page.retour %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-undo-alt"></i> Retour</a>
		</p>
	{% endif %}
</div>
</div>
{% endblock %}