diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/data.jade | 155 | ||||
| -rw-r--r-- | views/index.jade | 40 | ||||
| -rw-r--r-- | views/layout.jade | 10 |
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') |