Add Version Selector to v1.5 (#4745)

* Add Version Selector

* merge in newer sass

_config.yml

@@ -20,6 +20,27 @@ defaults:
       version: "v1.5"
       githubbranch: "v1.5.7"
       docsbranch: "release-1.5"
+      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/" 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
@@ -864,6 +892,9 @@ dd
 		font-size: inherit
 		background-color: transparent
 
+	.includecode
+		table-layout: fixed
+
 	.includecode, .includecode th, .includecode td
 		padding: 0 !important
 
@@ -965,8 +996,8 @@ dd
 		//font-weight: 700
 		text-decoration: underline
 
-	a:visited
+//  a:visited
-		color: blueviolet
+//      color: blueviolet
 
 	a.button
 		border-radius: 2px
@@ -1294,7 +1325,7 @@ $feature-box-div-margin-bottom: 40px
 			height: 30vw
 			max-width: 1200px
 			max-height: 450px
-			margin: 20px auto			
+			margin: 20px auto           
 
 		iframe
 			position: absolute
@@ -1302,6 +1333,270 @@ $feature-box-div-margin-bottom: 40px
 			width: 100%
 			height: 100%
 
+// Dialog
+.ui-icon
+	display: inline-block !important
+
+#feature-state-dialog-link
+	text-decoration: none !important
+	padding: 5px !important
+	a:visited
+		color: #454545 !important
+	a code
+		display: inline-block !important
+		box-sizing: border-box !important
+		background-color: #f7f7f7 !important
+		color: #303030 !important
+		font-family: "Roboto Mono", monospace !important
+		vertical-align: baseline !important
+		font-size: 14px !important
+		font-weight: bold !important
+		padding: 0px 4px !important
+
+#feature-state-dialog
+	background: #fff !important
+	border: 1px solid #ddd !important
+	padding: 0.5em 1em !important
+
+	ul, li
+		list-style: disc !important
+		margin: 4px 12px !important
+
+	p
+		margin: 8px 0px !important
+
+	code
+		display: inline-block !important
+		box-sizing: border-box !important
+		background-color: #f7f7f7 !important
+		color: #303030 !important
+		font-family: "Roboto Mono", monospace !important
+		vertical-align: baseline !important
+		font-size: 14px !important
+		font-weight: bold !important
+		padding: 0px 4px !important
+
+.ui-dialog
+	background: #f7f7f7 !important
+	padding: 0.5em
+
+.ui-dialog-content
+	position: relative
+	float: right
+	width: 100%
+
+	$toc-margin: 15px
+	$header-clearance: $header-height + 20px
+
+	* + h2, * + h3, * + h4, * + h5, * + h6
+		margin-top: 30px
+
+	h1, h2, h3, h4, h5, h6
+		line-height: normal
+		font-weight: 500
+		margin-bottom: 30px
+		padding-bottom: 10px
+
+		// Make sure anchor links aren't hidden by the header
+		&:before
+			display: block
+			content: " "
+			margin-top: -$header-clearance
+			height: $header-clearance
+			visibility: hidden
+
+	h1,h2
+		border-bottom: 1px solid #cccccc
+		
+	h1
+		font-size: 32px
+		padding-right: 60px
+
+	h2
+		font-size: 28px
+
+	h3
+		font-size: 24px
+		font-weight: 300
+		margin-bottom: 5px
+
+	h4
+		font-size: 20px
+		margin-bottom: 0px
+
+	h5, h6
+		font-size: 16px
+		font-weight: 500
+
+	p
+		font-size: 16px
+		font-weight: 300
+		line-height: 1.75em
+
+	p + p
+		margin-top: 10px
+
+	code
+		display: inline-block
+		box-sizing: border-box
+		background-color: $light-grey
+		color: $dark-grey
+		font-family: $mono-font
+		vertical-align: baseline
+		font-size: 14px
+		font-weight: bold
+		padding: 2px 4px
+
+	a code
+		color: $blue
+		text-decoration: underline
+
+	pre .pi, pre .s
+		margin: 0
+		padding: 0
+
+	.highlight code span, code, pre code
+		font-family: "Roboto Mono", monospace
+
+	code, pre code
+		color: #303030
+
+	pre code
+		padding: 0
+
+	pre
+		background-color: #f7f7f7
+		display: block
+		margin: 20px 0
+		padding: 15px
+		position: relative
+		overflow-x: auto
+
+	h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
+		font-family: inherit
+		font-size: inherit
+		background-color: transparent
+
+	.includecode
+		table-layout: fixed
+
+	.includecode, .includecode th, .includecode td
+		padding: 0 !important
+
+	.includecode th
+		text-align: right !important
+		padding: 10px !important
+
+	.includecode th a, .includecode th a code
+		color: white !important
+		background-color: transparent !important
+
+	.includecode pre
+		margin: 0 !important
+
+	ul li
+		list-style: disc
+
+	ol li
+		list-style: decimal
+
+	ul, ol
+		margin: 20px 0
+		padding-left: 30px
+		font-weight: 300
+
+	ul ul, ol ol, ul ol, ol ul
+		margin: 0.75em 0
+
+	li
+		margin-bottom: 0.75em
+		font-size: 16px
+		line-height: 1.75em
+
+	table
+		width: 100%
+		border: 1px solid #ccc
+		border-spacing: 0
+		margin-top: 30px
+		margin-bottom: 30px
+
+	thead, tr:nth-child(even)
+		background-color: $light-grey
+
+	thead
+		background-color: #555
+		color: white
+
+	th, td
+		padding: 8px
+		text-align: left
+		margin: 0
+
+	th
+		font-weight: normal
+
+	td
+		font-size: 0.85em
+
+	#editPageButton
+		position: absolute
+		top: -25px
+		right: 5px
+		width: 50px
+		height: 50px
+		line-height: 50px
+		border-radius: 50%
+		white-space: nowrap
+		text-indent: 50px
+		overflow: hidden
+		background: $blue url(/images/icon-pencil.svg) no-repeat
+		background-position: 12px 10px
+		background-size: 29px 29px
+
+	#markdown-toc
+		margin-bottom: 20px
+
+		ul, li
+			list-style: disc
+			color: $blue
+
+		ul
+			padding: 0 15px
+			margin: 0
+
+		li
+			padding: 0
+			line-height: 1.5em
+			margin-bottom: 0
+
+		a
+			position: relative
+			color: $blue
+			font-weight: 700
+
+	img
+		max-width: 100%
+
+	a
+		//font-weight: 700
+		text-decoration: underline
+
+//  a:visited
+//      color: blueviolet
+
+	a.button
+		border-radius: 2px
+		text-decoration: none
+		
+		&:visited
+			color: white
+
+	a.issue
+		margin-left: 0px
+
+.ui-dialog-buttonpane
+	background: #f7f7f7 !important
+
 // Tabs
 .ui-widget-header
 	background: transparent !important
@@ -1313,19 +1608,27 @@ $feature-box-div-margin-bottom: 40px
 		padding: 0px !important
 		list-style: none !important
 		margin-bottom: 0px !important
-		margin-left: 1px !important
+		margin-left: 4px !important
+
+.ui-tabs-panel
+	ul li
+		list-style: disc !important
+
+	ol li
+		list-style: decimal !important
 
 .ui-widget-content
 	border: 0px !important
 
-.ui-widget-content
 	table
 		margin: 0px !important
 
 .ui-tabs .ui-tabs-panel
-	padding: 0px !important
 	border: 1px solid #ccc !important
 
+.ui-tabs-anchor
+	text-decoration: none !important
+
 // Talk to us
 #talkToUs
 	h3, h4
@@ -1432,18 +1735,18 @@ $feature-box-div-margin-bottom: 40px
 
 	
 	//#bigSocial
-	//	text-align: center
+	//  text-align: center
-	//	
+	//  
-	//	div
+	//  div
-	//		display: inline-block
+	//      display: inline-block
-	//		float: none
+	//      float: none
-	//		padding-top: 125px
+	//      padding-top: 125px
-	//		width: calc(90%)
+	//      width: calc(90%)
-	//		
+	//      
-	//		a
+	//      a
-	//			margin-top: 15px
+	//          margin-top: 15px
-	//			font-size: 18px
+	//          font-size: 18px
 	//
 	//
 	//
-//
+//