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
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:
co-authored by
Claude Sonnet 5
parent
8dc4b35dcf
commit
a2b95bd547
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user