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/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/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 f3dc3dbd..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: @@ -269,6 +273,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 +285,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..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: 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