couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gar...@apache.org
Subject fauxton commit: updated refs/heads/master to 5c811ab
Date Thu, 28 Aug 2014 06:36:37 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master 05e16ce04 -> 5c811ab40


Implement new database view

New database view. This is based off of the work from deathbearbrown
<deathbearbrown@gmail.com> and Jenn Schiffer <jenn@pancaketheorem.com>.


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/5c811ab4
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/5c811ab4
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/5c811ab4

Branch: refs/heads/master
Commit: 5c811ab40ce38f0d9559b597df7f2da25e0163ce
Parents: 05e16ce
Author: Garren Smith <garren.smith@gmail.com>
Authored: Wed Aug 27 15:43:22 2014 +0200
Committer: Garren Smith <garren.smith@gmail.com>
Committed: Thu Aug 28 08:34:39 2014 +0200

----------------------------------------------------------------------
 app/addons/auth/resources.js                    |   2 +
 app/addons/databases/assets/less/databases.less |   3 +
 app/addons/databases/routes.js                  |  11 +-
 .../databases/templates/header_alldbs.html      |  26 +
 app/addons/databases/templates/jump_to_db.html  |  19 +
 app/addons/databases/templates/list.html        |  38 +-
 app/addons/databases/templates/newdatabase.html |   2 +-
 app/addons/databases/views.js                   | 118 +++--
 app/addons/documents/routes.js                  |   1 +
 app/addons/documents/views.js                   |   5 +-
 app/addons/fauxton/base.js                      | 111 +---
 app/addons/fauxton/components.js                | 117 +++++
 app/addons/fauxton/resizeColumns.js             |  94 ++--
 app/addons/fauxton/templates/api_bar.html       |  11 +-
 app/addons/fauxton/templates/breadcrumbs.html   |  18 +-
 app/addons/fauxton/templates/pagination.html    |  31 +-
 app/templates/layouts/one_pane.html             |   6 +-
 app/templates/layouts/with_tabs_sidebar.html    |   6 +-
 assets/less/fauxton.less                        | 505 ++++++++++++++-----
 assets/less/pagination.less                     | 124 +++++
 20 files changed, 873 insertions(+), 375 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/auth/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/auth/resources.js b/app/addons/auth/resources.js
