From 949206126c0d343d400ab930b946f034570e35e6 Mon Sep 17 00:00:00 2001
From: Misty Stanley-Jones <misty@docker.com>
Date: Tue, 24 Oct 2017 16:53:08 -0700
Subject: [PATCH] Fix archive butterbar margin-top

---
 _layouts/docs.html | 18 +++++++++++-------
 css/temp.css       | 23 +++++++++++++++++++++++
 js/archive.js      | 14 ++++++++++++--
 js/docs.js         |  5 +++--
 4 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/_layouts/docs.html b/_layouts/docs.html
index 180fbab583..1108973fdc 100644
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@@ -192,19 +192,23 @@ else %}{% assign edit_url = "" %}{% endif %} {% break %} {% endif %} {% endfor %
 	<script defer src="/js/menu.js"></script>
 	<script src="/js/jquery.js"></script>
 	<script src="/js/bootstrap.min.js"></script>
+	<script language="javascript">
+	// Assume there is no butterBar before loading the archive JS
+	var hasButterBar = false;
+	</script>
 	<script src="/js/archive.js"></script>
 	<script src="/js/stickyfill.min.js"></script>
 	<script defer src="/js/docs.js"></script>
 	<script language="javascript">
 	jQuery(document).ready(function(){
-			$.getJSON( "/metadata.txt", function( data ) {
-				metadata = data;
-				hookupTOCEvents();
-				$.getJSON( "/glossary.txt", function( data ) {
-					glossary = data;
-					renderTagsPage();
-				});
+		$.getJSON( "/metadata.txt", function( data ) {
+			metadata = data;
+			hookupTOCEvents();
+			$.getJSON( "/glossary.txt", function( data ) {
+				glossary = data;
+				renderTagsPage();
 			});
+		});
 	});
 	</script>
 </body>
diff --git a/css/temp.css b/css/temp.css
index 13792f9810..80767362ce 100644
--- a/css/temp.css
+++ b/css/temp.css
@@ -39,3 +39,26 @@
   margin-top: 20px;
   margin-bottom: 20px;
 }
+
+/* Archive butterbar */
+#archive-butterbar {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  min-height: 34px;
+  border: 1px solid #254356;
+  background-color: #FFE1C0;
+  color: #254356;
+  width: 100%;
+  z-index: 9999;
+}
+
+#archive-butterbar.top {
+  position: relative;
+  margin-top: 0;
+}
+
+/* Archive butterbar when the top nav is fixed */
+#archive-butterbar.fixed {
+  position: fixed;
+  top: 55px;
+}
diff --git a/js/archive.js b/js/archive.js
index 4579f6f112..7906651bd0 100644
--- a/js/archive.js
+++ b/js/archive.js
@@ -3,7 +3,7 @@ if (window.navigator.onLine) {
   var dockerVersion = 'v17.06';
   /* This JSON file contains a current list of all docs versions of Docker */
   $.getJSON("/js/archives.json", function(result){
-    var outerDivStart = '<div style="padding-top: 10px; padding-bottom: 10px; min-height: 34px; border: 1px solid #254356; background-color: #FFE1C0; color: #254356"><div class="container"><div style="text-align: center"><span id="archive-list">This is <b><a href="https://docs.docker.com/docsarchive/" style="color: #254356; text-decoration: underline !important">archived documentation</a></b> for Docker&nbsp;' + dockerVersion + '. Go to the <a style="color: #254356; text-decoration: underline !important" href="https://docs.docker.com/">latest docs</a> or a different version:&nbsp;&nbsp;</span>' +
+    var outerDivStart = '<div id="archive-butterbar"><div class="container"><div style="text-align: center"><span id="archive-list">This is <b><a href="https://docs.docker.com/docsarchive/" style="color: #254356; text-decoration: underline !important">archived documentation</a></b> for Docker&nbsp;' + dockerVersion + '. Go to the <a style="color: #254356; text-decoration: underline !important" href="https://docs.docker.com/">latest docs</a> or a different version:&nbsp;&nbsp;</span>' +
                                '<span style="z-index: 1001" class="dropdown">';
     var listStart = '<ul class="dropdown-menu" role="menu" aria-labelledby="archive-menu">';
     var listEnd = '</ul>';
@@ -23,5 +23,15 @@ if (window.navigator.onLine) {
       }
     });
     $( 'body' ).prepend(outerDivStart + buttonCode + listStart + listItems.join("") + listEnd + outerDivEnd);
+    hasButterBar = true;
+    // If the butterbar exists, deal with positioning it
+    // Depends on some logic in _layout/docs.html
+    $(document).scroll(function() {
+      if ( $( 'nav' ).hasClass( 'affix' ) ) {
+        $('#archive-butterbar').addClass('fixed').removeClass('top');
+      } else {
+        $('#archive-butterbar').addClass('top').removeClass('fixed');
+      }
+    });
   });
-}
\ No newline at end of file
+}
diff --git a/js/docs.js b/js/docs.js
index a1fe845477..473c2c21c1 100644
--- a/js/docs.js
+++ b/js/docs.js
@@ -285,6 +285,9 @@ $(function () {
   $('[data-toggle="tooltip"]').tooltip()
 })
 
+// Enable glossary link popovers
+$('.glossLink').popover();
+
 // sync tabs with the same data-group
 window.onload = function() {
   $('.nav-tabs > li > a').click(function(e) {
@@ -292,5 +295,3 @@ window.onload = function() {
     $('.nav-tabs > li > a[data-group="'+ group +'"]').tab('show');
   })
 };
-
-$('.glossLink').popover();