Skip to content

Commit

Permalink
add toggle menus for small devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsouth
jsouth committed Mar 2, 2017
1 parent 397c29a commit 5e656ce
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 79 deletions.
12 changes: 6 additions & 6 deletions _includes/global-header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -80,6 +74,12 @@ <h1>Docker's Documentation</h1>
<!-- <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">
Expand Down
68 changes: 33 additions & 35 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -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">
<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>
<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>
<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>
</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 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 changes: 1 addition & 1 deletion _includes/side-menu.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
84 changes: 47 additions & 37 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
// }


/*
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -1752,22 +1748,39 @@ 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;
border-left: 4px solid #21cbc9;
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;
Expand All @@ -1776,19 +1789,15 @@ footer {
color: #fff;
}
.nav-secondary-tabs {
height: 105px;
height: 108px;
}
.nav-secondary-tabs.affix {
background: #192837;
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
top: 0;
position: fixed;
z-index: 100;
height: 110px;
}
.sidebar {
background: #15212e;
padding-top: 140px;
height: 106px;
}
#sidebar-wrapper-home,
#sidebar-wrapper-home.affix {
Expand All @@ -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;
Expand Down Expand Up @@ -1872,6 +1881,9 @@ footer {
.ctrl-right {
display: none;
}
// button.navbar-toggle.collapsed {
// margin: 15px 15px 0 0;
// }
}


Expand All @@ -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 {
Expand All @@ -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;
// }
// }


/*
*
Expand Down

0 comments on commit 5e656ce

Please sign in to comment.