WordPress.org

Making WordPress.org

Opened 4 months ago

Last modified 2 months ago

#3117 new enhancement

Schedule: Support sessions that span multiple time slots

Reported by: mrwweb Owned by:
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords: needs-patch
Cc:

Description

Between workshops, contributor tracks, and more, it's quite common for a session lengths to differ and overlap. You can see many examples of this in the WordCamp Seattle 2017 schedule.

Currently, WordCamp site themers are required to create hacky CSS rules that fake the appearance of extended sessions. This is inconvenient and time-consuming. Further, the accessibility of such a display is almost certainly worse than it would be with a properly implemented rowspan.

While this will almost certainly be complicated, a scheduling interface that incorporates an end time or some other method for spanning time slots should be supported to improve administration, theming, accessibility, and the overall usability of the [schedule] shortcode output.

Change History (9)

#1 @coreymckrill
4 months ago

  • Keywords needs-patch added
  • Summary changed from Support sessions that span multiple time slots to Schedule: Support sessions that span multiple time slots
  • Type changed from defect to enhancement

I wonder if this would be an opportunity to rethink the [schedule] output entirely, to use Flexbox or something instead of tables. Thoughts, @mrwweb ?

#2 @mrwweb
4 months ago

That sounds great. I've never looked at the code before so I don't know what's in there.

Calculating what a "slot" is and how many slots a session spans seems like a fairly complicated thing and I'm not sure how that would work. The user-friendly backend solution would be to enter a start time and then either an end time or session length. However, with both tables and grid, asking for a "rowspan" would be easier to layout but require experimentation from the editor. The former is trickier but probably the way to go.

The WC Seattle 2017 schedule provides a lot of useful scenarios that anything new should be able to handle:

  • Session spanning all tracks in one time slot
  • Session spanning some but not all tracks in one time slot
  • Session spanning multiple time slots (WP 101 workshop)
  • Session spanning multiple time slots and ending at a time that doesn't align with other time slots (JavaScript workshop)
  • Unequal time slots (1 hr session - 30 min lunch - 1 hr session) with heights that communicate relative difference.

Making the markup accessible should be a high priority if rewritten. (The current table leaves a lot to be desired). This would definitely be a use-case for grid and not flexbox if not done with a table. That said, improved table markup might actually be fairly accessible as long as table headings are implemented correctly. Otherwise, the times for each session will need to be hidden somewhere in the markup so they're announced with each session.

Potentially relevant resources for Grid:

Finally, for sighted users, it's important that it's possible to style borders and/or striped rows on the sessions table (again, see the linked example) in order to enable easy scanning of the schedule.

Before going any further, people should scan other camps in order to find other valuable edge-cases the [schedule] shortcode should support.

This ticket was mentioned in Slack in #meta-wordcamp by coreymckrill. View the logs.


3 months ago

#4 follow-up: @coreymckrill
3 months ago

This ticket was discussed in the WordCamp.org ticket scrub today. We agreed that more research is needed to settle on a good approach to this.

@mrwweb do you have any examples of other implementations of schedule layouts that might be a good starting point for this?

#5 @mrwweb
3 months ago

If you're looking for code examples, I still haven't found any.

Since it was mentioned in the chat, the WordCamp Berlin is another example of a calendar that ran into this issue.

To try to help frame the issues, in my mind, the primary questions are:

  1. Is the session defined by a length or end time?
  2. Is the markup with tables, flexbox, or CSS Grid?

For question 1, I suspect the interface should be as user-friendly as possible and then the code will probably convert to a session length.

For markup, tables can theoretically be semantically correct, but the current one isn't and it'll take a lot of work to make them better. Flexbox is intended for linear presentations of items so doesn't really correspond with the idea of a multi-dimensional calendar grid. CSS Grid likely makes the most sense and I still think the "fixed" grid example given previously may suggest a good way to handle this. Grid also has a really big advantage of being easier to make response as tables are a pain for that.

Getting some input from the accessibility team for code implementation would be valuable.

#6 @iandunn
3 months ago

One thing we'll need to keep in mind is back-compat, since most camps have custom CSS that's tied to the current markup.

That doesn't necessarily mean that we can't re-do it, but if we do, we'll need to keep the one one around and setup a feature flag so that old sites continue using the table, and new site use the new markup.

#7 in reply to: ↑ 4 @mrwweb
3 months ago

Replying to coreymckrill:

@mrwweb do you have any examples of other implementations of schedule layouts that might be a good starting point for this?

I never was able to find one, so here is a front-end proof of concept! Honestly, I'm quite happy with it. It doesn't 100% cover all the edge cases I could think of (specifically a session spanning multiple non-contiguous tracks), but it's a huge improvement on the current schedule. (I assume the accessibility of this new schedule is also much better though I'd love some feedback on that too.)

I haven't looked at the code that outputs the schedule, but I get the sense it could handle the requirements of this new way of laying sessions out.

Feedback welcome. Feel free to fork the pen and improve on it.


New CSS grid-based layout:

https://cldup.com/y5feAJGGq6.png

Small-screen view & no-grid-support fallback:

https://cldup.com/JmeT0tAJTS.png

This ticket was mentioned in Slack in #meta-wordcamp by mrwweb. View the logs.


2 months ago

This ticket was mentioned in Slack in #meta-wordcamp by coreymckrill. View the logs.


2 months ago

Note: See TracTickets for help on using tickets.