|
|
@@ -10,292 +10,105 @@
|
|
|
{% 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;
|
|
|
- object-position: center;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-.blog-card-image-container {
|
|
|
- width: 100%;
|
|
|
- max-height: 400px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- background: #f7fafc;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.blog-card-image-container img {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 400px;
|
|
|
- width: auto;
|
|
|
- height: auto;
|
|
|
- object-fit: contain;
|
|
|
- object-position: center;
|
|
|
- transition: transform 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.blog-card:hover .blog-card-image-container img {
|
|
|
- transform: scale(1.02);
|
|
|
-}
|
|
|
-
|
|
|
-.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-container {
|
|
|
- max-height: 250px;
|
|
|
- }
|
|
|
-
|
|
|
- .blog-card-image-container img {
|
|
|
- max-height: 250px;
|
|
|
- }
|
|
|
-
|
|
|
- .blog-card-content {
|
|
|
- padding: 1.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- .blog-card-title {
|
|
|
- font-size: 1.5rem;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
{% if page.blog_art %}
|
|
|
{% for item in page.blog_art %}
|
|
|
- <article class="blog-card">
|
|
|
- <a href="{% url 'blog_play' item.b_titre_slugify %}" class="text-decoration-none">
|
|
|
- {% if item.b_description_img %}
|
|
|
- <div class="blog-card-image-container">
|
|
|
- <img src="{{item.b_description_img}}" alt="{{item.b_titre}}">
|
|
|
- </div>
|
|
|
- {% 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 %}
|
|
|
+ <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>
|
|
|
-
|
|
|
- <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>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- </article>
|
|
|
+ <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>
|
|
|
{% 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 shadow-sm" style="background-color: rgba(250,250,250,0.95); border-radius: 12px;">
|
|
|
+<div class="card" style="background-color: rgba(250,250,250,0.88);" >
|
|
|
<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-primary w-100" value="Rechercher">
|
|
|
+ <input type="submit" class="btn btn-success w-100" value="Rechercher">
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
-
|
|
|
- <hr class="my-4">
|
|
|
-
|
|
|
- <!-- Pagination -->
|
|
|
+ <hr>
|
|
|
{% if page.blog_art.paginator.num_pages != 1 %}
|
|
|
- <nav aria-label="Pagination">
|
|
|
+ <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 }}">
|
|
|
- <i class="fas fa-chevron-left"></i>
|
|
|
- </a>
|
|
|
+ <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">
|
|
|
- <span class="page-link">{{forloop.counter}}</span>
|
|
|
- </li>
|
|
|
+ <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>
|
|
|
+ <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 }}">
|
|
|
- <i class="fas fa-chevron-right"></i>
|
|
|
- </a>
|
|
|
+ <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>
|
|
|
- <hr class="my-4">
|
|
|
+ <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 %}
|
|
|
|
|
|
- <!-- 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.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 %}
|
|
|
- <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>
|
|
|
+ <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 %}
|
