Events : display status of event (past, running, coming) compared of page loading time

[agilare]

Spécifications

3 types of events compared to now :

• past : ended before now (unusable, only as archive)
• running : now (some pressure, have to decide if I go)
• coming : starts 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) or a label
• running : yellow background (animated ?), label, 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" ?

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 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