Produits Entr'ouvert » Intégrations graphiques Publik

Widgets concernés par le problème d'affichage :

• Tableau
• Tableau de liste
• Tableau de longueur libre

Il faudra peut-être revoir le label du bouton "ajouter une ligne" puisque 'ligne' il n'y a plus en mobile.
Ensuite JS ajoute quelques class et des data-attributs. Cette partie pourrait sauter si ces éléments étaient ajoutés depuis le template des widgets. À voir.

C'est quoi le résultat avec le js sur un site qui n'aurait pas les nouvelles css ? (ce qui serait le cas des sites au quotidien pas encore migrés)

Tu peux pointer les modifications dans le balisage qui seraient utiles ?

C'est quoi le résultat avec le js sur un site qui n'aurait pas les nouvelles css ? (ce qui serait le cas des sites au quotidien pas encore migrés)

Rien du tout, le JS va ajouter des class, des datas-attribut et un "width:100%" sur les tableaux (mais sans effet).
Bref, exactement comme si je n'avais rien fait.

Tu peux pointer les modifications dans le balisage qui seraient utiles ?

1. uniformiser le balisage des "tableau de longueur libre" avec les autres tableau (en plaçant les titres des colonnes dans un `thead`, ça simplifierait le JS et le CSS.
2. Ajouter des titres de lignes aux tableaux de longueur libre, ou à défaut un compteur, information qui serait vraiment utile en mobile. Le compteur peut s'ajouter en CSS only.
3. Ensuite, pour permettre d'alléger la partie JS :
   • Ajouter les data-attributs aux td directement dans les templates (mais là dessus j'hésite, c'est bien aussi que JS le fasse, cela permettrait de l'utiliser sur tout type de tableaux, à l'aide d'un `.pk-class-*`).

Ajouter des titres de lignes

Qu'appelles-tu "titres de lignes" ?

Plus simplement sans doute, si tu peux faire un diff à partir du marqueur actuel pour me pointer les choses :

<div class="widget TableListRowsWidget widget-optional" data-field-id="18">
  <div class="title"><label class="field--label" id="form_label_f18" for="form_f18">tableau longeur libre</label></div>
  <div class="content" aria-labelledby="form_label_f18">
    <table>
      <tbody>
        <tr>
          <th>plop</th>
          <th>plip</th>
        </tr>
        <tr>
          <td><div class="StringWidget widget"><div class="content"><input type="text" name="f18$element0$col0" id="form_f18$element0$col0"></div></div></td>
          <td><div class="StringWidget widget"><div class="content"><input type="text" name="f18$element0$col1" id="form_f18$element0$col1"></div></div></td>
        </tr>
        <tr>
          <td><div class="StringWidget widget"><div class="content"><input type="text" name="f18$element1$col0" id="form_f18$element1$col0"></div></div></td>
          <td><div class="StringWidget widget"><div class="content"><input type="text" name="f18$element1$col1" id="form_f18$element1$col1"></div></div></td>
        </tr>
        ...
      </tbody>
    </table>
    <div class="widget SubmitWidget list-add widget-optional">
      <div class="content " aria-labelledby="form_label_f18$add_element">
        <button name="f18$add_element" value="Ajouter une ligne">Ajouter une ligne</button>
      </div>
    </div>
  </div>
</div>

<div class="widget TableListRowsWidget widget-optional" data-field-id="18">
  <div class="title"><label class="field--label" id="form_label_f18" for="form_f18">tableau longeur libre</label></div>
  <div class="content" aria-labelledby="form_label_f18">
    <table>
+      <thead>
+        <tr>
+          <td></td>
+          <th>plop col1</th>
+          <th>plip col2</th>
+        </tr>
+      </thead>
      <tbody>
-        <tr>
-          <th>plop</th>
-          <th>plip</th>
-        </tr>
        <tr>
+         <th>plop row1</th>
          <td><div class="StringWidget widget"><div class="content"><input type="text" name="f18$element0$col0" id="form_f18$element0$col0"></div></div></td>
          <td><div class="StringWidget widget"><div class="content"><input type="text" name="f18$element0$col1" id="form_f18$element0$col1"></div></div></td>
        </tr>
        <tr>
+         <th>plop row2</th>
          <td><div class="StringWidget widget"><div class="content"><input type="text" name="f18$element1$col0" id="form_f18$element1$col0"></div></div></td>
          <td><div class="StringWidget widget"><div class="content"><input type="text" name="f18$element1$col1" id="form_f18$element1$col1"></div></div></td>
        </tr>
        ...
      </tbody>
    </table>
    <div class="widget SubmitWidget list-add widget-optional">
      <div class="content " aria-labelledby="form_label_f18$add_element">
        <button name="f18$add_element" value="Ajouter une ligne">Ajouter une ligne</button>
      </div>
    </div>
  </div>
</div>

Ok mais on n'a pas de libellés pour les lignes sur ce type de tableau, je ne vois pas le sens que ça aurait, de passer par exemple de :

Participants :
| Prénom   |   Nom     |
|----------------------|
| Frédéric | Péters    |
| Thomas   | Jund      |
|-<+>------------------|

à :

Participants :
|                                  | Prénom   |   Nom     |
|---------------------------------------------------------|
| Informations sur un participant: | Frédéric | Péters    |
| Informations sur un participant: | Thomas   | Jund      |
|-<+>-----------------------------------------------------|

Pour le <thead> ok.

Ok mais on n'a pas de libellés pour les lignes sur ce type de tableau

Oui, c'est pourquoi je proposais juste un compteur pour améliorer la compréhension en mobile

Participants :
|   | Prénom   |   Nom     |
|--------------------------|
| 1 | Frédéric | Péters    |
| 2 | Thomas   | Jund      |
|-<+>----------------------|

En, mobile

Participants :
| 1                        |
| Prénom | Frédéric        |
| Nom    | Péters          |
| 2                        |
| Prénom | Thomas          |
| Nom    | Jund            |
|-<+>----------------------|

à la place de

Participants :
| Prénom |                 |
| Nom    |                 |
| Prénom |                 |
| Nom    |                 |
|-<+>----------------------|

Et avoir ainsi un feedback visuel permettant au user quand il clique sur "+" de voir "3"

Cet aspect ça me va bien si ce n'est pas dans le balisage. Aussi même en-dehors de cet aspect je ne trouve pas ça terrible, ça ne serait pas tranquillement compréhensible d'avoir une variation dans la couleur de fond pour identifier les "lignes" différentes ?

ça ne serait pas tranquillement compréhensible d'avoir une variation dans la couleur de fond pour identifier les "lignes" différentes ?

Comme un zebra sur les tbdody > tr. Techniquement possible (aussi trouver une solution qui garantie de s'adapter à tous les thèmes existants) et voir si on le limite qu'à l'affichage mobile.

Cet aspect ça me va bien si ce n'est pas dans le balisage

Je pensais à un th vide qu'on viendrait remplir avec un compteur css. Pour des raisons d'accessibilité cela me semble plus efficace qu'une indication colorée. (Mais à y regarder de plus prêt, pour une bonne accessibilité il faudrait surtout des attributs scope sur les th : thead > tr > th[scope="col"]).

Mon avis : zebra c'est mieux que rien. Compteur plus efficace en terme de compréhension.