dashing haml example files

layout.haml

!!!
%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}/
    %meta{:content => "", :name => "description"}/
    %meta{:content => "width=device-width", :name => "viewport"}/
    %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
    %title= yield_content(:title)
    / The javascript and css are managed by sprockets. The files can be found in the /assets folder
    %script{:src => "/assets/application.js", :type => "text/javascript"}
    %link{:href => "/assets/application.css", :rel => "stylesheet"}/
    %link{:href => "//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700", :rel => "stylesheet", :type => "text/css"}/
    %link{:href => "/assets/favicon.ico", :rel => "icon"}/
  %body
    #container
      = yield
    - if development?
      #saving-instructions
        %p
          Paste the following at the top of
          %i
            = params[:dashboard]
            \.erb
        %textarea#gridster-code
      %a#save-gridster{:href => "#saving-instructions"} Save this layout

sample.haml

- content_for :title do
  My super sweet dashboard
.gridster
  %ul
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "2", "data-sizey" => "1"}
      %div{"data-id" => "welcome", "data-moreinfo" => "Protip: You can drag the widgets around!", "data-text" => "This is your shiny new dashboard.", "data-title" => "Hello", "data-view" => "Text"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "1"}
      %div{"data-id" => "synergy", "data-max" => "100", "data-min" => "0", "data-title" => "Synergy", "data-view" => "Meter"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "2"}
      %div{"data-id" => "buzzwords", "data-moreinfo" => "# of times said around the office", "data-title" => "Buzzwords", "data-unordered" => "true", "data-view" => "List"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "1"}
      %div{"data-id" => "valuation", "data-moreinfo" => "In billions", "data-prefix" => "$", "data-title" => "Current Valuation", "data-view" => "Number"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "2", "data-sizey" => "1"}
      %div{"data-id" => "convergence", "data-title" => "Convergence", "data-view" => "Graph", :style => "background-color:#ff9618"}
  %center
    %div{:style => "font-size: 12px"}
      Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://#{request.host}:#{request.port}/widgets/welcome

sampletv.haml

:javascript
  $(function() {
    // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
    Dashing.gridsterLayout('[{"col":2,"row":1},{"col":1,"row":1},{"col":3,"row":1},{"col":2,"row":2},{"col":3,"row":2},{"col":1,"row":2},{"col":5,"row":1},{"col":4,"row":2},{"col":2,"row":3}]')
    Dashing.widget_base_dimensions = [370, 340]
    Dashing.numColumns = 5
  });
- content_for :title do
  1080p dashboard
.gridster
  %ul
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "1"}
      %div{"data-view" => "Clock"}
      %i.icon-time.icon-background
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "1"}
      %div{"data-image" => "/logo.png", "data-view" => "Image"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "2", "data-sizey" => "1"}
      %div{"data-id" => "welcome", "data-moreinfo" => "Protip: You can drag the widgets around!", "data-text" => "This is your shiny new 1080p dashboard.", "data-title" => "Hello", "data-view" => "Text"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "1"}
      %div{"data-id" => "synergy", "data-max" => "100", "data-min" => "0", "data-title" => "Synergy", "data-view" => "Meter"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "1"}
      %div{"data-id" => "synergy", "data-max" => "100", "data-min" => "0", "data-moreinfo" => "In sync with my neighbour!", "data-title" => "Synergy", "data-view" => "Meter"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "2"}
      %div{"data-id" => "buzzwords", "data-moreinfo" => "# of times said around the office", "data-title" => "Buzzwords", "data-unordered" => "true", "data-view" => "List"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "1", "data-sizey" => "1"}
      %div{"data-id" => "karma", "data-title" => "Karma", "data-view" => "Number", :style => "background-color:#96bf48;"}
      %i.icon-heart.icon-background
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "2", "data-sizey" => "2"}
      %div{"data-id" => "convergence", "data-moreinfo" => "poop", "data-title" => "Convergence", "data-view" => "Graph", :style => "background-color:#47bbb3;"}
    %li{"data-col" => "1", "data-row" => "1", "data-sizex" => "2", "data-sizey" => "1"}
      %div{"data-id" => "twitter_mentions", "data-moreinfo" => "Tweets tagged with #todayilearned", "data-view" => "Comments", :style => "background-color:#ff9618;"}
      %i.icon-twitter.icon-background
  %center
    %div{:style => "font-size: 12px"}
      Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://#{request.host}:#{request.port}/widgets/welcome