From d84e9e74cadc97af63025884167a73b6815fa754 Mon Sep 17 00:00:00 2001 From: Trygve Laugstøl Date: Tue, 3 Jul 2012 02:05:56 +0200 Subject: o Adding a side bar. --- TODO.txt | 3 ++ public/javascripts/gui.js | 11 +++++++ public/stylesheets/style.css | 29 ++++++++++++---- views/data.jade | 78 ++++++++++++++++++++++++++++++-------------- views/index.jade | 21 +++++++----- views/layout.jade | 21 +++++++----- 6 files changed, 114 insertions(+), 49 deletions(-) create mode 100644 TODO.txt create mode 100644 public/javascripts/gui.js diff --git a/TODO.txt b/TODO.txt new file mode 100644 index 0000000..c539eca --- /dev/null +++ b/TODO.txt @@ -0,0 +1,3 @@ +* Add a link to download as CSV. +* Check if a navigation menu on the left hand side is useful. See + http://twitter.github.com/bootstrap/examples/fluid.html diff --git a/public/javascripts/gui.js b/public/javascripts/gui.js new file mode 100644 index 0000000..f235f6d --- /dev/null +++ b/public/javascripts/gui.js @@ -0,0 +1,11 @@ +$(document).ready(function() { + /* Needed if the static top navbar is being used. + * Add data-offset='60' to as well. + var offset = 60; + $('#navbar ul li a').click(function(event) { + event.preventDefault(); + $($(this).attr('href'))[0].scrollIntoView(); + scrollBy(0, -offset); + }); + */ +}); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 30e047d..ccb2639 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,8 +1,25 @@ -body { - padding: 50px; - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; +.sidebar-nav { + padding: 9px 0; +} + +.sidebar-nav-fixed { + position:fixed; + /* Only used with top, static navbar + top:60px; */ + top:20px; + width:21.97%; +} + +@media (max-width: 767px) { + .sidebar-nav-fixed { + width:auto; + } +} + +@media (max-width: 979px) { + .sidebar-nav-fixed { + position:static; + width: auto; + } } -a { - color: #00B7FF; -} \ No newline at end of file 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') -- cgit v1.2.3