[#427] Fixed columns, buttons and general styles.

css-site/style.css

@@ -120,6 +120,11 @@ a:hover {
   margin-right: 1px;
 }
 
+a.btn, 
+button.btn {
+  white-space: normal !important;
+}
+
 body {
   padding-top: 60px;
 }

css/slickgrid.css

@@ -169,7 +169,7 @@ classes should alter those!
   font-size: 12px;
   padding: 2px;
   width: 22px;
-  height: 14px;
+  height: 16px;
   line-height: 13px;
 }
 

demos/index.html

@@ -11,7 +11,7 @@ root: ../
 </div>
 
 <div class="row">
-  <div class="span4">
+  <div class="col-md-4">
     <div class="well">
       <h3><a href="multiview/">Multiview Demo</a></h3>
       <p>See the integrated <a href="multiview/">multiview in action on a
@@ -20,7 +20,7 @@ root: ../
       and field summaries.</p>
     </div>
   </div>
-  <div class="span8">
+  <div class="col-md-8">
     <a href="multiview/"><img src="http://farm8.staticflickr.com/7251/7508402742_03c74a9763_c.jpg" style="width: 100%" /></a>
   </div>
 </div>
@@ -28,7 +28,7 @@ root: ../
 <hr />
 
 <div class="row">
-  <div class="span4">
+  <div class="col-md-4">
     <div class="well">
       <h3><a href="http://explorer.datahub.io/">Data Explorer</a></h3>
       <p>The <a href="http://explorer.datahub.io/">Data Explorer</a> is a full
@@ -37,7 +37,7 @@ root: ../
       was originally developed to build.</p>
     </div>
   </div>
-  <div class="span8">
+  <div class="col-md-8">
     <a href="http://explorer.datahub.io/"><img src="http://farm8.staticflickr.com/7130/7508402380_c11f52f926_b.jpg" style="width: 100%;" /></a>
   </div>
 </div>
@@ -45,7 +45,7 @@ root: ../
 <hr />
 
 <div class="row">
-  <div class="span4">
+  <div class="col-md-4">
     <div class="well">
       <h3><a href="http://timeliner.reclinejs.com/">Timeliner</a></h3>
       <p>Create timelines quickly and easily using the <a
@@ -53,7 +53,7 @@ root: ../
         href="https://github.com/okfn/timeliner">source code</a>)</p>
     </div>
   </div>
-  <div class="span8">
+  <div class="col-md-8">
     <a href="http://timeliner.reclinejs.com/?backend=gdocs&url=https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdFROanhQOVh0NUhyOXNxRDdkc0tEZFE%23gid=0"><img src="http://farm9.staticflickr.com/8285/7508403206_420de3ce5e_b.jpg" style="width: 100%;" /></a>
   </div>
 </div>
@@ -61,7 +61,7 @@ root: ../
 <hr />
 
 <div class="row">
-  <div class="span4">
+  <div class="col-md-4">
     <div class="well">
       <h3><a href="http://bit.ly/recline-explorer-crime-sf">Crime Maps</a></h3>
       <p>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.</p>
     </div>
   </div>
-  <div class="span8">
+  <div class="col-md-8">
     <a href="http://bit.ly/recline-explorer-crime-sf"><img src="http://farm8.staticflickr.com/7279/7508402914_616326ee3f_z.jpg" /></a>
   </div>
 </div>
@@ -77,7 +77,7 @@ root: ../
 <hr />
 
 <div class="row">
-  <div class="span4">
+  <div class="col-md-4">
     <div class="well">
       <h3><a href="search/">Search Demo</a></h3>
       <p>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.</p>
     </div>
   </div>
-  <div class="span8">
+  <div class="col-md-8">
     <a href="search/"><img src="http://i.imgur.com/AmGx7.png" style="width: 100%;" /></a>
   </div>
 </div>

download.markdown

@@ -12,22 +12,22 @@ title: Download
 <h2>Latest Code - Master</h2>
 <p>The tutorials on this website will usually be based on the latest (master) codebase. It should also be very stable.</p>
 <div class="row">
-<div class="span4">
+<div class="col-md-4">
-  <a href="dist/recline.js" class="btn">
+  <a href="dist/recline.js" class="btn btn-default">
     <strong>recline.js (master) &raquo;</strong>
     <br />
     Single file containing all of Recline library
   </a>
 </div>
-<div class="span4">
+<div class="col-md-4">
-  <a href="dist/recline.dataset.js" class="btn">
+  <a href="dist/recline.dataset.js" class="btn btn-default">
     <strong>recline.dataset.js (master) &raquo;</strong>
     <br />
     Single file with only the core data objects Dataset, Record etc without any Views or backends
   </a>
 </div>
