Open Time

Finalement je vais peut-être m’occuper des tables avant de sortir la 2.15, en particulier celles qui sont utilisées pour les listes de billets, commentaires, …

Parce qu’autant sur grand écran ça se comporte plutôt bien, sur mobile c’est assez difficile à l’usage.

J’ai toujours sous le coude ce CodePen d’Adrian Roselli qui fait plutôt bien le job^[1], avec certes un peu de javascript, mais est-ce réellement gênant ?

La partie utile est celle-ci, côté javascript :

function ResponsiveCellHeaders(elmID) {
  try {
    var THarray = [];
    var table = document.getElementById(elmID);
    var ths = table.getElementsByTagName("th");
    for (var i = 0; i < ths.length; i++) {
      var headingText = ths[i].innerHTML;
      THarray.push(headingText);
    }
    var styleElm = document.createElement("style"),
      styleSheet;
    document.head.appendChild(styleElm);
    styleSheet = styleElm.sheet;
    for (var i = 0; i < THarray.length; i++) {
      styleSheet.insertRule(
        "#" +
        elmID +
        " td:nth-child(" +
        (i + 1) +
        ')::before {content:"' +
        THarray[i] +
        ': ";}',
        styleSheet.cssRules.length
      );
    }
  } catch (e) {
    console.log("ResponsiveCellHeaders(): " + e);
  }
}
// ResponsiveCellHeaders("Books");

Et côté CSS (surtout pour la partie petit écran, qu’il faudra peut-être adapter) :

td::before {
  display: none;
}

@media screen and (max-width: 37em), print and (max-width: 5in) {
  table, tr, td {
    display: block;
  }
  th, tr:first-of-type {
    display: none;
  }
  td::before {
    display: inline;
  }
  td {
    display: grid;
  }
}

Après il va falloir comment ça interragit avec les cases de sélection ou les boutons de glisser-déposer qui sont ajoutés via javascript également, avec dans certains cas l’ajout de cellules supplémentaires…