|
|
@@ -10,105 +10,259 @@
|
|
|
{% endblock %}
|
|
|
|
|
|
{% block main %}
|
|
|
+<style>
|
|
|
+/* Styles modernes pour les articles */
|
|
|
+.blog-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card:hover {
|
|
|
+ transform: translateY(-4px);
|
|
|
+ box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+ object-fit: cover;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card-content {
|
|
|
+ padding: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card-title {
|
|
|
+ font-size: 1.75rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1a202c;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ line-height: 1.3;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card-title:hover {
|
|
|
+ color: #667eea;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card-description {
|
|
|
+ font-size: 1.05rem;
|
|
|
+ line-height: 1.7;
|
|
|
+ color: #4a5568;
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-card-footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 1rem;
|
|
|
+ border-top: 1px solid #e2e8f0;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ color: #718096;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-meta {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-category-badge {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0.25rem 0.75rem;
|
|
|
+ background: #667eea;
|
|
|
+ color: white;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: background 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-category-badge:hover {
|
|
|
+ background: #764ba2;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-date {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.blog-date i {
|
|
|
+ color: #cbd5e0;
|
|
|
+}
|
|
|
+
|
|
|
+/* Responsive */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .blog-card-image {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blog-card-content {
|
|
|
+ padding: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blog-card-title {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+</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}}
|
|
|
+ <article class="blog-card">
|
|
|
+ <a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
|
|
|
+ {% if item.b_description_img %}
|
|
|
+ <img src="{{item.b_description_img}}" alt="{{item.b_titre}}" class="blog-card-image">
|
|
|
+ {% else %}
|
|
|
+ <div class="blog-card-image d-flex align-items-center justify-content-center">
|
|
|
+ <h3 class="text-white text-center px-4">{{item.b_titre}}</h3>
|
|
|
+ </div>
|
|
|
+ {% endif %}
|
|
|
</a>
|
|
|
- </p>
|
|
|
- </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 class="blog-card-content">
|
|
|
+ <a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
|
|
|
+ <h2 class="blog-card-title">{{item.b_titre}}</h2>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="blog-card-description">
|
|
|
+ {{item.b_description|safe|truncatewords_html:50}}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="blog-card-footer">
|
|
|
+ <div class="blog-meta">
|
|
|
+ <span class="blog-date">
|
|
|
+ <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="blog-category-badge">
|
|
|
+ {{ 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 shadow-sm" style="background-color: rgba(250,250,250,0.95); border-radius: 12px;">
|
|
|
<div class="card-body">
|
|
|
+ <!-- Recherche -->
|
|
|
+ <h5 class="mb-3"><i class="fas fa-search"></i> Rechercher</h5>
|
|
|
<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">
|
|
|
+ <input type="submit" class="btn btn-primary w-100" value="Rechercher">
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
- <hr>
|
|
|
+
|
|
|
+ <hr class="my-4">
|
|
|
+
|
|
|
+ <!-- Pagination -->
|
|
|
{% if page.blog_art.paginator.num_pages != 1 %}
|
|
|
- <p class="card-text">
|
|
|
- <nav aria-label="...">
|
|
|
+ <nav aria-label="Pagination">
|
|
|
<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>
|
|
|
+ <a class="page-link" href="?page={{ page.blog_art.previous_page_number }}">
|
|
|
+ <i class="fas fa-chevron-left"></i>
|
|
|
+ </a>
|
|
|
</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>
|
|
|
+ <li class="page-item active">
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <a class="page-link" href="?page={{ page.blog_art.next_page_number }}">
|
|
|
+ <i class="fas fa-chevron-right"></i>
|
|
|
+ </a>
|
|
|
</li>
|
|
|
{% endif %}
|
|
|
</ul>
|
|
|
</nav>
|
|
|
- <p>
|
|
|
+ <hr class="my-4">
|
|
|
{% 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>
|
|
|
-
|
|
|
+ <!-- Catégories -->
|
|
|
+ <h5 class="mb-3"><i class="fas fa-tags"></i> Catégories</h5>
|
|
|
+ <div class="d-flex flex-wrap gap-2 mb-4">
|
|
|
+ {% for cat in page.blog_cat %}
|
|
|
+ <a href="{% url 'blog_tag' cat.cb_titre_slgify %}" class="btn btn-outline-primary btn-sm">
|
|
|
+ {{cat.cb_titre}}
|
|
|
+ </a>
|
|
|
+ {% endfor %}
|
|
|
+
|
|
|
+ {% if page.blog_filter == True %}
|
|
|
+ <a href="{% url 'blog_index' %}" class="btn btn-outline-danger btn-sm">
|
|
|
+ <i class="fas fa-times"></i> Retirer les filtres
|
|
|
+ </a>
|
|
|
+ {% else %}
|
|
|
+ <a href="{% url 'blog_tag' 'all' %}" class="btn btn-outline-dark btn-sm">
|
|
|
+ Tous les articles
|
|
|
+ </a>
|
|
|
+ {% endif %}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <hr class="my-4">
|
|
|
+
|
|
|
+ <!-- Top 10 -->
|
|
|
+ <h5 class="mb-3"><i class="fas fa-fire"></i> Articles Populaires</h5>
|
|
|
+ <div class="list-group list-group-flush">
|
|
|
+ {% for item in page.blog_top10 %}
|
|
|
+ <a href="{% url 'blog_play' item.b_titre_slugify %}"
|
|
|
+ class="list-group-item list-group-item-action border-0 px-0">
|
|
|
+ <div class="d-flex align-items-start">
|
|
|
+ <span class="badge bg-primary rounded-pill me-2">{{forloop.counter}}</span>
|
|
|
+ <span class="flex-grow-1">{{item.b_titre|truncatechars:45}}</span>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ {% endfor %}
|
|
|
+ </div>
|
|
|
+
|
|
|
{% 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>
|
|
|
+ <hr class="my-4">
|
|
|
+ <a href="{% url page.retour %}" class="btn btn-outline-secondary w-100">
|
|
|
+ <i class="fas fa-arrow-left"></i> Retour
|
|
|
+ </a>
|
|
|
{% endif %}
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endif %}
|