couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject fauxton commit: updated refs/heads/master to c328feb
Date Tue, 16 Dec 2014 19:42:13 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master aa989872d -> c328feb25


Refactor CSS for pane layout

 - remove JS hack to have fixed elements on a certain size,
   elements now use position absolute/relative and floating

 - header, breadcrumbs and panes do not overlap anymore, which
   lead to alot of bugs like visible but not clickable buttons
   and problems when trying to add new elements to the header

 - header is now aligned with navigantion/burger-height
   (both 64px)

 - componentize footer for all_dbs page

Parts of this branch are based on a prototype from Sean Barclay
Sean Barclay <fudd1011@hotmail.com> (@seanbarclay)

Closes: COUCHDB-2320 COUCHDB-2271 COUCHDB-2471 COUCHDB-2482


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

Branch: refs/heads/master
Commit: c328feb256f50e1fb021c994d9aaf073a1f0d87a
Parents: aa98987
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Tue Nov 25 15:50:47 2014 +0100
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Tue Dec 16 20:41:14 2014 +0100

----------------------------------------------------------------------
 .../activetasks/templates/tab_header.html       |   2 +-
 app/addons/config/assets/less/config.less       |   5 +-
 app/addons/config/templates/header.html         |   1 -
 app/addons/config/templates/item.html           |   4 +-
 app/addons/databases/assets/less/databases.less |   4 +
 app/addons/databases/routes.js                  |  26 +-
 .../databases/templates/footer_alldbs.html      |  17 ++
 .../databases/templates/header_alldbs.html      |   7 +-
 app/addons/databases/templates/list.html        |   3 -
 app/addons/databases/templates/newdatabase.html |   2 +-
 app/addons/databases/views.js                   |  16 +-
 .../documents/templates/all_docs_footer.html    |   4 +-
 .../documents/templates/all_docs_header.html    |   8 +-
 .../documents/templates/all_docs_number.html    |  23 +-
 .../documents/templates/changes_header.html     |   2 +-
 app/addons/documents/views-changes.js           |   3 +-
 app/addons/documents/views-doceditor.js         |   5 +-
 app/addons/documents/views-index.js             |   5 +-
 app/addons/documents/views-queryoptions.js      |   3 +-
 app/addons/documents/views.js                   |   3 -
 app/addons/fauxton/base.js                      |   9 +-
 app/addons/fauxton/components.js                |  20 +-
 app/addons/fauxton/resizeColumns.js             |  90 ------
 app/addons/fauxton/templates/nav_bar.html       |   8 +-
 app/addons/fauxton/tests/paginateSpec.js        |   3 -
 app/templates/layouts/one_pane.html             |  26 +-
 app/templates/layouts/with_tabs.html            |   2 +-
 app/templates/layouts/with_tabs_sidebar.html    |  46 +--
 assets/index.underscore                         |   4 +-
 assets/less/fauxton.less                        | 284 ++++++-------------
 assets/less/mixins.less                         |  10 +
 assets/less/templates.less                      | 183 +++++++-----
 32 files changed, 353 insertions(+), 475 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/activetasks/templates/tab_header.html
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/templates/tab_header.html b/app/addons/activetasks/templates/tab_header.html
index 9ebc28a..f6aa3d9 100644
--- a/app/addons/activetasks/templates/tab_header.html
+++ b/app/addons/activetasks/templates/tab_header.html
@@ -13,7 +13,7 @@ the License.
 */%>
 
 <div class="dashboard-upper-menu">
-  <ul class="nav nav-tabs window-resizeable" id="db-views-tabs-nav">
+  <ul class="nav nav-tabs" id="db-views-tabs-nav">
     <li>
       <a class="js-toggle-filter" href="#filter" data-bypass="true" data-toggle="tab">
         <i class="fonticon fonticon-plus"></i>Filter

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/config/assets/less/config.less
----------------------------------------------------------------------
diff --git a/app/addons/config/assets/less/config.less b/app/addons/config/assets/less/config.less
index aa61fbb..6cd0ed2 100644
--- a/app/addons/config/assets/less/config.less
+++ b/app/addons/config/assets/less/config.less
@@ -29,6 +29,9 @@
   .js-hidden {
     display: none;
   }
+  .text-center {
+    text-align: center;
+  }
 
   button { width: 7%;}
 }
@@ -61,7 +64,7 @@ table.config {
 
 #add-section-button {
   border-left: 1px solid #ccc;
-  padding: 10px 14px;
+  padding: 12px 14px;
 }
 
 .add-section-tray {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/config/templates/header.html
----------------------------------------------------------------------
diff --git a/app/addons/config/templates/header.html b/app/addons/config/templates/header.html
index b165123..d2bd7fb 100644
--- a/app/addons/config/templates/header.html
+++ b/app/addons/config/templates/header.html
@@ -12,5 +12,4 @@ License for the specific language governing permissions and limitations under
 the License.
 */%>
 
-<div id="header-api-bar" class="button"></div>
 <div id="add-section-button" class="button"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/config/templates/item.html
----------------------------------------------------------------------
diff --git a/app/addons/config/templates/item.html b/app/addons/config/templates/item.html
index d07cd66..71f0a64 100644
--- a/app/addons/config/templates/item.html
+++ b/app/addons/config/templates/item.html
@@ -17,7 +17,7 @@ the License.
 <% } else { %>
 <td></td>
 <% } %>
-<td class="js-edit-value"> 
+<td class="js-edit-value">
   <div class="js-show-value">
     <%- option.name %>
   </div>
@@ -37,4 +37,4 @@ the License.
     <button class="js-cancel-value btn btn-small fonticon-cancel-circled"> </button>
   </div>
 </td>
