From e67493e5143f0c91074a4dbc0aefc6f4e9113cdb Mon Sep 17 00:00:00 2001 From: Matt Fullerton Date: Mon, 3 Nov 2014 09:18:42 +0100 Subject: [PATCH 1/3] Add line for the *Recline* timeline CSS, add infobox for demo --- docs/tutorial-views.markdown | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown index f3dc3dbd..1fe33e86 100644 --- a/docs/tutorial-views.markdown +++ b/docs/tutorial-views.markdown @@ -269,6 +269,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. @@ -277,6 +281,7 @@ First, add the additional dependencies for the timeline view. The timeline is bu {% highlight html %} + From d11c88b99fb346b1a6d53340d9a664483735dd1e Mon Sep 17 00:00:00 2001 From: Matt Fullerton Date: Mon, 3 Nov 2014 09:40:49 +0100 Subject: [PATCH 2/3] Bring back styling pre-Bootstrap upgrade --- css-site/style.css | 9 +++++++++ index.html | 6 +++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/css-site/style.css b/css-site/style.css index f6fc5641..e08cb53e 100644 --- a/css-site/style.css +++ b/css-site/style.css @@ -66,11 +66,20 @@ a:hover { font-weight:400; letter-spacing:-1px; line-height: 32px; + text-shadow: none !important; + color: #ffffff; } .navbar .nav > li > a { padding: 15px 10px; font-size: 13px; + text-shadow: none !important; + color: #999999; +} + +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + color: #ffffff; } .navbar .divider-vertical { diff --git a/index.html b/index.html index 18f17113..451ec381 100644 --- a/index.html +++ b/index.html @@ -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

From a6efbf9da3a0e8d689e9239fb638edcbf7ec0645 Mon Sep 17 00:00:00 2001 From: Matt Fullerton Date: Mon, 3 Nov 2014 10:34:24 +0100 Subject: [PATCH 3/3] Docs improvements Added list of views incl. those from 3rd parties, linked views tutorial from views docs. Linked the list from the tutorial. Booted (unlinked) pages for Grids tutorial (#397, #398), Timelines tutorial (#224) --- _includes/views-list.html | 7 +++++ docs/tutorial-grids.markdown | 52 ++++++++++++++++++++++++++++++++ docs/tutorial-timelines.markdown | 50 ++++++++++++++++++++++++++++++ docs/tutorial-views.markdown | 6 +++- docs/tutorials.html | 5 ++- docs/views.markdown | 6 ++++ 6 files changed, 122 insertions(+), 4 deletions(-) create mode 100644 _includes/views-list.html create mode 100644 docs/tutorial-grids.markdown create mode 100644 docs/tutorial-timelines.markdown 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/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 1fe33e86..2357bc17 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: diff --git a/docs/tutorials.html b/docs/tutorials.html index cdd8f846..8ed90f7f 100644 --- a/docs/tutorials.html +++ b/docs/tutorials.html @@ -44,14 +44,13 @@ root: ../ -

Views – Grids, Maps, Graphs and More!

+

Views – visualize data

-
-

Views Quickstart - Grids, Graphs and Maps

+

Views Quickstart - Grids, Graphs, Maps & Timelines

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: