istio
/
istio.io
mirror of https://github.com/istio/istio.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixed leftnav not responding on mobile (#309)

This commit is contained in:
ryangrahamnc 2017-05-23 11:25:58 -04:00 committed by Martin Taillefer
parent 9daae29264
commit 4cf4c69e8d
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/docs.html
View File

@ -15,7 +15,7 @@ layout: default
</div>
<div id="tab-container" class="col-xs-1 tab-neg-margin pull-left">
<span id="sidebar-tab" class="glyphicon glyphicon-chevron-left"></span>
<a id="sidebar-tab" class="glyphicon glyphicon-chevron-left" href="javascript:void 0;"></a>
</div>
<div id="content-container" class="thin-left-border col-sm-9 {{ page.type }}">

15
_sass/layouts/_docs.scss
View File

@ -17,6 +17,15 @@
margin-right: 10px;
font-size: 1rem;
color: $black;
&, &:focus, &:hover, &:active{
color:black !important;
text-decoration: none !important;
}
}
#tab-container{
z-index:1000;
}
#sidebar-container {
@ -24,4 +33,10 @@
padding:0px;
background-color: #fff;
}
@media (max-width: 768px) {
#content-container{
clear:both;
}
}
}

19
js/sidemenu.js
View File

@ -4,7 +4,7 @@
var sidebar = $("#sidebar-container");
var content = $("#content-container");
var tab = $("#tab-container");
var width = $(document). width();
var hasExpandedNavOnSmallScreen = false;
function setSidebar() {
// set sidebar height, breakpoint at iPad in landscape
@ -13,35 +13,30 @@
// 992 is the default breakpoint set in Bootstrap 3 for col-md
var width = $(document).width();
if (width < 992) {
if (width < 992 && !hasExpandedNavOnSmallScreen) {
sidebar.hide();
sidebarOpen = false;
}
}
$(document).on('click', '#sidebar-tab', function() {
hasExpandedNavOnSmallScreen = true;
$(this).toggleClass('glyphicon-chevron-right');
$(this).toggleClass('glyphicon-chevron-left');
sidebar.toggle(250);
sidebarOpen = !sidebarOpen;
if (!sidebarOpen) {
tab.removeClass("col-xs-1");
tab.removeClass("tab-neg-margin");
tab.removeClass("pull-left");
tab.removeClass("col-xs-1 tab-neg-margin pull-left");
content.removeClass("thin-left-border");
content.removeClass("col-sm-9");
content.removeClass("thin-left-border col-sm-9");
content.addClass("col-sm-11");
}
else {
tab.addClass("col-xs-1");
tab.addClass("tab-neg-margin");
tab.addClass("pull-left");
tab.addClass("col-xs-1 tab-neg-margin pull-left");
content.removeClass("col-sm-11");
content.addClass("thin-left-border");
content.addClass("col-sm-9");
content.addClass("thin-left-border col-sm-9");
}
});