diff --git a/_includes/example-backends-online-csv.js b/_includes/example-backends-online-csv.js index 9cf128b3..a03fc362 100644 --- a/_includes/example-backends-online-csv.js +++ b/_includes/example-backends-online-csv.js @@ -14,7 +14,8 @@ dataset.fetch(); // show the data for illustrations sake var grid = new recline.View.SlickGrid({ - model: dataset + model: dataset, + el: $('#my-online-csv') }); -$('#my-online-csv').append(grid.el); +grid.visible = true; diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html index 5f4313fc..2b8cd735 100644 --- a/_includes/recline-deps.html +++ b/_includes/recline-deps.html @@ -25,7 +25,7 @@ - + diff --git a/_includes/views-list.html b/_includes/views-list.html new file mode 100644 index 00000000..36bb87ca --- /dev/null +++ b/_includes/views-list.html @@ -0,0 +1,7 @@ +* Grid (simple) +* Grid (SlickGrid) +* Map +* Choropleth Map +* Graph +* Timeline +* Multiview (combines views) \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index ccd3403c..9ed6a0fd 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -9,114 +9,123 @@ - + {% if page.recline-deps %} {% include recline-deps.html %} {% endif %} - + -
-
+ -
- -{{content}} - -
-
-
-
-

Use the Library »

-

Recline.js is freely redistributable under the terms of the MIT license.

-
-
-

Supported by funding from the Shuttleworth Foundation

- -
-
- -
-
-
Contacts
- -
+ + Recline.js – relax with your data
+
+ + +
-
- + {{content}} + +
+
+
+
+

Use the Library »

+

Recline.js is freely redistributable under the terms of the MIT license.

+
+
+

Supported by funding from the Shuttleworth Foundation

+ +
+
+ +
+
+

Contacts

