Version Selector (#4386)

* Show current version of docs in nav

* Branch in edit link

* WIP version selector

* An actual working but not pretty version dropdown

* update URLs for versions

v1.7: https://kubernetes.io/docs/home/
v1.6: https://v1-6.docs.kubernetes.io/docs/home/
v1.5: https://v1-5.docs.kubernetes.io/docs/home/
v1.4: https://v1-4.docs.kubernetes.io/docs/home/

* fix v1.4 and v1.5 paths

* Tidier drop downs

* Make font visible always

* Make background match main nav always

* change to major.minor version number

* show only major.minor version in drop down list

* switch from githubbranch to docsbranch

* update githubbranch

* update githubbranch values

* Border radius for bottom of dropdown

* Tabs are hard

_config.yml

@@ -22,6 +22,27 @@ defaults:
       version: "v1.7"
       githubbranch: "master"
       docsbranch: "master"
+      versions:
+        - fullversion: "v1.7.3"
+          version: "v1.7"
+          githubbranch: "v1.7.3"
+          docsbranch: "release-1.7"
+          url: https://kubernetes.io/docs/home/
+        - fullversion: "v1.6.8"
+          version: "v1.6"
+          githubbranch: "v1.6.8"
+          docsbranch: "release-1.6"
+          url: https://v1-6.docs.kubernetes.io/docs/home/
+        - fullversion: "v1.5.7"
+          version: "v1.5"
+          githubbranch: "v1.5.7"
+          docsbranch: "release-1.5"
+          url: https://v1-5.docs.kubernetes.io/docs/
+        - fullversion: "v1.4.12"
+          version: "v1.4"
+          githubbranch: "v1.4.12"
+          docsbranch: "release-1.4"
+          url: https://v1-4.docs.kubernetes.io/docs/
   -
     scope:
       path: "docs"

_includes/header.html

@@ -10,6 +10,17 @@
             <li><a href="/partners/">Partners</a></li>
             <li><a href="/community/">Community</a></li>
             <li><a href="/case-studies/">Case Studies</a></li>
+            <li>
+                <a href="#">
+                    {{page.version}} <span class="ui-icon ui-icon-carat-1-s"></span>
+                </a>
+                <ul>
+                {% for version in page.versions %}
+                  <li><a href="{{ version.url }}">{{ version.version }}</a></li>
+                {% endfor %}
+                </ul>
+              </li>
+            </li>
         </ul>
         <!-- <a href="/docs/home" class="button" id="viewDocs" data-auto-burger-exclude>View Documentation</a> -->
         <a href="/docs/tutorials/kubernetes-basics/" class="button" id="tryKubernetes" data-auto-burger-exclude>Try Kubernetes</a>

_sass/_base.sass

@@ -258,12 +258,40 @@ ul.global-nav
 				left: 0
 				background: #fff
 
+		ul
+			display: none
+			position: fixed
+			top: 40px
+			text-align: left
+
+			li
+				display: block
+				height: 28px
+
+				a
+					background: $dark-grey
+					color: #fff
+					padding: 7px
+
+			li:last-child
+				a
+					border-radius: 7px
+
+	li:hover
+		ul
+			display: block
+
 
 .flip-nav ul.global-nav li a,
 .open-nav ul.global-nav li a,
-	color: #333
+	color: $dark-grey
+
+.flip-nav ul.global-nav li ul li a,
+	background: #fff
+	color: $dark-grey
 
 .flip-nav ul.global-nav li a.active:after,
+.flip-nav ul.global-nav li ul li a.active:after,
 .open-nav ul.global-nav li a.active:after,
 
 	background: $blue

editdocs.md

@@ -12,7 +12,7 @@ $( document ).ready(function() {
         $("#generalInstructions").hide();
         $("#continueEdit").show();
         $("#continueEditButton").text("Edit " + forwarding);
-        $("#continueEditButton").attr("href", "https://github.com/kubernetes/kubernetes.github.io/edit/master/" + forwarding)
+        $("#continueEditButton").attr("href", "https://github.com/kubernetes/kubernetes.github.io/edit/{{ page.docsbranch }}/" + forwarding)
         $("#viewOnGithubButton").text("View " + forwarding + " on GitHub");
         $("#viewOnGithubButton").attr("href", "https://git.k8s.io/kubernetes.github.io/" + forwarding)
     } else {