Synthese - Sidebar Responsive

[pierre56]

Synthese - Sidebar Responsive

Bonjour @Naomi-Fischer,
J'ai l'impression qu'on est nombreux a bosser sur le responsive en mm temps mais pas forcément avec la mm vision des choses, cependant je pense qu'on pourrait se compléter .

Donc je prends en exemple la sidebar de la synthese, que j'ai essayé d'améliorer pour ordi et mobile.
L'un de nous 2 va PR en premier et ton travail est plus propre que le mien car éclaté aux bons endroits.
J'ai la flemme de travailler dans le vide donc voilà mes propositions d'améliorations :

1) Changer la taille, l'icone et l'emplacement du bouton

Le bouton n'est pas assez visible et il se superpose parfois avec les boutons d'actions de la map, encore pire en mobile

Avant

Après

avec en bonus un changement de l'icone pour inviter a filtrer si la sidebar est collapse (la couleur est a harmoniser avec ce que tu as fais)

2) Changer l'affichage si mobile, passage en block

Il Faut pour moi utiliser l'avantage du scroll via mobile pour avoir la synthese en mode monopage.
Donc en affichage mobile, j'ai changé le display du
wrapper pour le mettre en block.

De cette manière, cela fait 3 block qui se suivent fluidement:

• Les Filtres (affiché par défaut mais hidden possible) + recherche/reset
• la map
• les résultats + téléchargement

Je n'ai pas réussi a faire de screen défilant entier, étonnamment ça bloque au niveau de la map et ça scroll la map...

Mais en plusieurs screen, l'affichage mobile donne :

Il me semble important d'afficher les filtres en premier, car j'ai plusieurs filtres pré-sélectionnés et je veux que mes utilisateurs soient en capacité de comprendre ce qu'ils recherchent. Il est possible d'enlever ce block avec le collapse, mais il s'affiche par défaut.

Voilà ce que j'ai pu faire,
https://github.com/pierre56/GeoNature/blob/feat-responsive/custom/css/frontend.css

Je vais éclater mon css pour mettre aux bons endroits quant la PR #2578
sera passée et que j'aurais récupéré de la develop.

Bonne journée
Pierre