Development #62733
réadapter le layout par défaut ($width & $limit)
0%
Description
Parce que je trouve les valeurs par défaut du layout plus vraiment adaptées.
Parce qu'un $width de 1000px sur un écran HD en 1920px ça fait vraiment étroit.
Parce que c'est aussi très étroit voir ridicule de proposer un layout de 2 cols + sidebar à 801px ($mobile-limit: 800px !default), ou encore une disposition en 3 colonnes (avec .grid-1-3) sur un viewport de 481px ($very-small-viewport: 480px ! default).
Parce qu'en relisant les thèmes, ses valeurs ne sont jamais adaptées, elles doivent fonctionner au mieux par défaut.
Je propose de passer par défaut les variables suivantes :
$width: 1280px; $mobile-limit: 1024px; $very-small-limit: 560px; $mobile-width: 720px;
(! donner une valeur à $mobile-width peut avoir des impacts sur certains thèmes)
Fichiers
Révisions associées
Historique
Mis à jour par Corentin Séchet il y a environ 2 ans
- Fichier 0001-scss-improve-default-layout-62733.patch 0001-scss-improve-default-layout-62733.patch ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Il n'y a que Lanester et Caen qui redéfinissent mobile-width : ça va donc impacter tous les autres thèmes. Ceci dit, j'imagine que c'est assez sûr puisque les version mobiles doivent bien s'afficher à 720px, l'ancienne largeur max en mobile étant de 800px.
Mis à jour par Thomas Jund il y a environ 2 ans
Il n'y a que Lanester et Caen
C'est une variable assez récente
Ceci dit, j'imagine que c'est assez sûr
Peu de thèmes vont bouger, mais certains, certainement.
Par exemple sur Guerande, ça casse le header (https://portail-guerande.test.entrouvert.org/)
Je pense à des intégrations particulières comme Toulouse.
Mis à jour par Thomas Jund il y a environ 2 ans
et thonon-agglomeration-2021 et surement d'autres.
Mis à jour par Corentin Séchet il y a presque 2 ans
- Fichier saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___left ajouté
- Fichier saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___right ajouté
Pour une bonne partie des thèmes, ça fait quelque chose comme pour les screenshots joints de Saint-Denis : le bouton de connexion se décolle de la marge droite, le bouton de nav de la marge gauche. Je propose de patcher pour que par défaut, la nav prenne toute la largeur même si mobile-width est défini et repasser ensuite sur les thèmes que ça casse.
Mis à jour par Corentin Séchet il y a presque 2 ans
- Fichier
saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___leftsupprimé
Mis à jour par Corentin Séchet il y a presque 2 ans
- Fichier
saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___rightsupprimé
Mis à jour par Corentin Séchet il y a presque 2 ans
- Fichier saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___left.png saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___left.png ajouté
- Fichier saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___right.png saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___right.png ajouté
Avec les extensions c'est mieux. J'ajoute : le footer aussi prend mobile-width. Je proposerai aussi de le faire prendre toute la largeur, mais je suis pas sûr de ce choix.
Mis à jour par Frédéric Péters il y a presque 2 ans
J'imagine que ça doit venir de
(! donner une valeur à $mobile-width peut avoir des impacts sur certains thèmes)
On pourrait séparer les deux sujets, et introduire une valeur pour $mobile-width dans un autre ticket.
Mais sinon, oui, à lire #60039 l'objectif de $mobile-width concerne le contenu et son organisation en colonne, ni header ni footer, donc comme tu dis on pourrait les laisser prendre toute la largeur.
(et il y aurait alors juste à vérifier les deux intégrations qui posent un $mobile-width aujourd'hui. (caen&lanester).
Mis à jour par Corentin Séchet il y a presque 2 ans
- Fichier 0001-scss-improve-default-layout-62733.patch 0001-scss-improve-default-layout-62733.patch ajouté
J'ai aussi vérifié les thèmes IMIO, je les informerai du changement.
Mis à jour par Thomas Jund il y a presque 2 ans
De mon point de vue, aucun problème ou adaptation à faire côté footer. s'il est conçu pour fonctionner avec marges en desktop, il fonctionnera avec marges en mobile
Côté header et nav, c'est en effet plus délicat, le header, le menu avec le burger btn, le liseré, le padding ajouté au logo pour laissez la place du burger btn, le style par défaut des toplinks, etc… ont été conçu dans une logique full width en viewport mobile.
Il peut être interessant d'étudier l'exclusion de `#nav, #header` et du paramètre $mobile-width :
div#header, div#nav, div#footer, div#main-content-wrapper, .page-width { clear: both; max-width: $width; margin: 0 auto; } @if ($mobile-width) { div#footer, div#main-content-wrapper, .page-width { @media ($max-mobile-viewport) { &:not(#nav) { max-width: $mobile-width; } } } }
Beaucoup moins de thèmes seraient certainement à patcher.
Coquille dans static/avray/_vars.scss
$mobile-with => $mobile-width
Mis à jour par Corentin Séchet il y a presque 2 ans
- Fichier 0001-scss-improve-default-layout-62733.patch 0001-scss-improve-default-layout-62733.patch ajouté
Concernant le footer, il s'agit uniquement d'une décision de design, il n'y a effectivement rien à adapter qu'on set sa width ou pas (sauf sur Lanester et Caen). Les thèmes où j'ai mis mobile-width à none sont tous dans le cas où une marge sur le contenu ne convient pas, ça n'a pas de rapport avec le footer. Je n'ai pas saisi l'utilité du &:not(nav) puisque le selecteur parent ne prend pas en compte le header ou la nav, mais uniquement le contenu et le footer.
Mis à jour par Thomas Jund il y a presque 2 ans
- Statut changé de Solution proposée à Solution validée
Allons-y comme ça.
Mis à jour par Corentin Séchet il y a presque 2 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit bfb01a5f3b121d4e6184139c5ec4231c01a0faeb Author: Corentin Séchet <csechet@entrouvert.com> Date: Wed Mar 16 15:25:44 2022 +0100 scss: improve default layout (#62733)
Mis à jour par Transition automatique il y a presque 2 ans
- Statut changé de Résolu (à déployer) à Solution déployée
scss: improve default layout (#62733)