YesWiki/yeswiki

UI Ressource : affichage facette à droite masquée + changer place boutton exporter

Opened this issue · 4 comments

Gobtous commented

Salut l'équipe ! :)

Facette

système :

  • Doryphore 4.4
  • php 8.0
  • testé sur firefox, falcon, chrome

problème :

En choisissant d'avoir une facette à droite, elle glisse derrière les cartes et se cache.

FacetteRessourceAffichage

Suggestion :

  • gérer les priorités d'affichages
  • Enlever le mode flottant de la facette et en faire la 4ème colonne, un menu qui ne bouge pas. Seule les cartes ressources fonctionne comme des flex-item (grille par 3, puis 2, puis 1, puis vu mobile)

Boutton exporter

problème :

Le bouton exporter est tout en bas de la page. Et pour le trouver, ce n'est pas évident car il faut tout défiler et le reperer. J'aimerai le boutton soit visible dès que les visiteurs entre sur la page. Cela leur permettre de se dire : "je peux faire ça"

suggestion :

  • Le placer tout en haut de la page. Soit une mini-bande ou au même endroit que les facettes.
  • Inclure l'option pdf ?
mrflos commented

Hello,
En théorie les facettes sont callées avec une colonne, j'ai l'impression que c'est l'affichage des cartes qui n'a pas de largeur contrainte sur pose souci.

C'est visible publiquement quelque part cette page, pour regarder les CSS ?

Gobtous commented

J'ai retesté en vérifiant que ça venait pas des options du formulaire "ajout de composants" : ça ne change rien. C'est directement dans la mise en forme.

Le site avec la box flottante, pas de CSS perso, version 4.4 :

Un autre avec un problème proche dès qu'on réduit la page,
css perso, version 4.3.1

Si besoin de créer un compte pour tester, dis-moi directement ici.

mrflos commented

Sur l'exemple, en rajoutant du css, on s'en sort

.nbcol-3 {
  grid-template-columns: 32% 32% 32% !important;
}

.bazar-cards-container {
  /* gap: 2rem; */
  gap: 3%;
  width: 100%;
}

Mais il faudra revoir le css du coeur de yeswiki pour que cela marche clé en main

  • 👍1
Gobtous commented

J'ai changé les propriétés CSS en celle du flexbox. Puis définit une largeur max pour les cartes comme ça elles ne peuvent pas se réduire et sont forcés de descendre. ça marche que la facette soit à gauche ou à droite. :)

.bazar-cards-container {
    display: flex;
    flex-wrap: wrap;
}
.style-vertical .bazar-card {
    max-width: 247px;
}