fix: Version warning banner in docs (#6682)

Signed-off-by: saumeya <saumeyakatyal@gmail.com> add side-bar media queries removed extra comments Signed-off-by: saumeya <saumeyakatyal@gmail.com>
argoproj · Jul 11, 2021 · 9b0631b · 9b0631b
1 parent eb3d1fb
commit 9b0631b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/docs/assets/versions.css b/docs/assets/versions.css
@@ -36,10 +36,13 @@
 
 /* Version Warning */
 div[data-md-component=announce] {
-  background-color: rgba(255,145,0,.1);
+  background-color: rgb(248, 243, 236);
+  position: sticky;
+  top: 0;
+  z-index: 2;
 }
 div[data-md-component=announce]>div#announce-msg{
-  color: var(--md-admonition-fg-color);
+  color: var(--md-code-hl-number-color);
   font-size: .8rem;
   text-align: center;
   margin: 15px;

diff --git a/docs/assets/versions.js b/docs/assets/versions.js
@@ -34,10 +34,25 @@ setTimeout(function() {
 
 // VERSION WARNINGS
 window.addEventListener("DOMContentLoaded", function() {
-  if ((window['READTHEDOCS_DATA']).version === "latest") {
+  var rtdData = window['READTHEDOCS_DATA'] || { version: 'latest' };
+  var margin = 30;
+  var headerHeight = document.getElementsByClassName("md-header")[0].offsetHeight; 
+  if (rtdData.version === "latest") {
     document.querySelector("div[data-md-component=announce]").innerHTML = "<div id='announce-msg'>You are viewing the docs for an unreleased version of Argo CD, <a href='https://argo-cd.readthedocs.io/en/stable/'>click here to go to the latest stable version.</a></div>"
+    var bannerHeight = document.getElementById('announce-msg').offsetHeight + margin
+    document.querySelector("header.md-header").style.top = bannerHeight +"px";   
+    document.querySelector('style').textContent +=
+    "@media screen and (min-width: 76.25em){ .md-sidebar { height: 0;  top:"+ (bannerHeight+headerHeight)+"px !important; }}"
+    document.querySelector('style').textContent +=
+    "@media screen and (min-width: 60em){ .md-sidebar--secondary { height: 0;  top:"+ (bannerHeight+headerHeight)+"px !important; }}"
   }
   else if ((window['READTHEDOCS_DATA']).version !== "stable") {
     document.querySelector("div[data-md-component=announce]").innerHTML = "<div id='announce-msg'>You are viewing the docs for a previous version of Argo CD, <a href='https://argo-cd.readthedocs.io/en/stable/'>click here to go to the latest stable version.</a></div>"
+    var bannerHeight = document.getElementById('announce-msg').offsetHeight + margin
+    document.querySelector("header.md-header").style.top = bannerHeight +"px";   
+    document.querySelector('style').textContent +=
+    "@media screen and (min-width: 76.25em){ .md-sidebar { height: 0;  top:"+ (bannerHeight+headerHeight)+"px !important; }}"
+    document.querySelector('style').textContent +=
+    "@media screen and (min-width: 60em){ .md-sidebar--secondary { height: 0;  top:"+ (bannerHeight+headerHeight)+"px !important; }}"
   }
 });