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
Show Stats 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-inner">
<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">
<li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li>
</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="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">
html, body {
background-color: #eee;
}
body {
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
padding-top: 50px;
}
.content {
@ -41,10 +42,22 @@
.page-header h1 {
font-size: 30px;
}
ul.deps {
font-size: 85%;
}
.getit-btn {
margin: 10px 0px;
}
.getit-btn a {
width: 95%;
text-align: center;
}
</style>
</head>
<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-inner">
<div class="container">
@ -52,8 +65,8 @@
<ul class="nav">
<li><a href="demo/">Demo</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/issues">Issues</a></li>
</ul>
<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" />
@ -65,18 +78,19 @@
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="container"><div class="row">
<div class="span9"><div class="content">
<div class="page-header">
<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>
</div>
<h4>Recline combines a data grid, Google Refine-style data transforms
and visualizations all in lightweight javascript and html.</h4>
<p><strong>Recline combines a data grid, Google Refine-style data transforms
and visualizations all in lightweight javascript and html.</strong></p>
<p>Designed for standalone use or as a library to integrate into your own
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>
<ul>
@ -95,25 +109,13 @@
</ul>
<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>
<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>
<h3 id="using">Quickstart</h3>
<h3 id="docs-using">Quickstart</h3>
<pre>
// Note: you should have included the relevant JS libraries (and CSS)
// See above for dependencies
@ -138,12 +140,14 @@ Backbone.history.start();
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>
<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
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>
<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>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-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><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>
<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
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>
<li>DataExplorer: the parent view which manages the overall app and sets up sub views.</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>
</ul>
<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
(they do not save or load themselves from any remote source). You can see
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>.
However, it has been rewritten from the ground up using Backbone.</p>
</div>
</div>
</div></div> <!-- /span9 /content -->
<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>
</html>