Amélioration template carto dynamique (en mode smartphone ou iframe)

[EdmondAgate]

Amélioration de carto dynamique

Description En mode petit iframe (rendu type smartphone) un rendu carto dynamique :

• rend difficile la fermeture d'une fiche ouverte en modale (la croix grisée est en fonction du comportement non cliquable) - principalement sous FF (difficile a identifier le problème exact pour le reproduire - impression que cela ait assez aléatoire)
• a l'image de la loupe de recherche "coupée" en haut

exemple de rendu sur https://www.puy-de-dome.fr/territoires/numerique/mediation-numerique.html depuis https://carto.hinaura.fr/?AnnuaireMedNum63/

[mrflos]

pour la loupe de recherche, ca peut etre facilement changé par du css

/* bazar.css | https://carto.hinaura.fr/tools/bazar/presentation/styles/bazar.css?v=4.2.4 */

.filters-col .bazar-search {
  /* margin-bottom: 2rem; */
  margin: 2rem 0;
}

Pour l'autre soucis, je n'ai pas réussi à la reproduire sur firefox version 103 sous linux, mais peut etre sur des petites iframe le look fiche sur le coté est plus adapté aux petits écrans ?

[EdmondAgate]

merci pour le bout de CSS :) Effectivement l'affichage sur le côté pourrait etre une solution mais pas compatible avec notre template de fiche custom :(

[mrflos]

ok, il faudra quand même trouver un moyen de reproduire le bug pour la croix de fermeture, sinon on ne pourra pas faire du support sur du custom

[J9rem]

@mrflos @EdmondAgate effectivement, en vue écran petit (largeur 360px), la croix pour fermer la popup n'est pas bien visible.

Ceci n'est pas vraiment un bug mais plus un ajustement du css. C'est reproductible avec ce code {{bazarliste id="1" template="map" dynamic="true" entrydisplay="popup" filtersresultnb="false" groups="checkboxListeTypebf_type" height="600px" popuptemplate="_map_popup_html.twig" search="true" }} en ayant défini une liste en case à cocher dans le formulaire 1 C'est juste que la popup est trop large. Il est tout à fait possible de fermer cette fenêtre en cliquant n'importe où sur la carte mais il n'est pas sûr que l'usager retrouve ce comportement à chaque fois et donc la visibilité du bouton est primordiale.

En tapant ce code

@media(max-width: 380px){
  .leaflet-popup-content,
  .leaflet-popup-content-wrapper,
  .leaflet-popup .BAZ_cadre_fiche,
  .BAZ_cadre_map {
    max-width: 95%;
  }
  .leaflet-popup-content {
    width: 250px !important;
  }
  .leaflet-container a.leaflet-popup-close-button {
    right: 5%;
  }
}
@media(max-width: 310px){
  .leaflet-popup-content {
    width: 200px !important;
  }
}

ça devrait être bon. Je l'ai intégré pour doryphore 4.3 en ajoutant le correctif proposé par @mrflos : https://github.com/YesWiki/yeswiki/commit/04ad6650a7ee349d0ea78fcfc996b35a20ffb9cf