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>
<div id="tab-container" class="col-xs-1 tab-neg-margin pull-left"> <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>
<div id="content-container" class="thin-left-border col-sm-9 {{ page.type }}"> <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; margin-right: 10px;
font-size: 1rem; font-size: 1rem;
color: $black; color: $black;
&, &:focus, &:hover, &:active{
color:black !important;
text-decoration: none !important;
}
}
#tab-container{
z-index:1000;
} }
#sidebar-container { #sidebar-container {
@ -24,4 +33,10 @@
padding:0px; padding:0px;
background-color: #fff; 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 sidebar = $("#sidebar-container");
var content = $("#content-container"); var content = $("#content-container");
var tab = $("#tab-container"); var tab = $("#tab-container");
var width = $(document). width(); var hasExpandedNavOnSmallScreen = false;
function setSidebar() { function setSidebar() {
// set sidebar height, breakpoint at iPad in landscape // set sidebar height, breakpoint at iPad in landscape
@ -13,35 +13,30 @@
// 992 is the default breakpoint set in Bootstrap 3 for col-md // 992 is the default breakpoint set in Bootstrap 3 for col-md
var width = $(document).width(); var width = $(document).width();
if (width < 992) { if (width < 992 && !hasExpandedNavOnSmallScreen) {
sidebar.hide(); sidebar.hide();
sidebarOpen = false; sidebarOpen = false;
} }
} }
$(document).on('click', '#sidebar-tab', function() { $(document).on('click', '#sidebar-tab', function() {
hasExpandedNavOnSmallScreen = true;
$(this).toggleClass('glyphicon-chevron-right'); $(this).toggleClass('glyphicon-chevron-right');
$(this).toggleClass('glyphicon-chevron-left'); $(this).toggleClass('glyphicon-chevron-left');
sidebar.toggle(250); sidebar.toggle(250);
sidebarOpen = !sidebarOpen; sidebarOpen = !sidebarOpen;
if (!sidebarOpen) { if (!sidebarOpen) {
tab.removeClass("col-xs-1"); tab.removeClass("col-xs-1 tab-neg-margin pull-left");
tab.removeClass("tab-neg-margin");
tab.removeClass("pull-left");
content.removeClass("thin-left-border"); content.removeClass("thin-left-border col-sm-9");
content.removeClass("col-sm-9");
content.addClass("col-sm-11"); content.addClass("col-sm-11");
} }
else { else {
tab.addClass("col-xs-1"); tab.addClass("col-xs-1 tab-neg-margin pull-left");
tab.addClass("tab-neg-margin");
tab.addClass("pull-left");
content.removeClass("col-sm-11"); content.removeClass("col-sm-11");
content.addClass("thin-left-border"); content.addClass("thin-left-border col-sm-9");
content.addClass("col-sm-9");
} }
}); });