Tableaux

Tableaux [deprecated]

ℹ️ 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.

CSS

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.

TWIG

Règles

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

Exemple

<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>