Show a heading for each day in the events list

[joeytwiddle]

Browsing the current layout, I find it difficult to see when one day ends and the next day begins:

So I added a clear heading (and a gap) when each new day starts:

Of course this does eat up some screen space, but I think it conveys useful information.

I hope you like it. I am sorry there are so many lines of code! (I had to override some of the default CSS rules.)

[joeytwiddle]

Alternatively, here is a simpler design, where the headings are just text (no blue box).

Let me know if you prefer this design.

The changes for this design are:

/* Remove {padding, background-color, color} from .date-marker */

/* Add the following inside .date-marker: */
        border-bottom: 1px solid #e0e0e0;
        h5 {
            font-weight: bold;
            font-size: 1.8rem;
        }

Unfortunately I find in this design, the date heading appears too similar to the event titles, so it doesn't stand out. enough A splash of colour or a calendar icon next to the date might help to indicate something significant, as the user scrolls past. (Centering the date can work.)

[joeytwiddle]

I also looked into reformatting the times shown inside each event card.

### _event_with_map.html.slim

      /strong=event["formatted_time"]
      strong=Time.zone.parse(event["start_time"]).to_datetime.strftime("%-I:%0M%P") + " to " + Time.zone.parse(event["end_time"]).to_datetime.strftime("%-I:%0M%P")

I have not added this code to the PR.

Pros:

• Instead of 05:30 PM it will show 5:30pm to 7:30pm (That leading 0 really bugged me!)

Cons:

• It will break if end_time is not provided, so it probably needs some more work
• It should probably be refactored into a function somewhere (I am not a Ruby expert)

Also:

• As it is above, it removes the date from each card. The date may be considered redundant if we have date headings. But the heading may be off-screen, so it's open for debate. We may want to keep the date displayed there, but without emphasis: 6:30pm to 10:00pm on Tuesday, 11th September