Pages with a list of events : display status of each event (past, running, coming) compared of page loading time

[agilare]

trafficstars

Spécifications

In home (today), agenda (past and today), lieu/organisateur pages

3 types of events compared to now :

• past : end time before now ("unusable", only as archive)
• running : now after start time and before end time (some pressure, I have to decide if I go)
• coming : start time after now (newness, eventual planning to do)

Ways to highlight to user the events having the types above :

• past : shaded, half-transparent (like for Facebook events; see https://github.com/agilare/ladecadanse/issues/51#issuecomment-1483205771 ) or a label
• running : yellow background (animated ?), label or icon (could be animated like <i id="tracking-running-animation" class="fa fa-circle-o-notch fa-spin fa-fw"></i><span class="sr-only">Running...</span>); show time left like "finit dans 1h20" ? Or audio wave icon (event is living, sounding) like https://www.shutterstock.com/video/clip-23798110-sound-wave-icon and +4:35 (start in 4h 35min), -2:10 (ends in 2h 10 min)
• after : like running; show time before start like "commence dans 2h30" ?

In which area : all the event box, the title (and the venue ?) or close to the schedule

Show the time when the user loaded the page :

• left to page title ("Lundi 28 mars") like : "état : aujourd'hui à 22h47" or "⌚ 22h47"
• and after date reminder in events list

Where : wherever there are events

• home
• agenda
  • previous day
  • today
  • future
• venue, organizer
• event

Should first be human tested to some users

[agilare]

@Angelinsky7 Here's a draft of specs of the idea we discussed to better highlight time position of event compared to now

[agilare]

In a recent release I changed the color of past dates in the date picker with #8e8ef5 :

This kind of highlight could be used for this feature, applied to past events title :

The color could be improved in order to follow a11y