You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by be...@apache.org on 2015/09/25 21:26:56 UTC
[2/2] fauxton commit: updated refs/heads/master to 99dfd3f
Convert headers to use flexbox
This removes the old .fixed-header class on the header/div
element in the templates and cleans up the CSS a bit to use
flexbox to layout the subelements.
N.B. In fixing this I also tweaked the active tasks header
to reduce the height a little (it was affected at one point)
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/94e0f913
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/94e0f913
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/94e0f913
Branch: refs/heads/master
Commit: 94e0f913fccd153dd18844ac4f72d6d0c3a6b298
Parents: a589e59
Author: Ben Keen <be...@gmail.com>
Authored: Fri Sep 18 10:50:49 2015 -0700
Committer: Ben Keen <be...@gmail.com>
Committed: Fri Sep 25 12:26:22 2015 -0700
----------------------------------------------------------------------
.../activetasks/assets/less/activetasks.less | 4 +-
.../documents/assets/less/doc-editor.less | 14 +++--
app/addons/fauxton/templates/api_bar.html | 3 +-
app/templates/layouts/doc_editor.html | 4 +-
app/templates/layouts/one_pane.html | 7 ++-
app/templates/layouts/with_sidebar.html | 8 +--
app/templates/layouts/with_tabs_sidebar.html | 23 ++++-----
assets/less/fauxton.less | 38 +++++++-------
assets/less/layouts.less | 54 ++++++++++++++++++--
assets/less/templates.less | 10 ++--
10 files changed, 102 insertions(+), 63 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/app/addons/activetasks/assets/less/activetasks.less
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/assets/less/activetasks.less b/app/addons/activetasks/assets/less/activetasks.less
index 1e7417f..8981029 100644
--- a/app/addons/activetasks/assets/less/activetasks.less
+++ b/app/addons/activetasks/assets/less/activetasks.less
@@ -90,7 +90,7 @@
}
#active-tasks-filter-tabs {
- height: 100px;
+ height: 60px;
background-color: #CBCBCB;
padding-left: 20px;
overflow: hidden;
@@ -103,7 +103,7 @@
li {
background-color: #eee;
- margin-top: 65px;
+ margin-top: 25px;
margin-left: 3px;
&.active-tasks-checked {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/app/addons/documents/assets/less/doc-editor.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/doc-editor.less b/app/addons/documents/assets/less/doc-editor.less
index 3967a01..c38a3ea 100644
--- a/app/addons/documents/assets/less/doc-editor.less
+++ b/app/addons/documents/assets/less/doc-editor.less
@@ -20,6 +20,11 @@
padding-bottom: 0;
top: 0;
}
+
+ /* temporary wedge: can be removed at end of flexbox refactor */
+ #api-navbar {
+ float: right;
+ }
}
#editor-container {
@@ -39,11 +44,6 @@
}
}
- .fixed-header {
- height: 65px;
- .box-shadow(none);
- }
-
#breadcrumbs {
white-space: nowrap;
}
@@ -58,6 +58,10 @@
height: 61px;
}
+ &#dashboard > header {
+ .box-shadow(none);
+ }
+
#editor-container {
margin-top: 0;
font-size: 13px;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/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 68e4991..a7b6f07 100644
--- a/app/addons/fauxton/templates/api_bar.html
+++ b/app/addons/fauxton/templates/api_bar.html
@@ -12,11 +12,10 @@ License for the specific language governing permissions and limitations under
the License.
*/ %>
-<a class="btn btn-primary pull-right api-url-btn">
+<a class="btn btn-primary api-url-btn">
<i class="fonticon-link header-icon"></i>
API URL
</a>
-<div class="clearfix"></div>
<div class="api-navbar tray">
<div class="input-prepend input-append">
<span class="add-on">
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/app/templates/layouts/doc_editor.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/doc_editor.html b/app/templates/layouts/doc_editor.html
index af34878..c76a460 100644
--- a/app/templates/layouts/doc_editor.html
+++ b/app/templates/layouts/doc_editor.html
@@ -13,8 +13,8 @@ the License.
*/%>
<div id="dashboard" class="one-pane doc-editor-page">
- <header class="fixed-header">
- <div id="breadcrumbs"></div>
+ <header class="flex-layout flex-row">
+ <div id="breadcrumbs" class="flex-body"></div>
<div id="api-navbar"></div>
</header>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/app/templates/layouts/one_pane.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/one_pane.html b/app/templates/layouts/one_pane.html
index 14234fa..bb518d1 100644
--- a/app/templates/layouts/one_pane.html
+++ b/app/templates/layouts/one_pane.html
@@ -11,12 +11,11 @@ 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" class="one-pane">
- <header class="fixed-header">
- <div id="breadcrumbs"></div>
- <div id="api-navbar"></div>
+ <header class="flex-layout flex-row">
+ <div id="breadcrumbs" class="flex-body"></div>
<div id="right-header"></div>
+ <div id="api-navbar"></div>
</header>
<div class="content-area container-fluid">
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/app/templates/layouts/with_sidebar.html
----------------------------------------------------------------------
diff --git a/app/templates/layouts/with_sidebar.html b/app/templates/layouts/with_sidebar.html
index b74a38c..287be0e 100644
--- a/app/templates/layouts/with_sidebar.html
+++ b/app/templates/layouts/with_sidebar.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,9 +10,9 @@ 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.
--->
-<div id="dashboard" class="container-fluid">
- <header class="fixed-header">
+*/%>
+<div id="dashboard">
+ <header class="flex-layout flex-row">
<div id="breadcrumbs"></div>
<div id="api-navbar"></div>
</header>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/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 4e16359..2c6a969 100644
--- a/app/templates/layouts/with_tabs_sidebar.html
+++ b/app/templates/layouts/with_tabs_sidebar.html
@@ -12,25 +12,22 @@ License for the specific language governing permissions and limitations under
the License.
*/%>
-<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="react-headerbar"></div>
- <div id="api-navbar"></div>
- <div id="right-header"></div>
- </div>
+<div id="dashboard" class="with-sidebar">
+ <header class="flex-layout flex-row two-panel-header">
+ <div id="breadcrumbs" class="sidebar"></div>
+ <div class="right-header-wrapper flex-body">
+ <div id="react-headerbar"></div>
+ <div id="api-navbar"></div>
+ <div id="right-header"></div>
</div>
+ </header>
+ <div class="with-sidebar tabs-with-sidebar content-area">
<aside id="sidebar-content" class="scrollable"></aside>
-
- <section id="dashboard-content" class="flex-layout flex-cols">
+ <section id="dashboard-content" class="flex-layout flex-col">
<div id="dashboard-upper-content"></div>
<div id="dashboard-lower-content" class="flex-body"></div>
<div id="footer"></div>
</section>
-
</div>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 477b0bf..c56d7dd 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -224,7 +224,7 @@ table.databases {
#sidebar-content {
position: absolute;
- top: 60px;
+ top: 0;
width: @sidebarWidth;
left: 0;
background-color: @secondarySidebar;
@@ -325,6 +325,10 @@ div.spinner {
}
#api-navbar {
+ /* prevents a slight shift on page load */
+ width: 108px;
+ overflow: hidden;
+
> div:not(.hide) {
border-left: 1px solid #ccc;
}
@@ -398,7 +402,7 @@ div.spinner {
.js-filter {
ul {
- margin-left: 0px;
+ margin-left: 0;
}
li {
list-style-type: none;
@@ -406,22 +410,20 @@ div.spinner {
}
//---header--//
-.fixed-header{
- height: @collapsedNavWidth;
+#dashboard > header {
+ height: 65px;
background-color: @breadcrumbBG;
- top: 0;
- right: 0;
- left: 0;
- background-color: @breadcrumbBG;
- position: absolute;
-
.bottom-shadow-border();
- z-index: 100;
- /* these styles are for the new header*/
- > div {
- display:inline-block;
- vertical-align: top;
+ /* this is necessary to allow the 6px box shadow overlap the panels below */
+ position: absolute;
+ width: 100%;
+ z-index: 1;
+}
+
+body #dashboard .two-panel-header {
+ #breadcrumbs {
+ .flex(0 0 331px);
}
}
@@ -442,7 +444,7 @@ div.spinner {
#breadcrumbs {
height: @collapsedNavWidth;
- float: left;
+
/* these styles are for the new header*/
.header-left{
> div{
@@ -648,11 +650,9 @@ div.spinner {
.header-right,
#api-navbar {
- float: right;
- height: @collapsedNavWidth;
> div {
padding: 12px;
- height: @collapsedNavWidth;
+ height: @collapsedNavWidth - 1;
}
}
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/assets/less/layouts.less
----------------------------------------------------------------------
diff --git a/assets/less/layouts.less b/assets/less/layouts.less
index 2321f16..e93409e 100644
--- a/assets/less/layouts.less
+++ b/assets/less/layouts.less
@@ -6,10 +6,10 @@
body #dashboard .flex-layout {
.display-flex();
- &.flex-cols {
+ &.flex-col {
.flex-direction(column);
}
- &.flex-rows {
+ &.flex-row {
.flex-direction(row);
}
@@ -20,9 +20,12 @@ body #dashboard .flex-layout {
}
/* end overrides */
- /* always default all child elements as flex items */
+ /*
+ always default all child elements as flex items that neither shrink nor expand. Assumes all flex-layout containers
+ contain at least one .flex-body to indicate that's the one that expands
+ */
&>* {
- .flex(1);
+ .flex(0);
}
/* notice we don't set heights. Flex will expand to fill the content but no more */
@@ -40,7 +43,7 @@ body #dashboard .flex-layout {
/* can be added to any element in a display:flex element that you want to act as the main body. It expands to the
available space and shows a scrollbar */
-.flex-body {
+body #dashboard .flex-body {
.flex(1);
overflow: auto;
}
@@ -52,3 +55,44 @@ body #dashboard .flex-layout {
width: 100%;
margin: 0 -20px;
}
+
+/* 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%;
+
+ /* TODO move all style stuff out of this file. layouts.less should be entirely layout CSS, nothing else */
+ .bottom-shadow-border();
+
+ #breadcrumbs {
+ overflow: hidden;
+
+ /* overrides - can be removed later */
+ float: none;
+ }
+ #right-header {
+ /* TODO. How come .flex(0 0 inherit) is invalid? */
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: inherit;
+ }
+ #api-navbar {
+ .flex(0 0 108px);
+ }
+}
+
+
+/* temporary wedge. Can be replaced at end */
+.with-sidebar {
+ #breadcrumbs {
+ float: left;
+ }
+ #api-navbar {
+ float: right;
+ }
+}
+.right-header-wrapper {
+ #api-navbar {
+ float: right;
+ }
+}
+
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/94e0f913/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
index c24b360..fe4a23b 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -326,15 +326,13 @@ with_tabs_sidebar.html
top: @collapsedNavWidth;
left: 0;
background-color: @secondarySidebar;
+ margin-top: 6px;
> div.inner {
display: block;
}
- margin-top: 6px;
-
.nav-list:last-child {
margin-bottom: 30px;
}
-
}
.scrollable {
@@ -415,9 +413,7 @@ with_tabs_sidebar.html
#dashboard-content {
& > div {
- padding-left: 15px;
- padding-right: 15px;
- padding-top: 20px;
+ padding: @panelPadding;
}
&.row-fluid {
@@ -533,7 +529,7 @@ with_tabs_sidebar.html
.with-sidebar.content-area {
position: absolute;
- top: 0;
+ top: 65px;
bottom: 0;
left: 0;
right: 0;