couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From benk...@apache.org
Subject fauxton commit: updated refs/heads/master to e77ade9
Date Wed, 07 Oct 2015 23:20:03 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master eb5124af7 -> e77ade9db


Moving with_sidebar template to flexbox

This ticket directly affects the account page (cluster of one), but
touches on many other pages as well.

After this one's merged, I'll tackle the with_tabs_sidebar template
which should allow me to remove a lot of old CSS.


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

Branch: refs/heads/master
Commit: e77ade9dbeed8a6af9e0332af3f439d180b4eab1
Parents: eb5124a
Author: Ben Keen <ben.keen@gmail.com>
Authored: Mon Oct 5 14:38:10 2015 -0700
Committer: Ben Keen <ben.keen@gmail.com>
Committed: Wed Oct 7 15:56:14 2015 -0700

----------------------------------------------------------------------
 app/addons/auth/assets/less/auth.less           |  8 ++--
 .../assets/less/header-togglebutton.less        |  1 +
 app/templates/layouts/one_pane.html             | 12 +++---
 app/templates/layouts/with_sidebar.html         | 14 ++++---
 app/templates/layouts/with_tabs_sidebar.html    | 17 ++++----
 assets/less/fauxton.less                        | 35 +++++++---------
 assets/less/layouts.less                        | 43 ++++++++++++++++++--
 assets/less/templates.less                      | 12 +-----
 8 files changed, 84 insertions(+), 58 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e77ade9d/app/addons/auth/assets/less/auth.less
----------------------------------------------------------------------
diff --git a/app/addons/auth/assets/less/auth.less b/app/addons/auth/assets/less/auth.less
index 45cce45..0a0d24d 100644
--- a/app/addons/auth/assets/less/auth.less
+++ b/app/addons/auth/assets/less/auth.less
@@ -18,16 +18,14 @@
 
 .sidenav header {
   padding-left: 24px;
-
   h3 {
-    margin: 8px 0px 4px;
+    margin: 8px 0 4px;
   }
 }
 
-.auth-page {
+#dashboard-content .auth-page {
   padding: 20px;
-
   h3 {
-    margin-top: 0px;
+    margin-top: 0;
   }
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e77ade9d/app/addons/components/assets/less/header-togglebutton.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/header-togglebutton.less b/app/addons/components/assets/less/header-togglebutton.less
index d381b25..b8e6e77 100644
--- a/app/addons/components/assets/less/header-togglebutton.less
+++ b/app/addons/components/assets/less/header-togglebutton.less
@@ -62,6 +62,7 @@ button.header-control-box:focus {
 button.control-toggle-alternative-header {
   float: left;
   border-right: 1px solid @btnBorder;
+  border-left: none;
 }
 
 button.control-toggle-alternative-header.js-headerbar-togglebutton-selected {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e77ade9d/app/templates/layouts/one_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/one_pane.html b/app/templates/layouts/one_pane.html
index dc31545..0af0448 100644
--- a/app/templates/layouts/one_pane.html
+++ b/app/templates/layouts/one_pane.html
@@ -12,11 +12,13 @@ License for the specific language governing permissions and limitations
under
 the License.
 */%>
 <div id="dashboard" class="one-pane">
-  <header class="flex-layout flex-row">
-    <div id="breadcrumbs" class="flex-body"></div>
-    <div id="right-header"></div>
-    <div id="api-navbar"></div>
-    <div id="notification-center-btn"></div>
+  <header>
+    <div class="flex-layout flex-row">
+      <div id="breadcrumbs" class="flex-body"></div>
+      <div id="right-header"></div>
+      <div id="api-navbar"></div>
+      <div id="notification-center-btn"></div>
+    </div>
   </header>
 
   <div class="content-area container-fluid">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e77ade9d/app/templates/layouts/with_sidebar.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_sidebar.html b/app/templates/layouts/with_sidebar.html
index a4bf1ea..6edd592 100644
--- a/app/templates/layouts/with_sidebar.html
+++ b/app/templates/layouts/with_sidebar.html
@@ -11,15 +11,17 @@ 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 id="dashboard">
+<div id="dashboard" class="template-with-sidebar flex-layout flex-col">
   <header class="flex-layout flex-row">
-    <div id="breadcrumbs" class="flex-body"></div>
-    <div id="api-navbar"></div>
-    <div id="notification-center-btn"></div>
+    <div class="flex-layout flex-row">
+      <div id="breadcrumbs" class="flex-body"></div>
+      <div id="api-navbar" class="flex-fill"></div>
+      <div id="notification-center-btn" class="flex-fill"></div>
+    </div>
   </header>
 
-  <div class="with-sidebar content-area">
+  <div class="template-content flex-body flex-layout flex-row">
     <div id="sidebar-content"></div>
-    <div id="dashboard-content" class="scrollable list"></div>
+    <div id="dashboard-content" class="flex-body"></div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e77ade9d/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 34d673a..e90d4a5 100644
--- a/app/templates/layouts/with_tabs_sidebar.html
+++ b/app/templates/layouts/with_tabs_sidebar.html
@@ -13,14 +13,15 @@ the License.
 */%>
 
 <div id="dashboard" class="with-sidebar">
-
-  <header class="flex-layout flex-row two-panel-header">
-    <div id="breadcrumbs" class="sidebar"></div>
-    <div class="header-right-panel flex-layout flex-row flex-body">
-      <div id="react-headerbar" class="flex-body"></div>
-      <div id="right-header" class="flex-body"></div>
-      <div id="api-navbar"></div>
-      <div id="notification-center-btn"></div>
+  <header class="two-panel-header">
+    <div class="flex-layout flex-row">
+      <div id="breadcrumbs" class="sidebar"></div>
+      <div class="right-header-wrapper flex-layout flex-row flex-body">
+        <div id="react-headerbar" class="flex-body"></div>
+        <div id="right-header" class="flex-fill"></div>
+        <div id="api-navbar" class="flex-fill"></div>
+        <div id="notification-center-btn" class="flex-fill"></div>
+      </div>
     </div>
   </header>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e77ade9d/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 14f5387..5657913 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -223,17 +223,6 @@ table.databases {
   }
 }
 
-#sidebar-content {
-  position: absolute;
-  top: 0;
-  width: @sidebarWidth;
-  left: 0;
-  background-color: @secondarySidebar;
-  > div.inner {
-    display: block;
-  }
-}
-
 #dashboard-content .scrollable {
   height: auto;
   overflow-y: auto;
@@ -251,8 +240,6 @@ table.databases {
 
 .result-tools{
   border-bottom: 1px solid #999999;
-  padding: 5px 0;
-  border-bottom: 1px solid #999999;
   padding: 10px 0;
   float: left;
   width: 100%;
@@ -390,14 +377,18 @@ div.spinner {
 
 //---header--//
 #dashboard > header {
-  height: 65px;
   background-color: @breadcrumbBG;
-  .bottom-shadow-border();
+  height: 64px;
 
-  /* this is necessary to allow the 6px box shadow overlap the panels below */
-  position: absolute;
-  width: 100%;
-  z-index: 1;
+  /* the position absolute is necessary to allow the 6px box shadow overlap the panels below.
The parent <header>
+   ensures the flexbox height is respected */
+  &>div {
+    height: 65px;
+    .bottom-shadow-border();
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+  }
 }
 
 body #dashboard .two-panel-header {
@@ -417,8 +408,12 @@ body #dashboard .two-panel-header {
 }
 
 
+body #dashboard .flex-body#breadcrumbs {
+  overflow: hidden;
+}
+
 #breadcrumbs {
-  height: @collapsedNavWidth;
+  height: 64px;
 
   /* these styles are for the new header*/
   .header-left{

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e77ade9d/assets/less/layouts.less
----------------------------------------------------------------------
diff --git a/assets/less/layouts.less b/assets/less/layouts.less
index cae896c..f760762 100644
--- a/assets/less/layouts.less
+++ b/assets/less/layouts.less
@@ -55,6 +55,11 @@ body #dashboard .flex-body, body #notification-center .flex-body {
   }
 }
 