-<td class="js-delete-value" class="text-center"> <i class="icon-trash"> </i> </td>
+<td class="js-delete-value text-center"> <i class="icon-trash"> </i> </td>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/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 3092c66..cb57e16 100644
--- a/app/addons/databases/assets/less/databases.less
+++ b/app/addons/databases/assets/less/databases.less
@@ -71,3 +71,7 @@
     }
   }
 }
+
+#database-pagination {
+  float: right;
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/databases/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/routes.js b/app/addons/databases/routes.js
index ec8bff8..0ad0975 100644
--- a/app/addons/databases/routes.js
+++ b/app/addons/databases/routes.js
@@ -18,10 +18,12 @@ define([
   // Modules
   "addons/databases/resources",
   // TODO:: fix the include flow modules so we don't have to require views here
-  "addons/databases/views"
+  'addons/databases/views',
+  'addons/fauxton/components'
+
 ],
 
-function(app, FauxtonAPI, Databases, Views) {
+function (app, FauxtonAPI, Databases, Views, Components) {
 
   var AllDbsRouteObject = FauxtonAPI.RouteObject.extend({
     layout: 'one_pane',
@@ -46,10 +48,26 @@ function(app, FauxtonAPI, Databases, Views) {
 
     allDatabases: function() {
       var params = app.getParams(),
-          dbPage = params.page;
+          dbPage = params.page ? parseInt(params.page, 10) : 1,
+          perPage = FauxtonAPI.constants.MISC.DEFAULT_PAGE_SIZE,
+          pagination;
+
+      pagination = new Components.Pagination({
+        page: dbPage,
+        perPage: perPage,
+        collection: this.databases,
+        urlFun: function (page) {
+          return '#/_all_dbs?page=' + page;
+        }
+      });
+
+      this.footer = this.setView('#footer', new Views.Footer());
+      this.setView('#database-pagination', pagination);
 
       this.databasesView = this.setView("#dashboard-content", new Views.List({
-        collection: this.databases
+        collection: this.databases,
+        perPage: perPage,
+        page: dbPage
       }));
 
       this.rightHeader = this.setView("#right-header", new Views.RightAllDBsHeader({

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/databases/templates/footer_alldbs.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/footer_alldbs.html b/app/addons/databases/templates/footer_alldbs.html
new file mode 100644
index 0000000..9afcaad
--- /dev/null
+++ b/app/addons/databases/templates/footer_alldbs.html
@@ -0,0 +1,17 @@
+<% /*
+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.
+*/ %>
+
+<footer class="all-db-footer pagination-footer">
+  <div id="database-pagination"></div>
+</footer>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/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
index da12f76..375745e 100644
--- a/app/addons/databases/templates/header_alldbs.html
+++ b/app/addons/databases/templates/header_alldbs.html
@@ -12,11 +12,10 @@ 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>
+<div class="searchbox-wrapper">
+  <div id="header-search" class="js-search searchbox-container"></div>
+</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/databases/templates/list.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/list.html b/app/addons/databases/templates/list.html
index 874801c..c1b625e 100644
--- a/app/addons/databases/templates/list.html
+++ b/app/addons/databases/templates/list.html
@@ -24,6 +24,3 @@ the License.
     </tbody>
   </table>
 </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/c328feb2/app/addons/databases/templates/newdatabase.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/newdatabase.html b/app/addons/databases/templates/newdatabase.html
index dfee69d..bda32b8 100644
--- a/app/addons/databases/templates/newdatabase.html
+++ b/app/addons/databases/templates/newdatabase.html
@@ -11,7 +11,7 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 */%>
-<a id="add-new-database" class="add-new-database-btn" href="#"><i class="icon fonticon-new-database"></i> Add New Database</a>
+<a id="add-new-database" class="add-new-database-btn" href="#"><i class="header-icon fonticon-new-database"></i> Add New Database</a>
 
 <div class="new-database-tray tray">
   <span class="add-on">Add New Database</span>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/databases/views.js
----------------------------------------------------------------------
diff --git a/app/addons/databases/views.js b/app/addons/databases/views.js
index a9c4c61..42de806 100644
--- a/app/addons/databases/views.js
+++ b/app/addons/databases/views.js
@@ -21,6 +21,10 @@ function(app, Components, FauxtonAPI, Databases) {
 
   var Views = {};
 
+  Views.Footer = FauxtonAPI.View.extend({
+    template: 'addons/databases/templates/footer_alldbs',
+  });
+
   Views.RightAllDBsHeader = FauxtonAPI.View.extend({
     className: 'header-right',
     template: 'addons/databases/templates/header_alldbs',
@@ -53,8 +57,6 @@ function(app, Components, FauxtonAPI, Databases) {
   });
 
   Views.List = FauxtonAPI.View.extend({
-    dbLimit: 20,
-    perPage: 20,
     template: 'addons/databases/templates/list',
     events: {
       'click button.all': 'selectAll'
@@ -62,7 +64,6 @@ function(app, Components, FauxtonAPI, Databases) {
 
     initialize: function (options) {
       var params = app.getParams();
-      this.page = params.page ? parseInt(params.page, 10) : 1;
     },
 
     serialize: function () {
@@ -96,15 +97,6 @@ function(app, Components, FauxtonAPI, Databases) {
           model: database
         }));
       }, this);
-
-      this.insertView('#database-pagination', new Components.Pagination({
-        page: this.page,
-        perPage: this.perPage,
-        total: this.collection.length,
-        urlFun: function (page) {
-          return '#/_all_dbs?page=' + page;
-        }
-      }));
     },
 
     setPage: function (page) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/templates/all_docs_footer.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_footer.html b/app/addons/documents/templates/all_docs_footer.html
index 752cd78..7cd112d 100644
--- a/app/addons/documents/templates/all_docs_footer.html
+++ b/app/addons/documents/templates/all_docs_footer.html
@@ -14,7 +14,7 @@ the License.
 */
 %>
 
-<footer class="index-pagination pagination-footer window-resizeable">
-  <div id="item-numbers"></div>
+<footer class="index-pagination pagination-footer">
   <div id="documents-pagination"></div>
+  <div id="item-numbers"></div>
 </footer>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/templates/all_docs_header.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_header.html b/app/addons/documents/templates/all_docs_header.html
index f20dd69..07c6368 100644
--- a/app/addons/documents/templates/all_docs_header.html
+++ b/app/addons/documents/templates/all_docs_header.html
@@ -14,17 +14,15 @@ the License.
 */
 %>
 
-  <!-- floats right -->
-  <div id="header-api-bar" class="button"></div>
-
   <!-- Query Options-->
   <div id="header-query-options" class="button">
     <div id="query-options"></div>
   </div>
 
   <!-- search (jump to doc)-->
-  <div id="header-search" class="js-search searchbox-container"></div>
-
+  <div class="searchbox-wrapper">
+    <div id="header-search" class="js-search searchbox-container"></div>
+  </div>
   <!-- Select toggle -->
   <!--<div id="header-select-all" class="button">
     <span class="toggle-select-menu icon fonticon-ok-circled">Select</span>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/templates/all_docs_number.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_number.html b/app/addons/documents/templates/all_docs_number.html
index 09f73f0..e49f775 100644
--- a/app/addons/documents/templates/all_docs_number.html
+++ b/app/addons/documents/templates/all_docs_number.html
@@ -1,4 +1,4 @@
-<!--
+<%/*
 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
@@ -10,17 +10,18 @@ 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.
--->
-<% if (totalRows === "unknown" || totalRows === 0){ %>
-<p>Showing 0 documents.</p>
-<% } else { %>
-
-<p>Showing <%-pageStart%> - <%- pageEnd %></p>
-<%}%>
-<% if (updateSeq) { %>
--- Update Sequence: <%- updateSeq %>
-<% } %>
+*/%>
 
+<div class="index-indicator">
+  <% if (totalRows === "unknown" || totalRows === 0) { %>
+  <p>Showing 0 documents.</p>
+  <% } else { %>
+  <p>Showing <%- pageStart %> - <%- pageEnd %></p>
+  <%}%>
+  <% if (updateSeq) { %>
+  -- Update Sequence: <%- updateSeq %>
+  <% } %>
+</div>
 <div id="per-page">
   <label id="per-page" class="drop-down inline">
     Per page:

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/templates/changes_header.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/changes_header.html b/app/addons/documents/templates/changes_header.html
index 3d6031f..51f55ed 100644
--- a/app/addons/documents/templates/changes_header.html
+++ b/app/addons/documents/templates/changes_header.html
@@ -13,7 +13,7 @@ the License.
 -->
 
 <div class="dashboard-upper-menu">
-  <ul class="nav nav-tabs window-resizeable" id="db-views-tabs-nav">
+  <ul class="nav nav-tabs" id="db-views-tabs-nav">
     <li>
       <a class="js-toggle-filter" href="#filter" data-bypass="true" data-toggle="tab">
         <i class="fonticon fonticon-plus"></i>Filter

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/views-changes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-changes.js b/app/addons/documents/views-changes.js
index fad88b9..22e7c18 100644
--- a/app/addons/documents/views-changes.js
+++ b/app/addons/documents/views-changes.js
@@ -15,14 +15,13 @@ define([
 
        "api",
        // Libs
-       "addons/fauxton/resizeColumns",
        "addons/fauxton/components",
 
        // Plugins
        "plugins/prettify"
 ],
 
-function(app, FauxtonAPI, resizeColumns, Components, prettify, ZeroClipboard) {
+function(app, FauxtonAPI, Components, prettify, ZeroClipboard) {
 
   var Views = {};
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/views-doceditor.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-doceditor.js b/app/addons/documents/views-doceditor.js
index 7ed59ad..cca890d 100644
--- a/app/addons/documents/views-doceditor.js
+++ b/app/addons/documents/views-doceditor.js
@@ -19,14 +19,11 @@ define([
   'addons/documents/resources',
   'addons/databases/resources',
 
-  // Libs
-  'addons/fauxton/resizeColumns',
-
   // Plugins
   'plugins/prettify'
 ],
 
-function (app, FauxtonAPI, Components, Documents, Databases, resizeColumns, prettify) {
+function (app, FauxtonAPI, Components, Documents, Databases, prettify) {
 
   var Views = {};
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/views-index.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-index.js b/app/addons/documents/views-index.js
index e0445fc..7a3d51e 100644
--- a/app/addons/documents/views-index.js
+++ b/app/addons/documents/views-index.js
@@ -21,15 +21,12 @@ define([
   //views
   "addons/documents/views-queryoptions",
 
-  // Libs
-  "addons/fauxton/resizeColumns",
-
   // Plugins
   "plugins/beautify",
   "plugins/prettify"
 ],
 
-function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, QueryOptions, resizeColumns, beautify) {
+function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, QueryOptions, beautify) {
 
   var Views = {};
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/views-queryoptions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views-queryoptions.js b/app/addons/documents/views-queryoptions.js
index 69b5c02..98a638f 100644
--- a/app/addons/documents/views-queryoptions.js
+++ b/app/addons/documents/views-queryoptions.js
@@ -15,8 +15,7 @@ define([
   "api",
 
   // libs
-  'addons/fauxton/components',
-  "addons/fauxton/resizeColumns"
+  'addons/fauxton/components'
 ],
 
   function (app, FauxtonAPI, Components) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index f1bf56a..847ed48 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -21,9 +21,6 @@ define([
   "addons/documents/views-sidebar",
   "addons/documents/views-queryoptions",
 
-  // Libs
-  "addons/fauxton/resizeColumns",
-
   //plugins
   "plugins/prettify"
 ],

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index 4f82c40..13615a8 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -13,12 +13,11 @@
 define([
   "app",
   "api",
-  "addons/fauxton/resizeColumns",
   "addons/fauxton/components",
   "plugins/zeroclipboard/ZeroClipboard"
 ],
 
-function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
+function(app, FauxtonAPI, Components, ZeroClipboard) {
 
   var Fauxton = FauxtonAPI.addon();
   FauxtonAPI.addNotification = function (options) {
@@ -132,7 +131,6 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
     toggleMenu: function(){
        var $selectorList = $('body');
        $selectorList.toggleClass('closeMenu');
-       this.resizeColumns.onResizeHandler();
        FauxtonAPI.Events.trigger(FauxtonAPI.constants.EVENT_BURGER_CLICK);
     },
 
@@ -146,9 +144,6 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
 
     initialize: function () {
       _.bindAll(this);
-      //resizeAnimation
-      app.resizeColumns = this.resizeColumns = new resizeColumns({});
-      this.resizeColumns.onResizeHandler();
 
       FauxtonAPI.extensions.on('add:navbar:addHeaderLink', this.addLink);
       FauxtonAPI.extensions.on('removeItem:navbar:addHeaderLink', this.removeLink);
@@ -208,8 +203,6 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
 
     afterRender: function(){
       $('#primary-navbar li[data-nav-name="' + app.selectedHeader + '"]').addClass('active');
-      
-      this.resizeColumns.initialize();
     },
 
     beforeRender: function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 38eaeaa..915533c 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -320,27 +320,23 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
 
   Components.Pagination = FauxtonAPI.View.extend({
     tagName: "ul",
-    className: "pagination pagination-centered",
+    className: 'pagination',
     template: "addons/fauxton/templates/pagination",
 
     initialize: function(options) {
       this.page = parseInt(options.page, 10);
       this.perPage = options.perPage;
-      this.total = options.total;
-      this.totalPages = Math.ceil(this.total / this.perPage);
       this.urlFun = options.urlFun;
     },
 
-    afterRender: function () {
-      app.resizeColumns.onResizeHandler();
-    },
-
     serialize: function() {
+      var total = this.collection.length;
+      var totalPages = Math.ceil(total / this.perPage);
       return {
         page: this.page,
         perPage: this.perPage,
-        total: this.total,
-        totalPages: this.totalPages,
+        total: total,
+        totalPages: totalPages,
         urlFun: this.urlFun
       };
     }
@@ -348,7 +344,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
 
 
   Components.IndexPagination = FauxtonAPI.View.extend({
-    className: "pagination pagination-centered",
+    className: 'pagination',
     tagName: 'ul',
     template: "addons/fauxton/templates/index_pagination",
     events: {
@@ -394,10 +390,6 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
       return this.collection.hasNext();
     },
 
-    afterRender: function () {
-      app.resizeColumns.onResizeHandler();
-    },
-
     previousClicked: function (event) {
       event.preventDefault();
       event.stopPropagation();

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/fauxton/resizeColumns.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/resizeColumns.js b/app/addons/fauxton/resizeColumns.js
deleted file mode 100644
index 68c779a..0000000
--- a/app/addons/fauxton/resizeColumns.js
+++ /dev/null
@@ -1,90 +0,0 @@
-// 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.
-
-
-// This file creates a set of helper functions that will be loaded for all html
-// templates. These functions should be self contained and not rely on any
-// external dependencies as they are loaded prior to the application. We may
-// want to change this later, but for now this should be thought of as a
-// "purely functional" helper system.
-
-define([
-  "api"
-],
-
-function(FauxtonAPI) {
-
-  var Resize = function(options){
-    this.options = options;
-  };
-
-  Resize.prototype = {
-
-    initialize: function(){
-      //add throttler :)
-      this.lazyLayout = _.debounce(this.onResizeHandler, 300).bind(this);
-      FauxtonAPI.utils.addWindowResize(this.lazyLayout,"animation");
-      FauxtonAPI.utils.initWindowResize();
-      this.onResizeHandler();
-    },
-
-    onResizeHandler: function (){
-      var fullWidth = this.getFullWidth(),
-          sidebarWidth = this.getSidebarContentWidth(),
-          widthMinusBreadcrumb = this.getFullWidthMinusBreadcrumb();
-
-      $('.window-resizeable').innerWidth(sidebarWidth);
-      $('.window-resizeable-right').innerWidth(widthMinusBreadcrumb);
-      $('.window-resizeable-full').innerWidth(fullWidth);
-
-      //if there is a callback, run that
-      this.options.callback && this.options.callback();
-      this.trigger('resize');
-    },
-
-    cleanupCallback: function(){
-      this.callback = null;
-    },
-
-    getFullWidthMinusBreadcrumb: function () {
-      var breadcrumbWidth = ($('#breadcrumbs').length) ? $('#breadcrumbs').outerWidth() : 0;
-      return this.getFullWidth() - breadcrumbWidth;
-    },
-
-    getPrimaryNavWidth: function(){
-      var primaryNavWidth  = $('body').hasClass('closeMenu') ? 64 : $('#primary-navbar').outerWidth();
-      return primaryNavWidth;
-    },
-
-    getWindowWidth: function(){
-      return window.innerWidth;
-    },
-
-    getFullWidth: function(){
-      return this.getWindowWidth() - this.getPrimaryNavWidth();
-    },
-
-    getSidebarWidth: function(){
-      return ($('#sidebar-content').length) ? $('#sidebar-content').outerWidth() : 0;
-    },
-
-    getSidebarContentWidth: function(){
-      return this.getFullWidth() - this.getSidebarWidth();
-    }
-  };
-
-  _.extend(Resize.prototype, Backbone.Events);
-
-  return Resize;
-});
-
-

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/fauxton/templates/nav_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/nav_bar.html b/app/addons/fauxton/templates/nav_bar.html
index da6a668..77796d7 100644
--- a/app/addons/fauxton/templates/nav_bar.html
+++ b/app/addons/fauxton/templates/nav_bar.html
@@ -25,7 +25,7 @@ the License.
       <li data-nav-name= "<%- link.title %>" >
         <a href="<%- link.href %>">
           <i class="<%- link.icon %> fonticon"></i>
-          <%- link.title %>
+          <span><%- link.title %></span>
         </a>
       </li>
     <% }); %>
@@ -36,7 +36,7 @@ the License.
       <li data-nav-name= "Documentation">
         <a data-bypass="true" href="<%-getDocUrl('GENERAL')%>" target="_blank">
           <i class="fonticon-bookmark fonticon"></i>
-            Documentation
+            <span>Documentation</span>
         </a>
       </li>
 
@@ -45,7 +45,7 @@ the License.
       <li data-nav-name= "<%- link.title %>">
         <a href="<%- link.href %>">
           <i class="<%- link.icon %> fonticon"></i>
-          <%- link.title %>
+          <span><%- link.title %></span>
         </a>
       </li>
     <% }); %>
@@ -72,3 +72,5 @@ the License.
     </ul>
   </div>
 </div>
+
+<div id="primary-nav-right-shadow"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/addons/fauxton/tests/paginateSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/paginateSpec.js b/app/addons/fauxton/tests/paginateSpec.js
index 460c924..471df5b 100644
--- a/app/addons/fauxton/tests/paginateSpec.js
+++ b/app/addons/fauxton/tests/paginateSpec.js
@@ -22,9 +22,6 @@ define([
 
   describe('IndexPaginate', function () {
     var viewSandbox, paginate, collection, navigateMock;
-    app.resizeColumns = {
-      onResizeHandler: function () {}
-    };
 
     beforeEach(function (done) {
       collection = new Models.IndexCollection([{

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/templates/layouts/one_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/one_pane.html b/app/templates/layouts/one_pane.html
index 767abeb..39696e0 100644
--- a/app/templates/layouts/one_pane.html
+++ b/app/templates/layouts/one_pane.html
@@ -12,17 +12,23 @@ License for the specific language governing permissions and limitations under
 the License.
 */%>
 
-<div id="primary-navbar"></div>
-<div id="dashboard" class="container-fluid one-pane">
-  <header class="fixed-header">
-    <div id="breadcrumbs"></div>
-    <div id="api-navbar"></div>
-    <div id="right-header" class="window-resizeable-right"></div>
-  </header>
+<div class="wrapper">
 
+  <div id="primary-navbar"></div>
 
-  <div class="row-fluid content-area">
-    <div id="tabs" class="row"></div>
-    <div id="dashboard-content" class="window-resizeable-full"></div>
+  <div class="pusher">
+    <div id="dashboard" class="one-pane">
+      <header class="fixed-header">
+        <div id="breadcrumbs"></div>
+        <div id="api-navbar"></div>
+        <div id="right-header"></div>
+      </header>
+
+      <div class="content-area container-fluid">
+        <div id="tabs"></div>
+        <div id="dashboard-content" class="scrollable"></div>
+        <div id="footer"></div>
+      </div>
+    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/app/templates/layouts/with_tabs.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_tabs.html b/app/templates/layouts/with_tabs.html
index fc372ff..9d23d35 100644
--- a/app/templates/layouts/with_tabs.html
+++ b/app/templates/layouts/with_tabs.html
@@ -22,6 +22,6 @@ the License.
 
   <div class="row-fluid content-area">
   	<div id="tabs" class="row-fluid"></div>
-    <div id="dashboard-content" class="list span12 window-resizeable"></div>
+    <div id="dashboard-content" class="list span12"></div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/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 af0198d..fea396f 100644
--- a/app/templates/layouts/with_tabs_sidebar.html
+++ b/app/templates/layouts/with_tabs_sidebar.html
@@ -12,31 +12,35 @@ License for the specific language governing permissions and limitations under
 the License.
 */%>
 
-<div id="primary-navbar"></div>
-<div id="dashboard" class="container-fluid with-sidebar">
-  <header class="fixed-header row-fluid">
-    <div id="breadcrumbs" class="sidebar"></div>
-    <div id="api-navbar"></div>
-    <div id="right-header" class="window-resizeable-right"></div>
-  </header>
-
-  <div class="with-sidebar content-area">
-    <aside id="sidebar-content" class="sidebar"></aside>
-
-    <section id="dashboard-content" class="list pull-right window-resizeable">
-      <div class="scrollable">
-        <div class="inner">
-          <div id="dashboard-upper-content">
 
-          </div>
+<div class="wrapper">
+
+  <div id="primary-navbar"></div>
 
-          <div id="dashboard-lower-content"></div>
+  <div class="pusher">
+    <div id="dashboard" class="container-fluid with-sidebar">
+
+      <div class="with-sidebar tabs-with-sidebar content-area">
+        <div class="header-wrapper">
+          <div id="breadcrumbs" class="sidebar"></div>
+          <div class="right-header-wrapper">
+            <div id="api-navbar"></div>
+            <div id="right-header"></div>
+          </div>
         </div>
-      </div>
-      <div id="footer">
 
+        <aside id="sidebar-content" class="sidebar"></aside>
+
+        <section id="dashboard-content" class="list">
+          <div class="scrollable">
+            <div class="inner">
+              <div id="dashboard-upper-content"></div>
+              <div id="dashboard-lower-content"></div>
+            </div>
+          </div>
+          <div id="footer"></div>
+        </section>
       </div>
-    </section>
+    </div>
   </div>
 </div>
-

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/assets/index.underscore
----------------------------------------------------------------------
diff --git a/assets/index.underscore b/assets/index.underscore
index 1b07bcd..4d1f916 100644
--- a/assets/index.underscore
+++ b/assets/index.underscore
@@ -32,8 +32,10 @@
 
 <body id="home">
   <!-- Main container. -->
+  <div id="global-notifications" class="container errors-container"></div>
+
   <div role="main" id="main">
-    <div id="global-notifications" class="container errors-container"></div>
+
     <div id="app-container"></div>
   </div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 68d0137..6596508 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -25,6 +25,7 @@
 @import "formstyles.less";
 @import "pagination.less";
 @import "trays.less";
+@import "mixins.less";
 
 
 /**
@@ -35,12 +36,16 @@
   .box-sizing(border-box);
 }
 
+html {
+  height: 100%;
+}
+
 body {
   font-size: 16px;
   line-height:1.3;
   padding-bottom: 0px;
   color: #333;
-  padding-top: 90px;
+  height: 100%;
   background-color: @sidebarBG;
 }
 
@@ -156,27 +161,6 @@ table.databases {
   font-size: 16px;
 }
 
-.fixed-header{
-  background-color: @breadcrumbBG;
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: @navWidth;
-  .closeMenu & {
-    left: @collapsedNavWidth;
-  }
-  //border-bottom: 5px solid @breadcrumbBorder;
-  .box-shadow(0 4px 6px -2px #808080);
-  z-index: 100;
-  .one-pane & {
-    position: relative;
-    border: none;
-    .box-shadow(none);
-    left: auto;
-  }
-}
-
-
 #dashboard-upper-content{
   .tab-content {
     padding-top: 70px;
@@ -238,30 +222,6 @@ table.databases {
   }
 }
 
-#sidebar-content {
-  position: absolute;
-  top: 60px;
-  width: @sidebarWidth;
-  left: 0;
-  background-color: @secondarySidebar;
-  > div.inner {
-    display: block;
-  }
-}
-
-.scrollable {
-  height: auto;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: 100%;
-  position: absolute;
-  padding: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  top: 60px;
-}
 
 /*ONE PANEL TEMPLATE ONLY STYLES  AKA _all_dbs */
 
@@ -330,18 +290,9 @@ div.spinner {
   top: 50%;
 }
 
-#api-navbar{
-  padding: 10px;
-  .header-icon {
-    font-size: 20px;
-    &:before {
-      float: left;
-      margin: 10px 6px 0px 0px;
-    }
-  }
-}
 
-header .header-icon {
+
+.header-icon {
   font-size: 20px;
   &:before {
     float: left;
@@ -349,6 +300,12 @@ header .header-icon {
   }
 }
 
+#api-navbar {
+  > div:not(.hide) {
+    border-left: 1px solid #ccc;
+  }
+}
+
 .api-url-btn, .query-options-btn {
   background: none;
   border: none;
@@ -358,6 +315,10 @@ header .header-icon {
 .api-url-btn:hover, .query-options-btn:hover {
   background: none;
 }
+
+.api-navbar:before {
+  right: 25px;
+}
 .api-navbar {
   padding: 16px 20px;
   .input-append.input-prepend {
@@ -420,86 +381,19 @@ header .header-icon {
   }
 }
 
-/*
----------------------------------------------------
-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));
-}
-
 //---header--//
 .fixed-header{
-  height: 60px;
+  height: @collapsedNavWidth;
   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 & {
-    #right-header {
-      > div {
-        .bottom-shadow-border;
-        height: 60px;
-      }
-      .left-shadow-border;
-    }
-    #api-navbar{
-      position: relative;
-      float: right;
-      left: -220px;
-      z-index: 200;
-      > div {
-        height: 60px;
-      }
-      .closeMenu & {
-        left: -64px;
-      }
-    }
-    #breadcrumbs{
-      .bottom-shadow-border;
-    }
-  }
-
-  .one-pane &,
-  .two-pane &,
-  .with-sidebar & {
-    #header-api-bar {
-      width: 98px;
-      padding: 10px 15px;
-    }
-  }
+  left: 0;
+  background-color: @breadcrumbBG;
+  position: absolute;
 
-  .one-pane & {
-    .bottom-shadow-border;
-    left: auto;
+  .bottom-shadow-border();
+  z-index: 100;
 
-    #api-navbar {
-      position: relative;
-      float: right;
-      left: 0px;
-      z-index: 200;
-      > div {
-        height: 60px;
-      }
-    }
-  }
   /* these styles are for the new header*/
   > div {
     display:inline-block;
@@ -508,37 +402,32 @@ REUSEABLE SHADOW BORDER
 }
 
 #right-header {
-  height: 60px;
-  position: absolute;
-  /* these styles are for the new header*/
-  .right-header{
-  }
-}
-#api-navbar {
-  height: 60px;
   float: right;
 }
 
-/* only specify the sidebar width when there’s a sidebar */
-.with-sidebar #breadcrumbs {
-  width: @sidebarWidth;
-
-  .active {
-    width: 259px;
+.with-sidebar {
+  #breadcrumbs {
+    border-right: 1px solid @grayLight;
+    width: @sidebarWidth + 1px;
+    .active {
+      width: 244px;
+    }
   }
 }
 
-#breadcrumbs {
-  height: 60px;
 
+#breadcrumbs {
+  height: @collapsedNavWidth;
+  float: left;
   /* these styles are for the new header*/
   .header-left{
     > div{
       display:inline-block;
     }
     .breadcrumb {
-      li:first-child{
+      li:first-child {
         border-right: 1px solid #ccc;
+        font-size: 16px;
       }
     }
   }
@@ -547,13 +436,11 @@ REUSEABLE SHADOW BORDER
     background-color: transparent;
     padding: 0;
     li {
-      padding: 20px 10px;
-      height: 60px;
+      padding: 22px 10px;
       &:first-child {
         font-size: 24px;
         .with-sidebar &,
         .two-pane & {
-          padding:20px 10px;
           float: left;
         }
         a {
@@ -600,7 +487,6 @@ REUSEABLE SHADOW BORDER
   position: relative;
   #header-dropdown-menu {
     position: absolute;
-    right: 5px;
     top: 0;
     .dropdown-toggle {
       color: #666666;
@@ -610,12 +496,13 @@ REUSEABLE SHADOW BORDER
       text-decoration: none;
       &:before {
         font-size: 20px;
-        margin-top: 4px;
+        margin-top: 6px;
       }
     }
     .dropdown {
+      height: @collapsedNavWidth;
       border-left: 1px solid #ccc;
-      padding: 17px 0px;
+      padding: 18px 0px;
     }
     .dropdown-menu {
       left: -115px;
@@ -659,6 +546,7 @@ REUSEABLE SHADOW BORDER
   height: 0;
 }
 
+.right-header-wrapper,
 .fixed-header,
 .header-right {
   > .btn {
@@ -690,8 +578,11 @@ REUSEABLE SHADOW BORDER
     padding: 0;
     margin: 0;
   }
+  .searchbox-wrapper {
+    width: 295px;
+  }
   .searchbox-container {
-    position: relative;
+    position: absolute;
     right: inherit;
     input[type="text"] {
       .border-radius(5px);
@@ -705,58 +596,51 @@ REUSEABLE SHADOW BORDER
       position: absolute;
       right: 12px;
       top: 0px;
-      height:60px;
+      height: @collapsedNavWidth;
       z-index: 2;
       color: #999;
-      .icon-search{
+      .icon-search {
         position: absolute;
-        top: 20px;
-        right: 15px;
+        top: 11px;
+        right: 5px;
       }
     }
   }
   > div {
     float: right;
-    height: 60px;
-    border-left: 1px solid #ccc;
     margin: 0;
-    padding: 10px;
     line-height: 40px;
+    border-left: 1px solid #ccc;
   }
   > div:last-child {
     border-left: none;
   }
 }
-.api-navbar:before {
-  right: 25px;
-}
 
-#jump-to-doc{
-  .btn-primary {
-    .icon-search{
-      position: absolute;
-      top: 20px;
-      right: 15px;
-    }
+.header-right,
+#api-navbar {
+  float: right;
+  height: @collapsedNavWidth;
+  > div {
+    padding: 12px;
+    height: @collapsedNavWidth;
   }
 }
 
-
-
 //----footer--///
 footer.pagination-footer {
   z-index: 1;
-  position:fixed;
-  background-color:#fff;
-  bottom:0;
+  position: absolute;
+  left: 0;
+  right: 0;
   height: 50px;
-  border-top:1px solid #ccc;
-  margin-left: -15px;
-  .pagination{
+  bottom: 0;
+  background-color: #fff;
+  border-top: 1px solid #ccc;
+
+  .pagination {
     .box-shadow(none);
-    position: absolute;
-    right:0;
-    top: 0;
+
     margin:0px;
     height: 50px;
     border-left: 1px solid #ccc;
@@ -768,20 +652,32 @@ footer.pagination-footer {
       }
     }
   }
-}
-
-#item-numbers{
-  p {
-    margin: 20px;
-    font-size: 14px;
+  .index-indicator {
+    float: left;
+    p {
+      margin: 20px;
+      font-size: 14px;
+    }
+  }
+  #documents-pagination {
+    float: right;
+  }
+  #per-page {
+    float: right;
+    top: 2px;
+    #select-per-page {
+      margin-top: 10px;
+    }
   }
 }
 
-div#per-page {
+#primary-nav-right-shadow {
   position: absolute;
-  right: 86px;
-  top: 2px;
-  #select-per-page {
-    margin-top: 10px;
-  }
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: rgba(0, 0, 0, 0.1);
+  width: 6px;
+  z-index: 6;
 }
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/assets/less/mixins.less
----------------------------------------------------------------------
diff --git a/assets/less/mixins.less b/assets/less/mixins.less
index 63eda35..e41a252 100644
--- a/assets/less/mixins.less
+++ b/assets/less/mixins.less
@@ -19,3 +19,13 @@
      -o-transition-timing-function: cubic-bezier(@a, @b, @c, @d); 
         transition-timing-function: cubic-bezier(@a, @b, @c, @d); /* custom */
 }
+
+.bottom-shadow-border() {
+  border-bottom: 1px solid #999;
+  .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
+}
+
+.left-shadow-border() {
+  border-left: 1px solid #999;
+  .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/c328feb2/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index 482440b..aa2d944 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -19,34 +19,24 @@
   min-height:  100px;
 }
 
+#main {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
 #global-notifications {
   position: fixed;
   top: 0px;
   display: block;
   z-index: 100000;
-  .closeMenu & {
-    left: @collapsedNavWidth;
-  }
   width: 100%;
 }
 
-/*container where the layout is injected*/
 #app-container {
-  padding: 0;
   height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  > .row-fluid {
-    height: 100%;
-  }
-  &.loader {
-    min-height: 400px;
-    > *{
-      display: none;
-    }
-  }
+  position: relative;
+  overflow: hidden;
 }
 
 @media screen and (max-height: 600px) {
@@ -63,11 +53,17 @@
 
 /* Fixed side navigation */
 #primary-navbar {
+  z-index: 5;
   height: 100%;
-  position: fixed;
-  width: @navWidth;
+  left: 0;
   top: 0;
   bottom: 0;
+  position: absolute;
+  width: @navWidth;
+  .closeMenu & {
+    width: @collapsedNavWidth;
+    overflow-x: hidden;
+  }
   background-color: @primaryNav;
   .js-version {
     color: #fff;
@@ -83,17 +79,20 @@
     font-size: 12px
   }
   .navbar {
+    .closeMenu & {
+      width: @collapsedNavWidth;
+    }
     .burger {
-      .transition(all @transitionSpeed @transitionEaseType);
       padding: 22px 0 22px 18px;
       position: fixed;
       z-index: 100;
-      width: 64px;
       top: 0;
       background-color: @primaryNav;
       width: @navWidth;
+      .closeMenu & {
+        width: @collapsedNavWidth;
+      }
       div {
-        .transition(all @transitionSpeed @transitionEaseType);
         height: 4px;
         width: 24px;
         .border-radius(2);
@@ -107,12 +106,10 @@
     .bottom-container {
       position: fixed;
       bottom: 0;
-      width: 220px;
       background: #3a2c2b;
       .brand {
         .box-sizing(content-box);
         .hide-text;
-        .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
         margin: 10px 0 0 0;
         width: 200px;
         height: 40px;
@@ -156,18 +153,23 @@
       .nav {
         margin: 0;
         li {
-          .transition(all @transitionSpeed @transitionEaseType);
           padding: 0;
           font-size: 16px;
           letter-spacing: 1px;
           line-height: 24px;
           width: @navWidth;
+          .closeMenu & {
+            width: @collapsedNavWidth;
+          }
           font-weight: normal;
           font-family: helvetica;
           .box-sizing(border-box);
           background-color: @navBG;
           border-bottom:  1px solid @primaryNav;
+          height: 48px;
           min-height: 48px;
+          position: relative;
+
           &.active, &:hover {
             a {
               .box-shadow(none);
@@ -188,11 +190,12 @@
             background-color: transparent;
             color: #fff;
             text-shadow: @textShadowOff;
-            &.closeMenu {
-              color: transparent;
-            }
+            height: 48px;
+            display: flex;
+
             .fonticon {
               position: relative;
+
               &:before {
                 position: absolute;
                 left: -41px;
@@ -203,6 +206,9 @@
             }
             .closeMenu & {
               color: transparent;
+              span {
+                display: none;
+              }
             }
           }
         }
@@ -252,11 +258,6 @@
   }
 }
 
-.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));
@@ -279,29 +280,91 @@ with_tabs.html
 with_tabs_sidebar.html
  */
 #dashboard {
-  .left-shadow-border;
-  position: absolute;
+  position: relative;
   left: @navWidth;
-  margin-left: 0;
-  padding-left: 0;
-  padding-right: 0;
   background-color: @sidebarBG;
-  min-width: 600px;
   height: 100%;
+  width: 100%;
   .closeMenu & {
     left: @collapsedNavWidth;
   }
-  &.one-pane {
-    min-width: 800px;
-    margin-top: 0;
-    overflow-x: hidden;
+}
+
+.wrapper {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+
+.one-pane {
+  #dashboard-content {
+    padding-bottom: 30px;
+    top: @collapsedNavWidth;
   }
-  &.two-pane {
-    margin-top: 0;
-    overflow-x: hidden;
+}
+
+.sidebar {
+  width: @sidebarWidth;
+}
+
+#sidebar-content {
+  position: absolute;
+  top: @collapsedNavWidth;
+  left: 0;
+  background-color: @secondarySidebar;
+  > div.inner {
+    display: block;
+  }
+  margin-top: 6px;
+}
+
+.scrollable {
+  height: auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  position: absolute;
+  padding: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.pusher {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  left: 0;
+  padding-right: @navWidth;
+  .closeMenu & {
+    padding-right: @collapsedNavWidth;
   }
 }
 
+.right-header-wrapper {
+  overflow-x: hidden;
+  height: @collapsedNavWidth;
+}
+
+.with-sidebar .right-header-wrapper {
+  .box-shadow(-7px 0 rgba(0, 0, 0, 0.1));
+}
+
+.header-wrapper {
+  .bottom-shadow-border();
+  .box-shadow(0 6px 0 0 rgba(0, 0, 0, 0.1));
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 50;
+}
+
+#app-container > div {
+  position: relative;
+  height: 100%;
+}
+
 /* SIDEBAR TEMPLATE STYLES */
 .topmenu-defaults {
   height: 70px;
@@ -311,6 +374,7 @@ with_tabs_sidebar.html
 
 /* USED IN TEMPLATE: with_tabs_sidebar.html */
 .dashboard-upper-menu {
+  border-left: 1px solid #999;
   right: 0;
   left: @sidebarWidth+@navWidth;
   position: fixed;
@@ -333,25 +397,19 @@ with_tabs_sidebar.html
   padding-right: 15px;
   padding-top: 20px;
 
-  &.row-fluid,
-  &.window-resizeable {
+  &.row-fluid {
     /*remove gutter without rewriting variable*/
     margin-left: 0px;
   }
-  .one-pane & {
-    //margin-top:60px;
-    padding-bottom:25px;
-  }
   .with-sidebar & {
-    .left-shadow-border;
-    border-right: 1px solid #999;
+    border-left: 1px solid @grayLight;
+    .left-shadow-border();
     width: auto;
     padding: 15px;
     bottom: 0px;
-    top: 0px;
+    top: @collapsedNavWidth;
     position: fixed;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden;
     left: @sidebarWidth+@navWidth;
     right: 0;
     .box-sizing(border-box);
@@ -364,15 +422,6 @@ with_tabs_sidebar.html
   }
 }
 
-#global-notifications {
-  .with-sidebar & {
-    left: @sidebarWidth + @navWidth;
-    .closeMenu & {
-      left: @sidebarWidth + @collapsedNavWidth;
-    }
-  }
-}
-
 /*
   Sidenav:
   USED IN DOCUMENT ADDON & EXTERNAL ADDONS


Mime
View raw message