o Adding a side bar.

3 files changed, 77 insertions, 43 deletions

diff --git a/views/data.jade b/views/data.jade
index 57f191e..502a978 100644
--- a/views/data.jade
+++ b/views/data.jade
@@ -1,5 +1,11 @@
 extends layout
 
+mixin get_name(link, prefix, i)
+  - var name = typeof link.name == 'string' ? link.name : undefined
+  - var prompt = typeof link.prompt == 'string' ? link.prompt : undefined
+  - var prefix = typeof prefix == 'string' ? prefix + ': ' : ''
+  |#{prefix + (name || prompt || '#' + i)}
+
 block href
   if typeof href != 'string'
     div <no href>
@@ -36,7 +42,7 @@ block link
     dd: img(src=link.href, alt=link.name, title=name)
 
 block meta
-  div(class='row')
+  div(class='row-fluid')
     div(class='span12')
       p
         - var href=collection.href
@@ -46,7 +52,7 @@ block meta
           dt href
           dd: block href
 
-  div(class='row')
+  div(class='row-fluid')
     div(class='span12')
       p
         a(class='btn btn-primary', href=urlgenerator.render(href)) Explore
@@ -63,7 +69,7 @@ block meta
     each link, i in collection.links
       - var title = link.prompt || link.name
       - title = title ? ': ' + title : ''
-      h3 Collection Link ##{i}#{title}
+      h3(id='link-#{i + 1}') Collection Link ##{i}#{title}
       block link
 
 // TODO: If the collection has prev/next links, add buttons to
@@ -75,8 +81,7 @@ block items
   else
     // 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}
+      h2(id='item-#{i+1}') Item ##{i+1}
       div
         a(class='btn btn-primary btn-mini', href=urlgenerator.render(href)) Explore
         | 
@@ -103,11 +108,11 @@ block queries
   if collection.queries.length == 0
     p Collection has no queries.
   else
-    each query in collection.queries
+    each query, i in collection.queries
       - var name = query.prompt || query.name || 'Unnamed query'
-      h2= name
+      h2(id='query-#{i + 1}')= name
 
-      div(class='row')
+      div(class='row-fluid')
         div(class='span12')
           form(action='/render', class='well form-horizontal')
             input(type='hidden', name='url', value=query.href)
@@ -125,7 +130,6 @@ block queries
                 // button(class='execute-query') Execute
 
 block headers
-  // a(id='headers'): h1: a(href='#headers') Headers
   pre
     table
       each value, key in headers
@@ -134,11 +138,9 @@ block headers
           td #{value}
 
 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 navbar
@@ -147,23 +149,42 @@ block navbar
       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')
-          span(class='icon-bar')
+          //
+            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='#queries') Queries
-            li: a(href='#headers') Headers
-            li: a(href='#formatted-body') Formatted Body
-            li: a(href='#raw-body') Raw Body
-
-
-block content
+            //
+              li(class='active'): a(href='#meta') Meta
+              li: a(href='#items') Items
+              li: a(href='#queries') Queries
+              li: a(href='#headers') Headers
+              li: a(href='#formatted-body') Formatted Body
+              li: a(href='#raw-body') Raw Body
+
+block sidebar
+  div(id='navbar', class='sidebar-nav sidebar-nav-fixed')
+    ul(class='nav nav-list')
+      li(class='nav-header'): a(href='#meta') Meta
+      each link, i in collection.links
+        li: a(href='#link-' + (i + 1))
+          mixin get_name(link, 'Link', i)
+      li(class='nav-header'): a(href='#items') Items
+      each item, i in collection.items
+        li: a(href='#item-' + (i + 1)) ##{i + 1}
+      li(class='nav-header'): a(href='#queries') Queries
+      each query, i in collection.queries
+        li: a(href='#query-' + (i + 1))
+          mixin get_name(query, 'Query', i)
+      li(class='nav-header'): a(href='#headers') Headers
+      li(class='nav-header'): a(href='#formatted-body') Formatted Body
+      li(class='nav-header'): a(href='#raw-body') Raw Body
+
+block inner_content
   if typeof err != 'undefined'
     section(id='error')
       div(class='page-error')
@@ -198,3 +219,10 @@ block content
       div(class='page-header')
         h1 Raw Body
       block raw_body
+
+block content
+  div(class='row-fluid')
+    div(class='span3')
+      block sidebar
+    div(class='span9')
+      block inner_content
diff --git a/views/index.jade b/views/index.jade
index 36d11e2..450e295 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -10,27 +10,26 @@ block navbar
         div(class='nav-collapse')
           ul(class='nav')
 
-block content
+block inner_content
   div(class='hero-unit')
     h1= title
 
     // spacers
-    div(class='row')  
-    div(class='row')  
+    div(class='row-fluid')  
+    div(class='row-fluid')  
 
-    div(class='row')
-      div(class='offset3 span6')
+    div(class='row-fluid')
+      div(class='span10 input-append')
         form(action='/render', class='form-search')
-          input(type='text', name='url', placeholder='Resource to explore', class='span5')
-          button(type='submit', class='btn') Explore
-
+          input(type='text', name='url', placeholder='Resource to explore', class='span10')
+          button(type='submit', class='btn btn-primary') Explore
     //
       p
         form(action='/render', class='form-search')
           input(type='text', name='url', placeholder='Enter URL to explore...', class='span6')
           button(type='submit', class='btn') Explore
 
-  div(class='row')
+  div(class='row-fluid')
     div(class='span4')
       h2 About
       p This is an interactive explorer for the Collection+JSON
@@ -84,3 +83,7 @@ block content
               a(href='#{u}') #{example}
               if i == examples.length - 1
                 |.
+
+block content
+  div(class='offset2 span10')
+    block inner_content
diff --git a/views/layout.jade b/views/layout.jade
index 5814794..004a5f0 100644
--- a/views/layout.jade
+++ b/views/layout.jade
@@ -4,21 +4,24 @@ html
     title Collection+JSON Explorer
     meta(name='viewport', content='width=device-width, initial-scale=1.0')
     link(href='/bootstrap-2.0.4/css/bootstrap.css', rel='stylesheet')
+    link(href='/bootstrap-2.0.4/css/bootstrap-responsive.css', rel='stylesheet')
+    link(href='/stylesheets/style.css', rel='stylesheet')
     style
-      .hero-unit {
-        margin-top: 60px;
-      }
-      section {
+      /*
+      body {
         padding-top: 40px;
       }
+      */
 
     link(href='/bootstrap-2.0.4/css/bootstrap-responsive.css', rel='stylesheet')
     // if lt IE 9
       script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
 
-  body
-    block navbar
-    div(class='container')
+  body(data-spy='scroll')
+    // block navbar
+    div(class='container-fluid')
       block content
-      script(src='/javascripts/jquery-1.7.2.min.js')
-      script(src='/bootstrap-2.0.4/js/bootstrap.min.js')
+
+    script(src='/javascripts/jquery-1.7.2.min.js')
+    script(src='/javascripts/gui.js')
+    script(src='/bootstrap-2.0.4/js/bootstrap.min.js')