+/* tells an element to be as large as the content. This will replace the hardcoded ones */
+body #dashboard .flex-fill {
+  .flex(0 0 auto);
+}
+
 /* used on the databases page. To be removed once moved to flexbox */
 .one-pane #footer {
   position: absolute;
@@ -66,7 +71,15 @@ body #dashboard .flex-body, body #notification-center .flex-body {
 /* this drops .fixed-header, which was a position:absolute'd element, and switches it and
all children to use flexbox. */
 .one-pane > header {
   width: 100%;
-  .bottom-shadow-border();
+
+//  .bottom-shadow-border();
+
+  #breadcrumbs {
+    overflow: hidden;
+
+    /* overrides - can be removed later */
+    float: none;
+  }
 
   #right-header {
     -ms-flex-preferred-size: auto;
@@ -75,8 +88,8 @@ body #dashboard .flex-body, body #notification-center .flex-body {
     flex-shrink: 0;
     flex-basis: inherit;
   }
-  #breadcrumbs {
-    overflow: hidden;
+  #api-navbar {
+    .flex(0 0 auto);
   }
 }
 
@@ -146,8 +159,32 @@ body #dashboard.two-pane {
     position: inherit;
 
     #breadcrumbs {
+      height: 64px;
       .flex(0 0 440px);
       overflow: hidden;
     }
   }
 }
+
+body #dashboard.template-with-sidebar {
+  header {
+    .flex(0 0 65px);
+  }
+  #sidebar-content {
+    .flex(0 0 330px);
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  .template-content {
+    overflow: hidden;
+  }
+  #dashboard-content {
+    border-left: 1px solid @grayLight;
+    .left-shadow-border();
+  }
+}
+
+/* tmp. Will be removed at end of flexbox refactor */
+aside#sidebar-content {
+  top: 64px;
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e77ade9d/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index ddba0d0..5fdffcf 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -291,6 +291,7 @@ with_tabs_sidebar.html
 #dashboard {
   position: relative;
   left: @navWidth;
+  padding-left: 0;
   background-color: @sidebarBG;
   height: 100%;
   width: 100%;
@@ -322,9 +323,6 @@ with_tabs_sidebar.html
 
 #sidebar-content {
   width: @sidebarWidth;
-  position: absolute;
-  top: @collapsedNavWidth;
-  left: 0;
   background-color: @secondarySidebar;
   margin-top: 6px;
   > div.inner {
@@ -523,11 +521,3 @@ with_tabs_sidebar.html
     }
   }
 }
-
-.with-sidebar.content-area {
-  position: absolute;
-  top: 65px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}


Mime
View raw message