feat(docs): optimize sidebar & breadcrum style

src/templates/css/docs.css

@@ -10,7 +10,9 @@ img.AngularJS-small {
 }
 
 .breadcrumb {
-  padding-bottom:2px;
+  padding-top: 6px;
+  padding-bottom: 0;
+  line-height: 18px
 }
 
 .clear-navbar {
@@ -35,6 +37,14 @@ img.AngularJS-small {
 
 /* =============================== */
 
+.form-search {
+  margin-right: 20px;
+}
+
+.form-search .search-query {
+  width: 170px;
+}
+
 .form-search .dropdown-menu {
   margin-left: 10px;
 }
@@ -46,10 +56,6 @@ img.AngularJS-small {
   color: black;
 }
 
-.form-search > ul.nav {
-  padding: 0;
-}
-
 .form-search > ul.nav > li > a {
   margin: 0;
 }
@@ -63,19 +69,22 @@ img.AngularJS-small {
   min-height: 14px;
 }
 
+.form-search > ul.nav > li.first {
+  padding-top: 6px;
+}
+
 .form-search > ul.nav > li.last {
-  padding-bottom: 1em;
+  padding-bottom: 6px;
 }
 
 .form-search > ul.nav > li.last + li.api-list-item {
-  margin-top:-1em;
-  padding-bottom: 1em;
+  margin-top: -6px;
+  padding-bottom: 6px;
 }
 
 .form-search .well {
   border-color: #d3d3d3;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding: 0;
   margin-bottom: 15px;
 }
 
@@ -104,7 +113,7 @@ img.AngularJS-small {
 }
 
 .form-search .module .guide {
-  line-height: 21px;
+  line-height: 20px;
 }
 
 /* =============================== */

src/templates/index.tmpl

@@ -122,11 +122,11 @@
 
     <div class="row">
       <div class="span3">
-        <form class="well form-search" ng-submit="submitForm()">
+        <form class="form-search" ng-submit="submitForm()">
           <div class="dropdown search"
                ng-class="{open: focused && bestMatch.rank > 0 && bestMatch.page != currentPage}">
             <input type="text" ng-model="search" placeholder="search the docs"
-                   tabindex="1" accesskey="s" class="input-medium search-query" focused="focused">
+                   tabindex="1" accesskey="s" class="search-query" focused="focused">
             <ul class="dropdown-menu">
               <li>
                 <a href="{{bestMatch.page.url}}">{{bestMatch.page.shortName}}</a>
@@ -136,8 +136,8 @@
 
           <div class="spacer"></div>
 
-          <ul class="nav nav-list" ng-hide="page">
-            <li ng-repeat="page in pages<%= trackBy('page.url') %>" ng-class="navClass(page)" class="api-list-item">
+          <ul class="nav nav-list well" ng-show="pages">
+            <li ng-repeat="page in pages<%= trackBy('page.url', "'expand'") %>" ng-class="navClass(page)" class="api-list-item">
               <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
             </li>
           </ul>

src/templates/js/docs.js

@@ -295,6 +295,7 @@ docsApp.controller.DocsController = function($scope, $location, $window, section
 
   $scope.navClass = function(page1, page2) {
     return {
+      first: this.$first,
       last: this.$last,
       active: page1 && this.currentPage == page1 || page2 && this.currentPage == page2
     };