Skip to content

Refonte visuelle de la liste des articles #2347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mopolo merged 2 commits into from
Aug 18, 2026
Merged

Refonte visuelle de la liste des articles #2347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7de1e2
Refonte visuelle de la liste des articles
Mopolo Aug 18, 2026
16143fd
Utilisation de la balise time pour la date
Mopolo Aug 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/icons/fa-solid/angle-double-left.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/fa-solid/angle-double-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/fa-solid/angle-left.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/fa-solid/angle-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/mingcute/arrow-left-fill.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion sources/AppBundle/Site/Entity/Repository/ArticleRepository.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ public function getEventsLabelsById(): array
->from('afup_site_article', 'a')
->innerJoin('a', 'afup_forum', 'e', 'a.id_forum = e.id')
->groupBy('e.id')
->orderBy('e.date_debut', 'DESC')
->addOrderBy('e.date_debut', 'DESC')
->addOrderBy('e.titre', 'DESC')

@Mopolo Mopolo Aug 18, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actuellement sur la liste des articles, à chaque fois qu'on refresh, les afup days changent de place de façon random vu qu'ils ont la même date de début. En ajoutant ce filtre on évite cet effet.

->executeQuery()
->fetchAllAssociative();

Expand Down
0 templates/components/Form/Section.html.twig → templates/components/Card/Section.html.twig
View file
Open in desktop
File renamed without changes.
33 changes: 33 additions & 0 deletions templates/components/Form/FilterList.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{# @prop field Le champ de formulaire (choice multiple + expanded) #}
{# @prop title Le titre de la section #}
{# @prop limit Le nombre de choix affichés avant repli #}
{%- props field, title, limit = 5 -%}

{# les choix cochés remontent, l'ordre d'origine est conservé pour le reste #}
{%- set choices = field|sort((a, b) => (b.vars.checked ? 1 : 0) - (a.vars.checked ? 1 : 0)) -%}
{%- set visible_count = max(limit, choices|filter(choice => choice.vars.checked)|length) -%}
{%- set shown = choices|slice(0, visible_count) -%}
{%- set folded = choices|slice(visible_count) -%}

<twig:Card:Section title="{{ title }}" class="gap-2">
<div class="flex flex-col gap-1">
{% for choice in shown %}
<div class="flex items-center gap-2">{{ form_widget(choice) }}{{ form_label(choice) }}</div>
{% endfor %}
</div>

{% if folded|length %}
<details class="group">
<summary class="flex w-fit cursor-pointer items-center gap-1 text-sm text-ruby-700 list-none [&::-webkit-details-marker]:hidden">
<twig:ux:icon name="mingcute:down-fill" class="size-4 transition-transform group-open:rotate-180" />
<span class="group-open:hidden">Voir les {{ folded|length }} autres</span>
<span class="hidden group-open:inline">Voir moins</span>
</summary>
<div class="mt-1 flex flex-col gap-1">
{% for choice in folded %}
<div class="flex items-center gap-2">{{ form_widget(choice) }}{{ form_label(choice) }}</div>
{% endfor %}
</div>
</details>
{% endif %}
</twig:Card:Section>
8 changes: 4 additions & 4 deletions templates/event/sponsorship_file/form.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,23 @@

{{ form_errors(leadForm) }}

<twig:Form:Section title="{{ 'Vos coordonnées'|trans }}">
<twig:Card:Section title="{{ 'Vos coordonnées'|trans }}">
<div class="grid grid-cols-1 md:grid-cols-3 gap-7">
{{ form_row(leadForm.firstname) }}
{{ form_row(leadForm.lastname) }}
{{ form_row(leadForm.email) }}
{{ form_row(leadForm.phone) }}
{{ form_row(leadForm.language) }}
</div>
</twig:Form:Section>
</twig:Card:Section>

<twig:Form:Section title="{{ 'Votre entreprise'|trans }}">
<twig:Card:Section title="{{ 'Votre entreprise'|trans }}">
<div class="grid grid-cols-1 md:grid-cols-3 gap-7">
{{ form_row(leadForm.company) }}
{{ form_row(leadForm.poste) }}
{{ form_row(leadForm.website) }}
</div>
</twig:Form:Section>
</twig:Card:Section>

{{ form_row(leadForm.recaptcha) }}

Expand Down
4 changes: 2 additions & 2 deletions templates/site/news/display.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@
<header class="font-titre">
<h1 class="text-afup-800 text-2xl sm:text-4xl">{{ article.titre }}</h1>
<div class="flex mt-2">
<small class="text-2xl flex-grow">
<time class="text-2xl flex-grow" datetime="{{ article.datePublication|date('Y-m-d H:i') }}">
{{ article.datePublication|format_date('long') }}
</small>
</time>
<small class="hidden sm:flex gap-2">
{% if article.theme %}
<twig:Button class="text-xs" variant="secondary" as="a" href="{{ path('news_list', { news_filters : { theme : [article.theme.value]} }) }}">
Expand Down
162 changes: 58 additions & 104 deletions templates/site/news/list.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
{% extends 'site/base.html.twig' %}
{% extends 'layouts/site.html.twig' %}

{% block title %}Les actualités de l'AFUP, page {{ current_page }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<link rel="stylesheet" href="/css/talk/list.css">
{% endblock %}

{% block canonical %}
{% if current_page == 1 %}
<link rel="canonical" href="{{ url('news_list') }}" />
Expand All @@ -18,114 +12,74 @@

{% block content %}

<div class="mw1400p center" id="container">
<div class="line" id="main">
<h1>Actualités</h1>
<div class="container">
<div class="col-md-9 col-sm-12">

{% if articles|length %}
{% for article in articles %}
<a class="article article-teaser" href="{{ path('news_display', { code: article.slug}) }}"
title="Lire l'article: {{ article.titre }}">
<h2>{{ article.titre }}</h2>
<div class="article-date"><i>{{ article.datePublication|format_date('long') }}</i></div>
<p>{{ article.resume|raw }} <span class="home-read-more">Lire plus <i class="fa fa-arrow-right"></i></span></p>
</a>
{% endfor %}
{% else %}
Aucun article trouvé.
{% endif %}
<div class="container mx-auto px-4 py-6 sm:px-0 sm:py-10 flex flex-row sm:flex-row gap-5">
<div class="flex flex-col gap-10 sm:gap-12 flex-grow">
{% for article in articles %}
<article>
<h2 class="text-afup-800 text-xl sm:text-2xl">{{ article.titre }}</h2>

<time datetime="{{ article.datePublication|date('Y-m-d H:i') }}" class="text-lg text-neutre-400">
{{ article.datePublication|format_date('long') }}
</time>

<p class="text-gray-700 mt-2">{{ article.resume|raw }}</p>

<a href="{{ path('news_display', { code: article.slug}) }}"
title="Lire l'article: {{ article.titre }}"
class="flex items-center gap-1 text-ruby-700 mt-2">
Lire plus <twig:UX:Icon name="mingcute:arrow-right-fill" class="h-5" />
</a>
</article>
{% else %}
<h2 class="text-3xl">
Aucun article trouvé avec ces critères.
</h2>
<a href="{{ path('news_list') }}" class="flex items-center gap-1 text-ruby-700 text-2xl">
<twig:UX:Icon name="mingcute:arrow-left-fill" class="h-5" /> Revenir à la liste
</a>
{% endfor %}

{{ render(controller(
'AppBundle\\Controller\\Website\\PagerController::display',
{
'total_items': total_items,
'current_page': current_page,
'extra_parameters': { news_filters: filters },
'items_per_page' : articles_per_page,
}
)) }}
</div>

{{ render(controller(
'AppBundle\\Controller\\Website\\PagerController::display',
{
'total_items': total_items,
'current_page': current_page,
'extra_parameters': { news_filters: filters },
'items_per_page' : articles_per_page,
}
)) }}
<div class="min-w-fit max-w-100 hidden sm:block">
{{ form_start(form, { action: path('news_list') }) }}

<twig:Card class="flex flex-col gap-6">
<div class="flex flex-col gap-6">
<twig:Form:FilterList :field="form.year" title="Année" />
<twig:Form:FilterList :field="form.theme" title="Thème" />
<twig:Form:FilterList :field="form.event" title="Cycle de conférences" />
</div>

<div class="col-md-3 col-sm-12 tablet-hidden">

{{ form_start(form, { attr: { class: "news-filters"}, action: path('news_list') }) }}
<div class="ais-root ais-refinement-list">
<div class="ais-refinement-list--header ais-header">
<h4>Année</h4>
</div>

<div class="ais-body ais-refinement-list--body">
<div class="ais-refinement-list--list">
<div class="ais-refinement-list--item">

{% for item in form.year %}
<div>
{{ form_widget(item) }}
{{ form_label(item) }}
</div>
{% endfor %}
{% if filters|filter(values => values is not empty)|length %}
<a href="{{ path('news_list') }}" class="text-neutre-400">
Effacer les filtres
</a>
{% endif %}
</twig:Card>

</div>
</div>
</div>
</div>

<div class="ais-root ais-refinement-list">
<div class="ais-refinement-list--header ais-header">
<h4>Thème</h4>
</div>

<div class="ais-body ais-refinement-list--body">
<div class="ais-refinement-list--list">
<div class="ais-refinement-list--item">
{% for item in form.theme %}
<div>
{{ form_widget(item) }}
{{ form_label(item) }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>

<div class="ais-root ais-refinement-list">
<div class="ais-refinement-list--header ais-header">
<h4>Cycle de conférences</h4>
</div>

<div class="ais-body ais-refinement-list--body">
<div class="ais-refinement-list--list">
<div class="ais-refinement-list--item">
{% for item in form.event %}
<div>
{{ form_widget(item) }}
{{ form_label(item) }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>

{{ form_widget(form.submit, {attr: {style: "display:none "}}) }}

{{ form_end(form) }}
</div>
</div>
{{ form_widget(form.submit, {attr: {style: "display:none "}}) }}

</div>
{{ form_end(form) }}
</div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
$('form[name=news_filters]').on('change', function() {
$(this).submit();
})
document.addEventListener('DOMContentLoaded', () => {

@Mopolo Mopolo Aug 18, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je n'ai pas mis jquery sur les nouvelles pages, à voir ce qu'on veut faire niveau js si on a besoin un jour de plus complexe.

const form = document.querySelector('form[name=news_filters]');
form?.addEventListener('change', () => form.requestSubmit());
});
</script>
{% endblock %}
92 changes: 61 additions & 31 deletions templates/site/pager.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,61 @@
<div id="pagination-container">
<div id="pagination">
<ul class="ais-pagination">
{% if current_page > 1 %}
<li class="ais-pagination--item ais-pagination--item__first">
<a class="ais-pagination--link" href="{{ path('news_list', {page: 1}|merge(extra_parameters)) }}"><i class="fa fa-angle-double-left"></i></a>
</li>
{% endif %}
{% if current_page > 1 %}
<li class="ais-pagination--item ais-pagination--item__previous">
<a rel="prev" class="ais-pagination--link" href="{{ path('news_list', {page: current_page - 1}|merge(extra_parameters)) }}"><i class="fa fa-angle-left"></i></a>
</li>
{% endif %}
{% for page in displayed_pages %}
<li class="ais-pagination--item ais-pagination--item__page{% if page == current_page %} ais-pagination--item__active{% endif %}">
<a class="ais-pagination--link" href="{{ path('news_list', {page: page}|merge(extra_parameters)) }}">{{ page }}</a>
</li>
{% endfor %}
{% if current_page < nb_pages %}
<li class="ais-pagination--item ais-pagination--item__next">
<a rel="next" class="ais-pagination--link" href="{{ path('news_list', {page: current_page + 1}|merge(extra_parameters)) }}"><i class="fa fa-angle-right"></i></a>
</li>
{% endif %}
{% if current_page < nb_pages %}
<li class="ais-pagination--item ais-pagination--item__last">
<a class="ais-pagination--link" href="{{ path('news_list', {page: nb_pages}|merge(extra_parameters)) }}"><i class="fa fa-angle-double-right"></i></a>
</li>
{% endif %}
</ul>
</div>
</div>
<nav class="mx-auto flex w-full justify-center">
<ul class="flex flex-row gap-2 items-center">
{% if current_page > 1 %}
<li>
<twig:Button variant="secondary"
as="a"
href="{{ path('news_list', {page: 1}|merge(extra_parameters)) }}"
aria-label="Première page"
class="flex items-center gap-2">
<twig:UX:Icon name="fa-solid:angle-double-left" class="h-4"/>
</twig:Button>
</li>
{% endif %}
{% if current_page > 1 %}
<li>
<twig:Button variant="secondary"
as="a"
rel="prev"
href="{{ path('news_list', {page: current_page - 1}|merge(extra_parameters)) }}"
aria-label="Page précédente"
class="flex items-center gap-2">
<twig:UX:Icon name="fa-solid:angle-left" class="h-4"/>
</twig:Button>
</li>
{% endif %}
{% for page in displayed_pages %}
<li>
<twig:Button :variant="page == current_page ? 'tertiary' : 'secondary'"
as="a"
href="{{ path('news_list', {page: page}|merge(extra_parameters)) }}"
aria-label="Page {{ page }}"
class="flex">
{{ page }}
</twig:Button>
</li>
{% endfor %}
{% if current_page < nb_pages %}
<li>
<twig:Button variant="secondary"
as="a"
rel="next"
href="{{ path('news_list', {page: current_page + 1}|merge(extra_parameters)) }}"
aria-label="Page suivante"
class="flex items-center gap-2">
<twig:UX:Icon name="fa-solid:angle-right" class="h-4"/>
</twig:Button>
</li>
{% endif %}
{% if current_page < nb_pages %}
<li>
<twig:Button variant="secondary"
as="a"
href="{{ path('news_list', {page: nb_pages}|merge(extra_parameters)) }}"
aria-label="Dernière page"
class="flex items-center gap-2">
<twig:UX:Icon name="fa-solid:angle-double-right" class="h-4"/>
</twig:Button>
</li>
{% endif %}
</ul>
</nav>
Loading