Skip to content
This repository has been archived by the owner on Nov 17, 2023. It is now read-only.

update website version select drop down #18188

Merged
merged 5 commits into from
May 4, 2020
Merged

update website version select drop down #18188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4863806
update version select drop down
Apr 29, 2020
559585b
align caret
Apr 29, 2020
eb44be1
revert scrollable content, add delayed hover effect
Apr 29, 2020
f151f32
bugfix
Apr 29, 2020
15271f0
fix new design doesn't work on mobile
May 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions docs/static_site/src/_includes/get_started/get_started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.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 versions"><a href="#">master</a></li>
<li class="opt active versions"><a href="#">v1.6.0</a></li>
<li class="opt versions"><a href="#">v1.5.1</a></li>
Expand Down
30 changes: 28 additions & 2 deletions docs/static_site/src/_sass/minima/_getting_started.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,14 @@

li.opt.versions {
padding: 10px;
}
&:hover {
background-color: $color-mxnet;

& a {
color: whitesmoke;
}
}
}

.dropdown {
position: relative;
Expand All @@ -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;
Expand All @@ -113,7 +139,7 @@ ul.dropdown-content {
}

.dropdown:hover .dropbtn {
background-color: $color-mxnet
background-color: $color-mxnet;
}

/*
Expand Down
20 changes: 18 additions & 2 deletions docs/static_site/src/assets/js/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')) {
Expand Down Expand Up @@ -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()});
});