Améliore l'UX de la bande de pages : carré + nom en dessous, flèches précédent/suivant, défilement au survol
Build and deploy / test-python (push) Successful in 7m22s
Build and deploy / test-js (push) Successful in 51s
Build and deploy / lint-python (push) Successful in 5m15s
Build and deploy / lint-js (push) Failing after 1m14s
Build and deploy / build-and-push (push) Skipped
Build and deploy / deploy (push) Skipped
Build and deploy / sonarqube (push) Failing after 5m23s

Chaque carte devient carré (numéro) + nom tronqué SOUS le carré, avec
les actions (réordonner/renommer/supprimer) au-dessus plutôt que sur
le côté. Ajoute deux flèches aux extrémités de la bande pour faire
défiler la VUE (distinct du réordonnancement par carte). Un titre
tronqué défile au survol de la souris (marquee), mesuré dynamiquement
— jamais pour un titre qui tient déjà.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-09-21 15:23:19 +02:00
co-authored by Claude Sonnet 5
parent 8dc4b35dcf
commit a2b95bd547
3 changed files with 191 additions and 76 deletions
+51 -38
View File
@@ -97,45 +97,58 @@
<div class="docSidebar docSidebarLeft" id="docSidebarLeft">
<div class="docPageSection">
<div class="docSectionLabel">Pages</div>
<div class="docPageList" id="docPageList">
{% for page in pages %}
<div class="docPageListItem {{ 'is-active' if page.id == active_page.id else '' }}"
role="button"
tabindex="0"
data-page-id="{{ page.id }}">
{# //NOSONAR Web:S6819,Web:MouseEventWithoutKeyboardEquivalentCheck - div+role=button
volontaire : la rangée contient de vrais <button> d'action (monter/descendre/
renommer/supprimer), qu'un <button> englobant ne pourrait pas contenir
validement. L'équivalent clavier (Entrée/Espace) est posé côté JS
(forgeDocRenderPageList), donc le finding clavier de Sonar est un faux positif
: l'analyseur statique ne voit pas les addEventListener dynamiques. #}
<span class="docPageListTitle">{{ page.title }}</span>
<div class="docPageListActions">
<button type="button"
class="docPageListMove"
data-dir="up"
data-page-id="{{ page.id }}"
aria-label="Déplacer vers le haut"
title="Déplacer vers le haut">↑</button>
<button type="button"
class="docPageListMove"
data-dir="down"
data-page-id="{{ page.id }}"
aria-label="Déplacer vers le bas"
title="Déplacer vers le bas">↓</button>
<button type="button"
class="docPageListRename"
data-page-id="{{ page.id }}"
aria-label="Renommer cette page"
title="Renommer cette page">✎</button>
<button type="button"
class="docPageListDelete"
data-page-id="{{ page.id }}"
aria-label="Supprimer cette page"
title="Supprimer cette page">✕</button>
<div class="docPageStrip">
<button type="button"
class="docPageStripNav"
id="docPageStripPrev"
aria-label="Défiler vers la gauche"
title="Défiler vers la gauche">‹</button>
<div class="docPageList" id="docPageList">
{% for page in pages %}
<div class="docPageListItem {{ 'is-active' if page.id == active_page.id else '' }}"
role="button"
tabindex="0"
data-page-id="{{ page.id }}">
{# //NOSONAR Web:S6819,Web:MouseEventWithoutKeyboardEquivalentCheck - div+role=button
volontaire : la rangée contient de vrais <button> d'action (monter/descendre/
renommer/supprimer), qu'un <button> englobant ne pourrait pas contenir
validement. L'équivalent clavier (Entrée/Espace) est posé côté JS
(forgeDocRenderPageList), donc le finding clavier de Sonar est un faux positif
: l'analyseur statique ne voit pas les addEventListener dynamiques. #}
<div class="docPageListActions">
<button type="button"
class="docPageListMove"
data-dir="up"
data-page-id="{{ page.id }}"
aria-label="Déplacer vers la gauche"
title="Déplacer vers la gauche">←</button>
<button type="button"
class="docPageListMove"
data-dir="down"
data-page-id="{{ page.id }}"
aria-label="Déplacer vers la droite"
title="Déplacer vers la droite">→</button>
<button type="button"
class="docPageListRename"
data-page-id="{{ page.id }}"
aria-label="Renommer cette page"
title="Renommer cette page">✎</button>
<button type="button"
class="docPageListDelete"
data-page-id="{{ page.id }}"
aria-label="Supprimer cette page"
title="Supprimer cette page">✕</button>
</div>
<div class="docPageListSquare">{{ loop.index }}</div>
<span class="docPageListTitle"><span class="docPageListTitleText">{{ page.title }}</span></span>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
<button type="button"
class="docPageStripNav"
id="docPageStripNext"
aria-label="Défiler vers la droite"
title="Défiler vers la droite">›</button>
</div>
<button type="button" class="docBtnSecondary docPageListAdd" id="docPageListAdd">+ Ajouter une page</button>
</div>