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> <span class="icon-bar"></span>
</button> </button>
</div> </div>
<div class="nav-container"> <div class="nav-container hidden-sm hidden-xs">
<div id="tabs"> <div id="tabs">
<ul class="tabs" id="jsTOCHorizontal"> <ul class="tabs jsTOCHorizontal">
</ul> </ul>
</div> </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> <a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-indent" aria-hidden="true"></i></a>
{% include archive-list.html %} {% include archive-list.html %}
</div> </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 class="nav" id="jsTOCLeftNav">
</ul> </ul>
</div> </div>

41
_scss/_mobile.scss
View File

@ -4,9 +4,9 @@
* *
*/ */
@media only screen @media only screen
and (min-width : 376px) and (min-width : 376px)
and (max-width : 1150px) { and (max-width : 1150px) {
.nav-primary, .nav-primary,
.hero-text, .hero-text,
.banner, .banner,
@ -55,9 +55,9 @@
} }
} }
@media only screen @media only screen
and (min-width : 376px) and (min-width : 376px)
and (max-width : 900px) { and (max-width : 900px) {
.sidebar { .sidebar {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -76,8 +76,8 @@
*/ */
/* Portrait and Landscape */ /* Portrait and Landscape */
@media only screen @media only screen
and (min-device-width: 320px) and (min-device-width: 320px)
and (max-device-width: 670px) { and (max-device-width: 670px) {
.logo, .logo,
.hero-text, .hero-text,
@ -92,8 +92,8 @@
} }
/* Portrait */ /* Portrait */
@media only screen @media only screen
and (min-device-width: 320px) and (min-device-width: 320px)
and (max-device-width: 667px) and (max-device-width: 667px)
and (orientation: portrait) { and (orientation: portrait) {
h1, h1,
@ -121,7 +121,6 @@
.nav-secondary-tabs, .nav-secondary-tabs,
.nav-secondary { .nav-secondary {
background-color: $black; background-color: $black;
height: 100px;
} }
.nav-secondary input[type=search] { .nav-secondary input[type=search] {
background: rgb(78, 77, 77) url(/images/search.png) no-repeat 10px 9px; background: rgb(78, 77, 77) url(/images/search.png) no-repeat 10px 9px;
@ -143,7 +142,7 @@
font-size: 12px; font-size: 12px;
} }
.content { .content {
padding: 120px 25px; padding: 65px 25px;
} }
.main-content { .main-content {
padding: 10px 25px; padding: 10px 25px;
@ -212,9 +211,9 @@
} }
/* Landscape */ /* Landscape */
@media only screen @media only screen
and (min-device-width: 320px) and (min-device-width: 320px)
and (max-device-width: 667px) and (max-device-width: 667px)
and (orientation: landscape) { and (orientation: landscape) {
h1, h1,
h2, h2,
@ -284,8 +283,8 @@
*/ */
@media only screen @media only screen
and (min-device-width: 768px) and (min-device-width: 768px)
and (max-device-width: 1110px) { and (max-device-width: 1110px) {
.logo { .logo {
margin: 12px 10px 0 10px; margin: 12px 10px 0 10px;
@ -316,9 +315,9 @@
} }
/* Portrait */ /* Portrait */
@media only screen @media only screen
and (min-device-width: 768px) and (min-device-width: 768px)
and (max-device-width: 1024px) and (max-device-width: 1024px)
and (orientation: portrait) { and (orientation: portrait) {
.nav-secondary input[type=search] { .nav-secondary input[type=search] {
background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px; background: rgba(255, 255, 255, 0.17) url(/images/search.png) no-repeat 10px 9px;
@ -326,9 +325,9 @@
} }
/* Landscape */ /* Landscape */
@media only screen @media only screen
and (min-device-width: 768px) and (min-device-width: 768px)
and (max-device-width: 1024px) and (max-device-width: 1024px)
and (orientation: landscape) { and (orientation: landscape) {
.search-form { .search-form {
float: left; float: left;

11
_scss/_navigation.scss
View File

@ -164,7 +164,7 @@
.collapsed .collapsed
{ {
cursor:pointer; cursor:pointer;
} }
/* /*
@ -308,7 +308,7 @@ input:checked+.slider:before {
#tabs { #tabs {
float: left; float: left;
margin: 0; margin: 0;
padding-left: 8px; padding-left: 8px;
ul { ul {
padding: 0; padding: 0;
} }
@ -384,4 +384,9 @@ input:checked+.slider:before {
margin: 2px 0 0; 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"); 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(""); document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
} }