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">
<div class="container">
<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">
</div>
<div class="navbar-collapse collapse">
@ -80,6 +74,12 @@
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
</form>
</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">
<!-- <ul class="tabs nav navbar-nav navbar-collapse collapse navbar-left"> -->
<ul class="tabs nav navbar-nav navbar-collapse navbar-left">

70
_includes/header.html
View File

@ -1,48 +1,46 @@
<nav class="nav-secondary navbar navbar-fixed-top">
<div class="container-fluid">
<!-- <div class="ctrl-left">
<!-- <div class="ctrl-left">
<a href="javascript:void(0)" id="menu-toggle-left"><i class="fa fa-outdent" aria-hidden="true"></i></a>
</div> -->
<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 class="navbar-collapse" aria-expanded="false" style="height: 1px;">
<div class="search-form" id="search-div">
<form>
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
<input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
<div id="autocompleteContainer">
<div id="autocompleteResults"></div>
</div>
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
</form>
</div>
<div id="tabs">
<ul class="tabs nav navbar-nav">
<div class="navbar-collapse" aria-expanded="false" style="height: 1px;">
<div class="search-form" id="search-div">
<form>
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
<input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
<div id="autocompleteContainer">
<div id="autocompleteResults"></div>
</div>
<!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
</form>
</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">
<ul class="tabs nav navbar-nav">
{% include treebuilder.html %}
</ul>
</div>
<div class="ctrl-right">
<a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-indent" aria-hidden="true"></i></a>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Docker 1.13 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="ctrl-right">
<a href="javascript:void(0)" id="menu-toggle"><i class="fa fa-indent" aria-hidden="true"></i></a>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Docker 1.13 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
{% for item in site.data.docsarchive.docker-compose %}
<li><a href="/{{ item[0] }}/">Docker {{ item[0] }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
<!-- end container -->
</ul>
</div>
</div>
</div>
</div>
</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">
{{ leftnav }}
</ul>

84
css/style.css
View File

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