-<div class="span4">
+<div class="col-md-4">
-  <a href="https://github.com/okfn/recline/zipball/master" class="btn">
+  <a href="https://github.com/okfn/recline/zipball/master" class="btn btn-default">
     <strong>Full package (master) &raquo;</strong>
     <br />
     Everything - library, source code, unit tests, vendor libraries and documentation
@@ -37,22 +37,22 @@ title: Download
 
 <h2>Most Recent Official Release &ndash; v0.5</h2>
 <div class="row">
-<div class="span4">
+<div class="col-md-4">
-  <a href="https://raw.github.com/okfn/recline/v0.5/dist/recline.js" class="btn">
+  <a href="https://raw.github.com/okfn/recline/v0.5/dist/recline.js" class="btn btn-default">
     <strong>recline.js &raquo;</strong>
     <br />
     Single file containing all of Recline library
   </a>
 </div>
-<div class="span4">
+<div class="col-md-4">
-  <a href="https://raw.github.com/okfn/recline/v0.5/dist/recline.dataset.js" class="btn">
+  <a href="https://raw.github.com/okfn/recline/v0.5/dist/recline.dataset.js" class="btn btn-default">
     <strong>recline.dataset.js &raquo;</strong>
     <br />
     Single file with only the core data objects Dataset, Record etc without any Views or backends
   </a>
 </div>
-<div class="span4">
+<div class="col-md-4">
-  <a href="https://github.com/okfn/recline/zipball/v0.5" class="btn">
+  <a href="https://github.com/okfn/recline/zipball/v0.5" class="btn btn-default">
     <strong>Full package (master) &raquo;</strong>
     <br />
     Everything - library, source code, unit tests, vendor libraries and documentation

src/view.multiview.js

@@ -103,7 +103,7 @@ my.MultiView = Backbone.View.extend({
       <div class="navigation"> \
         <div class="btn-group" data-toggle="buttons-radio"> \
         {{#views}} \
-        <a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \
+        <button href="#{{id}}" data-view="{{id}}" class="btn btn-default">{{label}}</button> \
         {{/views}} \
         </div> \
       </div> \
@@ -113,7 +113,7 @@ my.MultiView = Backbone.View.extend({
       <div class="menu-right"> \
         <div class="btn-group" data-toggle="buttons-checkbox"> \
           {{#sidebarViews}} \
-          <a href="#" data-action="{{id}}" class="btn">{{label}}</a> \
+          <button href="#" data-action="{{id}}" class="btn btn-default">{{label}}</button> \
           {{/sidebarViews}} \
         </div> \
       </div> \
@@ -124,8 +124,8 @@ my.MultiView = Backbone.View.extend({
   </div> \
   ',
   events: {
-    'click .menu-right a': '_onMenuClick',
+    'click .menu-right button': '_onMenuClick',
-    'click .navigation a': '_onSwitchView'
+    'click .navigation button': '_onSwitchView'
   },
 
   initialize: function(options) {

src/view.slickgrid.js

@@ -47,7 +47,7 @@ my.SlickGrid = Backbone.View.extend({
   
     // Template for row delete menu , change it if you don't love 
     this.templates = {
-      "deleterow" : '<a href="#" class="recline-row-delete btn" title="Delete row">X</a>'
+      "deleterow" : '<button href="#" class="recline-row-delete btn btn-default" title="Delete row">X</button>'
     };
 
     _.bindAll(this, 'render', 'onRecordChanged');
@@ -437,7 +437,7 @@ my.SlickGrid = Backbone.View.extend({
 my.GridControl= Backbone.View.extend({
   className: "recline-row-add",
   // Template for row edit menu , change it if you don't love
-  template: '<h1><a href="#" class="recline-row-add btn">Add row</a></h1>',
+  template: '<h1><button href="#" class="recline-row-add btn btn-default">Add row</button></h1>',
   
   initialize: function(options){
     var self = this;

src/widget.pager.js

@@ -10,7 +10,7 @@ my.Pager = Backbone.View.extend({
   className: 'recline-pager', 
   template: ' \
     <div class="pagination"> \
-      <ul> \
+      <ul class="pagination"> \
         <li class="prev action-pagination-update"><a href="">&laquo;</a></li> \
         <li class="active"><label for="from">From</label><a><input name="from" type="text" value="{{from}}" /> &ndash; <label for="to">To</label><input name="to" type="text" value="{{to}}" /> </a></li> \
         <li class="next action-pagination-update"><a href="">&raquo;</a></li> \

src/widget.queryeditor.js

@@ -14,7 +14,7 @@ my.QueryEditor = Backbone.View.extend({
         <span class="add-on"><i class="icon-search"></i></span> \
         <label>Search</label><input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
       </div> \
-      <button type="submit" class="btn">Go &raquo;</button> \
+      <button type="submit" class="btn btn-default">Go &raquo;</button> \
     </form> \
   ',