+ + +
+
+ +
+
+ + diff --git a/css-site/style.css b/css-site/style.css index dea128c3..f0a9e030 100644 --- a/css-site/style.css +++ b/css-site/style.css @@ -28,6 +28,7 @@ body, p { h1, h2, h3, h4, h5, h6 { font-family:'PT Sans',Helvetica, Arial, sans-serif; + font-weight: bold; } h2 { @@ -53,45 +54,78 @@ a:hover { Layout --------------------------------------------------- */ -.navbar .logo-icon img { - margin-top: 6px; - margin-right: 8px; +.navbar-header{ + +} + +.navbar-header .logo-icon { height: 34px; } -.navbar .brand { - font-family:'PT Sans', Helvetica, Arial, sans-serif; - font-style:italic; - font-size:18px; - font-weight:400; - letter-spacing:-1px; - line-height: 32px; +.navbar-brand { + font-family:'PT Sans', Helvetica, Arial, sans-serif; + font-style:italic; + font-size:18px; + font-weight:400; + letter-spacing:-1px; + text-shadow: none !important; + color: #FFF !important; + margin-top: -6px; } -.navbar .nav > li > a { +.navbar-nav > li > a { padding: 15px 10px; font-size: 13px; + text-shadow: none !important; + color: #999 !important; +} + +.navbar-nav > li > a:focus, +.navbar-nav > li > a:hover { + color: #FFF !important; } .navbar .divider-vertical { height: 50px; + margin: 0 9px; + border-right: 1px solid #ffffff; } -.navbar-inner { - height:50px; - background: #303030; /* Old browsers */ - background: -moz-linear-gradient(top, #303030 0%, #2d2d2d 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* IE10+ */ - background: linear-gradient(top, #303030 0%,#2d2d2d 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */ - -webkit-box-shadow:none; +.navbar-inverse .divider-vertical { + border-right-color: #222222; +} + +@media (max-width: 767px) { + .navbar-collapse .nav > .divider-vertical { + display: none; + } +} + +.navbar { + height:50px; + background: #303030; /* Old browsers */ + background: -moz-linear-gradient(top, #303030 0%, #2d2d2d 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* IE10+ */ + background: linear-gradient(top, #303030 0%,#2d2d2d 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */ + -webkit-box-shadow:none; -moz-box-shadow: none; box-shadow: none; } +.icon-white{ + color: #FFF; + margin-right: 1px; +} + +a.btn, +button.btn { + white-space: normal !important; +} + body { padding-top: 60px; } @@ -156,12 +190,12 @@ section { Footer --------------------------------------------------- */ -.footer { +.recline-footer { background-color:#040404; color:#CCC; margin-top: 30px; } -.footer:before { +.recline-footer:before { content: " "; height:14px; display:block; @@ -170,18 +204,18 @@ section { background-position: center -100px; margin-top:-34px; } -.footer:after { +.recline-footer:after { display:none; } -.footer .row { +.recline-footer .row { margin-top:15px; margin-bottom:15px; } -.footer a { +.recline-footer a { color:#CCC; } -.footer a.btn { - color:#333333; +.recline-footer a.btn { + color: #333333; } .tutorials .well { @@ -212,3 +246,6 @@ section { margin-bottom: 20px; } +#my-online-csv { + height: 100px; +} diff --git a/css/multiview.css b/css/multiview.css index 02c4b704..0f28beca 100644 --- a/css/multiview.css +++ b/css/multiview.css @@ -27,22 +27,42 @@ float: right; margin-left: 5px; padding-left: 5px; - border-left: solid 2px #ddd; } -.header .recline-results-info { - line-height: 28px; +.recline-results-info { + line-height: 35px; margin-left: 20px; float: left; } +.recline-data-explorer .data-view-sidebar > div { + margin-top: 5px; + margin-bottom: 10px; +} + +.recline-data-explorer .radio, +.recline-data-explorer .checkbox { + padding-left: 20px; +} + +.recline-data-explorer .editor-update-map { + margin: 30px 0px 20px 0px; +} + +.recline-data-explorer label { + font-weight: normal; +} + /********************************************************** * Query Editor *********************************************************/ -.header .recline-query-editor { +.recline-query-editor { float: right; - height: 30px; + height: 35px; + padding-right: 5px; + margin-right: 5px; + border-right: solid 2px #ddd; } .header .input-prepend { @@ -63,11 +83,11 @@ vertical-align: top; } -.header .recline-query-editor form button { +.recline-query-editor form button { vertical-align: top; } -.header .recline-query-editor label { +.recline-query-editor label { display:none; } @@ -75,28 +95,78 @@ * Pager *********************************************************/ -.header .recline-pager { +.recline-pager { float: left; margin: auto; display: block; margin-left: 20px; } -.header .recline-pager .pagination label { +.recline-pager .pagination li { + display: inline-block; +} + +.recline-pager .pagination label { display:none; } -.header .recline-pager .pagination input { - width: 30px; - height: 18px; +.recline-pager .pagination input { + width: 40px; + height: 25px; padding: 2px 4px; margin: 0; - margin-top: -4px; + margin-top: -2px; + + border: 1px solid #cccccc; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + transition: border linear 0.2s, box-shadow linear 0.2s; + border-radius: 4px; + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -webkit-border-radius: 4px; + + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-border-radius: 4px; + + -o-transition: border linear 0.2s, box-shadow linear 0.2s; } -.header .recline-pager .pagination a { - line-height: 26px; - padding: 0 6px; +.recline-pager .pagination a { + float: none; + margin-left: -5px; + color: #555; +} + +.recline-pager .pagination .page-range { + height: 34px; + padding: 5px 8px; + margin-left: -5px; + border: 1px solid #ddd; +} + +.recline-pager .pagination .page-range a { + padding: 0px 12px; + border: none; +} + +.recline-pager .pagination .page-range a:hover { + background-color: #ffffff; +} + +.recline-pager .pagination > li:first-child > a { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 0px; + border-top-right-radius: 0px; +} + +.recline-pager .pagination > li:last-child > a { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; + border-bottom-left-radius: 0px; + border-top-left-radius: 0px; } /********************************************************** @@ -108,6 +178,31 @@ display: none; } +.recline-filter-editor .filters { + margin: 20px 0px; +} + +.recline-filter-editor h3 { + margin-top: 4px; +} + +.recline-filter-editor .filter { + margin-top: 20px; +} + +.recline-filter-editor .filter .form-group { + margin-bottom: 0px; +} + +.recline-filter-editor .filter input, +.recline-filter-editor .filter label { + margin: 0px; +} + +.recline-filter-editor .js-edit button { + margin: 25px 0px 0px 0px; +} + .recline-filter-editor .filter-term a { font-size: 18px; } @@ -120,6 +215,20 @@ .recline-filter-editor input { margin-top: 0.5em; + margin-bottom: 10px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border: 1px solid #cccccc; +} + +.recline-filter-editor label { + font-weight: normal; + display: block; +} + +.recline-filter-editor legend { + margin-bottom: 5px; } .recline-filter-editor .add-filter { @@ -143,22 +252,30 @@ padding: 0; } -.recline-fields-view .fields-list .accordion-heading, -.recline-fields-view .fields-list h3 -{ - margin: 3px 0 3px 5px; +.recline-fields-view .panel { + background-color: #f5f5f5; + border: 1px solid #e5e5e5; } -.recline-fields-view .fields-list .accordion-heading a, -.recline-fields-view .fields-list .accordion-heading h4 { +.recline-fields-view .panel-group h3 { + padding-left: 10px; +} + +.recline-fields-view .fields-list .panel-heading { + padding: 2px 5px; + margin: 1px 0px 1px 5px; +} + +.recline-fields-view .panel a, +.recline-fields-view .panel h4 { display: inline; } -.recline-fields-view .fields-list .accordion-heading a { +.recline-fields-view .panel a { padding: 0; } -.recline-fields-view .fields-list .accordion-heading h4 { +.recline-fields-view .panel h4 { word-wrap: break-word } diff --git a/css/slickgrid.css b/css/slickgrid.css index 5d1835a3..f70a38f1 100644 --- a/css/slickgrid.css +++ b/css/slickgrid.css @@ -29,6 +29,10 @@ classes should alter those! .recline-slickgrid .slick-header-column:hover, .slick-header-column-active { } +.recline-slickgrid .slick-header-column.ui-state-default { + height: 26px; +} + .recline-slickgrid .slick-headerrow { background: #fafafa; } @@ -167,16 +171,16 @@ classes should alter those! .recline-slickgrid .recline-row-delete { font-size: 12px; - padding: 2px; - width: 22px; - height: 14px; + padding: 3px; + width: 29px; + height: 18px; line-height: 13px; } .recline-cell-reorder { font-size: 12px; - padding: 2px; - width: 22px; + padding: 1px; + width: 31px; height: 14px; line-height: 13px; cursor: move; diff --git a/demos/index.html b/demos/index.html index 16ffa9f2..6c82024e 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,7 +11,7 @@ root: ../
-
+

Multiview Demo

See the integrated multiview in action on a @@ -20,7 +20,7 @@ root: ../ and field summaries.

-
+
@@ -28,7 +28,7 @@ root: ../
-
+

Data Explorer

The Data Explorer is a full @@ -37,7 +37,7 @@ root: ../ was originally developed to build.

-
+
@@ -45,7 +45,7 @@ root: ../
-
+

Timeliner

Create timelines quickly and easily using the source code)

-
+
@@ -61,7 +61,7 @@ root: ../
-
+

Crime Maps

See Recline's geo filter and map view capabilities put to good use @@ -69,7 +69,7 @@ root: ../ Data Explorer pre-configured to show thefts near 9th and Mission.

-
+
@@ -77,7 +77,7 @@ root: ../
-
+

Search Demo

See how easy it is to build a responsive AJAX-based search interface @@ -85,7 +85,7 @@ root: ../ to easily customize the display of results.

-
+
diff --git a/demos/search/index.html b/demos/search/index.html index 28d3bb6a..b9cadf5f 100644 --- a/demos/search/index.html +++ b/demos/search/index.html @@ -17,7 +17,7 @@ root: ../../ } .controls .query-here { - width: 500px; + width: 510px; margin: auto; } @@ -28,30 +28,10 @@ root: ../../ } .pager-here { - width: 200px; + width: 230px; margin: auto; } -.recline-pager { - float: left; - margin: auto; - display: block; - margin-left: 20px; -} - -.recline-pager .pagination input { - width: 30px; - height: 18px; - padding: 2px 4px; - margin: 0; - margin-top: -4px; -} - -.recline-pager .pagination a { - line-height: 26px; - padding: 0 6px; -} - .body { clear: both; } @@ -71,13 +51,18 @@ root: ../../ ul.facet-items { list-style-type: none; - margin-left: 0; + margin-left: 0px; + padding: 0px; } .record ul { list-style-type: none; margin-left: 0; } + +.recline-query-editor { + border-right: none; +}
diff --git a/docs/index.html b/docs/index.html index c30d8c3f..b9c50bd6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,19 +22,19 @@ root: ../

The Recline Library consists of 3 parts: Models, Backends and Views

-
+

Models

Models help you structure your work with data by providing some standard objects such as Dataset and Record – a Dataset being a collection of Records. More »

-
+

Backends

Backends connect your Models to data sources (and stores) – for example Google Docs spreadsheets, local CSV files, the DataHub, ElasticSearch etc. More »

-
+

Views

Views are user interface components for displaying, editing or interacting with the data. For example, maps, graphs, data grids or a query editor. More »

@@ -46,13 +46,13 @@ root: ../

Source Docs (via Docco)

-
+

Models

-
+

Dataset Views and Widgets

  • MultiView View (plus common view code)
    • diff --git a/docs/tutorial-grids.markdown b/docs/tutorial-grids.markdown new file mode 100644 index 00000000..20632f5f --- /dev/null +++ b/docs/tutorial-grids.markdown @@ -0,0 +1,52 @@ +--- +layout: container +title: Grids - Advanced use of grids in Recline - Tutorial +recline-deps: true +root: ../ +--- + +
    +

    + Doing More with Grids +
    + This tutorial goes beyond the basic + views tutorial and shows you how to do more with grids +

    +
    + +### How much can I do with a simple grid view + +### Benefits of SlickGrid +What does Recline give you out of the box, what does SlickGrid have built in and how to use it (reference to stuff below). + +### Preparing your page + +See the instructions in the [basic views tutorial](tutorial-views.html). + +### Creating a Dataset + +Just like in the main tutorial, here's some example data We are going to work with: + +{% highlight javascript %} +{% include data.js %} +var dataset = new recline.Model.Dataset({ + records: data +}); +{% endhighlight %} + + + +### Accessing SlickGrid features +Show how we can customize SlickGrid grid "normally" - i.e. you can get access to underlying grid and tweak it as you want. + +Suggest we demonstrate using this example: https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-plugin-headermenu.html + +Idea here is: we don't want to mimic all that slickgrid can do through recline interface - just let people do it directly themselves ... + + + diff --git a/docs/tutorial-timelines.markdown b/docs/tutorial-timelines.markdown new file mode 100644 index 00000000..d6222e6c --- /dev/null +++ b/docs/tutorial-timelines.markdown @@ -0,0 +1,50 @@ +--- +layout: container +title: Timelines - Advanced use of timelines in Recline - Tutorial +recline-deps: true +root: ../ +--- + +
    +

    + Doing More with Timelines +
    + This tutorial goes beyond the basic + views tutorial and shows you how to do more with timelines +

    +
    + +### Preparing your page + +See the instructions in the [basic views tutorial](tutorial-views.html). + +### Creating a Dataset + +Just like in the main tutorial, here's some example data We are going to work with: + +{% highlight javascript %} +{% include data.js %} +var dataset = new recline.Model.Dataset({ + records: data +}); +{% endhighlight %} + + + +### Underlying library and Recline extensions + + + +### Handling dates + + + +### Customizing the rendering + + + diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown index 108e9f92..8f850c30 100644 --- a/docs/tutorial-views.markdown +++ b/docs/tutorial-views.markdown @@ -9,10 +9,14 @@ root: ../

    Views Tutorial
    - This step-by-step tutorial will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph and map to display it. + This step-by-step tutorial will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph, map and timeline to display it.

+### Views + +Views display Recline datasets in different ways. This page covers the interesting built-in views. For a full list of views including extensions outside of the Recline.js core, see the [list of currently available views]({{page.root}}docs/views.html#dataset-views-currently-available). + ### Preparing your page Before writing any code with Recline, you need to do the following preparation steps on your page: @@ -21,7 +25,7 @@ Before writing any code with Recline, you need to do the following preparation s 2. Include the relevant CSS in the head section of your document: {% highlight html %} - + {% endhighlight %} @@ -31,13 +35,13 @@ Before writing any code with Recline, you need to do the following preparation s - + {% endhighlight %} @@ -62,11 +66,17 @@ We can now create a recline Dataset object (and memory backend) from this raw da var dataset = new recline.Model.Dataset({ records: data }); -{% endhighlight %} +//Depending on the view, it may be important to set the date type +dataset.fields.models[1].attributes.type = 'date'; +{% endhighlight %} ### Setting up the Grid +
+The source code along with all dependencies for the grid part of the tutorial can be found at this GitHub repository. See it in action via GitHub Pages. +Although it's not demonstrated here, you can also use the simpler Grid view without SlickGrid. Source code along with all dependencies for that can be found at this GitHub repository. Demo on GitHub Pages. +
Let's create a data grid view to display the dataset we have just created. We're going to use the SlickGrid-based grid so we need the following CSS and JS dependencies in addition to those above: @@ -81,7 +91,7 @@ Let's create a data grid view to display the dataset we have just created. We'r - + {% endhighlight %} @@ -123,6 +133,10 @@ grid.render(); ### Creating a Graph +
+The source code along with all dependencies for the graph part of the tutorial can be found at this GitHub repository. See it in action via GitHub Pages. +
+ Let's create a graph view to display a line graph for this dataset. First, add the additional dependencies for this view. These are the Flot @@ -140,6 +154,8 @@ library and the Recline Flot Graph view: + + {% endhighlight %} @@ -164,8 +180,9 @@ var $el = $('#mygraph'); var graph = new recline.View.Graph({ model: dataset, state: { + graphType: "lines-and-points", group: "date", - series: ["x", "z"] + series: ["y", "z"] } }); $el.append(graph.el); @@ -173,17 +190,18 @@ graph.render(); graph.redraw(); {% endhighlight %} -The result is the following graph: +For the axis date formatting to work, it is crucial that the date type is set for that field as shown in the code concerning the dataset above. The result is the following graph:
 
+ + {% endhighlight %} @@ -250,6 +274,10 @@ map.render(); ### Creating a Timeline +
+The source code along with all dependencies for the map part of the tutorial can be found at this GitHub repository. See it in action via GitHub Pages. +
+ Now, let's create a timeline for this dataset using the date information which is present on these data points. @@ -258,6 +286,7 @@ First, add the additional dependencies for the timeline view. The timeline is bu {% highlight html %} + diff --git a/docs/tutorials.html b/docs/tutorials.html index cdd8f846..6ef1e832 100644 --- a/docs/tutorials.html +++ b/docs/tutorials.html @@ -12,19 +12,19 @@ root: ../

Basics – Using the Dataset and its Friends

-
+
-
+

Dataset Basics

-
+

Dataset Querying

-
+

Datasets and Events

@@ -34,9 +34,9 @@ root: ../

Backends – Loading and Storing Data from Remote Sources

-
+
-
+

Backends: loading data from Google Docs, Local CSV, DataHub & more ...

@@ -44,17 +44,16 @@ root: ../
-

Views – Grids, Maps, Graphs and More!

+

Views – visualize data

- -
+
-
+
-

Views Quickstart - Grids, Graphs and Maps

+

Views Quickstart - Grids, Graphs, Maps & Timelines

-
+

Doing more with maps

diff --git a/docs/views.markdown b/docs/views.markdown index 4b41fc92..762de79f 100644 --- a/docs/views.markdown +++ b/docs/views.markdown @@ -16,6 +16,9 @@ views they have a pointer to a model (or a collection) and have an associated DOM-style element (usually this element will be bound into the page at some point). +
Looking for quickstart tutorial rather than reference documentation? See the Views Tutorial.
+ + Views provided by core Recline are crudely divided into two types: * Dataset Views: a View intended for displaying a recline.Model.Dataset in some @@ -25,6 +28,9 @@ Views provided by core Recline are crudely divided into two types: which both provide a way for editing (a part of) a `recline.Model.Query` associated to a Dataset. +## Dataset Views currently available +{% include views-list.html %} + ## Dataset View These views are just Backbone views with a few additional conventions: diff --git a/download.markdown b/download.markdown index 056ed898..049e2e6d 100644 --- a/download.markdown +++ b/download.markdown @@ -12,22 +12,22 @@ title: Download

Latest Code - Master

The tutorials on this website will usually be based on the latest (master) codebase. It should also be very stable.

-
- +
+ recline.js (master) »
Single file containing all of Recline library
-
- +
+ recline.dataset.js (master) »
Single file with only the core data objects Dataset, Record etc without any Views or backends
-
- +
+ Full package (master) »
Everything - library, source code, unit tests, vendor libraries and documentation @@ -37,22 +37,22 @@ title: Download

Most Recent Official Release – v0.5

-
- +
+ recline.js »
Single file containing all of Recline library
-
- +
+ recline.dataset.js »
Single file with only the core data objects Dataset, Record etc without any Views or backends
-
- +
+ Full package (master) »
Everything - library, source code, unit tests, vendor libraries and documentation @@ -89,7 +89,7 @@ Individual views have additional dependencies such as: * [Leaflet](http://leaflet.cloudmade.com/) >= 0.4.4 (required for map view) * [Leaflet.markercluster](https://github.com/danzel/Leaflet.markercluster) as of 2012-09-12 (required for marker clustering) * [Verite Timeline](https://github.com/VeriteCo/Timeline/) as of 2012-05-02 (required for the timeline view) -* [Bootstrap](http://twitter.github.com/bootstrap/) >= v2.0 (default option for CSS and UI JS but you can use your own) +* [Bootstrap](http://twitter.github.com/bootstrap/) >= v3 (default option for CSS and UI JS but you can use your own) If you grab the full zipball for Recline this will include all of the relevant dependencies in the vendor directory and you can also find them at in the @@ -105,7 +105,7 @@ Here is an example of the page setup for an app using every Recline component: - + {% include recline-deps.html %} {% endhighlight %} diff --git a/index.html b/index.html index 18f17113..aea40126 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ title: Home
-
+

Recline Data Explorer and Library

@@ -19,9 +19,9 @@ title: Home and allows you to connect them with your data in seconds.

- Documentation » - Tutorials » - Demos » + Documentation » + Tutorials » + Demos »

Get started fast

diff --git a/src/view.flot.js b/src/view.flot.js index 62605eb3..cf75265c 100644 --- a/src/view.flot.js +++ b/src/view.flot.js @@ -26,7 +26,7 @@ my.Flot = Backbone.View.extend({ template: ' \
\
\ -
\ +
\

Hey there!

\

There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.

\

Please tell us by using the menu on the right and a graph will automatically appear.

\ @@ -367,30 +367,34 @@ my.FlotControls = Backbone.View.extend({
\
\
\ - \ -
\ - \ +
\ + \ +
\ + \ +
\
\ - \ -
\ - \ +
\ + \ +
\ + \ +
\
\
\
\
\
\ - \ + \
\