Correction #300 [Indice de maturité] Améliorations ergonomiques lors de la création/modification d'un référentiel
L'objectif de ce ticket est de se rapprocher du graphisme présenté dans les specs lors de la création/modification d'un référentiel.
Les icônes utilisés pour le cliquer/glisser des sections, questions et réponses n'ont actuellement pas le bon icône. Le changer en mettant l'icône grip-vertical.
Actuellement :
Souhaité :
Section
Améliorations visuelles
- Centrer les éléments verticalement au milieu
- Réduire le padding du bloc ainsi que l'espacement entre le bouton +/- et la roue dentée
Actuellement :
Souhaité :
À toute fin utile, voici l'exemple de code (simplifié) utilisé pour atteindre le résultat souhaité de la capture d'écran précédente :
<div class="box-header with-border" style="padding: 0 0 0 10px;display: flex;align-items: center;">
<span style="flex-grow: 1;"><i class="fas fa-ellipsis-v"></i>1. Nouvelle section</span>
<div class="btn-group" style="/*! float:right; padding: 0 1em */">
<button type="button" class="btn btn-default dropdown-toggle">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" class="delete-section"><i class="fa fa-trash"></i> Supprimer</a></li>
</ul>
</div>
<a href="#section_1" class="box-link btn btn-default collapsed" style="/*! float:right; */border:none"><i class="fa fa-plus"></i></a>
</div>
Mes changements :
- Ajout d'un padding 0 sauf à gauche de 10px pour la div principale, et ajout d'un flex avec un alignement vertical
- L'icône et le texte de la section ont été encapsulés dans un span avec une class flex-grow pour prendre toute la place disponible
- La roue dentée et le plus ont été remis dans le bon sens visuellement et au niveau du code
- Le style float et padding ont été enlevé de la div ayant la classe "btn-group"
- Le style float a été enlevé du lien pour réduire/augmenter la section
Bouton de modification d'ordre
Dans la roue dentée, avant la suppression, il faut ajouter « Monter » (icône angle-up) et « Descendre » (icône angle-down) permettant de modifier l’ordre de l’élément.
Bouton d'ajout d'une question
- Réduire l'espacement en dessous du bouton
Actuellement :
Souhaité :
Question
Améliorations visuelles
- Retirer la couleur bleu clair
- Réduire la taille du sélecteur de la pondération
- Réduire l'espacement gauche et droite du bloc de la question. De plus, il doit avoir avoir le même espacement sur les côtés que le bouton d'ajout d'une question
Actuellement :
Souhaité :
Bouton de modification d'ordre
Avant la suppresion, il faut ajouter l'icône angle-up) et l'icône angle-down) permettant de modifier l’ordre de l’élément.
Réponse
Améliorations visuelles
- Réduire l'espacement entre les questions
- Réduire l'espacement entre la préconisation et la suppression
- Réduire l'espacement gauche et droite du bloc de la réponse. De plus, il doit avoir avoir le même espacement sur les côtés que le bouton d'ajout d'une réponse
Actuellement :
Souhaité :
Bouton de modification d'ordre
Idem que la question, ajouter les icônes permettant de modifier l’ordre de l’élément.
Bouton d'ajout d'une section
- Ajouter un espacement entre le bouton "Ajouter une section" et le bandeau de retour/création.
Actuellement :
Souhaité (exemple en ajoutant au bouton un margin-bottom: 20px;) :