mirror of https://github.com/istio/istio.io.git
Move search box into main nav (#111)
* move search box to main nav. implement tooltip for contribute link * refactor contribute links css and layout include * tooltip error using absolute positioning
This commit is contained in:
Dave
Martin Taillefer
parent
b80ce5abd0
commit
ab9e837211
|
|
@ -1,3 +1,11 @@
|
|||
<div class="contribute-links">
|
||||
<a href="https://github.com/istio/istio.github.io/edit/master/{{page.path}}"></a>
|
||||
<div class="contribute-links pull-right">
|
||||
<a href="https://github.com/istio/istio.github.io/edit/master/{{page.path}}" data-toggle="tooltip" data-placement="left" title="Edit this page on GitHub">
|
||||
<i class="fa fa-lg fa-pencil"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% include search-box.html %}
|
||||
{% include contribute-links.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,37 @@
|
|||
<nav id="common-nav">
|
||||
<div class="nav-container container">
|
||||
<div class="row">
|
||||
<div class="col-md-11 nofloat center-block">
|
||||
<a class="col-xs-2" href="{{home}}/">
|
||||
<img class="nav-logo" src="{{home}}/img/logo.png" alt="Istio"/>
|
||||
<span class="page-headline">Istio</span>
|
||||
</a>
|
||||
{% assign current = page.url | downcase | split: '/' %}
|
||||
<nav id="common-nav" role="navigation">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-11 nofloat center-block ">
|
||||
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="hamburger navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
|
||||
<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="{{home}}/">
|
||||
<div>
|
||||
<img class="nav-logo" src="{{home}}/img/logo.png" alt="Istio"/>
|
||||
<span class="page-headline">Istio</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
||||
{% include search-box.html %}
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="{{home}}/about/" {% if current[1] == 'about' %}class='current'{% endif %}>About</a></li>
|
||||
<li><a href="{{home}}/docs/" {% if current[1] == 'docs' %}class='current'{% endif %}>Docs</a></li>
|
||||
<li><a href="{{home}}/blog/" {% if current[1] == 'blog' %}class='current'{% endif %}>Blog</a></li>
|
||||
<li><a href="{{home}}/community/" {% if current[1] == 'community' %}class='current'{% endif %}>Community</a></li>
|
||||
<li><a href="{{home}}/faq/" {% if current[1] == 'faq' %}class='current'{% endif %}>FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-2 col-xs-offset-8">
|
||||
<button type="button" class="hamburger navbar-toggle collapsed" data-target="#navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="nav col-xs-10">
|
||||
{% assign current = page.url | downcase | split: '/' %}
|
||||
<li><a href="{{home}}/about/" {% if current[1] == 'about' %}class='current'{% endif %}>About</a></li>
|
||||
<li><a href="{{home}}/docs/" {% if current[1] == 'docs' %}class='current'{% endif %}>Docs</a></li>
|
||||
<li><a href="{{home}}/blog/" {% if current[1] == 'blog' %}class='current'{% endif %}>Blog</a></li>
|
||||
<li><a href="{{home}}/community/" {% if current[1] == 'community' %}class='current'{% endif %}>Community</a></li>
|
||||
<li><a href="{{home}}/faq/" {% if current[1] == 'faq' %}class='current'{% endif %}>FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-nav right">
|
||||
{% assign current = page.url | downcase | split: '/' %}
|
||||
<li class="nav-item"><a href="{{home}}/" {% if current[1] == 'index.html' %}class='current'{% endif %}><p>Istio Home</p></a></li>
|
||||
<hr>
|
||||
<li class="nav-item"><a href="{{home}}/about/" {% if current[1] == 'about' %}class='current'{% endif %}><p>About</p></a></li>
|
||||
<hr>
|
||||
<li class="nav-item"><a href="{{home}}/docs/" {% if current[1] == 'docs' %}class='current'{% endif %}><p>Docs</p></a>
|
||||
<div class="nav-doc-toggle icon-caret"></div>
|
||||
<ul class="doc-list">
|
||||
<a href="{{home}}/docs" {% if page.path == 'docs/index.html' %}class='current'{% endif %}><li class="nav-doc-tab">Welcome</li></a>
|
||||
<a href="{{home}}/docs/concepts" {% if current[2] == 'concepts' %}class='current'{% endif %}><li class="nav-doc-tab">Concepts</li></a>
|
||||
<a href="{{home}}/docs/tasks" {% if current[2] == 'tasks' %}class='current'{% endif %}><li class="nav-doc-tab">Tasks</li></a>
|
||||
<a href="{{home}}/docs/samples" {% if current[2] == 'samples' %}class='current'{% endif %}><li class="nav-doc-tab">Samples</li></a>
|
||||
<a href="{{home}}/docs/reference" {% if current[2] == 'reference' %}class='current'{% endif %}><li class="nav-doc-tab">Reference</li></a>
|
||||
</ul>
|
||||
</li>
|
||||
<hr>
|
||||
<li class="nav-item"><a href="{{home}}/blog/" {% if current[1] == 'blog' %}class='current'{% endif %}><p>Blog</p></a></li>
|
||||
<hr>
|
||||
<li class="nav-item"><a href="{{home}}/community/" {% if current[1] == 'community' %}class='current'{% endif %}><p>Community</p></a></li>
|
||||
<hr>
|
||||
<li class="nav-item"><a href="{{home}}/faq/" {% if current[1] == 'faq' %}class='current'{% endif %}><p>FAQ</p></a></li>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="search-box">
|
||||
<form name="cse" id="searchbox_demo">
|
||||
<input type="hidden" name="cx" value="013699703217164175118:veyyqmfmpj4" />
|
||||
<input type="hidden" name="ie" value="utf-8" />
|
||||
<input type="hidden" name="hl" value="en" />
|
||||
<input name="q" type="text" size="30" />
|
||||
<span class="btn-search lead glyphicon glyphicon-search" style="color: #aaa; cursor:pointer"></span>
|
||||
</form>
|
||||
<script type="text/javascript" src="https://www.google.com/cse/brand?form=searchbox_demo"></script>
|
||||
</div>
|
||||
<form name="cse" id="searchbox_demo" class="navbar-form navbar-right" role="search">
|
||||
<input type="hidden" name="cx" value="013699703217164175118:veyyqmfmpj4" />
|
||||
<input type="hidden" name="ie" value="utf-8" />
|
||||
<input type="hidden" name="hl" value="en" />
|
||||
<div class="form-group">
|
||||
<input name="q" class="form-control" type="text" size="30" />
|
||||
</div>
|
||||
<span class="btn-search glyphicon glyphicon-search"></span>
|
||||
</form>
|
||||
<script type="text/javascript" src="https://www.google.com/cse/brand?form=searchbox_demo"></script>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ layout: base
|
|||
{% include nav.html %}
|
||||
</div>
|
||||
|
||||
{% include contribute-links.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.contribute-links {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 3px;
|
||||
display: none;
|
||||
font-weight: 300;
|
||||
padding-top: 15px;
|
||||
|
||||
i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: $tablet) {
|
||||
display: initial;
|
||||
|
|
@ -15,27 +16,8 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: url('../img/pencil.png') no-repeat center/cover;
|
||||
background-color: $mainBrandColor;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
background-color: $popBrandColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
background-color: transparent;
|
||||
border: 2px solid $mainBrandColor;
|
||||
color: $mainBrandColor;
|
||||
color: $popBrandColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,8 +68,21 @@
|
|||
.nav .current{
|
||||
@include underline();
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// override
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
.arrow-d,
|
||||
.arrow-r {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -36,3 +36,12 @@
|
|||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
color: #aaa;
|
||||
cursor:pointer;
|
||||
padding-left: 5px;
|
||||
font-size: 1.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue