Amélioration du sommaire de la barre latérale des contenus

[Situphen]

L'idée est d'améliorer un peu le sommaire qui est dans la barre latérale des contenus ainsi que la liste des catégories de billets. Si vous ne voyez pas ce dont je parle, regardez les captures d'écran plus bas !

Il va falloir agir principalement sur les titres h4 de cette structure de code :

<aside class="sidebar">
  <h3>Catégories des billets</h3>
    <h4>Informatique</h4>
    <h4>Sciences de la nature</h4>
    <h4>Sciences humaines et sociales</h4>
    <h4>Autres</h4>
  </h3>
</aside>

Ce que l'on a actuellement

Dans le fichier SCSS assets/scss/layout/_sidebar.scss dédié à la barre latérale, deux bouts de code nous intéressent :

• la partie commune aux sommaires et à la liste des catégories
  

  zds-site/assets/scss/layout/_sidebar.scss

  Lines 86 to 98 in 2378a7c

  	h4 {
  	padding-top: $length-20;
  	font-size: $font-size-8;
  	a {
  	text-decoration: none;
  	color: $grey-800;
  	}
  	}
  	&.accordeon h4 {
  	cursor: pointer;
  	}

• la partie spécifique aux sommaires
  

  zds-site/assets/scss/layout/_sidebar.scss

  Lines 453 to 462 in 2378a7c

  	&.summary {
  	h4 {
  	padding-bottom: $length-6;
  	padding-right: $length-16;
  	border-bottom: $length-1 solid $grey-000;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;

Ce qu'il va falloir modifier

Il va falloir :

• ajouter une petite couleur bleue au survol des titres ;

   &:hover, &:focus {
       background: $color-sidebar-hover;
   }

• aligner un peu mieux le texte verticalement ;

  padding-top: $length-16;
  padding-bottom: $length-4;

• ajouter une petite bordure très fine entre les titres.

  border-bottom: $length-1 solid $grey-100;

Captures d'écran

[jeanlapostolle]

Je veux bien tenter cette issue

[Situphen]

J'ai discuté avec @jeanlapostolle et il n'a pas le temps de travailler sur ce ticket en ce moment donc ce ticket est libre. N'hésitez pas à continuer le travail qu'il a commencé sur sa PR !