Opened 11 years ago
Closed 11 years ago
#353 closed defect (bug) (fixed)
Make the schedule shortcode mobile-friendly
Reported by: | iandunn | Owned by: | 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)
Change History (17)
#4
@
11 years ago
How about using different layout for mobile screens like..
Time | Session Title | ||
Track One | Track Two | ||
Track Three | Track Four |
#5
@
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
@
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
#8
@
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?
@
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
@
11 years ago
- Keywords has-patch added; needs-patch removed
Just realized I needed to change the workflow keyword to 'has-patch'
#10
@
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
@
11 years ago
Sounds good. I learned the complete process to submit a patch.
Enjoy your vacation.
#12
@
11 years ago
- Owner set to iandunn
- Resolution set to fixed
- Status changed from new to closed
In 500:
#13
@
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:
- Many sites are displaying the session name twice. For instance,
- 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?
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