Add current time pointer in schedule #21

cel · 2021-05-30T18:04:34Z

cel commented

2021-05-30 18:04:34 +00:00

This adds to the schedule page an indicator of the current time in the schedule. It is shown as a red line in the table cell of the current time slot, at a vertical position in the cell corresponding to the progess of time through that time block.

For use in browsers without JS, the pointer is produced in PHP. With JS it is then updated periodically along with the timestamp.

To aid the JS to be able to find the table cells and their corresponding timestamps, an id property is added to each schedule table cell that contains the start timestamp for the corresponding time period.

To try to prevent the line from interfering with readability of the DJ names on the schedule, the line is placed beneath the names using z-index.

If this UI is unclear or confusing, I'm open to suggestions to improve it.

Demo: https://tilde.town/~cel/tilderadio/schedule.html

This adds to the schedule page an indicator of the current time in the schedule. It is shown as a red line in the table cell of the current time slot, at a vertical position in the cell corresponding to the progess of time through that time block. For use in browsers without JS, the pointer is produced in PHP. With JS it is then updated periodically along with the timestamp. To aid the JS to be able to find the table cells and their corresponding timestamps, an id property is added to each schedule table cell that contains the start timestamp for the corresponding time period. To try to prevent the line from interfering with readability of the DJ names on the schedule, the line is placed beneath the names using z-index. If this UI is unclear or confusing, I'm open to suggestions to improve it. Demo: https://tilde.town/~cel/tilderadio/schedule.html

Screenshot from 2021-05-30 00-23-39.png

59 KiB