o Twitter Bootstrap <3.

3 files changed, 133 insertions, 72 deletions

diff --git a/views/data.jade b/views/data.jade
index 0bd5afd..0655045 100644
--- a/views/data.jade
+++ b/views/data.jade
@@ -36,65 +36,41 @@ block link
         td
         td: img(src=link.href, alt=link.name, title=name)
 
-block err
-  p Error rendering #{url}
-
-  p= err
-
-block data
-  p Viewing #{url}
-
-  form(action="/render")
-    p
-      label URL:
-        input(name="url", size=100, value=url)
-      input(type="submit", value="Render")
-
-  form(action="http://redbot.org/?")
-    p
-      input(name="uri", value=url, type="hidden")
-      input(type="submit", value="Check with redbot.org")
-
-  ul
-    li
-      a(href="#meta") Meta
-    li
-      a(href="#items") Items
-    li
-      a(href="#headers") Headers
-    li
-      a(href="#formatted-body") Formatted body
-    li
-      a(href="#body") Raw body
-
-  a(id="meta"): h1: a(href="#meta") Meta
-
-  - var href=doc.href
+block meta
+  - var href=collection.href
   table
     tr
       td version
-      td #{doc.version}
+      td #{collection.version}
     tr
       td href
       td: block href
 
+  form(action='http://redbot.org/?')
+    p
+      input(name='uri', value=url, type='hidden')
+      input(type='submit', value='Check with redbot.org')
+
+
   h2 Collection Links
-  if doc.links.length == 0
+  if collection.links.length == 0
     p Collection has no links.
   else
-    each link, i in doc.links
+    each link, i in collection.links
       - var title = link.prompt || link.name
-      - title = title ? ": " + title : ""
+      - title = title ? ': ' + title : ''
       h3 Collection Link ##{i}#{title}
       block link
 
-  a(id="items"): h1: a(href="#items") Items
-  if doc.items.length == 0
+block items
+  // a(id='items'): h1: a(href='#items') Items
+  if collection.items.length == 0
     p Collection has to items.
   else
-    p The feed has #{doc.items.length} items.
-    each item, i in doc.items
-      a(id="item-#{i+1}"): h2: a(href="#item-#{i+1}") Item ##{i+1}
+    // p The feed has #{collection.items.length} items.
+    each item, i in collection.items
+      // a(id='item-#{i+1}'): h2: a(href='#item-#{i+1}') Item ##{i+1}
+      h2 Item ##{i+1}
 
       - var href=item.href
       p href: 
@@ -109,13 +85,26 @@ block data
           block link
 
       h3 Data
-        table
+      dl(class='dl-horizontal')
+        each data in item.data
+          dt #{data.name}
+          dd #{data.value}
+      //
+        table(class='table table-striped table-bordered')
           each data in item.data
             tr
-              td #{data.name}
+              th #{data.name}
               td #{data.value}
+      //
+        div(class='form-horizontal')
+          each data in item.data
+            div(class='control-group')
+              label(class='control-label') #{data.name}
+              div(class='controls')
+                div #{data.value}
 
-  a(id="headers"): h1: a(href="#headers") Headers
+block headers
+  // a(id='headers'): h1: a(href='#headers') Headers
   pre
     table
       each value, key in headers
@@ -123,16 +112,74 @@ block data
           td #{key}:
           td #{value}
 
-  a(id="formatted-body"): h1: a(href="#formatted-body") Formatted body
-  pre= formattedRaw
+block formatted_body
+  // a(id='formatted-body'): h1: a(href='#formatted-body') Formatted body
+  pre= formattedBody
+
+block raw_body
+  // a(id='body'): h1: a(href='#body') Raw body
+  pre= rawBody
+
+block tabs
+  div(class='tabbable')
+    ul(class='nav nav-tabs')
+      li(class='active'): a(href='#tab-meta', data-toggle='tab') Meta
+      li: a(href='#tab-items', data-toggle='tab') Items
+      li: a(href='#tab-headers', data-toggle='tab') Headers
+      li: a(href='#tab-formatted-body', data-toggle='tab') Formatted Body
+      li: a(href='#tab-raw-body', data-toggle='tab') Raw Body
+    div(class='tab-content')
+      div(class='tab-pane active', id='tab-meta'): block meta
+      div(class='tab-pane', id='tab-items'): block items
+      div(class='tab-pane', id='tab-headers'): block headers
+      div(class='tab-pane', id='tab-formatted-body'): block formatted_body
+      div(class='tab-pane', id='tab-raw-body'): block raw_body
+
+block navbar
+  div(class='navbar navbar-fixed-top')
+    div(class='navbar-inner')
+      div(class='container')
+        a(class='btn btn-navbar', data-toggle='collapse', data-target='.nav-collapse')
+          span(class='icon-bar')
+          span(class='icon-bar')
+          span(class='icon-bar')
+          span(class='icon-bar')
+          span(class='icon-bar')
+        a(class='brand', href='#') Collection+JSON Explorer
+        div(class='nav-collapse')
+          ul(class='nav')
+            li(class='active'): a(href='#meta') Meta
+            li: a(href='#items') Items
+            li: a(href='#headers') Headers
+            li: a(href='#formatted-body') Formatted Body
+            li: a(href='#raw-body') Raw Body
 
