Bug #35707
affichage mensuel : ne pas cacher le texte des réservations, ne pas diminuer leur taille lors du survol
0%
Description
Actuellement on a :
.monthview tbody td div.booking {
...
text-indent: -9999px;
&:hover {
text-indent: 0;
...
}
...
}
qui n'affiche le texte des réservations que quand on passe dessus (survol / hover).
A côté de cela, on aggrandit la taille de la réservation pour être sûr que tout le texte d'affiche :
&.booking {
...
&:hover {
z-index: 3;
height: auto !important;
}
Mais ça ne va pas si le texte est plus petit que la case : non seulement on aurait pu l'afficher, mais quand on passe dessus, la case se réduit en hauteur.
Je proposerais :- toujours chercher à afficher le texte, ne pas le cacher ; en cas de dépassement, avoir quelque chose comme
text-overflow: ellipsis - lors du survol (hover) changer à height:auto afin d'afficher tout le texte, mais imposer une hauteur minimale (celle par défaut)
Files
History
Updated by Frédéric Péters about 5 years ago
- File agenda.png agenda.png added
À ne pas oublier que l'affichage est ainsi parce qu'il peut y avoir plusieurs guichets, qu'également on est plus souvent sur des rendez-vous qui prennent un seul créneau, que tout ça fait qu'on aura régulièrement des bouts où il n'est vraiment pas possible d'afficher quoique ce soit (cf capture).
Updated by Thomas Noël over 4 years ago
- Assignee set to Thomas Jund
Frédéric Péters a écrit :
À ne pas oublier que l'affichage est ainsi parce qu'il peut y avoir plusieurs guichets, qu'également on est plus souvent sur des rendez-vous qui prennent un seul créneau, que tout ça fait qu'on aura régulièrement des bouts où il n'est vraiment pas possible d'afficher quoique ce soit (cf capture).
Ok, mais en css on n'a pas la possibilité d'avoir un truc qui dit "essaye d'afficher si tu as la place" (genre les overflow) ?
Thomas, est-ce que tu aurais un peu de temps pour regarder les petites défaillances d'affichage de nos agendas mensuels ? (Je t'assigne le ticket juste pour que tu dises oui ou non ;) )
Updated by Frédéric Péters over 4 years ago
Ok, mais en css on n'a pas la possibilité d'avoir un truc qui dit "essaye d'afficher si tu as la place" (...)
Mais pour ma part je ne suis même pas sûr de souhaiter ça; si ça s'étend on pourra se mettre à penser que les créneaux qui suivent sont également occupés.
Updated by Frédéric Péters over 4 years ago
Bon, je relis le tout et en fait il ne s'agit pas d'agrandir la case mais d'afficher le texte, et la question CSS est "est-il possible de l'afficher uniquement s'il serait totalement visible" (et je pense que non).
Pour reprendre du ticket :
- toujours chercher à afficher le texte, ne pas le cacher ; en cas de dépassement, avoir quelque chose comme text-overflow: ellipsis
Je ne pense pas cette partie possible, pas de text-overflow: ellipsis sur du texte faisant plusieurs lignes; mais se dire que déjà juste afficher les premiers caractères d'une première ligne ce serait bien ? (ou se dire qu'on peut faire du js...).
- lors du survol (hover) changer à height:auto afin d'afficher tout le texte, mais imposer une hauteur minimale (celle par défaut)
Ce point étant, je présume sans avoir testé maintenant, pour qu'au survol la hauteur ne diminue pas, dans le cas d'un créneau d'une longue durée mais de court texte, c'est bien ça ?
Updated by Thomas Noël over 4 years ago
Frédéric Péters a écrit :
Bon, je relis le tout et en fait il ne s'agit pas d'agrandir la case mais d'afficher le texte, et la question CSS est "est-il possible de l'afficher uniquement s'il serait totalement visible" (et je pense que non).
Oui c'est effectivement de tenter d'afficher ce qu'on peut dans l'espace disponible, et dommage si ça n'existe pas.
Pour reprendre du ticket :
- toujours chercher à afficher le texte, ne pas le cacher ; en cas de dépassement, avoir quelque chose comme text-overflow: ellipsis
Je ne pense pas cette partie possible, pas de text-overflow: ellipsis sur du texte faisant plusieurs lignes; mais se dire que déjà juste afficher les premiers caractères d'une première ligne ce serait bien ? (ou se dire qu'on peut faire du js...).
Si on peut pas faire mieux, ça serait déjà ça. Et on pourrait aussi colorer (mais c'est un autre ticket) selon le type de rendez-vous.
Pour le texte, je me dis que :- ça pourrait être fait uniquement quand il y a qu'un ou deux guichets, parce qu'au delà il y a vraiment peu d'espace (quoique qu'avec certains écrans maintenant...)
- ou alors, penser à réduire la taille des caractères utilisés (je dis cela en regardant les afficheurs genre egroupware)
- lors du survol (hover) changer à height:auto afin d'afficher tout le texte, mais imposer une hauteur minimale (celle par défaut)
Ce point étant, je présume sans avoir testé maintenant, pour qu'au survol la hauteur ne diminue pas, dans le cas d'un créneau d'une longue durée mais de court texte, c'est bien ça ?
Oui.
Updated by Thomas Jund over 4 years ago
- si on souhaite afficher par défaut quelque chose dans les cellules, il faudrait idéalement qu'elles aient au minimum la hauteur du line-height de la font choisie. Donc que la hauteur du tableau d'une journée soit basée sur la durée minimum des "Types de rendez-vous". Sinon, on va avoir des demi-lignes de texte. Ensuite, définir qu'elle est l'information la plus pertinente à afficher en premier. L'heure du RdV en ce moment.
- le :hover n'est pas très mobile friendly (bon cette vue/page n'est pas mobile friendly vous me direz). un "tap" sur un RdV activera le lien présent dans la description du rendez-vous pour rediriger vers l'url de traitement :/
- 1 info minimum à afficher dans la cellule, même si taille de la cellule est trop petite (et donc que l'info est tronquée).
- au "clic" 1 fenêtre modale ou un espace dédié, qui nous permettrait d'ajouter des infos et/ou actions supplémentaires.
- no longer :hover
Updated by Thomas Noël over 4 years ago
Le hover me semble quand même redoutablement pratique dans ce cas précis.
A noter que Chrono ne fait que de l'affichage des calendriers, il n'y a aucune action disponible, une fenêtre modale n'aura pas grand chose à afficher.
Updated by Thomas Jund over 4 years ago
Si on a aucun intérêt, un jour prochain, d'augmenter l'information, en effet, une "tooltip" peut suffire.
(je pense toujours qu'un event toggle (click open, click close) est plus intéressant qu'un :hover).
Updated by Thomas Noël over 4 years ago
Thomas Jund a écrit :
Si on a aucun intérêt, un jour prochain, d'augmenter l'information, en effet, une "tooltip" peut suffire.
(je pense toujours qu'un event toggle (click open, click close) est plus intéressant qu'un :hover).
Ici l'idée c'est qu'on ne peut pas afficher tous les textes, mais qu'on aimerait bien pouvoir le faire, et en permettant à l'agent de vite passer sa souris sur la journée, hop, il déroule tout pour chercher ce qui l'intéresse, sans cliquer à chaque fois sur le rendez-vous.
Pour aller dans le sens d'une action (moi aussi j'aime bien), une autre idée pourrait être qu'un clic agrandisse la hauteur globale d'une semaine (*2) et qu'on gagne ainsi la place pour les textes.
Mais en relisant la première phrase (l'agent qui cherche) je me dis que finalement, la question est : pourquoi un agent a-t-il besoin de voir les textes ? Que cherche-t-il ? Par exemple si c'est pour chercher un type de rendez-vous, ça serait mieux d'avoir une couleur par catégorie de rendez-vous... (Et donc, il faudrait plutôt revenir vers la demande initiale #35697 et y poser cette question à notre client)