summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTrygve Laugstøl <trygvis@inamo.no>2012-07-03 02:05:56 +0200
committerTrygve Laugstøl <trygvis@inamo.no>2012-07-03 02:05:56 +0200
commitd84e9e74cadc97af63025884167a73b6815fa754 (patch)
treed44407af7d99d83d90e64b414ac12b58a649657e
parent506d5edbdf3b31428b3ad3643b3f524bb2418eb8 (diff)
downloadcollection-json-explorer-d84e9e74cadc97af63025884167a73b6815fa754.tar.gz
collection-json-explorer-d84e9e74cadc97af63025884167a73b6815fa754.tar.bz2
collection-json-explorer-d84e9e74cadc97af63025884167a73b6815fa754.tar.xz
collection-json-explorer-d84e9e74cadc97af63025884167a73b6815fa754.zip
o Adding a side bar.
-rw-r--r--TODO.txt3
-rw-r--r--public/javascripts/gui.js11
-rw-r--r--public/stylesheets/style.css29
-rw-r--r--views/data.jade78
-rw-r--r--views/index.jade21
-rw-r--r--views/layout.jade21
6 files changed, 114 insertions, 49 deletions
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 <body> 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 &lt;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') &nbsp;
- div(class='row') &nbsp;
+ div(class='row-fluid') &nbsp;
+ div(class='row-fluid') &nbsp;
- 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')