You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ch...@apache.org on 2013/06/25 23:07:50 UTC
[43/46] git commit: updated refs/heads/1829-User-Experience-Redesign
to b7ee0e5
Set up absolute positioning for sidebar templates since there is no reason to make the sidebar fluid. :)
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/4beb5e1e
Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/4beb5e1e
Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/4beb5e1e
Branch: refs/heads/1829-User-Experience-Redesign
Commit: 4beb5e1ec7b36773d9059fc8722ffcc00d53c7a4
Parents: ff96b71
Author: suelockwood <de...@gmail.com>
Authored: Wed Jun 19 11:51:28 2013 -0400
Committer: suelockwood <de...@gmail.com>
Committed: Wed Jun 19 11:51:28 2013 -0400
----------------------------------------------------------------------
.../app/addons/config/templates/dashboard.html | 2 +-
src/fauxton/app/addons/stats/routes.js | 4 +
.../app/templates/documents/sidebar.html | 12 +-
.../templates/layouts/with_right_sidebar.html | 6 +-
.../app/templates/layouts/with_sidebar.html | 6 +-
.../templates/layouts/with_tabs_sidebar.html | 6 +-
src/fauxton/assets/img/linen.png | Bin 0 -> 87134 bytes
src/fauxton/assets/less/fauxton.less | 115 ++++++++++++++++---
8 files changed, 119 insertions(+), 32 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb/blob/4beb5e1e/src/fauxton/app/addons/config/templates/dashboard.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/config/templates/dashboard.html b/src/fauxton/app/addons/config/templates/dashboard.html
index 7cff90a..0d08727 100644
--- a/src/fauxton/app/addons/config/templates/dashboard.html
+++ b/src/fauxton/app/addons/config/templates/dashboard.html
@@ -14,7 +14,7 @@ the License.
<div class="row">
<div class="span2 offset10">
- <button id="add-section" href="#" class="btn btn-primary button-margin">
+ <button id="add-section" href="#" class="button button-margin">
<i class="icon-plus icon-white"> </i>
Add Section
</button>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/4beb5e1e/src/fauxton/app/addons/stats/routes.js
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/stats/routes.js b/src/fauxton/app/addons/stats/routes.js
index 32017c3..d305652 100644
--- a/src/fauxton/app/addons/stats/routes.js
+++ b/src/fauxton/app/addons/stats/routes.js
@@ -25,6 +25,10 @@ function(app, FauxtonAPI, Stats) {
"stats":"showStats",
"_stats": "showStats"
},
+
+ crumbs: [
+ {"name": "Statistics", "link": "_stats"}
+ ],
initialize: function () {
this.stats = new Stats.Collection();
http://git-wip-us.apache.org/repos/asf/couchdb/blob/4beb5e1e/src/fauxton/app/templates/documents/sidebar.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/templates/documents/sidebar.html b/src/fauxton/app/templates/documents/sidebar.html
index 837021f..2ef5a6b 100644
--- a/src/fauxton/app/templates/documents/sidebar.html
+++ b/src/fauxton/app/templates/documents/sidebar.html
@@ -14,8 +14,8 @@ the License.
<div id="sidenav">
<header class="row-fluid">
- <div class="span1">
- <div class="dropdown">
+ <div class="span5">
+ <div class="dropdown select">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Docs</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="<%= db_url %>">Docs</a></li>
@@ -28,15 +28,15 @@ the License.
</div>
</div>
- <div class="span1">
- <div class="dropdown">
+ <div class="span5 offset1">
+ <div class="dropdown select">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Docs</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- <li><a class="btn btn-small new" id="doc" href="#<%= database.url('app') %>/new">
+ <li><a id="doc" href="#<%= database.url('app') %>/new">
<i class="icon-file"></i> New doc</a>
</li>
<li>
- <a class="btn btn-small" href="#<%= database.url('app') %>/new_view">New view</a>
+ <a href="#<%= database.url('app') %>/new_view">New view</a>
</li>
</ul>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/4beb5e1e/src/fauxton/app/templates/layouts/with_right_sidebar.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/templates/layouts/with_right_sidebar.html b/src/fauxton/app/templates/layouts/with_right_sidebar.html
index 9779274..208766d 100644
--- a/src/fauxton/app/templates/layouts/with_right_sidebar.html
+++ b/src/fauxton/app/templates/layouts/with_right_sidebar.html
@@ -17,9 +17,9 @@ the License.
<div class="row-fluid fixed-header">
<div id="breadcrumbs" class="span12"></div>
</div>
- <div class="with-sidebar-right row-fluid content-area">
- <div id="dashboard-content" class="list span10"></div>
- <div id="sidebar-content" class="sidebar span2 pull-right"></div>
+ <div class="with-sidebar-right content-area">
+ <div id="dashboard-content" class="list"></div>
+ <div id="sidebar-content" class="sidebar pull-right"></div>
</div>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/4beb5e1e/src/fauxton/app/templates/layouts/with_sidebar.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/templates/layouts/with_sidebar.html b/src/fauxton/app/templates/layouts/with_sidebar.html
index c4ba036..63d903b 100644
--- a/src/fauxton/app/templates/layouts/with_sidebar.html
+++ b/src/fauxton/app/templates/layouts/with_sidebar.html
@@ -18,9 +18,9 @@ the License.
<div class="row-fluid fixed-header">
<div id="breadcrumbs" class="span12"></div>
</div>
- <div class="with-sidebar row-fluid content-area">
- <div id="sidebar-content" class="sidebar span3"></div>
- <div id="dashboard-content" class="list span9"></div>
+ <div class="with-sidebar content-area">
+ <div id="sidebar-content" class="sidebar"></div>
+ <div id="dashboard-content" class="list"></div>
</div>
</div>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/4beb5e1e/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/templates/layouts/with_tabs_sidebar.html b/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
index a62a5e8..e5dc17f 100644
--- a/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
+++ b/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
@@ -21,13 +21,13 @@ the License.
</header>
- <div class="with-sidebar row-fluid content-area">
+ <div class="with-sidebar content-area">
<div id="tabs" class="row-fluid"></div>
- <aside id="sidebar-content" class="sidebar span3"></aside>
+ <aside id="sidebar-content" class="sidebar"></aside>
- <section id="dashboard-content" class="list span9 pull-right">
+ <section id="dashboard-content" class="list pull-right">
<div class="inner">
<div id="dashboard-upper-content"></div>
<div id="dashboard-lower-content"></div>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/4beb5e1e/src/fauxton/assets/img/linen.png
----------------------------------------------------------------------
diff --git a/src/fauxton/assets/img/linen.png b/src/fauxton/assets/img/linen.png
new file mode 100644
index 0000000..365c61a
Binary files /dev/null and b/src/fauxton/assets/img/linen.png differ
http://git-wip-us.apache.org/repos/asf/couchdb/blob/4beb5e1e/src/fauxton/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index 616059b..9089a81 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -26,10 +26,11 @@
/*define variable for color here, remove to seperate file later*/
@red: #E93F33;
+@darkred: #AF2D24;
/*nav*/
@primaryNav : #3A2C2B;
-@navBG: #AF2D24;
+@navBG: @darkred;
@navBGHighlight: @red;
@navIconColor: #3A2C2B;
@navIconHighlight: #FFFFFF;
@@ -50,6 +51,9 @@
@saveButton: #80A221;
@collapsedNavWidth: 100px;
+@navWidth: 220px;
+
+@sidebarWidth: 330px;
/*buttons */
@@ -84,7 +88,7 @@ a:active {
position: fixed;
top: 67px;
display: block;
- z-index: 10000000000000;
+ z-index: 100000;
left: 340px;
.closeMenu & {
left: 140px;
@@ -107,9 +111,10 @@ a:active {
/* Fixed side navigation */
#primary-navbar {
+ .box-shadow(inset -7px 0 15px -6px #000);
height: 100%;
position: fixed;
- width: 220px;
+ width: @navWidth;
top: 0;
bottom: 0;
background-color: @primaryNav;
@@ -136,13 +141,13 @@ a:active {
nav {
.nav{
li{
+ .box-shadow(inset -7px 0 15px -6px #000);
padding: 15px 0px 15px 60px;
font-size: 19px;
width: 100%;
font-weight: normal;
font-family: helvetica;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
+ .box-sizing(border-box);
background-color: @navBG;
border-bottom: 1px solid @primaryNav;
min-height: 55px;
@@ -168,8 +173,7 @@ a:active {
#dashboard {
position: relative;
- margin-left: 220px;
- .box-shadow(-10px 0 15px -6px #333333);
+ margin-left: @navWidth;
.closeMenu & {
margin-left: @collapsedNavWidth;
}
@@ -179,27 +183,33 @@ a:active {
}
+/*dashboard content can be in multiple templates*/
#dashboard-content{
padding: 20px;
.with-sidebar &{
- .setLeft(3);
+ padding: 0px;
bottom: 0px;
top: 60px;
- overflow: auto;
- position: fixed;
+ position: absolute;
+ overflow-y: auto;
+ left: @sidebarWidth;
+ right: 0;
+ .box-sizing(border-box);
}
> div.inner {
display: block;
}
}
-#sidebar-content {
+
+.with-sidebar.content-area {
position: fixed;
- bottom: 0px;
- top: 60px;
- overflow: auto;
- > div.inner {
- display: block;
+ top: 0;
+ bottom: 0;
+ left: @navWidth;
+ right: 0;
+ .closeMenu & {
+ left: @collapsedNavWidth;
}
}
@@ -244,7 +254,51 @@ footer#mainFooter{
bottom: 0;
}
+/*SIDEBAR TEMPLATE STYLES*/
+.topmenu-defaults {
+ height: 70px;
+ padding: 20px 10px 0;
+ border-bottom: 1px solid @darkred;
+ .box-sizing(border-box);
+}
+#dashboard-upper-content{
+ .topmenu-defaults;
+ background-color: #CBCBCB;
+}
+
+#dashboard-lower-content{
+ padding: 20px;
+}
+#sidenav{
+ padding: 0;
+ header {
+ width: @sidebarWidth;
+ .box-shadow(inset -7px 0 15px -6px #000);
+ background: transparent url('../img/linen.png') repeat 0 0;
+ .topmenu-defaults;
+ }
+ nav {
+ .nav-list{
+ a{
+ .box-shadow(inset -7px 0 15px -6px #000);
+ display: block;
+ }
+ }
+ }
+}
+#sidebar-content {
+ .box-shadow(inset -7px 0 15px -6px #000);
+ position: absolute;
+ bottom: 0px;
+ top: 60px;
+ width: @sidebarWidth;
+ left: 0;
+ overflow-y: auto;
+ > div.inner {
+ display: block;
+ }
+}
/*ONE PANEL TEMPLATE ONLY STYLES AKA _all_dbs */
@@ -288,3 +342,32 @@ thead {border-bottom: 2px solid @redButton;}
}
}
+.select{
+ > a{
+ display: block;
+ padding: 5px 15px 5px 5px;
+ border: 1px solid #989898;
+ position: relative;
+ background-color: #FFFFFF;
+ color: #666666;
+ &:after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-top: 7px solid #989898;
+ position: absolute;
+ right: 9px;
+ top: 12px;
+ }
+ &:before{
+ content: '';
+ border-left: 1px solid #989898;
+ height: 30px;
+ position: absolute;
+ right: 30px;
+ top: 0;
+ }
+ }
+}