Repository: couchdb Updated Branches: refs/heads/master 694127642 -> 319c48994
Primary Nav update Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/319c4899 Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/319c4899 Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/319c4899 Branch: refs/heads/master Commit: 319c48994aaff07b3273b489b4b82495c3def7c5 Parents: 6941276 Author: Christian Hogan <[email protected]> Authored: Wed Apr 16 14:00:07 2014 -0400 Committer: suelockwood <[email protected]> Committed: Wed Apr 16 15:43:24 2014 -0400 ---------------------------------------------------------------------- src/fauxton/app/addons/fauxton/base.js | 27 ++--- .../app/addons/fauxton/templates/nav_bar.html | 34 +++--- src/fauxton/assets/less/fauxton.less | 107 ++++++++++++------- src/fauxton/assets/less/variables.less | 2 +- 4 files changed, 97 insertions(+), 73 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb/blob/319c4899/src/fauxton/app/addons/fauxton/base.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/fauxton/base.js b/src/fauxton/app/addons/fauxton/base.js index 29925e8..3a6a428 100644 --- a/src/fauxton/app/addons/fauxton/base.js +++ b/src/fauxton/app/addons/fauxton/base.js @@ -134,6 +134,17 @@ function(app, FauxtonAPI, resizeColumns) { Fauxton.NavBar = FauxtonAPI.View.extend({ className:"navbar", template: "addons/fauxton/templates/nav_bar", + + events: { + "click .burger" : "toggleMenu" + }, + + toggleMenu: function(){ + var $selectorList = $('body'); + $selectorList.toggleClass('closeMenu'); + this.resizeColumns.onResizeHandler(); + }, + // TODO: can we generate this list from the router? navLinks: [ {href:"#/_all_dbs", title:"Databases", icon: "fonticon-database", className: 'databases'} @@ -202,23 +213,7 @@ function(app, FauxtonAPI, resizeColumns) { afterRender: function(){ $('#primary-navbar li[data-nav-name="' + app.selectedHeader + '"]').addClass('active'); - var menuOpen = true; var $selectorList = $('body'); - $('.brand').off(); - $('.brand').on({ - click: function(e){ - if(!$(e.target).is('a')){ - toggleMenu(); - } - } - }); - - function toggleMenu(){ - $selectorList.toggleClass('closeMenu'); - menuOpen = $selectorList.hasClass('closeMenu'); - this.resizeColumns.onResizeHandler(); - } - var that = this; $('#primary-navbar').on("click", ".nav a", function(){ if (!($selectorList.hasClass('closeMenu'))){ http://git-wip-us.apache.org/repos/asf/couchdb/blob/319c4899/src/fauxton/app/addons/fauxton/templates/nav_bar.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/fauxton/templates/nav_bar.html b/src/fauxton/app/addons/fauxton/templates/nav_bar.html index 9ba24f4..877c9d5 100644 --- a/src/fauxton/app/addons/fauxton/templates/nav_bar.html +++ b/src/fauxton/app/addons/fauxton/templates/nav_bar.html @@ -12,13 +12,10 @@ License for the specific language governing permissions and limitations under the License. --> -<div class="brand"> - <div class="burger"> - <div><!-- * --></div> - <div><!-- * --></div> - <div><!-- * --></div> - </div> - <div class="icon">Apache Fauxton</div> +<div class="burger"> + <div><!-- * --></div> + <div><!-- * --></div> + <div><!-- * --></div> </div> <nav id="main_navigation"> @@ -33,18 +30,16 @@ the License. </li> <% }); %> </ul> - - <div id="footer-links"> - - <ul id="bottom-nav-links" class="nav"> + + <div id="bottom-nav"> + <ul id="bottom-nav-links" class="nav"> <li data-nav-name= "Documentation"> <a href="<%=getDocUrl('docs')%>" target="_blank"> <i class="fonticon-bookmark fonticon"></i> Documentation </a> </li> - - + <% _.each(bottomNavLinks, function(link) { %> <% if (link.view) {return;} %> <li data-nav-name= "<%= link.title %>"> @@ -55,7 +50,14 @@ the License. </li> <% }); %> </ul> + </div> +</nav> +<div class="bottom-container"> + <div class="brand"> + <div class="icon">Apache Fauxton</div> + </div> + <div id="footer-links"> <ul id="footer-nav-links" class="nav"> <% _.each(footerNavLinks, function(link) { %> <% if (link.view) {return;} %> @@ -67,9 +69,5 @@ the License. </li> <% }); %> </ul> - </div> -</nav> - - - +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/couchdb/blob/319c4899/src/fauxton/assets/less/fauxton.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less index 229075b..dc6435b 100644 --- a/src/fauxton/assets/less/fauxton.less +++ b/src/fauxton/assets/less/fauxton.less @@ -279,6 +279,8 @@ table.databases { /* application specific stuff */ #main > footer { + .box-shadow(-7px 0 15px -6px #000); + border-left: 1px solid #999; position: fixed; bottom: 0; font-size: 10px; @@ -335,6 +337,7 @@ table.databases { top: 0; bottom: 0; background-color: @primaryNav; + overflow-y: scroll; #footer-links{ position: absolute; bottom: 0; @@ -344,55 +347,81 @@ table.databases { font-size: 12px } .navbar { - .brand { - .box-sizing(content-box); - .hide-text; - .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985); - margin: 10px 0 6px; - width: 174px; - height: 40px; - padding: 10px; - .icon{ - .box-sizing(content-box); - background: url(../img/couchdb-site.png) no-repeat 0 0; - display: block; - height: 100%; - width: 100%; - } - .burger{ + .burger{ .transition(all @transitionSpeed @transitionEaseType); - padding-top: 6px; - left: -8px; - position: absolute; + padding: 22px 0 0 18px; + position: fixed; + top: 0; + z-index: 100; + background-color: @primaryNav; + width: @navWidth; div{ .transition(all @transitionSpeed @transitionEaseType); height: 4px; - width: 8px; + width: 24px; .border-radius(2); background-color: @navBG; - margin: 4px 0px; - } - } - &:hover .burger div{ - background-color: @orange; - } - .closeMenu & { - .icon { - background: url(../img/minilogo.png) no-repeat 0 0; + margin: 2px 0px; } - width: 45px; - .burger{ - left: 0; + &:hover div{ + background-color: @orange; } } + .bottom-container { + height: 110px; + 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; + padding: 10px; + float: none; + background: #3a2c2b; + .icon { + .box-sizing(content-box); + background: url(../img/couchdb-site.png) no-repeat 0 0; + display: block; + height: 100%; + width: 100%; + } + .closeMenu & { + .icon { + background: url(../img/minilogo.png) no-repeat 0 0; + } + width: 45px; + } + } + #footer-nav-links { + li { + a { + font-size: 12px; + color: @red; + padding: 12px; + text-shadow: none; + } + &.active, &:hover{ + a { + text-decoration: underline; + } + } + } + } } nav { + margin-top: 64px; .nav{ margin: 0; li{ .transition(all @transitionSpeed @transitionEaseType); padding: 0; - font-size: 20px; + font-size: 16px; + letter-spacing: 1px; line-height: 23px; width: @navWidth; font-weight: normal; @@ -400,7 +429,7 @@ table.databases { .box-sizing(border-box); background-color: @navBG; border-bottom: 1px solid @primaryNav; - min-height: 55px; + min-height: 48px; &.active, &:hover{ a{ .box-shadow(none); @@ -417,7 +446,7 @@ table.databases { color: @NavIconActive; } a{ - padding: 17px 25px 12px 60px; + padding: 12px 25px 12px 60px; background-color: transparent; color: #fff; text-shadow: @textShadowOff; @@ -429,8 +458,8 @@ table.databases { &:before { position: absolute; top: -5px; - left: -44px; - font-size: 28px; + left: -41px; + font-size: 24px; color: @NavIcon; text-shadow: @boxShadowOff; } @@ -460,11 +489,13 @@ table.databases { color: @red; } } + } ul#bottom-nav-links{ margin-top: 0; + padding-bottom: 70px; li{ - min-height: 46px; + min-height: 55px; background-color: @bottomNav; &.active{ background-color:@linkRed; http://git-wip-us.apache.org/repos/asf/couchdb/blob/319c4899/src/fauxton/assets/less/variables.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/variables.less b/src/fauxton/assets/less/variables.less index 34f8b90..4876013 100644 --- a/src/fauxton/assets/less/variables.less +++ b/src/fauxton/assets/less/variables.less @@ -49,7 +49,7 @@ @saveButton: #80A221; -@collapsedNavWidth: 62px; +@collapsedNavWidth: 64px; @navWidth: 220px; @sidebarBG: #F2F2F2; @sidebarWidth: 330px;