-  a(id="body"): h1: a(href="#body") Raw body
-  pre= raw
 
 block content
-  h1 Collection+JSON Explorer
+  if typeof err != 'undefined'
+    p Error rendering #{url}
 
-  if typeof err == 'undefined'
-    block data
+    p= err
   else
-    block err
+    section(id='meta')
+      div(class='page-header')
+        h1 Meta
+      block meta
+    section(id='items')
+      div(class='page-header')
+        h1 Items 
+          if collection.items.length > 1
+            small #{collection.items.length} items
+      block items
+    section(id='headers')
+      div(class='page-header')
+        h1 Headers
+      block headers
+    section(id='formatted-body')
+      div(class='page-header')
+        h1 Formatted Body
+      block formatted_body
+    section(id='raw-body')
+      div(class='page-header')
+        h1 Raw Body
+      block raw_body
diff --git a/views/index.jade b/views/index.jade
index 0c1c5bb..5800f5f 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -3,24 +3,32 @@ extends layout
 block content
   h1= title
 
-  div This is a simple/dumb explorer for the 
+  form(action='/render', class='well')
+    div(class='row')
+      div(class='span10')
+        input(name='url', size='100', placeholder='Enter URL to explore...', class='span10')
+    // TODO: Fix
+    div(class='row')
+      div(class='span12')
+         
+    div(class='row')
+      div(class='offset4 span2')
+        button(type='submit', class='btn') Explore
+
+  p This is a simple/dumb explorer for the 
     a(href='http://amundsen.com/media-types/collection/') Collection+JSON Hypermedia
     | .
 
-  h2 Explore your own collection
-  form(action='/render')
-    p
-      label URL:
-        input(name='url', size='100', value='http://example-collection-json-db.herokuapp.com/')
-      input(type='submit', value='Render')
-
   h2 Examples
-  p Taken from: 
-    a(href='http://amundsen.com/media-types/collection/examples/') Mike Amundsen's examples
 
-  - var examples = examples || []
-  ul
-    each example in examples
-      - var u='http://' + host + '/render?url=' + encodeURIComponent('http://' + host + '/examples/from-spec/' + example + '.collection+json')
-      li
-        a(href='#{u}') #{example}
+  p From the 
+    a(href='http://' + host + '/render?url=http%3A%2F%2Fexample-collection-json-db.herokuapp.com') Example Collection+JSON
+    |  application. Drill down in an employee data set.
+
+  p From the specification: 
+    - var examples = [ "minimal", "collection", "item", "queries", "template", "error" ]
+      each example, i in examples
+        - var u='http://' + host + '/render?url=' + encodeURIComponent('http://' + host + '/examples/from-spec/' + example + '.collection+json')
+          if i > 0
+            | , 
+          a(href='#{u}') #{example}
diff --git a/views/layout.jade b/views/layout.jade
index 4a9309d..05f6e5d 100644
--- a/views/layout.jade
+++ b/views/layout.jade
@@ -5,8 +5,13 @@ html
     meta(name='viewport', content='width=device-width, initial-scale=1.0')
     link(href='/bootstrap-2.0.4/css/bootstrap.css', rel='stylesheet')
     style
-      body {
-        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
+      /*
+        body {
+          padding-top: 40px;
+        }
+      */
+      section {
+        padding-top: 40px;
       }
     link(href='/bootstrap-2.0.4/css/bootstrap-responsive.css', rel='stylesheet')
     // Le HTML5 shim, for IE6-8 support of HTML5 elements
@@ -21,6 +26,7 @@ html
       link(rel='apple-touch-icon-precomposed', href='/bootstrap-2.0.4/ico/apple-touch-icon-57-precomposed.png')
 
   body
+    block navbar
     div(class='container')
       block content
       script(src='/javascripts/jquery-1.7.2.min.js')