index ca9a33f..eeac4fe 100644
--- a/app/addons/auth/resources.js
+++ b/app/addons/auth/resources.js
@@ -264,6 +264,7 @@ function (app, FauxtonAPI, CouchdbSession) {
 
   Auth.LoginView = FauxtonAPI.View.extend({
     template: 'addons/auth/templates/login',
+    className: "row-fluid",
     initialize: function (options) {
       this.urlBack = options.urlBack || "";
     },
@@ -368,6 +369,7 @@ function (app, FauxtonAPI, CouchdbSession) {
 
   Auth.NoAccessView = FauxtonAPI.View.extend({
     template: "addons/auth/templates/noAccess",
+    className: "row-fluid",
 
     initialize: function (options) {
       this.urlBack = options.urlBack || "";

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/databases/assets/less/databases.less
----------------------------------------------------------------------
diff --git a/app/addons/databases/assets/less/databases.less b/app/addons/databases/assets/less/databases.less
index b401e7d..963179e 100644
--- a/app/addons/databases/assets/less/databases.less
+++ b/app/addons/databases/assets/less/databases.less
@@ -32,3 +32,6 @@
         font-size: 19px;
     }
 }
+#new a {
+    text-decoration: none;
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/databases/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/routes.js b/app/addons/databases/routes.js
index 131abf9..8bf8b5c 100644
--- a/app/addons/databases/routes.js
+++ b/app/addons/databases/routes.js
@@ -36,15 +36,10 @@ function(app, FauxtonAPI, Databases, Views) {
       "_all_dbs(:params)": "allDatabases"
     },
 
-    apiUrl: function() {
-      return [this.databases.url("apiurl"), this.databases.documentation()];
-    },
-
     selectedHeader: "Databases",
 
     initialize: function() {
       this.databases = new Databases.List();
-      this.deferred = FauxtonAPI.Deferred();
     },
 
     allDatabases: function() {
@@ -55,6 +50,12 @@ function(app, FauxtonAPI, Databases, Views) {
         collection: this.databases
       }));
 
+      this.rightHeader = this.setView("#api-navbar", new Views.RightAllDBsHeader({
+        collection: this.databases,
+        endpoint: this.databases.url("apiurl"),
+        documentation: this.databases.documentation()
+      }));
+
       this.databasesView.setPage(dbPage);
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/databases/templates/header_alldbs.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/header_alldbs.html b/app/addons/databases/templates/header_alldbs.html
new file mode 100644
index 0000000..492b5bf
--- /dev/null
+++ b/app/addons/databases/templates/header_alldbs.html
@@ -0,0 +1,26 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+  <!-- floats right -->
+
+  <div id="header-api-bar" class="button"></div>
+
+  <!-- add database-->
+  <div class="button" id="add-db-button">
+  </div>
+
+  <!-- search (jump to doc)-->
+  <div id="header-search" class="js-search searchbox-container"></div>
+
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/databases/templates/jump_to_db.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/jump_to_db.html b/app/addons/databases/templates/jump_to_db.html
new file mode 100644
index 0000000..6c0f03a
--- /dev/null
+++ b/app/addons/databases/templates/jump_to_db.html
@@ -0,0 +1,19 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+<form id="jump-to-db" class="navbar-form pull-right database-search">
+  <div class="input-append">
+    <input type="text" class="search-autocomplete" name="search-query" placeholder="Database name" />
+    <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button>
+  </div>
+</form>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/databases/templates/list.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/list.html b/app/addons/databases/templates/list.html
index 1503c32..874801c 100644
--- a/app/addons/databases/templates/list.html
+++ b/app/addons/databases/templates/list.html
@@ -11,27 +11,19 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-
-<div class="result-tools" style="">
-  <div id="newButton" class="pull-left"></div>
-  <form id="jump-to-db" class="navbar-form pull-right database-search">
-    <div class="input-append">
-      <input type="text" class="search-autocomplete" name="search-query" placeholder="Database name" />
-      <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button>
-    </div>
-  </form>
-
-
+<div class="view">
+  <table class="databases table table-striped">
+    <thead>
+      <th>Name</th>
+      <th>Size</th>
+      <th># of Docs</th>
+      <th>Update Seq</th>
+      <th>Actions</th>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
 </div>
-<table class="databases table table-striped">
-  <thead>
-    <th>Name</th>
-    <th>Size</th>
-    <th># of Docs</th>
-    <th>Update Seq</th>
-    <th>Actions</th>
-  </thead>
-  <tbody>
-  </tbody>
-</table>
-<div id="database-pagination"></div>
+<footer class="pagination-footer window-resizeable-full">
+  <div id="database-pagination"></div>
+</footer>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/databases/templates/newdatabase.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/newdatabase.html b/app/addons/databases/templates/newdatabase.html
index 1376ad5..2b25aac 100644
--- a/app/addons/databases/templates/newdatabase.html
+++ b/app/addons/databases/templates/newdatabase.html
@@ -12,5 +12,5 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<a class="btn btn-primary new" id="new"><i class="icon fonticon-new-database"></i> Add New Database</a>
+<a id="new"><i class="icon fonticon-new-database"></i> Add New Database</a>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/databases/views.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/views.js b/app/addons/databases/views.js
index 5629cb1..ff1f32a 100644
--- a/app/addons/databases/views.js
+++ b/app/addons/databases/views.js
@@ -21,6 +21,38 @@ define([
 function(app, Components, FauxtonAPI, Databases) {
   var Views = {};
 
+  Views.RightAllDBsHeader = FauxtonAPI.View.extend({
+    className: "header-right",
+    template: "addons/databases/templates/header_alldbs",
+    initialize: function(options){
+      //adding the database to the object
+      _.bindAll(this);
+      this.endpoint = options.endpoint;
+    },
+
+    updateApiUrl: function(api){
+      //this will update the api bar when the route changes
+      //you can find the method that updates it in components.js Components.ApiBar()
+      this.apiBar && this.apiBar.update(api);
+    },
+
+    beforeRender:function(){
+      this.headerSearch = this.insertView("#header-search", new Views.JumpToDB({
+        collection: this.collection
+      }));
+
+      this.newbutton = this.insertView("#add-db-button", new Views.NewDatabaseButton({
+        collection: this.collection
+      }));
+
+
+      //Moved the apibar view into the components file so you can include it in your views
+      this.apiBar = this.insertView("#header-api-bar", new Components.ApiBar({
+        endpoint: this.endpoint
+        }));
+    }
+  });
+
   Views.Item = FauxtonAPI.View.extend({
     template: "addons/databases/templates/item",
     tagName: "tr",
@@ -36,25 +68,16 @@ function(app, Components, FauxtonAPI, Databases) {
     }
   });
 
-  Views.List = FauxtonAPI.View.extend({
-    dbLimit: 20,
-    perPage: 20,
-    template: "addons/databases/templates/list",
+
+  Views.JumpToDB = FauxtonAPI.View.extend({
+    template: "addons/databases/templates/jump_to_db",
     events: {
-      "click button.all": "selectAll",
       "submit form#jump-to-db": "switchDatabase"
     },
-
     initialize: function(options) {
       var params = app.getParams();
       this.page = params.page ? parseInt(params.page, 10) : 1;
     },
-
-    serialize: function() {
-      return {
-        databases: this.collection
-      };
-    },
     establish: function(){
       var currentDBs = this.paginated();
       var deferred = FauxtonAPI.Deferred();
@@ -90,6 +113,55 @@ function(app, Components, FauxtonAPI, Databases) {
         });
       }
     },
+    afterRender: function() {
+      var that = this,
+          AllDBsArray = _.map(this.collection.toJSON(), function(item, key){
+            return item.name;
+          });
+
+      this.dbSearchTypeahead = new Components.Typeahead({
+        el: "input.search-autocomplete",
+        source: AllDBsArray,
+        onUpdate: function (item) {
+          that.switchDatabase(null, item);
+        }
+      });
+      this.dbSearchTypeahead.render();
+      this.$el.find(".js-db-graveyard").tooltip();
+    }
+  });
+
+  Views.List = FauxtonAPI.View.extend({
+    dbLimit: 20,
+    perPage: 20,
+    template: "addons/databases/templates/list",
+    events: {
+      "click button.all": "selectAll"
+    },
+
+    initialize: function(options) {
+      var params = app.getParams();
+      this.page = params.page ? parseInt(params.page, 10) : 1;
+    },
+
+    serialize: function() {
+      return {
+        databases: this.collection
+      };
+    },
+    establish: function(){
+      var currentDBs = this.paginated();
+      var deferred = FauxtonAPI.Deferred();
+
+      FauxtonAPI.when(currentDBs.map(function(database) {
+        return database.status.fetchOnce();
+      })).always(function(resp) {
+        //make this always so that even if a user is not allowed access to a database
+        //they will still see a list of all databases
+        deferred.resolve();
+      });
+      return [deferred];
+    },
 
     paginated: function() {
       var start = (this.page - 1) * this.perPage;
@@ -99,10 +171,6 @@ function(app, Components, FauxtonAPI, Databases) {
 
     beforeRender: function() {
 
-      this.insertView("#newButton", new Views.NewDatabaseButton({
-        collection: this.collection
-      }));
-
       _.each(this.paginated(), function(database) {
         this.insertView("table.databases tbody", new Views.Item({
           model: database
@@ -122,24 +190,6 @@ function(app, Components, FauxtonAPI, Databases) {
     setPage: function(page) {
       this.page = page || 1;
     },
-
-    afterRender: function() {
-      var that = this,
-          AllDBsArray = _.map(this.collection.toJSON(), function(item, key){
-            return item.name;
-          });
-
-      this.dbSearchTypeahead = new Components.Typeahead({
-        el: "input.search-autocomplete",
-        source: AllDBsArray,
-        onUpdate: function (item) {
-          that.switchDatabase(null, item);
-        }
-      });
-      this.dbSearchTypeahead.render();
-      this.$el.find(".js-db-graveyard").tooltip();
-    },
-
     selectAll: function(evt){
       $("input:checkbox").attr('checked', !$(evt.target).hasClass('active'));
     }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/documents/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/routes.js b/app/addons/documents/routes.js
index 8eca7f6..c176116 100644
--- a/app/addons/documents/routes.js
+++ b/app/addons/documents/routes.js
@@ -193,6 +193,7 @@ function(app, FauxtonAPI, Documents, Changes, Index, DocEditor, Databases, Resou
         collection: this.data.designDocs,
         database: this.data.database
       }));
+
     },
     designDocMetadata:  function(database, ddoc){
       this.toolsView && this.toolsView.remove();

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 7085bd8..185c975 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -258,10 +258,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, Views, QueryOptions,
         database: this.database,
       }));
 
-      this.toolsView = this.setView(".js-search", new Views.JumpToDoc({
+      //disable for now. Will enable with new documents PR that will come next
+      /*this.toolsView = this.setView(".js-search", new Views.JumpToDoc({
         database: this.database,
         collection: this.database.allDocs
-      }));
+        }));*/
     },
 
     afterRender: function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index 8f27d1c..3310972 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -51,9 +51,8 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard, velocity) {
   });
 
   Fauxton.initialize = function () {
-    // app.footer = new Fauxton.Footer({el: "#footer-content"}),
     app.navBar = new Fauxton.NavBar();
-    app.apiBar = new Fauxton.ApiBar();
+    app.apiBar = new Components.ApiBar();
 
     FauxtonAPI.when.apply(null, app.navBar.establish()).done(function() {
       FauxtonAPI.masterLayout.setView("#primary-navbar", app.navBar, true);
@@ -79,7 +78,7 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard, velocity) {
       var crumbs = routeObject.get('crumbs');
 
       if (crumbs.length) {
-        FauxtonAPI.masterLayout.setView('#breadcrumbs', new Fauxton.Breadcrumbs({
+        FauxtonAPI.masterLayout.setView('#breadcrumbs', new Components.Breadcrumbs({
           crumbs: crumbs
         }), true).render();
       }
@@ -94,22 +93,7 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard, velocity) {
       }
     });
   };
-
-  Fauxton.Breadcrumbs = FauxtonAPI.View.extend({
-    template: "addons/fauxton/templates/breadcrumbs",
-
-    serialize: function() {
-      var crumbs = _.clone(this.crumbs);
-      return {
-        crumbs: crumbs
-      };
-    },
-
-    initialize: function(options) {
-      this.crumbs = options.crumbs;
-    }
-  });
-
+  
   Fauxton.VersionInfo = Backbone.Model.extend({
     url: function () {
       return app.host;
@@ -261,95 +245,6 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard, velocity) {
     // TODO: ADD ACTIVE CLASS
   });
 
-  Fauxton.ApiBar = FauxtonAPI.View.extend({
-    template: "addons/fauxton/templates/api_bar",
-    endpoint: '_all_docs',
-
-    documentation: 'docs',
-
-    events:  {
-      "click .api-url-btn" : "showAPIbar"
-    },
-    
-    initialize: function () {
-      var hideAPIbar = _.bind(this.hideAPIbar, this),
-          navbarVisible = _.bind(this.navbarVisible, this);
-
-
-      $('body').on('click.apibar',function(e) {
-        var $navbar = $(e.target);
-        if (!navbarVisible()) { return;}
-        if ($navbar.hasClass('.api-url-btn')) { return;}
-
-        if (!$navbar.closest('.api-navbar').length){
-          hideAPIbar();
-        }
-      });
-    },
-
-    navbarVisible: function () {
-      return this.$('.api-navbar').is(':visible');
-    },
-
-    cleanup: function () {
-      $('body').off('click.apibar');
-    },
-
-    hideAPIbar: function () {
-      var $navBar = this.$('.api-navbar');
-      $navBar.velocity("reverse", 250, function () {
-        $navBar.hide();
-      });
-    },
-
-    //we only need to show the api-bar here. The `click.apibar` event 
-    //in the initialize will close the api bar if a user clicks the api button
-    //and the api bar is visible.
-    showAPIbar: function(event){
-      if (!this.navbarVisible()) {
-        this.$('.api-navbar').velocity("transition.slideDownIn", 250);
-      }
-    },
-
-    serialize: function() {
-      return {
-        endpoint: this.endpoint,
-        documentation: this.documentation
-      };
-    },
-
-    hide: function(){
-      this.$el.addClass('hide');
-    },
-    show: function(){
-      this.$el.removeClass('hide');
-    },
-    update: function(endpoint) {
-      this.show();
-      this.endpoint = endpoint[0];
-      this.documentation = endpoint[1];
-      this.render();
-    },
-    afterRender: function(){
-      var client = new Components.Clipboard({
-        $el: this.$('.copy-url')
-      });
-
-      client.on("load", function(e){
-        var $apiInput = $('#api-navbar input');
-        var copyURLTimer;
-        client.on("mouseup", function(e){
-          $apiInput.css("background-color","#aaa");
-          window.clearTimeout(copyURLTimer);
-          copyURLTimer = setInterval(function () {
-            $apiInput.css("background-color","#fff");
-          }, 200);
-        });
-      });
-    }
-
-  });
-
   Fauxton.Notification = FauxtonAPI.View.extend({
     fadeTimer: 5000,
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index c863ba7..43d3f0f 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -34,7 +34,119 @@ define([
 function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
   var Components = FauxtonAPI.addon();
 
+  Components.Breadcrumbs = FauxtonAPI.View.extend({
+    className: "breadcrumb pull-left",
+    tagName: "ul",
+    template: "addons/fauxton/templates/breadcrumbs",
+    serialize: function() {
+      var crumbs = _.clone(this.crumbs);
+      return {
+        crumbs: crumbs
+      };
+    },
+    update: function(crumbs) {
+      this.crumbs = crumbs;
+      this.render();
+    },
+    initialize: function(options) {
+      this.crumbs = options.crumbs;
+    }
+  });
+
+  Components.ApiBar = FauxtonAPI.View.extend({
+    template: "addons/fauxton/templates/api_bar",
+
+    events:  {
+      "click .api-url-btn" : "showAPIbar"
+    },
+    
+    initialize: function (options) {
+      var _options = options || {};
+      this.endpoint = _options.endpoint || '_all_docs';
+      this.documentation = _options.documentation || 'docs';
+
+      var hideAPIbar = _.bind(this.hideAPIbar, this),
+          navbarVisible = _.bind(this.navbarVisible, this);
+
+      $('body').on('click.apibar',function(e) {
+        var $navbar = $(e.target);
+        if (!navbarVisible()) { return;}
+        if ($navbar.hasClass('.api-url-btn')) { return;}
+
+        if (!$navbar.closest('.api-navbar').length){
+          hideAPIbar();
+        }
+      });
+    },
+
+    navbarVisible: function () {
+      return this.$('.api-navbar').is(':visible');
+    },
+
+    cleanup: function () {
+      // a bit of a hack. The api bar is created twice so we cannot stop listening
+      // to this event until we refactor the api bars into one
+      //$('body').off('click.apibar');
+    },
+
+    hideAPIbar: function () {
+      var $navBar = this.$('.api-navbar');
+      $navBar.velocity("reverse", 250, function () {
+        $navBar.hide();
+      });
+    },
+
+    //we only need to show the api-bar here. The `click.apibar` event 
+    //in the initialize will close the api bar if a user clicks the api button
+    //and the api bar is visible.
+    showAPIbar: function(event){
+      if (!this.navbarVisible()) {
+        this.$('.api-navbar').velocity("transition.slideDownIn", 250);
+      }
+    },
+
+    serialize: function() {
+      return {
+        endpoint: this.endpoint,
+        documentation: this.documentation
+      };
+    },
+
+    hide: function(){
+      this.$el.addClass('hide');
+    },
+    show: function(){
+      this.$el.removeClass('hide');
+    },
+    update: function(endpoint) {
+      this.show();
+      this.endpoint = endpoint[0];
+      this.documentation = endpoint[1];
+      this.render();
+    },
+    afterRender: function(){
+      var client = new Components.Clipboard({
+        $el: this.$('.copy-url')
+      });
+
+      client.on("load", function(e){
+        var $apiInput = $('#api-navbar input');
+        var copyURLTimer;
+        client.on("mouseup", function(e){
+          $apiInput.css("background-color","#aaa");
+          window.clearTimeout(copyURLTimer);
+          copyURLTimer = setInterval(function () {
+            $apiInput.css("background-color","#fff");
+          }, 200);
+        });
+      });
+    }
+  });
+
+
   Components.Pagination = FauxtonAPI.View.extend({
+    tagName: "ul",
+    className: "pagination pagination-centered",
     template: "addons/fauxton/templates/pagination",
 
     initialize: function(options) {
@@ -45,6 +157,10 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
       this.urlFun = options.urlFun;
     },
 
+    afterRender: function () {
+      app.resizeColumns.onResizeHandler();
+    },
+
     serialize: function() {
       return {
         page: this.page,
@@ -56,6 +172,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
     }
   });
 
+
   Components.IndexPagination = FauxtonAPI.View.extend({
     template: "addons/fauxton/templates/index_pagination",
     events: {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/fauxton/resizeColumns.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/resizeColumns.js b/app/addons/fauxton/resizeColumns.js
index b3d8841..ebdbd0c 100644
--- a/app/addons/fauxton/resizeColumns.js
+++ b/app/addons/fauxton/resizeColumns.js
@@ -28,60 +28,66 @@ function(FauxtonAPI) {
   };
 
   Resize.prototype = {
-    getPrimaryNavWidth: function(){
-      var primaryNavWidth  = $('body').hasClass('closeMenu') ? 64 : 220;
-      return primaryNavWidth;
-    },
-    getPanelWidth: function(){
-      var sidebarWidth = $('#sidebar-content').length > 0 ? $('#sidebar-content').outerWidth() : 0,
-          borders = parseInt($('#dashboard').css('border-left-width'), 10) +
-                    parseInt($('#dashboard-content').css('border-left-width'), 10) +
-                    parseInt($('#dashboard-content').css('border-right-width'), 10);
 
-      return (this.getPrimaryNavWidth() + sidebarWidth + borders);
-    },
     initialize: function(){
-     // $(window).off('resize');
-      var that = this;
       //add throttler :)
-      this.lazyLayout = _.debounce(that.onResizeHandler, 300).bind(this);
+      this.lazyLayout = _.debounce(this.onResizeHandler, 300).bind(this);
       FauxtonAPI.utils.addWindowResize(this.lazyLayout,"animation");
       FauxtonAPI.utils.initWindowResize();
       this.onResizeHandler();
     },
-    updateOptions:function(options){
-      this.options = {};
-      this.options = options;
-    },
-    turnOff:function(){
-      FauxtonAPI.utils.removeWindowResize("animation");
+
+    onResizeHandler: function (){
+      var fullWidth = this.getFullWidth(),
+          halfWidth = this.getHalfWidth(),
+          sidebarWidth = this.getSidebarContentWidth(),
+          left = $('.window-resizeable-half').length > 0? halfWidth : sidebarWidth;
+
+      $('.window-resizeable').innerWidth(sidebarWidth);
+      $('.window-resizeable-half').innerWidth(halfWidth);
+      $('.window-resizeable-full').innerWidth(fullWidth);
+
+      //set left
+      this.setLeftPosition(left);
+      //if there is a callback, run that
+      this.options.callback && this.options.callback();
+      this.trigger('resize');
     },
+
     cleanupCallback: function(){
       this.callback = null;
     },
-    onResizeHandler: function (){
-      //if there is an override, do that instead
-      if (this.options.onResizeHandler){
-        this.options.onResizeHandler();
-      } else {
-        var combinedWidth = window.innerWidth - this.getPanelWidth(),
-        smallWidthConstraint = ($('#sidebar-content').length > 0)? 470:800,
-        panelWidth;
-
-        if (combinedWidth > smallWidthConstraint) {
-          panelWidth = window.innerWidth - this.getPanelWidth();
-        } else if (combinedWidth < smallWidthConstraint){
-          panelWidth = smallWidthConstraint;
-        }
-
-        $('.window-resizeable').innerWidth(panelWidth);
-
-      }
-      //if there is a callback, run that
-      if(this.options.callback) {
-        this.options.callback();
-      }
-      this.trigger('resize');
+
+    getPrimaryNavWidth: function(){
+      var primaryNavWidth  = $('body').hasClass('closeMenu') ? 64 : $('#primary-navbar').outerWidth();
+      //$('body').hasClass('closeMenu') ? 64 : 220;
+      return primaryNavWidth;
+    },
+
+    getWindowWidth: function(){
+      return window.innerWidth;
+    },
+
+    getFullWidth: function(){
+      return this.getWindowWidth() - this.getPrimaryNavWidth();
+    },
+
+    getSidebarWidth: function(){
+      return $('#breadcrumbs').length > 0 ? $('#breadcrumbs').outerWidth() : 0;
+    },
+
+    getSidebarContentWidth: function(){
+      return this.getFullWidth() - this.getSidebarWidth() -5;
+    },
+
+    getHalfWidth: function(){
+      var fullWidth = this.getFullWidth();
+      return fullWidth/2;
+    },
+
+    setLeftPosition: function(panelWidth){
+      var primary = this.getPrimaryNavWidth();
+      $('.set-left-position').css('left',panelWidth+primary+4);
     }
   };
 
@@ -89,3 +95,5 @@ function(FauxtonAPI) {
 
   return Resize;
 });
+
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/fauxton/templates/api_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html
index 3f29223..2610a33 100644
--- a/app/addons/fauxton/templates/api_bar.html
+++ b/app/addons/fauxton/templates/api_bar.html
@@ -12,12 +12,12 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<button class="btn btn-primary pull-right api-url-btn">
-  API URL
+<a class="btn btn-primary pull-right api-url-btn">
   <i class="fonticon-link icon"></i>
-</button>
+  API URL
+</a>
 <div class="clearfix"></div>
-<div class="api-navbar" style="display: none">
+<div class="api-navbar tray">
     <div class="input-prepend input-append">
       <span class="add-on">
         API URL
@@ -32,10 +32,11 @@ the License.
       </a>
 
       <div class="add-on">
-        <a data-bypass="true" href="<%- endpoint %>" target="_blank" class="btn btn-primary">
+        <a data-bypass="true" href="<%- endpoint %>" target="_blank" class="btn">
           <i class="fonticon-eye icon"></i>
           View JSON
         </a>
       </div>
     </div>
 </div>
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/fauxton/templates/breadcrumbs.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/breadcrumbs.html b/app/addons/fauxton/templates/breadcrumbs.html
index 52ea884..729dbca 100644
--- a/app/addons/fauxton/templates/breadcrumbs.html
+++ b/app/addons/fauxton/templates/breadcrumbs.html
@@ -12,13 +12,11 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<ul class="breadcrumb pull-left">
-  <% _.each(_.initial(crumbs), function(crumb) { %>
-    <li>
-      <a href="#<%- crumb.link %>"><%- crumb.name %></a>
-      <span class="divider fonticon fonticon-right-open"> </span>
-    </li>
-  <% }); %>
-  <% var last = _.last(crumbs) || {name: ''} %>
-  <li class="active"><%- last.name %></li>
-</ul>
+<% _.each(_.initial(crumbs), function(crumb) { %>
+<li>
+<a href="#<%- crumb.link %>" class="fonticon <%- crumb.className %>"><%- crumb.name %></a>
+</li>
+<% }); %>
+<% var last = _.last(crumbs) || {name: ''} %>
+<li class="active"><%- last.name %></li>
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/addons/fauxton/templates/pagination.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/pagination.html b/app/addons/fauxton/templates/pagination.html
index 0674c22..f6ad15a 100644
--- a/app/addons/fauxton/templates/pagination.html
+++ b/app/addons/fauxton/templates/pagination.html
@@ -11,21 +11,18 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
+<% if (page > 1) { %>
+  <li> <a href="<%- urlFun(page-1) %>">&laquo;</a></li>
+<% } else { %>
+  <li class="disabled"> <a href="<%- urlFun(page) %>">&laquo;</a></li>
+<% } %>
+<% _.each(_.range(1, totalPages+1), function(i) { %>
+  <li <% if (page == i) { %>class="active"<% } %>> <a href="<%- urlFun(i) %>"><%- i %></a></li>
+<% }) %>
+<% if (page < totalPages) { %>
+  <li><a href="<%- urlFun(page+1) %>">&raquo;</a></li>
+<% } else { %>
+  <li class="disabled"> <a href="<%- urlFun(page) %>">&raquo;</a></li>
+<% } %>
+
 
-<div class="pagination pagination-centered">
-  <ul>
-    <% if (page > 1) { %>
-    <li> <a href="<%- urlFun(page-1) %>">&laquo;</a></li>
-    <% } else { %>
-      <li class="disabled"> <a href="<%- urlFun(page) %>">&laquo;</a></li>
-    <% } %>
-    <% _.each(_.range(1, totalPages+1), function(i) { %>
-      <li <% if (page == i) { %>class="active"<% } %>> <a href="<%- urlFun(i) %>"><%- i %></a></li>
-    <% }) %>
-    <% if (page < totalPages) { %>
-      <li><a href="<%- urlFun(page+1) %>">&raquo;</a></li>
-    <% } else { %>
-      <li class="disabled"> <a href="<%- urlFun(page) %>">&raquo;</a></li>
-    <% } %>
-  </ul>
-</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/templates/layouts/one_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/one_pane.html b/app/templates/layouts/one_pane.html
index c7adf1f..4fda82f 100644
--- a/app/templates/layouts/one_pane.html
+++ b/app/templates/layouts/one_pane.html
@@ -14,15 +14,17 @@ the License.
 
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid one-pane">
+  <div id="global-notifications" class="container errors-container window-resizeable"></div>
   <div class="fixed-header">
     <div id="breadcrumbs"></div>
-    <div id="api-navbar"></div>
+    <div id="api-navbar" class="window-resizeable"></div>
   </div>
 
 
   <div class="row-fluid content-area">
   	<div id="tabs" class="row"></div>
-    <div id="dashboard-content" class="window-resizeable"></div>
+    <div id="dashboard-content" class="window-resizeable-full"></div>
   </div>
 </div>
 
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/app/templates/layouts/with_tabs_sidebar.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_tabs_sidebar.html b/app/templates/layouts/with_tabs_sidebar.html
index a0ed03d..3d86130 100644
--- a/app/templates/layouts/with_tabs_sidebar.html
+++ b/app/templates/layouts/with_tabs_sidebar.html
@@ -15,10 +15,10 @@ the License.
 <div id="primary-navbar"></div>
 <div id="dashboard" class="container-fluid">
 
-  <header class="fixed-header">
+  <div class="fixed-header">
     <div id="breadcrumbs"></div>
-    <div id="api-navbar"></div>
-  </header>
+    <div id="api-navbar" class="window-resizeable"></div>
+  </div>
 
   <div class="with-sidebar content-area">
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 65a6f72..efd8613 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -21,6 +21,7 @@
 @import "bootstrap/bootstrap.less";
 @import "bootstrap/mixins.less";
 @import "prettyprint.less";
+@import "pagination.less";
 @import "icons.less";
 
 /**
@@ -302,12 +303,6 @@ table.databases {
   background: url('../img/loader.gif') center center no-repeat;
   min-height:  100px;
 }
-#app-container.loader{
-  min-height: 400px;
-  > *{
-    display: none;
-  }
-}
 
 #global-notifications {
   position: fixed;
@@ -321,6 +316,7 @@ table.databases {
   width: 100%;
 }
 
+/*container where the layout is injected*/
 #app-container{
   padding: 0;
   height: 100%;
@@ -331,6 +327,12 @@ table.databases {
   > .row-fluid {
     height: 100%;
   }
+  &.loader{
+    min-height: 400px;
+    > *{
+      display: none;
+    }
+  }
 }
 
 /* Fixed side navigation */
@@ -535,9 +537,19 @@ table.databases {
 }
 
 
+
+/*
+
+  FIXED HEADER, DASHBOARD & BREADCRUMBS:
+
+  one_pane.html
+  two_pane.html
+  with_sidebar.html
+  with_tabs.html
+  with_tabs_sidebar.html
+*/
 #dashboard {
-  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
-  border-left: 1px solid #999;
+  .left-shadow-border;
   position: absolute;
   left: @navWidth;
   margin-left: 0;
@@ -554,40 +566,13 @@ table.databases {
     margin-top: 0;
     overflow-x: hidden;
   }
-}
-
-/*dashboard content can be in multiple templates*/
-
-#dashboard-content{
-  &.row-fluid,
-  &.window-resizeable{
-    /*remove gutter without rewriting variable*/
-    margin-left: 0px;
-  }
-  padding: 20px;
-  .with-sidebar &{
-    border-left: 1px solid #999;
-    border-right: 1px solid #999;
-    width: auto;
-    .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
-    padding: 0px;
-    bottom: 0px;
-    top: 60px;
-    position: fixed;
+  &.two-pane{
+    margin-top: 0;
     overflow-x: hidden;
-    overflow-y: auto;
-    left: @sidebarWidth+@navWidth;
-    right: 0;
-    .box-sizing(border-box);
-    .closeMenu & {
-      left: @sidebarWidth+@collapsedNavWidth;
-    }
-  }
-  > div.inner {
-    display: block;
   }
 }
 
+
 .with-sidebar.content-area {
   position: absolute;
   top: 0;
@@ -596,11 +581,6 @@ table.databases {
   right: 0;
 }
 
-// .closeMenu .with-sidebar.content-area {
-//   left: 0;
-// }
-/*tools*/
-
 .row-fluid.content-area{
   background-color: @background;
 }
@@ -626,34 +606,6 @@ table.databases {
   }
 }
 
-#breadcrumbs {
-   .breadcrumb {
-    margin: 15px 20px;
-    margin-bottom: 0;
-    background-color: transparent;
-    padding: 0;
-    li {
-      .divider {
-        font-size: 12px;
-        color: @breadcrumbArrow;
-      }
-      &:first-child {
-        font-size: 30px;
-      }
-      color: @breadcrumbText;
-      font-size: 18px;
-      text-shadow: none;
-      &.active{
-        color: #333;
-      }
-      a{
-        color: @breadcrumbText;
-      }
-    }
-   }
-}
-
-
 /*SIDEBAR TEMPLATE STYLES*/
 .topmenu-defaults {
   height: 70px;
@@ -891,72 +843,48 @@ div.spinner {
 }
 
 #api-navbar{
-  position: relative;
-  padding-right: 5px;
+  > div{
+    > .api-url-btn {
+      padding:10px;
+    }
+  }
 }
 
 .api-url-btn {
-  margin-top: 5px;
-  margin-bottom: 5px;
   .icon {
-    font-size: 12px;
+    font-size: 11px;
   }
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.api-url-btn:hover {
+  background: none;
 }
-
 .api-navbar {
-  .border-radius(0px);
-  display: none;
-  position: absolute;
-  right: 5px;
-  background-color: #333;
-  border: 1px solid black;
-  padding: 16px 20px 28px;
-  .box-shadow(@boxShadowLeft);
+  padding: 5px 20px;
   .input-append.input-prepend {
     margin-bottom: 0px;
     .copying {
       background-color: #999;
       transition: background-color 5ms linear;
     }
-    .add-on {
-      background: none;
-      padding: 0px;
-      margin: 12px 0;
-      border: none;
-      display: block;
-      text-align: left;
-      color: #fff;
-      text-shadow: none;
-      height: auto;
-      font-size: 16px;
-    }
     .input-xxlarge {
       .border-radius(5px 0 0 5px);
       border: none;
-      padding: 8px;
-      font-size: 18px;
+      padding: 9px;
       -moz-transition: background-color 100ms linear;
       -webkit-transition: background-color 100ms linear;
       transition: background-color 100ms linear;
-
-      // background-color: rgba(113, 121, 129, 0.2);
-      // color: #308a75;
-      border: 1px solid;
-      border-color: rgba(113, 121, 129, 0);
-    }
-    .input-xxlarge:focus{
-      box-shadow: none;
-      border: 1px solid rgba(218, 79, 73, 1);
-      color: rgba(85, 85, 85, 0.8);
     }
-
     .btn{
       background-color: @red;
       color: #fff;
       margin-left: -1px;
       padding: 10px 10px 8px;
       border: none;
-      height: 40px;
+      line-height: 1.5em;
       .border-radius(5px);
       &:hover{
         background-color: #cbcbcb;
@@ -977,17 +905,6 @@ div.spinner {
     }
   }
 }
-.api-navbar:before {
-  content: '';
-  position: absolute;
-  top: -25px;
-  right: 30px;
-  border-color: transparent transparent #333 transparent;
-  border-style: solid;
-  border-width: 15px;
-  width: 0;
-  height: 0;
-}
 
 .js-filter-form {
   .help-block {
@@ -1043,3 +960,347 @@ div.add-dropdown {
     font-size: 16px;
   }
 }
+
+
+//----templates//
+
+/*
+---------------------------------------------------
+  REUSEABLE SHADOW BORDER
+---------------------------------------------------
+*/
+
+.left-shadow-border{
+  border-left: 1px solid #999;
+  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+}
+
+.bottom-shadow-border{
+  border-bottom: 1px solid #999;
+  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
+}
+
+
+#right-content,
+#dashboard-lower-content{
+  .view {
+    //background-color:#A8A1A1;
+  }
+}
+
+#dashboard-content{
+  padding-left: 15px;
+  padding-top: 20px;
+
+  &.row-fluid,
+  &.window-resizeable{
+    /*remove gutter without rewriting variable*/
+    margin-left: 0px;
+  }
+  .one-pane &{
+    //margin-top:60px;
+    //padding-bottom:60px;
+  }
+  .with-sidebar &{
+    .left-shadow-border;
+    border-right: 1px solid #999;
+    width: auto;
+    padding: 0px;
+    bottom: 0px;
+    top: 60px;
+    position: fixed;
+    overflow-x: hidden;
+    overflow-y: auto;
+    left: @sidebarWidth+@navWidth;
+    right: 0;
+    .box-sizing(border-box);
+    .closeMenu & {
+      left: @sidebarWidth+@collapsedNavWidth;
+    }
+  }
+  > div.inner {
+    display: block;
+  }
+}
+
+#global-notifications{
+  .with-sidebar & {
+    left: @sidebarWidth+@navWidth;
+    .closeMenu & {
+      left: @sidebarWidth+@collapsedNavWidth;
+    }
+  }
+}
+
+#right-content{
+  .two-pane &{
+    .view {
+      padding: 0 20px 40px;
+    }
+    border-left: 1px solid #999;
+    .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+  }
+}
+
+//---header--//
+.left-shadow-border{
+  border-left: 1px solid #999;
+  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+}
+
+.bottom-shadow-border{
+  border-bottom: 1px solid #999;
+  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
+}
+
+.fixed-header{
+  height: 60px;
+  background-color: @breadcrumbBG;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: @navWidth;
+  .closeMenu & {
+    left: @collapsedNavWidth;
+  }
+  z-index: 100;
+  .two-pane & {
+    border: none;
+  }
+  .two-pane &,
+  .with-sidebar & {
+    #api-navbar{
+      > div {
+        .bottom-shadow-border;
+        height: 60px;
+      }
+      .left-shadow-border;
+    }
+    #breadcrumbs{
+      .bottom-shadow-border;
+    }
+  }
+  .one-pane & {
+    .bottom-shadow-border;
+    left: auto;
+  }
+  /* these styles are for the new header*/
+  > div {
+    display:inline-block;
+    vertical-align: top;
+  }
+}
+
+#api-navbar{
+  height: 60px;
+  position: absolute;
+  /* these styles are for the new header*/
+  .right-header{
+  }
+}
+
+#breadcrumbs {
+  height: 60px;
+  width: @sidebarWidth - 4;
+  /* these styles are for the new header*/
+  .header-left{
+    > div{
+      display:inline-block;
+    }
+    .breadcrumb {
+      li:first-child{
+        border-right: 1px solid #ccc;
+      }
+    }
+  }
+  .breadcrumb {
+    margin-bottom: 0;
+    background-color: transparent;
+    padding: 0;
+    li {
+      padding:15px 10px;
+      height: 60px;
+      vertical-align: top;
+      &:first-child {
+        font-size: 24px;
+        .with-sidebar &,
+        .two-pane & {
+          padding:20px 10px;
+          font-size: 19px;
+        }
+      }
+      color: @breadcrumbText;
+      font-size: 18px;
+      text-shadow: none;
+      &.active{
+        color: #333;
+      }
+      a{
+        text-decoration: none;
+        color: @breadcrumbText;
+      }
+    }
+  }
+}
+
+.header-left{
+  position: relative;
+  #header-dropdown-menu {
+    position: absolute;
+    right: 0;
+    top: 0;
+    .dropdown-toggle {
+      color: #666666;
+    }
+    a {
+      padding: 10px;
+      text-decoration: none;
+    }
+    .dropdown {
+      border-left: 1px solid #ccc;
+      padding: 20px 0px;
+    }
+    .dropdown-menu {
+      left: -115px;
+      top: 48px;
+    }
+  }
+}
+
+.tray {
+  display: none;
+  .border-radius(5px);
+  position: absolute;
+  right: 5px;
+  top: 55px;
+  z-index: 11;
+  background-color: #333;
+  color: #fff;
+  margin: 0;
+   .add-on {
+    font-size: 16px;
+    background: none;
+    padding: 0px;
+    margin: 10px 0;
+    border: none;
+    display: block;
+    text-align: left;
+    color: #fff;
+    text-shadow: none;
+    height: auto;
+    line-height: 1em;
+  }
+}
+.tray:before {
+  content: '';
+  position: absolute;
+  top: -25px;
+  border-color: transparent transparent #333 transparent;
+  border-style: solid;
+  border-width: 15px;
+  width: 0;
+  height: 0;
+}
+
+.fixed-header,
+.header-right {
+  > .btn {
+    padding: 0;
+    margin: 0;
+  }
+  > .button,
+  > .button a,
+  .api-url-btn > button,
+  .btn-primary {
+    color: #666;
+    font-size: 13px;
+    line-height: 3em;
+  }
+}
+
+.header-right {
+  .well {
+    padding: 0;
+    margin: 0;
+  }
+  .searchbox-container {
+    position: relative;
+    right: inherit;
+    input[type="text"] {
+      .border-radius(5px);
+      font-size: 13px;
+      padding: 8px 35px 8px 10px;
+      width: 275px;
+    }
+    .btn-primary {
+      background: none repeat scroll 0% 0% transparent;
+      border: none;
+      position: absolute;
+      right: 12px;
+      top: 0px;
+      height:60px;
+      z-index: 2;
+      color: #999;
+      .icon-search{
+        position: absolute;
+        top: 22px;
+        right: 15px;
+      }
+    }
+  }
+  > div {
+    float: right;
+    height: 60px;
+    border-left: 1px solid #ccc;
+    margin: 0;
+    padding: 10px 15px;
+    line-height: 40px;
+  }
+  > div:last-child {
+    border-left: none;
+  }
+}
+.api-navbar:before {
+  right: 25px;
+}
+
+#jump-to-doc{
+  .btn-primary {
+    .icon-search{
+      position: absolute;
+      top: 18px;
+      right: 15px;
+    }
+  }
+}
+
+
+
+//----footer--///
+footer.pagination-footer {
+  z-index: 1;
+  min-width: 600px;
+  position:fixed;
+  background-color:#fff;
+  bottom:0;
+  height: 50px;
+  border-top:1px solid #ccc;
+  margin-left: -15px;
+  .pagination{
+    .box-shadow(none);
+    position: absolute;
+    right:0;
+    top: 0;
+    margin:0px;
+    height: 50px;
+    border-left: 1px solid #ccc;
+    li {
+      display: inline-block;
+      a {
+        padding: 15px 10px 15px 15px;
+        border: none;
+      }
+    }
+  }
+}
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/5c811ab4/assets/less/pagination.less
----------------------------------------------------------------------
diff --git a/assets/less/pagination.less b/assets/less/pagination.less
new file mode 100644
index 0000000..1ee403b
--- /dev/null
+++ b/assets/less/pagination.less
@@ -0,0 +1,124 @@
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+
+// Space out pagination from surrounding content
+.pagination {
+  margin: @baseLineHeight 0;
+}
+
+ul.pagination {
+  // Allow for text-based alignment
+  display: inline-block;
+  .ie7-inline-block();
+  // Reset default styles
+  margin-left: 0;
+  margin-bottom: 0;
+  // Visuals
+  .border-radius(@baseBorderRadius);
+  .box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+ul.pagination > li {
+  display: inline; // Remove list-style and block-level defaults
+}
+ul.pagination > li > a,
+ul.pagination > li > span {
+  float: left; // Collapse white-space
+  padding: 4px 12px;
+  line-height: @baseLineHeight;
+  text-decoration: none;
+  background-color: @paginationBackground;
+  border: 1px solid @paginationBorder;
+  border-left-width: 0;
+}
+ul.pagination > li > a:hover,
+ul.pagination > li > a:focus,
+ul.pagination > .active > a,
+ul.pagination > .active > span {
+  background-color: @paginationActiveBackground;
+}
+ul.pagination > .active > a,
+ul.pagination > .active > span {
+  color: @grayLight;
+  cursor: default;
+}
+ul.pagination > .disabled > span,
+ul.pagination > .disabled > a,
+ul.pagination > .disabled > a:hover,
+ul.pagination > .disabled > a:focus {
+  color: @grayLight;
+  background-color: transparent;
+  cursor: default;
+}
+ul.pagination > li:first-child > a,
+ul.pagination > li:first-child > span {
+  border-left-width: 1px;
+  .border-left-radius(@baseBorderRadius);
+}
+ul.pagination > li:last-child > a,
+ul.pagination > li:last-child > span {
+  .border-right-radius(@baseBorderRadius);
+}
+
+
+// Alignment
+// --------------------------------------------------
+
+.pagination-centered {
+  text-align: center;
+}
+.pagination-right {
+  text-align: right;
+}
+
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-large {
+  > li > a,
+  > li > span {
+    padding: @paddingLarge;
+    font-size: @fontSizeLarge;
+  }
+  > li:first-child > a,
+  > li:first-child > span {
+    .border-left-radius(@borderRadiusLarge);
+  }
+  > li:last-child > a,
+  > li:last-child > span {
+    .border-right-radius(@borderRadiusLarge);
+  }
+}
+
+// Small and mini
+.pagination-mini,
+.pagination-small {
+  > li:first-child > a,
+  > li:first-child > span {
+    .border-left-radius(@borderRadiusSmall);
+  }
+  > li:last-child > a,
+  > li:last-child > span {
+    .border-right-radius(@borderRadiusSmall);
+  }
+}
+
+// Small
+.pagination-small {
+  > li > a,
+  > li > span {
+    padding: @paddingSmall;
+    font-size: @fontSizeSmall;
+  }
+}
+// Mini
+.pagination-mini {
+  > li > a,
+  > li > span {
+    padding: @paddingMini;
+    font-size: @fontSizeMini;
+  }
+}
+


Mime
View raw message