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/_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 e08cb53e..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,54 +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: #ffffff; + 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: #999999; + color: #999 !important; } -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - color: #ffffff; +.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; } @@ -165,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; @@ -179,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 { 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-views.markdown b/docs/tutorial-views.markdown index b44281cb..8f850c30 100644 --- a/docs/tutorial-views.markdown +++ b/docs/tutorial-views.markdown @@ -25,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 %} @@ -35,7 +35,7 @@ Before writing any code with Recline, you need to do the following preparation s - + diff --git a/docs/tutorials.html b/docs/tutorials.html index 8ed90f7f..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 ...

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

    Views – visualize data

    -
    +
    -
    +

    Views Quickstart - Grids, Graphs, Maps & Timelines

    -
    +

    Doing more with maps

    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 451ec381..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({
    \
    \
    \ - \ -
    \ - \ +
    \ + \ +
    \ + \ +
    \
    \ - \ -
    \ - \ +
    \ + \ +
    \ + \ +
    \
    \
    \
    \
    \
    \ - \ + \
    \