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

add toggle menus for small devices

This commit is contained in:
Josh south 2017-03-01 16:21:19 -08:00
parent 397c29a661
commit 5e656ce70a
4 changed files with 88 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_includes/global-header.html
View File

@ -5,12 +5,6 @@
<nav class="nav-primary"> <nav class="nav-primary">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs"> <img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
</div> </div>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
@ -80,6 +74,12 @@
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> --> <!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
</form> </form>
</div> </div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="tabs"> <div id="tabs">
<!-- <ul class="tabs nav navbar-nav navbar-collapse collapse navbar-left"> --> <!-- <ul class="tabs nav navbar-nav navbar-collapse collapse navbar-left"> -->
<ul class="tabs nav navbar-nav navbar-collapse navbar-left"> <ul class="tabs nav navbar-nav navbar-collapse navbar-left">

14
_includes/header.html
View File

@ -4,12 +4,6 @@
<a href="javascript:void(0)" id="menu-toggle-left"><i class="fa fa-outdent" aria-hidden="true"></i></a> <a href="javascript:void(0)" id="menu-toggle-left"><i class="fa fa-outdent" aria-hidden="true"></i></a>
</div> --> </div> -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/"><img class="logo" src="/images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs"></a> <a href="/"><img class="logo" src="/images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs"></a>
</div> </div>
<div class="navbar-collapse" aria-expanded="false" style="height: 1px;"> <div class="navbar-collapse" aria-expanded="false" style="height: 1px;">
@ -23,6 +17,12 @@
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> --> <!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
</form> </form>
</div> </div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="tabs"> <div id="tabs">
<ul class="tabs nav navbar-nav"> <ul class="tabs nav navbar-nav">
{% include treebuilder.html %} {% include treebuilder.html %}
@ -42,7 +42,5 @@
</div> </div>
</div> </div>
</div> </div>
<!-- end container -->
</div> </div>
</nav> </nav>

2
_includes/side-menu.html
View File

@ -1,4 +1,4 @@
{% if page.landing == true %}<div class="nav-sidebar navbar-collapse collapse affix" data-spy="affix" data-offset-top="490">{%else%}<div id="navbar" class="nav-sidebar navbar-collapse collapse">{% endif %} {% if page.landing == true %}<div id="navbar" class="nav-sidebar navbar-collapse collapse affix" data-spy="affix" data-offset-top="490">{%else%}<div id="navbar" class="nav-sidebar navbar-collapse collapse">{% endif %}
<ul class="nav navbar-collapse" id="stacked-menu"> <ul class="nav navbar-collapse" id="stacked-menu">
{{ leftnav }} {{ leftnav }}
</ul> </ul>

84
css/style.css
View File

