Make dashing mobile friendly

application.coffee

# dashing.js is located in the dashing framework
# It includes jquery & batman for you.
#= require dashing.js

#= require_directory .
#= require_tree ../../widgets

console.log("Yeah! The dashboard has started!")

Dashing.on 'ready', ->
  Dashing.widget_margins ||= [5, 5]
  Dashing.widget_base_dimensions ||= [300, 360]
  Dashing.numColumns ||= 4

  contentWidth = (Dashing.widget_base_dimensions[0] + Dashing.widget_margins[0] * 2) * Dashing.numColumns

  if $(window).width() > 768
    Batman.setImmediate ->
      $('.gridster').width(contentWidth)
      $('.gridster ul:first').gridster
        widget_margins: Dashing.widget_margins
        widget_base_dimensions: Dashing.widget_base_dimensions
        avoid_overlapped_widgets: !Dashing.customGridsterLayout
        draggable:
          stop: Dashing.showGridsterInstructions
          start: -> Dashing.currentWidgetPositions = Dashing.getWidgetPositions()

application.scss

@media screen and (max-width:768px) {
    .gridster, .gridster ul { width:100% !important ; position:static !important }
    .gridster ul li { width:100% !important ; position:relative !important ; top:0 !important ; left:0 !important ; overflow:hidden ; display:table ; height:400px }
}

Hey, thanks for putting this out there! It was super helpful. I made a couple little tweaks that others might find helpful:

@media screen and (max-width:768px) {   
    .gridster, .gridster > ul { width:100% !important ; position:static !important; }   
    .gridster > ul > li { width:100% !important ; position:relative !important ; top:0 !important ; left:0  !important ; overflow:hidden ; display:table ; min-height:400px; }  
}

It also didn't seem like the !important declarations were needed, but I left them in here.