Modification de l'apparence des sommaires des billets #6176

[abertin78]

Les modifications ajoutées sont sur le sommaire des billets.
Il y a une couleur bleu lors du survol.
Un meilleur aligenement vertical.
Un ajout d'une bordure très fine entre les titres.

Fix #6176

Contrôle qualité

Il faut lancer le site pour visualiser les changements ci-dessus sur les billets.

[coveralls]

Coverage: 88.31%. Remained the same when pulling 77595e1 on abertin78:sommaire_6176 into d056227 on zestedesavoir:dev.

[atman0eirb]

QA OK ✔️

[Situphen]

QA NOK

Sur la page /billets/, la liste des catégories de billets s'affiche bien (couleur bleue au survol et bordure très fine entre les titres). Par contre sur les pages de contenus, le sommaire ne s'affiche pas comme souhaité (il y a la couleur bleue mais pas la bordure très fine).

Aussi, les modifications ne sont pas restreintes à ces deux éléments alors qu'elles le devraient. Par exemple, il y a maintenant de la couleur bleue au survol et des bordures très fines dans la barre latérale des forums.

Ce ticket n'est pas aussi simple que je le pensais car le code HTML et CSS n'est pas tout à fait le même pour les deux pages (contenus et liste des billets). Il faudrait le réécrire mais en attendant ces modifications feront l'affaire :

diff --git a/assets/scss/layout/_sidebar.scss b/assets/scss/layout/_sidebar.scss
index 4f3588605..142d62bc3 100644
--- a/assets/scss/layout/_sidebar.scss
+++ b/assets/scss/layout/_sidebar.scss
@@ -87,22 +87,23 @@
         padding-top: $length-16;
         padding-bottom: $length-4;
         font-size: $font-size-8;
-        border-bottom: $length-1 solid $grey-100;
 
         a {
             text-decoration: none;
             color: $grey-800;
         }
+    }
+
+    &.accordeon h4,
+    &.summary h4 {
+        cursor: pointer;
+        border-bottom: $length-1 solid $grey-100;
 
         &:hover, &:focus {
             background: $color-sidebar-hover;
         }
     }
 
-    &.accordeon h4 {
-        cursor: pointer;
-    }
-
     h4[data-num] {
         position: relative;
         padding-left: calc(5% + #{$length-24});
@@ -184,7 +185,7 @@
 
                 &:hover, &:focus {
                     background: $color-sidebar-hover;
-                    //outline: none;
+                    outline: none;
                 }
 
                 color: $color-link;
@@ -461,8 +462,6 @@
             padding-bottom: $length-6;
             padding-right: $length-16;
 
-            border-bottom: $length-1 solid $grey-000;
-
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

En résumé :

• on ne modifie pas le bloc h4 pour ne pas impacter les autres pages
• on enlève l'ancien border-bottom du bloc &.summary h4
• on met nos modifications dans un bloc commun aux deux éléments (&.accordeon h4 et &.summary h4)

[Situphen]

Ce n'est toujours pas bon, il y a encore une couleur bleue appliquée au survol des titres de la barre latérale dans les forums alors que ça ne devrait pas. Le bloc &:hover, &:focus { ... } doit être ajouté dans le bloc &.accordeon h4, &.summary h4 { ... }, cf. le diff de mon précédent message.

(Je m'excuse pour le délai de réponse, je suis très pris en ce moment.)

[Situphen]

C'est parfait !