@ -433,11 +433,11 @@ a.button.outline-btn {
opacity: 0; opacity: 0;
} }
.affix-logo { // .affix-logo {
float: left; // float: left;
width: 160px; // width: 160px;
transition: all 0.1s ease; // transition: all 0.1s ease;
} // }
/* /*
@ -939,7 +939,7 @@ input:checked+.slider:before {
.tabs li a { .tabs li a {
color: #fff; color: #fff;
padding: 17px 20px 13px; padding: 16px 20px 11px;
float: left; float: left;
opacity: 0.7; opacity: 0.7;
font-weight: 600; font-weight: 600;
@ -1204,10 +1204,6 @@ input[type=text] {
padding: 0px 0 0 35px; padding: 0px 0 0 35px;
border-radius: 0; border-radius: 0;
color: #fff; color: #fff;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
} }
.nav-secondary .search-form input[type=search]:focus { .nav-secondary .search-form input[type=search]:focus {
@ -1752,6 +1748,23 @@ footer {
border-bottom: 1px solid #3a546d; border-bottom: 1px solid #3a546d;
height: 145px; height: 145px;
} }
.sidebar{
background: #15212e;
padding-top: 140px;
}
.sidebar-home,
.sidebar-home .affix {
background: #192837;
width: 100%;
}
.sidebar-home {
padding-top: 0px;
}
.sidebar-home .affix {
padding-top: 50px;
}
.nav-sidebar ul li a.active, .nav-sidebar ul li a.active,
.nav-sidebar.nav>li>a:focus { .nav-sidebar.nav>li>a:focus {
cursor: default; cursor: default;
@ -1759,15 +1772,15 @@ footer {
font-weight: 600; font-weight: 600;
} }
.sidebar ul li a, .sidebar ul li a,
.nav-sidebar ul li a,
.nav-sidebar ul li li a,
.nav-sidebar ul li a:focus,
.nav-sidebar ul li a.active { .nav-sidebar ul li a.active {
color: #ffffff; color: #fff;
}
.nav-secondary .search-form {
margin: 10px 10px 0 0px;
width: 340px;
} }
.nav-secondary input[type=search],
.nav-secondary-tabs .search-form input[type=search] { .nav-secondary-tabs .search-form input[type=search] {
width: 340px; width: 260px;
} }
.nav-secondary .search-form input[type=search]:focus { .nav-secondary .search-form input[type=search]:focus {
background: rgb(29, 60, 76) url("/images/search.png") no-repeat; background: rgb(29, 60, 76) url("/images/search.png") no-repeat;
@ -1776,7 +1789,7 @@ footer {
color: #fff; color: #fff;
} }
.nav-secondary-tabs { .nav-secondary-tabs {
height: 105px; height: 108px;
} }
.nav-secondary-tabs.affix { .nav-secondary-tabs.affix {
background: #192837; background: #192837;
@ -1784,11 +1797,7 @@ footer {
top: 0; top: 0;
position: fixed; position: fixed;
z-index: 100; z-index: 100;
height: 110px; height: 106px;
}
.sidebar {
background: #15212e;
padding-top: 140px;
} }
#sidebar-wrapper-home, #sidebar-wrapper-home,
#sidebar-wrapper-home.affix { #sidebar-wrapper-home.affix {
@ -1799,12 +1808,12 @@ footer {
} }
.tabs { .tabs {
height: 50px; height: 50px;
padding: 0 0 0 12px; padding-left: 9px;
width: auto; width: auto;
} }
.tabs li a { .tabs li a {
color: #fff; color: #fff;
padding: 15px 6px 10px 6px; padding: 13px 5px 8px 7px;
float: left; float: left;
opacity: 0.7; opacity: 0.7;
font-size: 12px; font-size: 12px;
@ -1872,6 +1881,9 @@ footer {
.ctrl-right { .ctrl-right {
display: none; display: none;
} }
// button.navbar-toggle.collapsed {
// margin: 15px 15px 0 0;
// }
} }
@ -1886,19 +1898,17 @@ footer {
.navbar-nav .open .dropdown-menu>li>a { .navbar-nav .open .dropdown-menu>li>a {
background: red; background: red;
} }
.sidebar-home { // .sidebar-home {
background-color: #FBFBFC; // background-color: #FBFBFC;
border-right: 1px solid rgba(204, 204, 204, 0.29); // border-right: 1px solid rgba(204, 204, 204, 0.29);
width: 210px; // width: 210px;
} // }
.ctrl-right { .ctrl-right {
float: right; float: right;
padding: 5px 16px 0; padding: 5px 16px 0;
} }
.nav-secondary .search-form { .nav-secondary .search-form {
float: left; margin: 14px 10px 5px 0;
// width: 560px;
margin: 10px 5px 0 10px;
} }
.sidebar-home {} .sidebar-home {}
#sidebar-wrapper { #sidebar-wrapper {
@ -1907,12 +1917,12 @@ footer {
#sidebar-wrapper-home { #sidebar-wrapper-home {
display: none; display: none;
} }
.ctrl-right {
/** temporarily hide **/
display: none;
} }
// @media (max-width: 768px) { }
// #sidebar-wrapper-home {
// display: block;
// }
// }
/* /*
* *