Projet

Général

Profil

Development #62733

réadapter le layout par défaut ($width & $limit)

Ajouté par Thomas Jund il y a environ 2 ans. Mis à jour il y a presque 2 ans.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
14 mars 2022
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

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

Révision bfb01a5f (diff)
Ajouté par Corentin Séchet il y a presque 2 ans

scss: improve default layout (#62733)

Historique

#1

Mis à jour par Thomas Jund il y a environ 2 ans

  • Description mis à jour (diff)
#2

Mis à jour par Corentin Séchet il y a environ 2 ans

  • Assigné à mis à Corentin Séchet
#3

Mis à jour par Corentin Séchet il y a environ 2 ans

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.

#4

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.

#5

Mis à jour par Thomas Jund il y a environ 2 ans

icitoyen aussi

#6

Mis à jour par Thomas Jund il y a environ 2 ans

et thonon-agglomeration-2021 et surement d'autres.

#7

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.

#8

Mis à jour par Corentin Séchet il y a presque 2 ans

  • Fichier saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___left supprimé
#9

Mis à jour par Corentin Séchet il y a presque 2 ans

  • Fichier saint-denis_https_____formulaires-saint-denis-93.test.entrouvert.org___right supprimé
#10

Mis à jour par Corentin Séchet il y a presque 2 ans

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.

#11

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).

#12

Mis à jour par Corentin Séchet il y a presque 2 ans

J'ai aussi vérifié les thèmes IMIO, je les informerai du changement.

#13

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

#14

Mis à jour par Corentin Séchet il y a presque 2 ans

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.

#15

Mis à jour par Thomas Jund il y a presque 2 ans

  • Statut changé de Solution proposée à Solution validée

Allons-y comme ça.

#16

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)
#17

Mis à jour par Transition automatique il y a presque 2 ans

  • Statut changé de Résolu (à déployer) à Solution déployée
#18

Mis à jour par Transition automatique il y a plus d'un an

Automatic expiration

Formats disponibles : Atom PDF