Make the schedule shortcode mobile-friendly

[iandunn]

People often use view a WordCamp's schedule from their smartphone at the event, but the table can be partially hidden if there are 3+ tracks. For example, ​http://2014.phoenix.wordcamp.org/schedule/.

One way to fix it would be to output a simpler template for mobile devices and use media queries to determine which template the device is shown.

Background is at ​http://make.wordpress.org/community/2014/02/19/agenda-for-team-meeting-focus-on-wordcamps-conferences/#comment-8088

[iandunn]

It may be worth taking a look to see if the <table> layout can be reconfigured just with media queries, but I think it'll break down when we need to generate the labels.

xref ​http://make.wordpress.org/community/2014/02/19/agenda-for-team-meeting-focus-on-wordcamps-conferences/#comment-8097

[bravokeyl]

How about using different layout for mobile screens like..

Time		Session Title
Track One		Track Two
Track Three		Track Four

[nvwd]

Specifying a different layout for mobile can work. You will still run in to issues with Camps that have 3 or more tracks.

Another option is to use the short code to display a track or two at a time, but still not ideal.

I think keeping the same table structure and adding some attributes will allow css to take over and help compact the display nicely.

WCSF did a great job with the current structure and a little css for their schedule - ​http://2013.sf.wordcamp.org/schedule/

The same approach can be found ​http://css-tricks.com/examples/ResponsiveTables/responsive.php

I think we can make it easier by adding a data-track-title attribute to each session cell that contains the track title.

A td for a developer session would have data-track-title="Developer" and the css to use that data: .wcpt-schedule td:before { content: attr( data-track-title ); }

Browser support is the only issue I see with adding an attribute. What is the browser support position for development?

[nvwd]

Using the top table from ​http://2014.phoenix.wordcamp.org/schedule/ I put together a test with the data-track-title attribute - ​http://test.nvwebdev.com/wc-test/schedule.htm

[nvwd]

Should I create a css file for the default mobile styles?

[iandunn]

Hey Nowell, sorry for the delay getting back with you.

It looks like ​support for `data-` attributes is pretty good.

All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.

Your demo looks great. I tested on several mobile devices and it looks good. It does break down on IE < 10 on the desktop, but I don't think we need to worry about that since 99% of those users will have the window big enough to avoid the media queries kicking in.

Can you generate a patch for ​the plugin?

[nvwd]

Add data-* attribute to table cells for use with media queries and the css to break the table for small screen viewing

[nvwd]

Just realized I needed to change the workflow keyword to 'has-patch'

[iandunn]

Oops, sorry, I missed that you uploaded the patch. Unfortunately Trac only sends out e-mail notifications when you add a comment or modify the ticket, but not when patches are uploaded.

I'm going to be on vacation next week, but I'll take a look when I get back if run out of time today.

[nvwd]

Sounds good. I learned the complete process to submit a patch.

Enjoy your vacation.

[iandunn]

In 500:

Post Types: Make the schedule shortcode more mobile friendly.

props nvwd
fixes #353

[iandunn]

Thanks for the patch Nowell, this is a great improvement for all WordCamps :)

A few minor things I've noticed that we can probably clean up:

• Many sites are displaying the session name twice. For instance,
  • ​http://2014.miami.wordcamp.org/schedule/
  • ​http://2013.orlando.wordcamp.org/schedule/
  • ​http://2013.denver.wordcamp.org/schedule/
  • ​http://2014.phoenix.wordcamp.org/schedule/
• The colors in the stylesheet don't always blend in well with the chosen theme and custom CSS. Maybe we can inherit more from the current theme's stylesheet instead?

[iandunn]

The duplicate session titles was actually my fault; it's fixed in r501.

[nvwd]

removed dark background and orange text color from time block

[iandunn]

In 502:

Post Types: Avoid imposing colors on the theme.

props nvwd
fixes #353