-
Notifications
You must be signed in to change notification settings - Fork 0
Tableaux
LucileDT edited this page Jun 20, 2017
·
4 revisions
ℹ️ nous utilisons un CSS uniforme pour la majorité des tableaux de l'application. Si vous souhaitez créer un tableau qui corresponde à notre standard, veuillez suivre les règles listées ci-dessous.
Le fichier CSS concernant les tableaux se trouve dans aaaccueil/web/css/global/taaable.css
. Pour toute modification devant toucher tous les tableaux, prière d'éditer ce fichier.
Balise | En cas de | Contraintes |
---|---|---|
<table> |
- | Rajouter les class table , table-hover et aaa-table
|
<th> |
Colonne ni ID, ni action | Rajouter le style width: n% (sachant que la somme des n% du tableau doit faire 100%) |
<th> |
Colonne contenant un ID | Rajouter la class aaa-id
|
<th> |
Colonne contenant un bouton (action) | Rajouter la class aaa-action
|
<th> |
Colonne contenant une date | Rajouter la class aaa-date
|
<tr> |
Ligne représentant un objet dont on peut voir les détails | Rajouter le trigger onclick="window.document.location='{{ ... }}';" et rajouter la class aaa-row-clickable
|
<td> |
Cellule contenant une date | Rajouter la class aaa-date et formater la date sur deux lignes ('d M Y')<br />('H:i')
|
<td> |
Cellule dont le contenu est très long | Rajouter la class ellipsis et rajouter le title {{ element.donnee }}
|
<a> ou <button>
|
Bouton d'action sur une ligne du tableau | Utiliser une icône dans un <span> , ne pas mettre de label et rajouter un title nom de l'action (verbe à l'infinitif + objet ciblé) |
<a> ou <button>
|
Bouton d'édition d'un élément | Utiliser l'icône edit
|
<a> ou <button>
|
Bouton de suppression d'un élément | Rajouter la class btn-danger et utiliser l'icône trash
|
<table class="table table-hover aaa-table">
<thead>
<tr>
<th class="aaa-id">ID</th>
<th style="width: 8%">Slug</th>
<th style="width: 22%">Titre</th>
<th style="width: 10%" class="aaa-date">Création</th>
<th style="width: 50%">Contenu</th>
<th style="width: 10%">Visibilité</th>
<th class="aaa-action"></th>
<th class="aaa-action"></th>
</tr>
</thead>
<tbody>
{% for element in elements %}
<tr class="aaa-row-clickable" onclick="window.document.location='{{ path('element_detail', { 'slug': element.slug }) }}';">
<td>{{ element.id }}</td>
<td class=" ellipsis" title="{{ element.slug }}">{{ element.slug }}</td>
<td class=" ellipsis" title="{{ element.titre }}">{{ element.titre }}</td>
<td class="aaa-date">{% if element.dateCreation %}{{ annonce.dateCreation|date('d M Y') }}<br />{{ annonce.dateCreation|date('H:i') }}{% endif %}</td>
<td class=" ellipsis" title="{{ element.contenu }}">{{ element.contenu }}</td>
<td>{% if element.estPublic %}Public{% else %}Privé{% endif %}</td>
<td><a href="{{ path('element_editer', { 'slug': element.slug }) }}" class="btn btn-default" title="Éditer l'élément"><span class="glyphicon glyphicon-edit"></span></a></td>
<td><a href="{{ path('element_supprimer', { 'slug': element.slug }) }}" class="btn btn-danger" title="Supprimer l'élément"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
{% endfor %}
</tbody>
</table>