Tweet
Tweet

Slide 1

Slide 1 text

Responsive Design with @media Queries Doug Price @solipet

Slide 2

Slide 2 text

Using @media queries • Style content differently given different media/ properties, e.g.: @media print { … } @media screen and (max-width: 500px) { … }

Slide 3

Slide 3 text

Media query types (HTML4) • screen • print • aural • braille • handheld • projection • tty • tv Implicit defaults to ‘all’

Slide 4

Slide 4 text

Media query properties • width • height • device-width • device-height • orientation • aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution • scan • grid

Slide 5

Slide 5 text

My Problem: Show a list of objects • First column shows a list of items • Second column shows details/actions for the selected item • What happens when screen is too narrow? (e.g., phone) Item Info/ Actions Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13

Slide 6

Slide 6 text

Sliding two-column display • For narrow views, only show one column at a time • Provide Back button to return to list • Use as little JavaScript as possible Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item Info/ Actions Back

Slide 7

Slide 7 text

show.html.erb
<%# render the list %>
<%# render the selected item %>
Default width: 40% Narrow width: 50% Default width: 60% Narrow width: 50% Default width: 100% Narrow width: 200%

Slide 8

Slide 8 text

CSS (one column) @media (max-width: 720px) { .slider-container { width: 200%; } #all-items, #item-container { width: 50%; float: left; transition: transform 300ms ease-in-out; } #all-items { &.hidden { transform: translate3d(-100%, 0, 0); } } #item-container { transform; translate3d(-100%, 0, 0); &.hidden { transform: translate3d(0%, 0, 0); } } }

Slide 9

Slide 9 text

CSS (two columns) @media (min-width: 720px) { #all-merchants, #merchant-container { // Show both divs &.hidden { display: block; } // Hide the back button [data-merchant-back] { display: none; } } }

Slide 10

Slide 10 text

Item partial
›
<%= link_to show_item_path(item), remote: true, data: {:target => "#item-container", "item-id" => item.id} do %>
...
<% end %>

Slide 11

Slide 11 text

CoffeeScript $('body').on 'ajax:success', '.item-list a[data-remote]', (e, data, status, xhr) -> $target = $('#item-container') $target.html(data) $target.removeClass "hidden" $('.back').removeClass "hidden" $('#all-items').addClass "hidden" currenthash = hash() window.location.hash = $(this).attr "data-item-id" window.scrollTo(0,0)

Slide 12

Slide 12 text

CoffeeScript $('body').on 'click', "[data-item-back]", (event) -> event.preventDefault() event.stopPropagation() $('.back').addClass "hidden" $('#all-items').removeClass "hidden" $('#item-container').addClass "hidden" window.scrollTo(0,0) window.location.hash = ""

Slide 13

Slide 13 text

CoffeeScript (hash) currenthash = "" hash = -> window.location.hash.substr(1) checkUrl = -> return if currenthash == hash() if hash() $("a[data-item-id=\"#{hash()}\"]").click() else $('.back').addClass "hidden" $('[data-item-back]').click() currenthash = hash() if 'onhashchange' in window $(window).on('hashchange', checkUrl ) else setInterval(checkUrl, 100); checkUrl()

Slide 14

Slide 14 text

Demo

Slide 15

Slide 15 text

Acknowledgements: Thanks to Nick Gauthier for all his assistance More info: Athayde, John and Williams, Bruce. The Rails View: Creating a Beautiful and Maintainable User Experience, The Pragmatic Programmers, 2012. http://www.w3.org/TR/css3-mediaqueries/ -- W3C specification http://mediaqueri.es/ -- great examples of responsive design http://alchemee.com/ -- launching soon!

Slide 16

Slide 16 text

Thanks! Doug Price @solipet