Produits Entr'ouvert » Intégrations graphiques Publik

Le visuel est déjà validé par le client, je souhaite surtout une relecture formelle du markup et de la CSS (est-ce que c'est bien comme ça qu'il faut faire?).

Remarques globales¶

C'est les points qui reviennent systematiquement.

Class `.cell--body`
Nouvelle class à utiliser pour aligner le contenu d'une cellule avec le titre. À utiliser sur les divs qui englobent du contenu. À placer au même niveau que les titres h2 des cellules. Ne pas utiliser sur les links-lists. Voir remarques sur chaques cellules ci-dessous.

p > table, p > form
L'élément p ne doit contenir que des balises type inline (em, strong, etc.) et jamais de balises block comme des ul, table, form etc.

.pk-table-wrapper > table
Les grands tableaux ne sont pas consultables sur petits écrans.
Tu peux ajouter un wrapper aux tableaux qui permet de leur ajouter un scoll horizontal sur mobile (qui permet à minima de voir la tabelau en entier s'il est trop large).

<div class="pk-table-wrapper">
  <table>
  …
  </table>
</div>

J'ai commencé à détailler mais c'est toujours les mêmes trucs

rsa13-plateformes.html

Supprimer la div qui encadre la div.links-list. Le list de liens doit se trouver au même niveau que le titre de la cellule pour que les liens prennent toute la largeur de la cellule.

  <h2>Vos Platesformes</h2>
- <div>
  <div class="links-list>

rsa13-plateforme.html

ajouter class .cell-body

  <h2>{{ plateforme.name }}</h2>
+ <div class="cell-body">
- <div>

rsa13-liste-des-beneficaires.html

• add .cell-body class
• Supprimer p autour de form

rsa13-fragment-liste-beneficiaires.html

• supprimer p autour de table
• ajouter `div.pk-table-wrapper` autour de table

rsa13-beneficiaire.html

• Pas de p autour de table
• utiliser plutôt les grid. plutot qu'un table pour civilité, nom, etc. (a cause responsive)

rsa13-accompagnateurs.html

• Pas de p autour de table

rsa13-beneficiaire-presentation, rsa13-beneficiaire-pole-emploi

• utiliser plutôt les grid. plutot qu'un table pour civilité, nom, etc. (a cause responsive)

rsa13-beneficiaire-fonds-aide

• Pas de p autour de table, `.pk-table-wrapper`

ETC.

désolé, ma faute.

La class `.cell--body` utilise la syntaxe "2 tiret" "block--element". Voir https://dev.entrouvert.org/projects/prod-eo/wiki/HowDoWeDoCSS#Convention-block--element
Sinon c'est bien.

Autre astuce qui peut faciliter la mise en forme à l'aide des class `grid--*` :
Entourer les colonnes avec un wrapper `.clearfix`, ce qui évite de devoir ajouter des class .`grid-1-1` sur les éléments précédents et suivants

<p>…</p>
<p>…/p>

<div class="clearfix">
  <div class="grid-1-2">…</div>
  <div class="grid-1-2">…</div>
</div>

<p>…</p>
<p>…/p>