knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#52,docs][s]: create sidebar in main docs and do various other minor bits of tidying.

Browse Source 
* Also link back to main page / docs from demo.
This commit is contained in:
Rufus Pollock
2012-03-17 18:46:27 +00:00
parent a62a33845a
commit 5313fde8aa
2 changed files with 60 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo/index.html
View File

@@ -48,7 +48,10 @@
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
<a class="brand" href="#">Recline Data Explorer</a> <a class="brand" href="../">Recline Data Explorer Demo</a>
<ul class="nav">
<li><a href="../#docs">Documentation</a></li>
</ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li> <li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li>
</ul> </ul>

90
index.html
View File

@@ -11,13 +11,14 @@
<link rel="stylesheet" href="vendor/bootstrap/2.0.0/css/bootstrap.css" /> <link rel="stylesheet" href="vendor/bootstrap/2.0.0/css/bootstrap.css" />
<link rel="stylesheet" href="http://opendatahandbook.org/en/_static/bootstrap-sphinx.css" /> <link rel="stylesheet" href="http://opendatahandbook.org/en/_static/bootstrap-sphinx.css" />
<link rel="stylesheet" href="vendor/bootstrap/2.0.0/css/bootstrap-responsive.css" />
<style type="text/css"> <style type="text/css">
html, body { html, body {
background-color: #eee; background-color: #eee;
} }
body { body {
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */ padding-top: 50px;
} }
.content { .content {
@@ -41,10 +42,22 @@
.page-header h1 { .page-header h1 {
font-size: 30px; font-size: 30px;
} }
ul.deps {
font-size: 85%;
}
.getit-btn {
margin: 10px 0px;
}
.getit-btn a {
width: 95%;
text-align: center;
}
</style> </style>
</head> </head>
<body> <body>
<a href="http://github.com/okfn/recline"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 100000;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
@@ -52,8 +65,8 @@
<ul class="nav"> <ul class="nav">
<li><a href="demo/">Demo</a></li> <li><a href="demo/">Demo</a></li>
<li><a href="#docs">Docs</a></li> <li><a href="#docs">Docs</a></li>
<li><a href="#downloads">Download</a></li>
<li><a href="http://github.com/okfn/recline/">Code on GitHub</a></li> <li><a href="http://github.com/okfn/recline/">Code on GitHub</a></li>
<li><a href="http://github.com/okfn/recline/issues">Issues</a></li>
</ul> </ul>
<a class="nav-logo pull-right" href="http://okfn.org/" title="An Open Knowledge Foundation Project"> <a class="nav-logo pull-right" href="http://okfn.org/" title="An Open Knowledge Foundation Project">
<img src="http://assets.okfn.org/p/okfn/img/logo_28x30.png" alt="Open Knowledge Foundation logo" /> <img src="http://assets.okfn.org/p/okfn/img/logo_28x30.png" alt="Open Knowledge Foundation logo" />
@@ -65,18 +78,19 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <div class="container"><div class="row">
<div class="content"> <div class="span9"><div class="content">
<div class="page-header"> <div class="page-header">
<h1> <h1>
Recline Data Explorer <small>Powerful, extensible JS grid/spreadsheet built on <a href="http://backbonejs.org/">Backbone</a></small> Recline Data Explorer<br />
<small>Powerful and extensible JS data grid and explorer built on <a href="http://backbonejs.org/">Backbone</a></small>
</h1> </h1>
</div> </div>
<h4>Recline combines a data grid, Google Refine-style data transforms <p><strong>Recline combines a data grid, Google Refine-style data transforms
and visualizations all in lightweight javascript and html.</h4> and visualizations all in lightweight javascript and html.</strong></p>
<p>Designed for standalone use or as a library to integrate into your own <p>Designed for standalone use or as a library to integrate into your own
app. Recline builds on the powerful but lightweight Backbone framework app. Recline builds on the powerful but lightweight Backbone framework
making it extremely easy to extend and adapt.</p> making it extremely easy to extend and adapt and its modular design means you only have to take what you need.</p>
<h2 id="features">Main Features</h2> <h2 id="features">Main Features</h2>
<ul> <ul>
@@ -95,25 +109,13 @@
</ul> </ul>
<h2>Screenshots</h2> <h2>Screenshots</h2>
<img src="http://farm8.staticflickr.com/7020/6847468031_0f474de5f7_b.jpg" alt="Recline Data Explorer Screenshot" style="width: 700px; display: block; margin-bottom: 30px;" /> <p><a href="demo/"><img src="http://farm8.staticflickr.com/7020/6847468031_0f474de5f7_b.jpg" alt="Recline Data Explorer Screenshot" style="width: 700px; display: block; margin-bottom: 30px;" /></a></p>
<h2 id="demo">Demo</h2> <h2 id="demo">Demo</h2>
<p><a href="demo/index.html" class="btn">For Recline Demo Click Here &raquo;</a></p> <p><a href="demo/index.html" class="btn">For Recline Demo Click Here &raquo;</a></p>
<h2 id="downloads">Downloads & Dependencies <small>(Right-click, and use 'Save As')</small></h2>
<p><a href="recline.js" class="btn">Recline Current Version (v0.3) &raquo;</a></p>
<h3>Dependencies</h3>
<p>Javascript Libraries:</p>
<ul>
<li>Jquery >= 1.6</li>
<li>Underscore and Backbone (0.5.1)</li>
<li>JQuery Mustache</li>
<li>(Optional) JQuery Flot - for graphing</li>
</ul>
<p><strong>CSS</strong>: the demo utilizes bootstrap but you can integrate with your own HTML and CSS. Data Explorer specific CSS can be found here in the repo: <a href="https://github.com/okfn/recline/tree/master/css">https://github.com/okfn/recline/tree/master/css</a>.</p>
<h2 id="docs">Documentation</h2> <h2 id="docs">Documentation</h2>
<h3 id="using">Quickstart</h3> <h3 id="docs-using">Quickstart</h3>
<pre> <pre>
// Note: you should have included the relevant JS libraries (and CSS) // Note: you should have included the relevant JS libraries (and CSS)
// See above for dependencies // See above for dependencies
@@ -138,12 +140,14 @@ Backbone.history.start();
href="demo/">Demo</a> -- just hit view source (NB: the javascript for the href="demo/">Demo</a> -- just hit view source (NB: the javascript for the
demo is in: <a href="demo/js/app.js">app.js</a>).</p> demo is in: <a href="demo/js/app.js">app.js</a>).</p>
<h3 id="doc-concepts">Architecture and Model</h3> <h3 id="doc-concepts">Structure</h3>
<p>Recline has a simple structure layered on top of the basic Model/View <p>Recline has a simple structure layered on top of the basic Model/View
distinction inherent in Backbone. There are the following two main domain objects (both Backbone Models):</p> distinction inherent in Backbone.</p>
<p><strong>Models</strong>: there are two main model objects:</p>
<ul> <ul>
<li>Dataset: represents the dataset. Holds dataset info and a pointer to list of data items (Documents in our terminology) which it can load from the relevant Backend.</li> <li><a href="docs/model.html#section-2">Dataset</a>: represents the dataset. Holds dataset info and a pointer to list of data items (Documents in our terminology) which it can load from the relevant Backend.</li>
<li>Document: an individual data item (e.g. a row from a relational database or a spreadsheet, a document from from a document DB like CouchDB or MongoDB).</li> <li><a href="docs/model.html#section-4">Document</a>: an individual data item (e.g. a row from a relational database or a spreadsheet, a document from from a document DB like CouchDB or MongoDB).</li>
</ul> </ul>
<p>More detail of how these work can be found in the <a href="docs/model.html">Model source docs</a>.</p> <p>More detail of how these work can be found in the <a href="docs/model.html">Model source docs</a>.</p>
@@ -153,18 +157,14 @@ Backbone.history.start();
query API and doing bulk transforms on the backend. More <a query API and doing bulk transforms on the backend. More <a
href="#doc-backends">info on backends can be found below</a>.</p> href="#doc-backends">info on backends can be found below</a>.</p>
<p>Complementing the model are various Views (you can easily write your own). Each view holds a pointer to a Dataset:</p> <p><strong>Views</strong>: complementing the model are various Views (you can also easily write your own). Each view holds a pointer to a Dataset:</p>
<ul> <ul>
<li>DataExplorer: the parent view which manages the overall app and sets up sub views.</li> <li>DataExplorer: the parent view which manages the overall app and sets up sub views.</li>
<li>DataGrid: the data grid view.</li> <li>DataGrid: the data grid view.</li>
<li>FlotGraph: a simple graphing view using <a href="http://code.google.com/p/flot/">Flot</a>.</li> <li>FlotGraph: a simple graphing view using <a href="http://code.google.com/p/flot/">Flot</a>.</li>
</ul> </ul>
<h3 id="doc-backends">Backends</h3> <h3 id="doc-backends">Backends</h3>
<p>Backends are connectors to backend data sources from which data can be retrieved.</p>
<p>Backends are implemented as Backbone models but this is just a convenience <p>Backends are implemented as Backbone models but this is just a convenience
(they do not save or load themselves from any remote source). You can see (they do not save or load themselves from any remote source). You can see
detailed examples of backend implementation in the source documentation detailed examples of backend implementation in the source documentation
@@ -239,7 +239,29 @@ like).</p>
href="http://github.com/okfn/dataexplorer">original Data Explorer</a>. href="http://github.com/okfn/dataexplorer">original Data Explorer</a>.
However, it has been rewritten from the ground up using Backbone.</p> However, it has been rewritten from the ground up using Backbone.</p>
</div> </div></div> <!-- /span9 /content -->
</div> <div class="span3 sidebar">
<div class="well sidebar-nav">
<h3 class="nav-header">Get It</h3>
<p class="getit-btn"><a href="recline.js" class="btn primary">Development Version<br />v0.3 (67k)</a></p>
<h4>Dependencies</h4>
<ul class="deps">
<li>JQuery &gt;= 1.6</li>
<li><a href="http://backbonejs.org/">Backbone</a> &gt;= 0.5.1</li>
<li>Underscore &gt;= 1.0</li>
<li>JQuery Mustache</li>
<li><a href="http://code.google.com/p/flot/">JQuery Flot &gt;= 0.7</a>: (Optional) for graphing</li>
<li><a href="http://twitter.github.com/bootstrap/">Bootstrap</a> &gt;= v2.0: (Optional) for CSS/JS</li>
</ul>
<h3 class="nav-header">Documentation</h3>
<ul class="nav nav-list">
<li><a href="#docs-using">Using it</a></li>
<li><a href="#docs-concepts">Concepts and Structure</a></li>
<li><a href="#docs-backends">Backends</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div></div> <!-- /row /container -->
</body> </body>
</html> </html>