chore(docs): add button to link to stable docs

Closes angular#7513

Author: petebacondarwin

docs/app/assets/css/docs.css

@@ -218,9 +218,8 @@ code.highlighted {
 
 .picker {
   position: relative;
-  width: auto;
+  width: 100%;
   display: inline-block;
-  margin: 0 0 2px 1.2%;
   overflow: hidden;
   border: 1px solid #e5e5e5;
   -webkit-border-radius: 4px;
@@ -243,8 +242,7 @@ code.highlighted {
   display: block;
   min-width: 100%;
   width: 120%;
-  height: 34px;
-  padding: 6px 30px 6px 15px;
+  padding: 6px 30px 6px 25px;
   color: #555555;
   border: none;
   background: transparent;
@@ -410,10 +408,6 @@ iframe.example {
   position:relative;
 }
 
-.main-body-grid .side-navigation.ng-hide {
-  display:block!important;
-}
-
 .variables-matrix td {
   vertical-align:top;
   padding:5px;
@@ -514,7 +508,6 @@ h4 {
 .btn {
   color:#428bca;
   position: relative;
-  width: auto;
   display: inline-block;
   margin: 0 0 2px;
   overflow: hidden;
@@ -586,7 +579,7 @@ ul.events > li {
 
 @media only screen and (max-width : 768px) {
   .picker, .picker select {
-    width:auto;
+    width:100%;
     display:block;
     margin-bottom:10px;
   }
@@ -621,12 +614,6 @@ ul.events > li {
   .main-body-grid > .grid-right {
     margin-left:0;
   }
-  .main-body-grid .side-navigation {
-    display:block!important;
-  }
-  .main-body-grid .side-navigation.ng-hide {
-    display:none!important;
-  }
   .nav-index-group .nav-index-listing {
     display:inline-block;
     padding:3px 0;

docs/app/src/versions.js

@@ -4,11 +4,23 @@ angular.module('versions', [])
   $scope.docs_versions = NG_VERSIONS;
   $scope.docs_version  = NG_VERSIONS[0];
 
+  for (var i = 0; i < NG_VERSIONS.length; i++) {
+    if ( NG_VERSIONS[i].isStable ) {
+      $scope.docs_stable_version = NG_VERSIONS[i];
+      break;
+    }
+  }
+
+  $scope.getGroupName = function(v) {
+    return v.isStable ? 'Stable' : 'Unstable';
+  };
+
+
   $scope.jumpToDocsVersion = function(version) {
     var currentPagePath = $location.path();
 
     // TODO: We need to do some munging of the path for different versions of the API...
-    
+
 
     $window.location = version.docsUrl + currentPagePath;
   };

docs/config/templates/indexPage.template.html

@@ -173,32 +173,39 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
       </section>
       <section class="sup-header">
         <div class="container main-grid main-header-grid">
-          <div class="grid-left">
-            <div ng-controller="DocsVersionsCtrl" class="picker version-picker">
-              <select ng-options="v as ('v' + v.version + (v.isSnapshot ? ' (snapshot)' : '')) group by (v.isStable?'Stable':'Unstable') for v in docs_versions"
-                      ng-model="docs_version"
-                      ng-change="jumpToDocsVersion(docs_version)"
-                      class="docs-version-jump">
-              </select>
-            </div>
-          </div>
-          <div class="grid-right">
-            <ul class="nav-breadcrumb">
-              <li ng-repeat="crumb in breadcrumb" class="nav-breadcrumb-entry naked-list">
-                <span class="divider"> /</span>
-                <a ng-href="{{crumb.url}}">{{crumb.name}}</a>
-              </li>
-            </ul>
-          </div>
+          <ul class="nav-breadcrumb">
+            <li ng-repeat="crumb in breadcrumb" class="nav-breadcrumb-entry naked-list">
+              <span class="divider"> /</span>
+              <a ng-href="{{crumb.url}}">{{crumb.name}}</a>
+            </li>
+          </ul>
         </div>
       </section>
     </header>
 
     <section role="main" class="container main-body">
       <div class="main-grid main-body-grid">
         <div class="grid-left">
+
           <a class="btn toc-toggle visible-xs" ng-click="toc=!toc">Show / Hide Table of Contents</a>
-          <div class="side-navigation" ng-show="toc==true">
+
+          <div ng-controller="DocsVersionsCtrl" class="version-panel" ng-class="{'hidden-xs':!toc}">
+            <h3></h3>
+            <div class="picker version-picker">
+              <select ng-options="v as ('v' + v.version + (v.isSnapshot ? ' (snapshot)' : '')) group by getGroupName(v) for v in docs_versions"
+                      ng-model="docs_version"
+                      ng-change="jumpToDocsVersion(docs_version)"
+                      class="docs-version-jump">
+              </select>
+            </div>
+            <button class="btn btn-block"
+                    ng-show="docs_version != docs_stable_version"
+                    ng-click="jumpToDocsVersion(docs_stable_version)">
+              Stable: ({{docs_stable_version.version}})</button>
+          </div>
+
+          <div class="side-navigation" ng-class="{'hidden-xs':!toc}">
+            <h3></h3>
             <ul class="nav-list naked-list">
               <li ng-repeat="navGroup in currentArea.navGroups track by navGroup.name" class="nav-index-group">
                 <a href="{{ navGroup.href }}" ng-class="navClass(navGroup)" class="nav-index-group-heading">{{ navGroup.name }}</a>