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

move navbar to burger menu on mobile 

Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>
This commit is contained in:
Jérémie Drouet 2020-05-20 09:48:43 +02:00
parent 135a21401e
commit dbe4953982
5 changed files with 38 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/navigation.html
View File

@ -15,13 +15,13 @@
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-container">
<div class="nav-container hidden-sm hidden-xs">
<div id="tabs">
<ul class="tabs" id="jsTOCHorizontal">
<ul class="tabs jsTOCHorizontal">
</ul>
</div>
<div class="ctrl-right hidden-xs hidden-sm">
<div class="ctrl-right">
<a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-indent" aria-hidden="true"></i></a>
{% include archive-list.html %}
</div>

5
_includes/side-menu.html
View File

@ -1,4 +1,7 @@
{% if page.landing == true %}<div id="navbar" class="nav-sidebar">{%else%}<div id="navbar" class="nav-sidebar">{% endif %}
<div id="navbar" class="nav-sidebar">
<ul class="nav jsTOCHorizontal hidden-md hidden-lg">
</ul>
<div class="divider hidden-md hidden-lg"></div>
<ul class="nav" id="jsTOCLeftNav">
</ul>
</div>

3
_scss/_mobile.scss
View File

@ -121,7 +121,6 @@
.nav-secondary-tabs,
.nav-secondary {
background-color: $black;
height: 100px;
}
.nav-secondary input[type=search] {
background: rgb(78, 77, 77) url(/images/search.png) no-repeat 10px 9px;
@ -143,7 +142,7 @@
font-size: 12px;
}
.content {
padding: 120px 25px;
padding: 65px 25px;
}
.main-content {
padding: 10px 25px;

7
_scss/_navigation.scss
View File

@ -384,4 +384,9 @@ input:checked+.slider:before {
margin: 2px 0 0;
}
.divider {
height: 1px;
margin: 9px 35px;
overflow: hidden;
background-color: #077CBC;
}

4
js/docs.js
View File

@ -104,7 +104,9 @@ function renderNav(docstoc) {
}
outputHorzTabs.push('><a href="' + docstoc.horizontalnav[i].path + '">' + docstoc.horizontalnav[i].title + "</a></li>\n");
}
document.getElementById("jsTOCHorizontal").innerHTML = outputHorzTabs.join("");
document.querySelectorAll('.jsTOCHorizontal').forEach(function(element) {
element.innerHTML = outputHorzTabs.join("");
});
document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
}