entrouvert
/
chrono
15
1
Fork 0
Code Issues Pull Requests 10 Releases Wiki Activity

manager: check counters (#74489) #38

Merged
lguerin merged 1 commits from wip/74489-booking-check-counters into main 2023-02-28 11:07:42 +01:00
Conversation 9 Commits 1 Files Changed 12
lguerin commented 2023-02-16 11:04:17 +01:00
Owner
There is no content yet.
lguerin added 1 commit 2023-02-16 11:04:17 +01:00
gitea/chrono/pipeline/pr-main There was a failure building this commit Details
gitea/chrono/pipeline/head There was a failure building this commit Details
5c7a7e99c3
manager: check counters (#74489)
lguerin commented 2023-02-16 11:07:05 +01:00
Poster
Owner

pour discussion:

  • choix des couleurs ?
  • ça prend une certaine place sur le listing, on laisse comme ça ou on revoit la mise en page ? (tableau au lieu de liste ? mettre les pastilles sur une autre ligne ?)

(note: j'ai posé les styles dans gadjo, ça sera une autre PR)

pour discussion: - choix des couleurs ? - ça prend une certaine place sur le listing, on laisse comme ça ou on revoit la mise en page ? (tableau au lieu de liste ? mettre les pastilles sur une autre ligne ?) (note: j'ai posé les styles dans gadjo, ça sera une autre PR)
pointage-pastilles-detail.png
15 KiB
pointage-pastille-listing-ligne-complète.png
15 KiB
pointage-pastilles-listing.png
33 KiB
pointage-pastilles-detail.png pointage-pastille-listing-ligne-complète.png pointage-pastilles-listing.png
mates commented 2023-02-16 11:21:05 +01:00
Collaborator

Les couleurs sont un peu criardes (même si je comprends que ce sont les couleurs standards des alertes et que là je trouve ça très bien).

« Not checked » pourrait être traduit en « Non pointés ».

La présentation en tableau de la page des événements pourrait apporter une meilleure lisibilité. A défaut, il est peut-être envisageable de sauter une ligne entre les tags et le libellé.

Les couleurs sont un peu criardes (même si je comprends que ce sont les couleurs standards des alertes et que là je trouve ça très bien). « Not checked » pourrait être traduit en « Non pointés ». La présentation en tableau de la page des événements pourrait apporter une meilleure lisibilité. A défaut, il est peut-être envisageable de sauter une ligne entre les tags et le libellé.
lguerin force-pushed wip/74489-booking-check-counters from 5c7a7e99c3 to 6a54dd2af0 2023-02-23 09:28:06 +01:00 Compare
lguerin force-pushed wip/74489-booking-check-counters from 6a54dd2af0 to 0b2db06bc7 2023-02-23 14:54:52 +01:00 Compare
lguerin changed title from WIP: manager: check counters (#74489) to manager: check counters (#74489) 2023-02-23 14:55:26 +01:00
lguerin commented 2023-02-23 14:55:40 +01:00
Poster
Owner

Vu avec ThomasJ.

Des copies d'écran du résultat.

  • la page de paramétrage de l'agenda (changements: l'espacement des lignes, le nom de l'event en gras)
  • la page de détail d'un event (avec les tags et les compteurs à la ligne)
  • la page de listing des events (changements: l'espacement des lignes, le nom de l'event en gras, les events hors période d'inscription ne changent plus de couleur, la mention "hors de la période de réservation" bascule sur la ligne des tags et compteurs)
Vu avec ThomasJ. Des copies d'écran du résultat. - la page de paramétrage de l'agenda (changements: l'espacement des lignes, le nom de l'event en gras) - la page de détail d'un event (avec les tags et les compteurs à la ligne) - la page de listing des events (changements: l'espacement des lignes, le nom de l'event en gras, les events hors période d'inscription ne changent plus de couleur, la mention "hors de la période de réservation" bascule sur la ligne des tags et compteurs)
chrono-compteurs-pointage-detail.png
33 KiB
chrono-compteurs-pointage-listing.png
168 KiB
chrono-impact-settings.png
89 KiB
chrono-compteurs-pointage-detail.png chrono-compteurs-pointage-listing.png chrono-impact-settings.png
lguerin force-pushed wip/74489-booking-check-counters from 0b2db06bc7 to 42e3c37c39 2023-02-23 15:10:16 +01:00 Compare
fpeters commented 2023-02-23 15:18:24 +01:00
Owner

Vu avec ThomasJ.

(uniquement des questions de style ici, sur base des captures)

  • la page de paramétrage de l'agenda (changements: l'espacement des lignes, le nom de l'event en gras)

Pour différencier deux niveaux dans les listes sur la page d'accueil on a une réduction taille/opacité,; on imaginerait modifier ça pour faire pareil ? (dans un autre ticket)

Aussi (mais pareil plutôt un autre ticket) ça me fait m'interroger sur l'affichage de l'identifiant des événements.

  • la page de listing des events (...)

On réduisait l'opacité des lignes des événements passés, on abandonne ça ?

Je ne suis pas tout à fait sûr de ce style sans fond/bordure, parce que j'imaginerais pour faciliter la lecture un avantage à garder les éléments alignés, ce qui se perd si on passe la dizaine :

Accueil du midi
Pointé  Présents 2  Absents 1

Accueil après l'école
Pointé  Présents 22  Absents 1

Ce à quoi, on pourra répondre en forçant une largeur,

Accueil du midi
Pointé  Présents 2    Absents 1

Accueil après l'école
Pointé  Présents 22   Absents 1

et pour faciliter la lecture, avoir le nombre aligné à droite,

Accueil du midi
Pointé  Présents   2  Absents 1

Accueil après l'école
Pointé  Présents  22  Absents 1

et là il me semble qu'on gagne à avoir un fond pour "unir" "Présents 2", ne pas avoir un "2" perdu au milieu.

> Vu avec ThomasJ. (uniquement des questions de style ici, sur base des captures) > - la page de paramétrage de l'agenda (changements: l'espacement des lignes, le nom de l'event en gras) Pour différencier deux niveaux dans les listes sur la page d'accueil on a une réduction taille/opacité,; on imaginerait modifier ça pour faire pareil ? (dans un autre ticket) Aussi (mais pareil plutôt un autre ticket) ça me fait m'interroger sur l'affichage de l'identifiant des événements. > - la page de listing des events (...) On réduisait l'opacité des lignes des événements passés, on abandonne ça ? Je ne suis pas tout à fait sûr de ce style sans fond/bordure, parce que j'imaginerais pour faciliter la lecture un avantage à garder les éléments alignés, ce qui se perd si on passe la dizaine : ``` Accueil du midi Pointé Présents 2 Absents 1 Accueil après l'école Pointé Présents 22 Absents 1 ``` Ce à quoi, on pourra répondre en forçant une largeur, ``` Accueil du midi Pointé Présents 2 Absents 1 Accueil après l'école Pointé Présents 22 Absents 1 ``` et pour faciliter la lecture, avoir le nombre aligné à droite, ``` Accueil du midi Pointé Présents 2 Absents 1 Accueil après l'école Pointé Présents 22 Absents 1 ``` et là il me semble qu'on gagne à avoir un fond pour "unir" "Présents 2", ne pas avoir un "2" perdu au milieu.
lguerin force-pushed wip/74489-booking-check-counters from 42e3c37c39 to b2e6dcee55 2023-02-23 15:41:23 +01:00 Compare
lguerin commented 2023-02-23 15:44:55 +01:00
Poster
Owner

Pour différencier deux niveaux dans les listes sur la page d'accueil on a une réduction taille/opacité,; on imaginerait modifier ça pour faire pareil ? (dans un autre ticket)

Oui c'est pareil sur cette page, les mêmes styles sont appliqués (cf captures, listing et settings)

Aussi (mais pareil plutôt un autre ticket) ça me fait m'interroger sur l'affichage de l'identifiant des événements.

Sur la page de paramétrage uniquement, oui, autre ticket :)

On réduisait l'opacité des lignes des événements passés, on abandonne ça ?

C'est ce que je voulais dire par "les events hors période d'inscription ne changent plus de couleur"

on pourra répondre en forçant une largeur

Mais ça dépend de la langue et des traductions

avoir un fond pour "unir"

C'est déjà uni par la couleur vert/rouge/gris, non ?

> Pour différencier deux niveaux dans les listes sur la page d'accueil on a une réduction taille/opacité,; on imaginerait modifier ça pour faire pareil ? (dans un autre ticket) Oui c'est pareil sur cette page, les mêmes styles sont appliqués (cf captures, listing et settings) > Aussi (mais pareil plutôt un autre ticket) ça me fait m'interroger sur l'affichage de l'identifiant des événements. Sur la page de paramétrage uniquement, oui, autre ticket :) > On réduisait l'opacité des lignes des événements passés, on abandonne ça ? C'est ce que je voulais dire par "les events hors période d'inscription ne changent plus de couleur" > on pourra répondre en forçant une largeur Mais ça dépend de la langue et des traductions > avoir un fond pour "unir" C'est déjà uni par la couleur vert/rouge/gris, non ?
events-settings.png
45 KiB
events-listing.png
37 KiB
events-settings.png events-listing.png
fpeters commented 2023-02-23 16:22:40 +01:00
Owner

Pour différencier deux niveaux dans les listes sur la page d'accueil on a une réduction taille/opacité,; on imaginerait modifier ça pour faire pareil ? (dans un autre ticket)

Oui c'est pareil sur cette page, les mêmes styles sont appliqués (cf captures, listing et settings)

J'aurais dû mettre une capture d'écran, je parlais accueil accueil (chrono/manager/templates/chrono/manager_home.html).

On réduisait l'opacité des lignes des événements passés, on abandonne ça ?

C'est ce que je voulais dire par "les events hors période d'inscription ne changent plus de couleur"

Désolé j'avais lu trop vite et pas fait le lien; de l'historique c'est juste moi qui avait fait ça https://dev.entrouvert.org/issues/13382 on ne reviendra sur aucune promesse si on arrête, ok.

on pourra répondre en forçant une largeur

Mais ça dépend de la langue et des traductions

Oui dans ma tête j'imaginais le balisage modifié pour appliquer la largeur uniquement au compteur,

<span class="meta meta-success">
  <span class="meta--label">{% trans "Presents" %}</span>
  <span class="meta--count">{{ event.present_count }}</span>
</span>

+ (pas vérifié)

.meta--count {
        display: inline-block;
        text-align: right;
        min-width: 2em;
}

avoir un fond pour "unir"

C'est déjà uni par la couleur vert/rouge/gris, non ?

Dans le ticket de base il est question de daltoniens et j'ai assuré qu'on prendrait ça en compte, j'ai peur que juste la couleur ne suffise pas.

Mais c'est exacerbé par mon idée précédente qui éloigne le compteur du texte, je me prends peut-être un peu trop la tête ici; oublions, et qu'on parte sur ce qui est proposé et on pourra toujours ajuster derrière en fonction des retours.

> > Pour différencier deux niveaux dans les listes sur la page d'accueil on a une réduction taille/opacité,; on imaginerait modifier ça pour faire pareil ? (dans un autre ticket) > > Oui c'est pareil sur cette page, les mêmes styles sont appliqués (cf captures, listing et settings) J'aurais dû mettre une capture d'écran, je parlais accueil accueil (chrono/manager/templates/chrono/manager_home.html). > > On réduisait l'opacité des lignes des événements passés, on abandonne ça ? > > C'est ce que je voulais dire par "les events hors période d'inscription ne changent plus de couleur" Désolé j'avais lu trop vite et pas fait le lien; de l'historique c'est juste moi qui avait fait ça https://dev.entrouvert.org/issues/13382 on ne reviendra sur aucune promesse si on arrête, ok. > > > on pourra répondre en forçant une largeur > > Mais ça dépend de la langue et des traductions Oui dans ma tête j'imaginais le balisage modifié pour appliquer la largeur uniquement au compteur, ``` <span class="meta meta-success"> <span class="meta--label">{% trans "Presents" %}</span> <span class="meta--count">{{ event.present_count }}</span> </span> + (pas vérifié) .meta--count { display: inline-block; text-align: right; min-width: 2em; } ``` > > avoir un fond pour "unir" > > C'est déjà uni par la couleur vert/rouge/gris, non ? Dans le ticket de base il est question de daltoniens et j'ai assuré qu'on prendrait ça en compte, j'ai peur que juste la couleur ne suffise pas. Mais c'est exacerbé par mon idée précédente qui éloigne le compteur du texte, je me prends peut-être un peu trop la tête ici; oublions, et qu'on parte sur ce qui est proposé et on pourra toujours ajuster derrière en fonction des retours.
lguerin commented 2023-02-23 16:58:26 +01:00
Poster
Owner

(fatigue, j'ai cru que c'était ThomasJ qui avait fait le commentaire précédent, mes réponses ne sont donc pas forcément très claires)

J'aurais dû mettre une capture d'écran, je parlais accueil accueil (chrono/manager/templates/chrono/manager_home.html).

Je ne vois pas de quoi tu parles, tu peux poser une capture ?

Désolé j'avais lu trop vite et pas fait le lien; de l'historique c'est juste moi qui avait fait ça https://dev.entrouvert.org/issues/13382 on ne reviendra sur aucune promesse si on arrête, ok.

Donc oui, avec ThomasJ on s'est dit que l'opacité réduite pour un event hors délai nuisait à la lecture des informations, donc je l'ai supprimée et j'ai passé l'information "hors délai" sur la ligne des tags.
(et le pointage se fait lorsque l'évent est passé, donc les compteurs seraient tout le temps en opacité réduite)

Thomas m'a également demandé de créer un nouveau type de tags, arbitrairement nommé meta, et de ne pas reprendre les styles span.tag qui sont trop définis dans gadjo uniquement pour ul.objects-list li span.tag et h2 span.tag

Et pour la page de détail, sortir les tags & co du h2 et les poser en dessous.

Oui dans ma tête j'imaginais le balisage modifié pour appliquer la largeur uniquement au compteur,

Ca fonctionne si on a exactement la même chose avant les .meta sur chaque ligne. Or on peut avoir un tag Pointé, un tag Complet, les deux, pas de tag.

Et donc le fond pour unir, ThomasJ m'a explicitement demandé de ne pas mettre de fond :)

(fatigue, j'ai cru que c'était ThomasJ qui avait fait le commentaire précédent, mes réponses ne sont donc pas forcément très claires) > J'aurais dû mettre une capture d'écran, je parlais accueil accueil (chrono/manager/templates/chrono/manager_home.html). Je ne vois pas de quoi tu parles, tu peux poser une capture ? > Désolé j'avais lu trop vite et pas fait le lien; de l'historique c'est juste moi qui avait fait ça https://dev.entrouvert.org/issues/13382 on ne reviendra sur aucune promesse si on arrête, ok. Donc oui, avec ThomasJ on s'est dit que l'opacité réduite pour un event hors délai nuisait à la lecture des informations, donc je l'ai supprimée et j'ai passé l'information "hors délai" sur la ligne des tags. (et le pointage se fait lorsque l'évent est passé, donc les compteurs seraient tout le temps en opacité réduite) Thomas m'a également demandé de créer un nouveau type de tags, arbitrairement nommé `meta`, et de ne pas reprendre les styles span.tag qui sont trop définis dans gadjo uniquement pour `ul.objects-list li span.tag` et `h2 span.tag` Et pour la page de détail, sortir les tags & co du h2 et les poser en dessous. > Oui dans ma tête j'imaginais le balisage modifié pour appliquer la largeur uniquement au compteur, Ca fonctionne si on a exactement la même chose avant les .meta sur chaque ligne. Or on peut avoir un tag Pointé, un tag Complet, les deux, pas de tag. Et donc le fond pour unir, ThomasJ m'a explicitement demandé de ne pas mettre de fond :)
fpeters commented 2023-02-23 17:28:04 +01:00
Owner

(fatigue, j'ai cru que c'était ThomasJ qui avait fait le commentaire précédent, mes réponses ne sont donc pas forcément très claires)

Et mes questions s'adressaient surtout à Thomas, pour comprendre les choix :)

Je ne vois pas de quoi tu parles, tu peux poser une capture ?

image

On a nom de l'événement <span class="identifier">[identifiant : ...]</span>, avec .identifier qui réduit la taille et l'opacité, j'imaginais qu'on voudrait adopter là aussi un rendu <span>nom de l'évenement en gras</span> <span>[identifiant en pas gras mais sans y toucher taille/opacité]</span>.

Ca fonctionne si on a exactement la même chose avant les .meta sur chaque ligne. Or on peut avoir un tag Pointé, un tag Complet, les deux, pas de tag.

Ah zut zappé ça. Je pense quand même qu'avoir les textes alignés améliorerait la lisibilité, mais oui ici ça voudrait dire un choix un peu arbitraire/large pour satisfaire les traductions.

> (fatigue, j'ai cru que c'était ThomasJ qui avait fait le commentaire précédent, mes réponses ne sont donc pas forcément très claires) Et mes questions s'adressaient surtout à Thomas, pour comprendre les choix :) > Je ne vois pas de quoi tu parles, tu peux poser une capture ? ![image](/attachments/16be6bb9-a1dd-4e73-9f32-03f8bb008551) On a `nom de l'événement <span class="identifier">[identifiant : ...]</span>`, avec .identifier qui réduit la taille et l'opacité, j'imaginais qu'on voudrait adopter là aussi un rendu `<span>nom de l'évenement en gras</span> <span>[identifiant en pas gras mais sans y toucher taille/opacité]</span>`. > Ca fonctionne si on a exactement la même chose avant les .meta sur chaque ligne. Or on peut avoir un tag Pointé, un tag Complet, les deux, pas de tag. Ah zut zappé ça. Je pense quand même qu'avoir les textes alignés améliorerait la lisibilité, mais oui ici ça voudrait dire un choix un peu arbitraire/large pour satisfaire les traductions.
image.png
28 KiB
tjund commented 2023-02-24 10:21:06 +01:00
Owner

et là il me semble qu'on gagne à avoir un fond pour "unir" "Présents 2", ne pas avoir un "2" perdu au milieu.

J'ai fait sauté le fond de ces informations pour réduire leur l'impact graphique.
Pour respecter un peu mieux la hiérarchie visuelle de l'information.
Quand l'usager cherche une information, dans ce listing, il parcours

  1. le titre de l'événement
    • enventuellement La date de l'événement
  3. et enfin, l'information sup recherchée : nombre de place, nombre présent, nombre d'absent, etc.

Le titre doit donc avoir la hiérarchie visuelle la plus importante, pour permettre une lecture par scan de page.
Et dans la première proposition de Lauréline : https://git.entrouvert.org/attachments/b0d43af4-c9cf-47fa-8f01-a972967ebe98, les tags prédominent visuellement sur le titre. Mauvaise hiérarchie, perte de l'alignement vertical pour sauter d'un titre à un autre. Ça avait tendance à nuire la bonne recherche d'information, compliquer la lecture.
Et comme on allait pas révolutionner le design des entrées, J'ai proposé de réduire l'impact visuel des infos de présence / absence par la suppression du fond. Ça rééquilibre un peu, mais pas encore assez, alors l'idée de passer le titre en semi-bold

L'alignement des informtion de même type est intéressante losque l'on veux visuellement sauter facilement de l'un à l'autre, sans repasser par la case titre de l'event, ce qui me semble peu utile. Mais on peut aller dans ce sens en prévoyant une largeur de 2 ou 3 chiffres.
Et de toute façon, l'alignement sera perdu si une information sur une ligne diffère des autres, comme la non présence du tag "Pointé"

Accueil du midi
Pointé  Présents 2    Absents 1

Accueil après l'école
Présents 22   Absents 1
> et là il me semble qu'on gagne à avoir un fond pour "unir" "Présents 2", ne pas avoir un "2" perdu au milieu. J'ai fait sauté le fond de ces informations pour réduire leur l'impact graphique. Pour respecter un peu mieux la hiérarchie visuelle de l'information. Quand l'usager cherche une information, dans ce listing, il parcours 1. le titre de l'événement 2. + enventuellement La date de l'événement 3. et enfin, l'information sup recherchée : nombre de place, nombre présent, nombre d'absent, etc. Le titre doit donc avoir la hiérarchie visuelle la plus importante, pour permettre une lecture par scan de page. Et dans la première proposition de Lauréline : https://git.entrouvert.org/attachments/b0d43af4-c9cf-47fa-8f01-a972967ebe98, les tags prédominent visuellement sur le titre. Mauvaise hiérarchie, perte de l'alignement vertical pour sauter d'un titre à un autre. Ça avait tendance à nuire la bonne recherche d'information, compliquer la lecture. Et comme on allait pas révolutionner le design des entrées, J'ai proposé de réduire l'impact visuel des infos de présence / absence par la suppression du fond. Ça rééquilibre un peu, mais pas encore assez, alors l'idée de passer le titre en semi-bold L'alignement des informtion de même type est intéressante losque l'on veux visuellement sauter facilement de l'un à l'autre, sans repasser par la case titre de l'event, ce qui me semble peu utile. Mais on peut aller dans ce sens en prévoyant une largeur de 2 ou 3 chiffres. Et de toute façon, l'alignement sera perdu si une information sur une ligne diffère des autres, comme la non présence du tag "Pointé" ``` Accueil du midi Pointé Présents 2 Absents 1 Accueil après l'école Présents 22 Absents 1 ```
fpeters approved these changes 2023-02-28 10:50:41 +01:00
lguerin force-pushed wip/74489-booking-check-counters from b2e6dcee55 to a6b0ed6abf 2023-02-28 10:52:46 +01:00 Compare
lguerin merged commit a6b0ed6abf into main 2023-02-28 11:07:42 +01:00
lguerin deleted branch wip/74489-booking-check-counters 2023-02-28 11:07:42 +01:00
Sign in to join this conversation.
Reviewers
No reviewers
fpeters
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
4 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: entrouvert/chrono#38
There is no content yet.
Delete Branch "wip/74489-booking-check-counters"

Deleting a branch is permanent. Although the deleted branch may exist for a short time before cleaning up, in most cases it CANNOT be undone. Continue?