summaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorTrygve Laugstøl <trygvis@inamo.no>2012-07-02 19:12:46 +0200
committerTrygve Laugstøl <trygvis@inamo.no>2012-07-02 19:12:46 +0200
commitd83ee160d4340c8f409c076303021e20512e2214 (patch)
treebbc289ac2fe2cfe837773a0544b5435e63a1e12b /views
parent217e98f75fd6774764b0ac924c6f642bff2dfb18 (diff)
downloadcollection-json-explorer-d83ee160d4340c8f409c076303021e20512e2214.tar.gz
collection-json-explorer-d83ee160d4340c8f409c076303021e20512e2214.tar.bz2
collection-json-explorer-d83ee160d4340c8f409c076303021e20512e2214.tar.xz
collection-json-explorer-d83ee160d4340c8f409c076303021e20512e2214.zip
o Improved front page.
Diffstat (limited to 'views')
-rw-r--r--views/index.jade92
-rw-r--r--views/layout.jade17
2 files changed, 67 insertions, 42 deletions
diff --git a/views/index.jade b/views/index.jade
index 3cbf438..76e56bf 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -1,34 +1,68 @@
extends layout
+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')
+ a(class='brand', href='/') Collection+JSON Explorer
+ div(class='nav-collapse')
+ ul(class='nav')
+
block content
- h1= title
+ div(class='hero-unit')
+ h1= title
+
+ // spacers
+ div(class='row') &nbsp;
+ div(class='row') &nbsp;
- form(action='/render', class='well')
- div(class='row')
- div(class='span10')
- input(type='text', name='url', size='100', placeholder='Enter URL to explore...', class='span10')
- // TODO: Fix
- div(class='row')
- div(class='span12')
- &nbsp;
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 Examples
-
- 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}
+ div(class='offset3 span6')
+ form(action='/render', class='form-search')
+ input(type='text', name='url', placeholder='Resource to explore', class='span5')
+ button(type='submit', class='btn') 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='span6')
+ h2 About
+ p This is an interactive explorer for the Collection+JSON
+ | hypermedia. Give it an URL and it will render is as good as it
+ | can.
+
+ h3 REST/Collection+JSON Resources
+
+ p There's a growing C+J community that's discussing on the
+ a(href='https://groups.google.com/forum/#!forum/collectionjson') Google Group
+ | .
+
+ p The
+ a(href='http://amundsen.com/media-types/collection/') formal specification
+ | with a tutorial and examples.
+
+ div(class='span6')
+ h2 Examples
+
+ p The
+ a(href='http://employee.herokuapp.com') Employee
+ | application is a set of resources with employees and
+ | departments. The application was made specifically for this
+ | explorer.
+ a(href='http://' + host + '/render?url=http%3A%2F%2Femployee.herokuapp.com') Explore now!
+
+ p The specification contains a few example collections too which you can explore:
+ - 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}
+ if i == examples.length - 1
+ |.
diff --git a/views/layout.jade b/views/layout.jade
index 05f6e5d..5814794 100644
--- a/views/layout.jade
+++ b/views/layout.jade
@@ -5,26 +5,17 @@ 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: 40px;
- }
- */
+ .hero-unit {
+ margin-top: 60px;
+ }
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
// if lt IE 9
script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
- //
- link(rel='shortcut icon', href='/bootstrap-2.0.4/ico/favicon.ico')
- link(rel='apple-touch-icon-precomposed', sizes='144x144', href='/bootstrap-2.0.4/ico/apple-touch-icon-144-precomposed.png')
- link(rel='apple-touch-icon-precomposed', sizes='114x114', href='/bootstrap-2.0.4/ico/apple-touch-icon-114-precomposed.png')
- link(rel='apple-touch-icon-precomposed', sizes='72x72', href='/bootstrap-2.0.4/ico/apple-touch-icon-72-precomposed.png')
- link(rel='apple-touch-icon-precomposed', href='/bootstrap-2.0.4/ico/apple-touch-icon-57-precomposed.png')
-
body
block navbar
div(class='container')