Merge pull request #1 from ys2843/update1.6-version-dropdown

update website v1.6 - update get started page version dropdown
connorgoggins · May 6, 2020 · 9ea104d · 9ea104d
2 parents aee0d8d + a7a1ad3
commit 9ea104d
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 5 deletions.
diff --git 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
@@ -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;
@@ -1055,6 +1061,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
@@ -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>