Fixing the primary nav so the whole area is clickable

3 files changed, 32 insertions, 18 deletions

diff --git a/src/fauxton/app/addons/auth/templates/nav_link_title.html b/src/fauxton/app/addons/auth/templates/nav_link_title.html
index 8a4469a25..b23157e8c 100644
--- a/src/fauxton/app/addons/auth/templates/nav_link_title.html
+++ b/src/fauxton/app/addons/auth/templates/nav_link_title.html
@@ -12,11 +12,20 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 <% if (admin_party) { %>
-  <a id="user-create-admin" class="fonticon-user fonticon" href="#createAdmin"> Admin Party! </a>
+  <a id="user-create-admin" href="#createAdmin"> 
+  	<span class="fonticon-user fonticon"></span>
+  	Admin Party! 
+  </a>
 <% } else if (user) { %>
-  <a  href="#changePassword" class="fonticon-user fonticon" > <%= user.name %> </a>
+  <a  href="#changePassword" >
+  	<span class="fonticon-user fonticon"></span> 
+  	<%= user.name %> 
+	</a>
 <% } else { %>
-  <a  href="#login"  class="fonticon-user fonticon" >  Login </a>
+  <a  href="#login" >  
+  	<span class="fonticon-user fonticon"></span> 
+  	Login 
+  </a>
 <% } %>
 
 
diff --git a/src/fauxton/app/templates/fauxton/nav_bar.html b/src/fauxton/app/templates/fauxton/nav_bar.html
index 8c18f09ae..da030d6f7 100644
--- a/src/fauxton/app/templates/fauxton/nav_bar.html
+++ b/src/fauxton/app/templates/fauxton/nav_bar.html
@@ -25,7 +25,12 @@ the License.
   <ul id="nav-links" class="nav pull-right">
     <% _.each(navLinks, function(link) { %>
     <% if (link.view) {return;}  %>
-        <li data-nav-name= "<%= link.title %>" ><a class="<%= link.icon %> fonticon" href="<%= link.href %>"><%= link.title %></a></li>
+        <li data-nav-name= "<%= link.title %>" >
+          <a href="<%= link.href %>">
+            <span class="<%= link.icon %> fonticon"></span>
+            <%= link.title %>
+          </a>
+        </li>
     <% }); %>
   </ul>
 
@@ -33,7 +38,8 @@ the License.
 
     <ul id="bottom-nav-links" class="nav">
         <li data-nav-name= "Documentation">
-            <a class="fonticon-bookmark fonticon" href="<%=getDocUrl('docs')%>" target="_blank">
+            <a href="<%=getDocUrl('docs')%>" target="_blank">
+              <span class="fonticon-bookmark fonticon"></span>
                 Documentation
             </a>
         </li>
@@ -42,8 +48,9 @@ the License.
       <% _.each(bottomNavLinks, function(link) { %>
       <% if (link.view) {return;}  %>
         <li data-nav-name= "<%= link.title %>">
-            <a class="<%= link.icon %> fonticon" href="<%= link.href %>">
-                <%= link.title %>
+            <a href="<%= link.href %>">
+              <span class="<%= link.icon %> fonticon"></span>
+              <%= link.title %>
             </a>
         </li>
       <% }); %>
@@ -53,8 +60,9 @@ the License.
       <% _.each(footerNavLinks, function(link) { %>
       <% if (link.view) {return;}  %>
         <li data-nav-name= "<%= link.title %>">
-            <a class="<%= link.icon %> fonticon" href="<%= link.href %>">
-                <%= link.title %>
+            <a href="<%= link.href %>">
+              <span class="<%= link.icon %> fonticon"></span>
+              <%= link.title %>
             </a>
         </li>
       <% }); %>
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index 7aaa91665..c3894fc64 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -196,8 +196,9 @@ a:hover{
         margin: 0;
         li{
           .transition(all @transitionSpeed @transitionEaseType);
-          padding: 15px 0px 15px 62px;
-          font-size: 19px;
+          padding: 0;
+          font-size: 20px;
+          line-height: 23px;
           width: @navWidth;
           font-weight: normal;
           font-family: helvetica;
@@ -214,26 +215,23 @@ a:hover{
           &:hover a.fonticon:before{
             color: @white;
           }
-          &.active a.cloudant:before,
           &.active a.fonticon:before,
-          &:hover a.cloudant:before,
           &:hover a.fonticon:before,
           {
             text-shadow: @boxShadow;
             color: @NavIconActive;
           }
           a{
+            padding: 17px 25px 12px 60px;
             background-color: transparent;
-            padding: 0;
             color: #fff;
             text-shadow: @textShadowOff;
             &.closeMenu{
               color: transparent;
             }
-            &.fonticon {
+            & span.fonticon {
               position: relative;
               &:before {
-                .transition(all @transitionSpeed @transitionEaseType);
                 position: absolute;
                 left: -44px;
                 font-size: 28px;
@@ -362,7 +360,6 @@ a:hover{
 
 .fixed-header{
   background-color: @breadcrumbBG;
-  .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
   position: fixed;
   top: 0;
   right: 0;
@@ -975,7 +972,7 @@ div.spinner {
 }
 
 #jump-to-doc {
-  width: 88%;
+  width: 50%;
   max-width: 600px;
   float:right;
   margin-right: 40px;