From 8be6b2a9c58014c677d38c775b0d08bc116513bc Mon Sep 17 00:00:00 2001
From: ys2843 <ys2843@nyu.edu>
Date: Tue, 5 May 2020 13:45:38 -0700
Subject: [PATCH 1/2] update website v1.6 - update get started page version
 dropdown

---
 versions/1.6/assets/js/options.js   | 27 +++++++++++++++++++--
 versions/1.6/assets/main.css        | 37 +++++++++++++++++++++++++++++
 versions/1.6/get_started/index.html | 11 ++++++---
 3 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/versions/1.6/assets/js/options.js b/versions/1.6/assets/js/options.js
index ae955e46..ca19528d 100644
--- a/versions/1.6/assets/js/options.js
+++ b/versions/1.6/assets/js/options.js
@@ -45,7 +45,7 @@ $(document).ready(function () {
         }
     }
 
-    function setSelects(urlParams) {
+    function setSelects(urlParams, dontPushState) {
         if (urlParams.get('version'))
             versionSelect = urlParams.get('version');
         $('.current-version').html( versionSelect + ' <span class="caret"></span>' );
@@ -68,7 +68,7 @@ $(document).ready(function () {
 
         showContent();
         let queryString = '?version=' + versionSelect + '&platform=' + platformSelect + '&language=' + languageSelect + '&environ=' + environSelect + '&processor=' + processorSelect
-        if (window.location.href.indexOf("/get_started") >= 0) {
+        if (window.location.href.indexOf("/get_started") >= 0 && !dontPushState) {
             history.pushState(null, null, queryString);
         }
     }
@@ -107,5 +107,28 @@ $(document).ready(function () {
     $('.opt-group').on('click', '.opt', setContent);
     $('.install-widget').css("visibility", "visible");
     $('.install-content').css("visibility", "visible");
+    $(window).on('popstate', function(){
+        setSelects(urlSearchParams(window.location.search), true);
+    });
 
+    let timer;
+    const toggleDropdown = function(showContent) {
+        if (timer) clearTimeout(timer);
+        if (showContent) {
+            timer = setTimeout(function() {
+                $(".version-dropdown").show()
+            }, 250);  
+        } else {
+            $(".version-dropdown").hide()
+        }
+    }
+
+    $("#version-dropdown-container")
+        .mouseenter(toggleDropdown.bind(null, true))
+        .mouseleave(toggleDropdown.bind(null, false))
+        .click(function() {$(".version-dropdown").toggle()});
+
+    $("ul.version-dropdown").click(function(e) {
+        e.preventDefault();
+    });    
 });
diff --git a/versions/1.6/assets/main.css b/versions/1.6/assets/main.css
index c5ac8cf2..9447b648 100644
--- a/versions/1.6/assets/main.css
+++ b/versions/1.6/assets/main.css
@@ -1055,6 +1055,43 @@ ul.dropdown-content {
 .dropdown:hover .dropbtn {
   background-color: #048ccc; }
 
+ul.dropdown-content, ul.version-dropdown { 
+  display: none; 
+  position: absolute; 
+  left: 40%; 
+  text-align: center; 
+  background-color: whitesmoke; 
+  box-shadow: none; 
+  z-index: 1; 
+  margin: 0px; 
+  padding: 0px; 
+  list-style-type: none; }
+
+ul.version-dropdown { 
+  left: 0px; 
+  width: 100%; }
+
+.current-version.dropbtn.btn:focus { 
+  outline: 0; }
+
+.current-version .dropdown-caret { 
+  position: relative; 
+  top: 4px; }
+
+.version-dropdown .active a { 
+  color: whitesmoke; }
+
+.version-dropdown a, .dropdown-content a { 
+  color: #424242; 
+  text-decoration: none; 
+  display: block; 
+  padding-left: 5px; 
+  padding-right: 5px; 
+  font-size: 17px; }
+
+.version-dropdown a:hover, .dropdown-content a:hover { 
+  color: orangered; }
+
 /*
  * selector
  */
diff --git a/versions/1.6/get_started/index.html b/versions/1.6/get_started/index.html
index a5dcb532..1dad6e9f 100644
--- a/versions/1.6/get_started/index.html
+++ b/versions/1.6/get_started/index.html
@@ -173,9 +173,14 @@ <h2>Installing MXNet</h2>
                 <span>MXNet Version</span>
             </div>
             <div class="col-9 install-right">
-                <div class="dropdown">
-                    <button class="current-version dropbtn btn" type="button" data-toggle="dropdown">v1.6.0</button>
-                    <ul class="opt-group dropdown-content">
+                <div class="dropdown" id="version-dropdown-container">
+                    <button class="current-version dropbtn btn" type="button" data-toggle="dropdown">
+                        v1.6.0
+                        <svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true">
+                            <path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path>
+                        </svg>
+                    </button>
+                    <ul class="opt-group version-dropdown">
                         <li class="opt active versions"><a href="#">v1.6.0</a></li>
                         <li class="opt versions"><a href="#">v1.5.1</a></li>
                         <li class="opt versions"><a href="#">v1.4.1</a></li>

From a7a1ad38824c4879c49ff85716221c6861dcee7b Mon Sep 17 00:00:00 2001
From: ys2843 <ys2843@nyu.edu>
Date: Tue, 5 May 2020 14:59:57 -0700
Subject: [PATCH 2/2] update drop down link color

---
 versions/1.6/assets/main.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/versions/1.6/assets/main.css b/versions/1.6/assets/main.css
index 9447b648..fa2e3667 100644
--- a/versions/1.6/assets/main.css
+++ b/versions/1.6/assets/main.css
@@ -1018,6 +1018,12 @@ figure {
 li.opt.versions {
   padding: 10px; }
 
+li.opt.versions:hover { 
+  background-color: #048ccc; }
+
+li.opt.versions:hover a { 
+  color: whitesmoke; }
+
 .dropdown {
   position: relative;
   display: inline-block;