Corrections UI responsive (suite)

betagouv / mission-transition-ecologique

Application Transition Ecologique des Entreprises

https://mission-transition-ecologique.beta.gouv.fr/

GNU Affero General Public License v3.0

7 stars 7 forks source link

Corrections UI responsive (suite) #585

Closed ColineLebaratoux closed 8 months ago

ColineLebaratoux commented 8 months ago

Dans la suite du ticket

[x] Revoir les tailles et les espacements entre les logos dans le footer cf image ci-après :
[x] supprimer l'encadré gris autour de chaque logo

[x] harmoniser les hauteurs de tous les blocs thématiques sur le questionnaire "je ne sais pas par ou commencer" (se fixer sur celle de la mobilité)

[x] sur la HP, revoir l'espacement entre les numéros et le texte et augmenter la largeur du bloc (diminuer les marges gauche et droite)

[x] sur la fiche dispositif, diminuer l'espacement entre les objectifs et les encarts de détails (coût, prestation, contact, date de fin)
[x] sur la fiche dispositif, augmenter un peu la taille des 4 pictos (coût, prestation, contact, date de fin)

[x] Revoir les marges gauche et droites sur la fiche dispositif pour les encarts "les étapes de votre demande d'aide" "suis-je éligible" "en savoir plus" cf capture d'ecran : le texte est collé au bord de l'écran

ColineLebaratoux commented 8 months ago

@JulienParis tu peux me partager le lien pour tester ?

JulienParis commented 8 months ago

@ColineLebaratoux pardon pour l'oubli, le lien de preview est celui-ci : https://tee-preprod-pr590.osc-fr1.scalingo.io/

ColineLebaratoux commented 8 months ago

Tout parfait ! Sauf ce point qui ne semble pas avoir changé :

[x] sur la fiche dispositif, augmenter un peu la taille des 4 pictos (coût, prestation, contact, date de fin) tu peux en profiter aussi pour :
[x] affiner la barre violette sur le côté gauche

Merci @JulienParis !!

JulienParis commented 8 months ago

@ColineLebaratoux effectivement je ne voyais pas ce problème sur mon navigateur de prédilection (Firefox), d'autant que j'ai des réglages de taille de typo différents sur Firefox. En testant sur Safari j'ai vu ce dont tu parlais.

Après modifs voilà le résultat que j'arrive à obtenir et sur Firefox (à gauche) et sur Safari (à droite) => https://tee-preprod-pr590.osc-fr1.scalingo.io/aides-entreprise/amo-chaufferie-biomasse

ColineLebaratoux commented 8 months ago

Super sur Chrome ou firefox En revanche, les blocs se mettent côte à côte sur Safari

JulienParis commented 8 months ago

Super sur Chrome ou firefox En revanche, les blocs se mettent côte à côte sur Safari

Comme tu le vois sur mon dernier screenshot je n'ai pas ce comportement sur Safari, je n'arrive pas à le reproduire. Les blocs ont bien la classe DSFR fr-col fr-col-sm-12 fr-col-md-4 qui indique qu'en largeur d'écran sm ils sont censés faire 12 colonnes, et qu'en taille md faire 4 colonnes de large.

Tu as tenté en rafraichissant la page ?

PS : je vais tenter en indiquant xs au lieu de sm (cf docs)