2

blog/templates/listing.html

@@ -10,25 +10,208 @@
 {% 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 %}
-		<div class="card mb-2" style="background-color: rgba(250,250,250,0.88);" >
-			<div class="card-header">
-				<a class="text-dark text-decoration-none" href="{% url 'blog_play' item.b_titre_slugify %}"><h2>{{item.b_titre}}</h2></a>
-			</div>
-			<div class="card-body">
-			<p class="card-text">
-			<a class="text-dark text-decoration-none" href="{% url 'blog_play' item.b_titre_slugify %}">
-				{% if item.b_description_img != "" %}<p><img src="{{item.b_description_img}}"></p>{% endif %}
-				{{item.b_description|safe}}
-			</a>
-			</p>
+		<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>
-			<div class="card-footer">
-				Publié, il y'a {{item.b_publdate|timesince }} {% if item.b_cat.all %} | {%for cat in item.b_cat.all %}<a class="text-dark text-decoration-none" href="{% url 'blog_tag' cat.cb_titre_slgify %}">{{ cat.cb_titre }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}{% endif %}
-			</div>
-		</div>
+		</article>
 	{% endfor %}
+{% else %}
+	<div class="alert alert-info">
+		<i class="fas fa-info-circle"></i> Aucun article trouvé.
+	</div>
 {% endif %}
 {% endblock %}