Update website version select drop down (apache#18188)

* update version select drop down * align caret * revert scrollable content, add delayed hover effect * bugfix * fix new design doesn't work on mobile # Conflicts: # docs/static_site/src/_includes/get_started/get_started.html
ys2843 · Sep 19, 2020 · ea86bfc · ea86bfc
1 parent 3156c4d
commit ea86bfc
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 7 deletions.
diff --git a/docs/static_site/src/_includes/get_started/get_started.html b/docs/static_site/src/_includes/get_started/get_started.html
@@ -20,9 +20,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.5.1</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 versions"><a href="#">master</a></li>
                         <li class="opt active versions"><a href="#">v1.5.1</a></li>
                         <li class="opt versions"><a href="#">v1.4.1</a></li>

diff --git a/docs/static_site/src/_sass/minima/_getting_started.scss b/docs/static_site/src/_sass/minima/_getting_started.scss
@@ -67,8 +67,14 @@
 
 li.opt.versions {
   padding: 10px;
-}
+  &:hover {
+    background-color: $color-mxnet;
 
+    & a {
+      color: whitesmoke;
+    }
+  }
+}
 
 .dropdown {
   position: relative;
@@ -91,6 +97,26 @@ ul.dropdown-content {
   list-style-type: none;
 }
 
+ul.version-dropdown {
+  @extend ul.dropdown-content;
+  left: 0px;
+  width: 100%;
+}
+
+.current-version.dropbtn.btn:focus{
+  outline: 0;
+}
+
+.current-version .dropdown-caret {
+  position: relative;
+  top: 4px;
+}
+
+.version-dropdown .active a {
+  color: $grey-color-light;
+}
+
+.version-dropdown a,
 .dropdown-content a {
   color: $grey-color-dark;
   text-decoration: none;
@@ -113,7 +139,7 @@ ul.dropdown-content {
 }
 
 .dropdown:hover .dropbtn {
-  background-color: $color-mxnet
+  background-color: $color-mxnet;
 }
 
 /*

diff --git a/docs/static_site/src/assets/js/options.js b/docs/static_site/src/assets/js/options.js
@@ -51,8 +51,8 @@ $(document).ready(function () {
         if (urlParams.get('version')) {
             versionSelect = urlParams.get('version');
             $('li.versions').removeClass('active');
-            $('li.versions').each(function(){is_a_match($(this), versionSelect)});
-            $('.current-version').html( versionSelect + ' <span class="caret"></span>' );
+            $('li.versions').each(function () { is_a_match($(this), versionSelect) });
+            $('.current-version').html(versionSelect + '<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>');
             queryString += 'version=' + versionSelect + '&';
         }
         if (urlParams.get('platform')) {
@@ -133,4 +133,20 @@ $(document).ready(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()});
 });