Corrige le style du pied-de-page pour qu'il ne dépasse plus

[Arnaud-D]

Fix #6146.

Le pied de page se réduit désormais correctement sans causer une bande blanche sur la droite pour certaines t'ailles d'écran.

Contrôle qualité

Réduire une page progressivement et voir que le pied de page est toujours bien affiché.

Note: Cela marche parfaitement sur certaines pages (forum par exemple), mais pas sur d'autres (bibliothèque, page d'accueil) où il reste une bande blanche bien que le pied de page soit bien en ordre. C'est un souci indépendant lié aux colonnes de vignettes, qui est hors du périmètre de cette PR.

[coveralls]

Coverage remained the same at 88.303% when pulling 0a884a9 on Arnaud-D:coupe-ce-qui-depasse-1 into 08d06b1 on zestedesavoir:dev.

[Situphen]

Ta solution permet en effet d'éviter que le pied-de-page ne dépasse à droite à certains moments, mais en effet secondaire les boutons des réseaux sociaux ne sont plus centrés au milieu. C'est une histoire de goûts, mais j'ai trouvé une solution qui permet de garder ces boutons centrés au milieu jusqu'à ce que ne ce soit plus possible à cause de l'espace disponible.

Tous les éléments (gauche, centre et droite) ont flex-shrink: 0 ce qui les empêche de rétrécir par rapport à leur taille initiale. L'élément central a flex-grow: 1 tandis que ceux de gauche et de droite ont flex-grow: 5 donc ils prennent chacun 5 fois plus de place que l'élément central quand c'est possible (ce qui permet de garder cet élément centré). Enfin, l'élément central a flex-basis: auto ce qui lui confère une petite marge et évite que les textes soient collés quand on rétrécit la fenêtre ; les deux autres ont flex-basis: 0.

Voici le diff à appliquer sur ta branche :

diff --git a/assets/scss/layout/_footer.scss b/assets/scss/layout/_footer.scss
index 2bd03b776..9cf4b8615 100644
--- a/assets/scss/layout/_footer.scss
+++ b/assets/scss/layout/_footer.scss
@@ -13,9 +13,9 @@
     }
 
     .copyright, .links {
-        flex-shrink: 1;
-        flex-grow: 1;
-        min-width: 0;
+        flex-shrink: 0;
+        flex-grow: 5;
+        flex-basis: 0;
     }
 
     .copyright {
@@ -63,7 +63,7 @@
         }
 
         &.social {
-            flex-grow: 0;
+            flex-grow: 1;
             flex-shrink: 0;
             flex-basis: auto;
             text-align: center;

[Arnaud-D]

J'ai fait ta modif. Perso, ça m'est égal que ça soit centré, je ne trouve pas que ça change grand chose au design. Voire même ça fait moins équilibré vu que la liste de liens est très longue.

[Situphen]

QA OK