styling and JS templateing

railslove · Jan 31, 2012 · 1469832 · 1469832
1 parent b660741
commit 1469832
Show file tree

Hide file tree

Showing 9 changed files with 610 additions and 17 deletions.
diff --git a/public/js/json2.js b/public/js/json2.js
diff --git a/views/application.coffee b/views/application.coffee
@@ -9,9 +9,32 @@ if ENVIRONMENT == 'development'
 pusher  = new Pusher PUSHER_KEY
 channel = pusher.subscribe 'test_channel'
 channel.bind 'ping', (data)->
-  $tr = $("<tr></tr>")
-  $tr.append("<td>" + data.PATH_INFO + "</td>")
-  $tr.append("<td>" + data.QUERY_STRING + "</td>")
-  $tr.append("<td>" + data.REMOTE_ADDR + "</td>")
-  $tr.append("<td>" + data.HTTP_COOKIE + "</td>")
-  $("table#main tbody").append($tr)
+  $td_query_string = $('<td></td>')
+  $.each data['rack.request.query_hash'], (index, value)->
+    $td_query_string
+      .append(' <span class="param-name">' + index + '</span> ')
+      .append(' <span class="param-value">' + value + '</span> ')
+  debugger
+
+  $tr_summary = $('<tr class="summary"></tr>')
+  $tr_summary
+    .append("<td>" + data.PATH_INFO + "</td>")
+    .append($td_query_string)
+    .append("<td>" + data.REMOTE_ADDR + "</td>")
+    .append("<td>" + data.HTTP_COOKIE + "</td>")
+    .append('<td><a href="#" class="more">more</a></td>')
+  debugger
+
+  $tr_details = $('<tr class="details"></tr>')
+  $tr_details
+    .append('<td colspan="4">' + JSON.stringify(data) + '</td>')
+    .append('<td></td>')
+  debugger
+
+  $("table#main tbody")
+    .append($tr_summary)
+    .append($tr_details)
+
+$(document).ready ()->
+  $("table#main a.more").live 'click', ()->
+    $(this).closest("tr").next("tr.details").toggle()
diff --git a/views/index.haml b/views/index.haml
@@ -1,12 +1,17 @@
 %html
   %head
+    %title= "Traxel Pipe"
+
     %link{:type => "text/css", :rel => "stylesheet", :media => "all", :href => "/stylesheets/application.css"}
+
     %script{:src => "http://js.pusher.com/1.11/pusher.min.js", :type => "text/javascript"}
     %script{:src => "js/jquery-1.7.1.js", :type => "text/javascript"}
+    %script{:src => "js/json2.js", :type => "text/javascript"}
     :javascript
       var ENVIRONMENT = '#{settings.environment}';
       var PUSHER_KEY = '#{Pusher.key}';
     %script{:src => "application.js"}
+
   %body
     %header
       %h1
@@ -15,12 +20,30 @@
       %table#main
         %thead
           %tr
-            %th= "PATH_INFO"
-            %th= "QUERY_STRING"
-            %th= "REMOTE_ADDR"
-            %th= "HTTP_COOKIE"
+            %th= "Resource"
+            %th= "Query string"
+            %th= "IP"
+            %th= "Cookie"
+            %th
 
         %tbody
-
+          %tr.summary
+            %td= @env['PATH_INFO']
+            %td
+              -@params.each do |key, value|
+                %span.param-name= key
+                %span.param-value= value
+            %td= @env['REMOTE_ADDR']
+            %td= @env['HTTP_COOKIE']
+            %td
+              %a.more{:href => "#"}= "more"
+          %tr.details
+            %td{:colspan => 4}
+              =request.inspect
+            %td
     %footer
-      powered by heroku & pusherapp
+      %p
+        powered by
+        %a{:href => "http://heroku.com"}= "heroku"
+        &
+        %a{:href => "http://pusherapp.com"}= "pusherapp"
diff --git a/views/stylesheets/_colors.sass b/views/stylesheets/_colors.sass
@@ -0,0 +1,2 @@
+$light-gray: #DDDDDD
+$base-font-color: black
diff --git a/views/stylesheets/_element_defaults.sass b/views/stylesheets/_element_defaults.sass
@@ -0,0 +1,2 @@
+th, td
+  vertical-align: top
diff --git a/views/stylesheets/_fonts.sass b/views/stylesheets/_fonts.sass
@@ -0,0 +1,13 @@
+body, p, td, th, li
+  font-family: Arial, sans-serif
+  font-size: 12px
+  color: $base-font-color
+
+h1, h2, h3, h4, h5, h6
+  font-weight: bold
+
+h1
+  font-size: 30px
+
+th
+  font-weight: bold
diff --git a/views/stylesheets/_layout.sass b/views/stylesheets/_layout.sass
@@ -1,10 +1,27 @@
+$header-height: 50px
+$footer-height: 20px
+
 body
   height: 100%
 header, footer
-  background-color: silver
+  background-color: $light-gray
+  position: absolute
+  width: 100%
 header
-  height: 10%
+  top: 0px
+  left: 0px
+  height: $header-height
+  h1
+    padding: 10px
 #content
-  height: 85%
+  position: absolute
+  top: $header-height
+  bottom: $footer-height
+  width: 100%
+  overflow: scroll
 footer
-  height: 5%
+  height: $footer-height
+  bottom: 0px
+  left: 0px
+  p
+    padding: 3px 10px
diff --git a/views/stylesheets/_main_table.sass b/views/stylesheets/_main_table.sass
@@ -0,0 +1,22 @@
+table#main
+  width: 100%
+  td, th
+    border: 1px solid silver
+    padding: 2px
+  tr.details
+    display: none
+  span.param-name
+    color: blue
+    font-weight: bold
+    &:after
+      color: $base-font-color
+      content: ":"
+      font-weight: normal
+  span.param-value
+    color: green
+    padding-right: 5px
+    &:after
+      color: $base-font-color
+      content: ","
+    &:last-child:after
+      content: ""
diff --git a/views/stylesheets/application.sass b/views/stylesheets/application.sass
@@ -1,4 +1,8 @@
 @import "compass/reset"
 
 @import "base"
-@import "layout"
+@import "colors"
+@import "fonts"
+@import "element_defaults"
+@import "layout"
+@import "main_table"