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

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

{% block exted_menu %}
{% for cat in page.blog_cat %}
	<li class="nav-item"><a class="nav-link" href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{cat.cb_titre}}</a></li>
{% endfor %}
<li class="nav-item"><a class="nav-link" href="{% url 'blog_tag' 'all' %}">Tous les articles</a></li>
{% endblock %}

{% block main %}
<style>
/* Style pour les articles avec miniatures à gauche */
.article-card {
	background-color: rgba(250,250,250,0.88);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: box-shadow 0.3s ease;
}

.article-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.article-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.article-image-container {
	position: relative;
	width: 280px;
	min-width: 280px;
	overflow: hidden;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.article-image-container::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 60px;
	background: linear-gradient(to right, rgba(250,250,250,0) 0%, rgba(250,250,250,0.88) 100%);
	pointer-events: none;
}

.article-image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.article-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	font-size: 2rem;
	font-weight: bold;
}

.article-content {
	flex: 1;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
}

.article-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 1rem;
	text-decoration: none;
}

.article-title:hover {
	color: #667eea;
}

.article-description {
	color: #4a5568;
	line-height: 1.6;
	margin-bottom: 1rem;
	flex: 1;
}

.article-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
	font-size: 0.9rem;
	color: #718096;
}

.article-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.article-category {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: #667eea;
	color: white;
	border-radius: 12px;
	font-size: 0.85rem;
	text-decoration: none;
	transition: background 0.2s;
}

.article-category:hover {
	background: #764ba2;
	color: white;
}

/* Responsive */
@media (max-width: 768px) {
	.article-row {
		flex-direction: column;
	}
	
	.article-image-container {
		width: 100%;
		height: 200px;
	}
	
	.article-image-container::after {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 40px;
		background: linear-gradient(to bottom, rgba(250,250,250,0) 0%, rgba(250,250,250,0.88) 100%);
	}
	
	.article-content {
		padding: 1rem;
	}
	
	.article-title {
		font-size: 1.3rem;
	}
}
</style>

{% if page.blog_art %}
	{% for item in page.blog_art %}
		<article class="article-card">
			<div class="article-row">
				<!-- Miniature à gauche -->
				<div class="article-image-container">
					{% if item.b_description_img %}
						<a href="{% url 'blog_play' item.b_titre_slugify %}">
							<img src="{{item.b_description_img}}" alt="{{item.b_titre}}">
						</a>
					{% else %}
						<div class="article-image-placeholder">
							<i class="fas fa-file-alt"></i>
						</div>
					{% endif %}
				</div>
				
				<!-- Contenu à droite -->
				<div class="article-content">
					<a href="{% url 'blog_play' item.b_titre_slugify %}" class="article-title text-decoration-none">
						<h2 class="article-title">{{item.b_titre}}</h2>
					</a>
					
					<div class="article-description">
						{{item.b_description|safe|truncatewords_html:40}}
					</div>
					
					<div class="article-footer">
						<div class="article-meta">
							<span>
								<i class="far fa-clock"></i> {{item.b_publdate|timesince}}
							</span>
							{% if item.b_cat.all %}
								{% for cat in item.b_cat.all %}
									<a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="article-category">
										{{ cat.cb_titre }}
									</a>
								{% endfor %}
							{% endif %}
						</div>
						<span class="text-muted">
							<i class="far fa-eye"></i> {{item.b_reading}}
						</span>
					</div>
				</div>
			</div>
		</article>
	{% endfor %}
{% else %}
	<div class="alert alert-info">
		<i class="fas fa-info-circle"></i> Aucun article trouvé.
	</div>
{% endif %}
{% endblock %}

{% block right_panel %}
{% if page.p_right != "" %}
<div class="card" style="background-color: rgba(250,250,250,0.88);" >
<div class="card-body">
	<form action="" method="get">
		<div class="row align-items-center">
			
			<div class="col-lg-8 col-sm-12">
				{{page.blog_search|crispy}}
			</div>
			<div class="col mt-sm-1">
				<input type="submit" class="btn btn-success w-100" value="Rechercher">
			</div>
		</div>
	</form>
	<hr>
	{% if page.blog_art.paginator.num_pages != 1 %}
	<p class="card-text">
	<nav aria-label="...">
		<ul class="pagination justify-content-center">
			{% if page.blog_art.has_previous %}
				<li class="page-item">
					<a class="page-link" href="?page={{ page.blog_art.previous_page_number }}"> << </a>
				</li>
			{% else %}
				<li class="page-item disabled">
					<span class="page-link"> << </span>
				</li>
			{% endif %}
			{% for nb_page in page.blog_art.nbpage %}
				{% if page.blog_art.number == forloop.counter %}
					<li class="page-item active" aria-current="page"><span class="page-link">{{forloop.counter}}</span></li>
				{% else %}
					<li class="page-item"><a class="page-link" href="?page={{forloop.counter}}">{{forloop.counter}}</a></li>
				{% endif %}
			{% endfor %}
			{% if page.blog_art.has_next %}
				<li class="page-item">
					<a class="page-link" href="?page={{ page.blog_art.next_page_number }}"> >> </a>
				</li>
			{% else %}
				<li class="page-item disabled">
					<span class="page-link"> >> </span>
				</li>
			{% endif %}
		</ul>
	</nav>
	<p>
	{% endif %}
	<p class="card-text">{{page.p_right|safe}}</p>
	<h4> <i class="fas fa-tags"></i> Les Catégories </h4>
	<p class="card-text">
	{% for cat in page.blog_cat %}
		<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 %}
	
	{% if page.blog_filter == True %}
		<a href="{% url 'blog_index' %}" class="btn btn-danger mb-2" tabindex="-1" role="button" aria-disabled="true"><i class="fas fa-filter text-white"></i> Retirer les filtres</a>
	{% else %}
		<a href="{% url 'blog_tag' 'all' %}" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">Tous les articles</a>
	{% endif %}

	</p>

	<h4> <i class="fas fa-bomb"></i> Les articles les plus consulté </h4>
	<p class="card-text">
	{% for item in page.blog_top10 %}
		<i class="far fa-play-circle"></i> <a class="text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="{{item.b_titre}}" href="{% url 'blog_play' item.b_titre_slugify %}">{{item.b_titre|truncatechars:40}}</a><br>
	{% 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>
{% endif %}
{% endblock %}