valentin_le_moignandClaude Opus 5
167950c627
Les règles `.scroll-spinner` et leurs keyframes étaient enfermées dans le bloc `/* … */` legacy de `_category.scss` : Sass recopie ces commentaires verbatim, les trois points n'avaient donc aucun style et restaient invisibles pendant le chargement AJAX. Bloc sorti du commentaire (le legacy reste en place), points allégés (5 px, gris) et marge haute élargie. Le modifieur `--reserve` réserve la place en permanence et n'anime que l'opacité, au lieu de basculer `display` : plus de saut de mise en page ni à l'apparition ni à la disparition. `infiniteScroll.js` bascule désormais la classe `is-loading`. Le `rootMargin` de l'observer passe à 700 px pour que la requête parte plus tôt, et le loader de l'agenda est supprimé (markup + JS). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WQLwtNFa1LNaN7QTAbYkZx
131 lines
8.6 KiB
Twig
131 lines
8.6 KiB
Twig
{% extends "base.twig" %}
|
|
|
|
{% block content %}
|
|
<main class="category-archive">
|
|
<div class="container">
|
|
<div class="full-block category--{{ parent_slug }}">
|
|
<header class="category-header">
|
|
<div class="category-header-top">
|
|
<nav class="breadcrumb" aria-label="Fil d'Ariane">
|
|
<a href="{{ function('home_url', '/') }}">{{ current_language == 'en' ? 'Home' : 'Accueil' }}</a>
|
|
{% if not is_parent and category.parent %}
|
|
<span class="breadcrumb__separator">→</span>
|
|
<a class="breadcrumb__cat" href="{{ function('get_category_link', category.parent) }}">{{ function('thalim_cat_name', category.parent) }}</a>
|
|
<span class="breadcrumb__separator">→</span>
|
|
<a class="breadcrumb__cat" href="{{ function('get_category_link', category.term_id) }}"><span class="breadcrumb__current">{{ category|cat_name }}</span></a>
|
|
{% elseif is_direct %}
|
|
<span class="breadcrumb__separator">→</span>
|
|
<a class="breadcrumb__cat" href="{{ function('get_category_link', category.term_id) }}">{{ category|cat_name }}</a>
|
|
<span class="breadcrumb__separator">→</span>
|
|
<span class="breadcrumb__current">{{ current_language == 'en' ? 'Other' : 'Autre' }}</span>
|
|
{% else %}
|
|
<span class="breadcrumb__separator">→</span>
|
|
<a class="breadcrumb__cat" href="{{ function('get_category_link', category.term_id) }}"><span class="breadcrumb__current">{{ category|cat_name }}</span></a>
|
|
{% endif %}
|
|
</nav>
|
|
<a href="{{ agenda_toggle_url }}" class="link-button agenda-toggle-btn">
|
|
{% if view_mode == 'agenda' %}
|
|
<i class="iconoir-view-grid"></i>{{ current_language == 'en' ? 'Switch to grid view' : 'Passer à la vue grille' }}
|
|
{% else %}
|
|
<i class="iconoir-calendar"></i>{{ current_language == 'en' ? 'Switch to agenda view' : 'Passer à la vue agenda' }}
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
<h1 class="category-header__title">
|
|
{%- if is_direct -%}
|
|
{{ current_language == 'en' ? 'Other' : 'Autres' }} {{ (category|cat_name)|lower }}
|
|
{%- else -%}
|
|
{{ category|cat_name }}
|
|
{%- endif -%}
|
|
</h1>
|
|
{% if term_presentation %}
|
|
<div class="taxonomy-description">{{ term_presentation|raw }}</div>
|
|
{% endif %}
|
|
</header>
|
|
{% include 'partials/category-filters.twig' %}
|
|
<div id="grid-sections"{% if view_mode == 'agenda' %} style="display:none"{% endif %}>
|
|
{% if is_parent %}
|
|
{% for subcategory in subcategories %}
|
|
{% if subcategory.posts is not empty %}
|
|
<section class="subcategory-section">
|
|
<h2 class="subcategory-section__title">{{ subcategory.term|cat_name }}</h2>
|
|
<div class="post-grid">
|
|
{% for post in subcategory.posts %}
|
|
{% include 'partials/post-card.twig' with { post: post, card: cards[post.ID], show_category: true, type_only: true } %}
|
|
{% endfor %}
|
|
</div>
|
|
<div class="category-section-footer">
|
|
{% if current_language == 'en' %}
|
|
<a href="{{ subcategory.term.link }}" class="link-button"><i class="iconoir-plus-circle"></i>See all {{ (subcategory.term|cat_name)|lower }}</a>
|
|
{% else %}
|
|
{% set is_fem = subcategory.term.description == 'f' %}
|
|
<a href="{{ subcategory.term.link }}" class="link-button"><i class="iconoir-plus-circle"></i>Voir {{ is_fem ? 'toutes les' : 'tous les' }} {{ (subcategory.term|cat_name)|lower }}</a>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if direct_posts is defined and direct_posts is not empty %}
|
|
<section class="subcategory-section">
|
|
<h2 class="subcategory-section__title">{{ current_language == 'en' ? 'Other' : 'Autres' }}</h2>
|
|
<div class="post-grid">
|
|
{% for post in direct_posts %}
|
|
{% include 'partials/post-card.twig' with { post: post, card: cards[post.ID], show_category: true, type_only: true } %}
|
|
{% endfor %}
|
|
</div>
|
|
<div class="category-section-footer">
|
|
{% if current_language == 'en' %}
|
|
<a href="{{ autres_link }}" class="link-button"><i class="iconoir-plus-circle"></i>See all other {{ (category|cat_name)|lower }}</a>
|
|
{% else %}
|
|
<a href="{{ autres_link }}" class="link-button"><i class="iconoir-plus-circle"></i>Voir toutes les autres {{ (category|cat_name)|lower }}</a>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
{% else %}
|
|
<section class="subcategory-section">
|
|
<div class="post-grid" id="post-grid">
|
|
{% for post in pinned_posts %}
|
|
{% include 'partials/post-card.twig' with { post: post, card: cards[post.ID], show_category: true, type_only: true } %}
|
|
{% endfor %}
|
|
{% for post in posts %}
|
|
{% include 'partials/post-card.twig' with { post: post, card: cards[post.ID], show_category: true, type_only: true } %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div id="scroll-sentinel"
|
|
data-category="{{ category_id }}"
|
|
data-axe="{{ active_axe }}"
|
|
data-date-from="{{ active_date_from }}"
|
|
data-date-to="{{ active_date_to }}"></div>
|
|
<div id="scroll-spinner" class="scroll-spinner scroll-spinner--reserve">
|
|
<div class="scroll-spinner__dot"></div>
|
|
<div class="scroll-spinner__dot"></div>
|
|
<div class="scroll-spinner__dot"></div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# Agenda view — shared by parent and leaf categories #}
|
|
<div class="agenda-view-container{% if view_mode == 'agenda' %} is-active{% endif %}"
|
|
id="agenda-view"
|
|
data-category="{{ category_id }}"
|
|
data-include-children="{{ agenda_include_children }}"
|
|
data-axe="{{ active_axe }}"
|
|
data-date-from="{{ active_date_from }}"
|
|
data-date-to="{{ active_date_to }}">
|
|
<h2 class="agenda-view-title">Agenda</h2>
|
|
<div class="agenda-swiper-wrap">
|
|
<button class="agenda-swiper-prev" aria-label="{{ current_language == 'en' ? 'Previous' : 'Précédent' }}"><i class="iconoir-arrow-left"></i></button>
|
|
<div class="swiper agenda-swiper">
|
|
<div class="swiper-wrapper" id="agenda-swiper-wrapper"></div>
|
|
</div>
|
|
<button class="agenda-swiper-next" aria-label="{{ current_language == 'en' ? 'Next' : 'Suivant' }}"><i class="iconoir-arrow-right"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% endblock %}
|