Making WordPress.org

Opened 11 years ago

Closed 11 years ago

#353 closed defect (bug) (fixed)

Make the schedule shortcode mobile-friendly

Reported by: iandunn's profile iandunn Owned by: iandunn's profile iandunn
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords: good-first-bug has-patch
Cc:

Description

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

Attachments (2)

353.patch (3.4 KB) - added by nvwd 11 years ago.
Add data-* attribute to table cells for use with media queries and the css to break the table for small screen viewing
353b.patch (442 bytes) - added by nvwd 11 years ago.
removed dark background and orange text color from time block

Download all attachments as: .zip

Change History (17)

#1 @bravokeyl
11 years ago

  • Cc bravokeyl@… added

#2 @iandunn
11 years ago

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

#3 @nvwd
11 years ago

  • Cc nowell@… added

#4 @bravokeyl
11 years ago

How about using different layout for mobile screens like..

Time Session Title
Track One Track Two
Track Three Track Four

#5 @nvwd
11 years ago

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?

#6 @nvwd
11 years ago

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

#7 @nvwd
11 years ago

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

#8 @iandunn
11 years ago

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
11 years ago

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

#9 @nvwd
11 years ago

  • Keywords has-patch added; needs-patch removed

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

#10 @iandunn
11 years ago

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.

#11 @nvwd
11 years ago

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

Enjoy your vacation.

#12 @iandunn
11 years ago

  • Owner set to iandunn
  • Resolution set to fixed
  • Status changed from new to closed

In 500:

Post Types: Make the schedule shortcode more mobile friendly.

props nvwd
fixes #353

#13 @iandunn
11 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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:

#14 @iandunn
11 years ago

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

@nvwd
11 years ago

removed dark background and orange text color from time block

#15 @iandunn
11 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 502:

Post Types: Avoid imposing colors on the theme.

props nvwd
fixes #353

Note: See TracTickets for help on using tickets.