mirror of
https://github.com/ethauvin/kobalt-doc.git
synced 2025-04-25 03:57:11 -07:00
Better nav bar.
This commit is contained in:
Cedric Beust
parent
c67236cb07
commit
16faba1859
4 changed files with 70 additions and 62 deletions
|
|
@ -40,25 +40,7 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<!-- Static navbar -->
|
<!-- Static navbar -->
|
||||||
<nav class="navbar navbar-default">
|
<nav id="kobalt-navbar" class="navbar navbar-default">
|
||||||
<div class="container-fluid">
|
|
||||||
<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 class="navbar-brand">Kobalt</a>
|
|
||||||
</div>
|
|
||||||
<div id="navbar" class="navbar-collapse collapse">
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li><a href="../home/index.html">Home</a></li>
|
|
||||||
<li class="active"><a href="../documentation/index.html">Documentation</a></li>
|
|
||||||
<li><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!--/.nav-collapse -->
|
|
||||||
</div><!--/.container-fluid -->
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Main component for a primary marketing message or call to action -->
|
<!-- Main component for a primary marketing message or call to action -->
|
||||||
|
|
@ -602,8 +584,8 @@ If you are interested in discussing Kobalt related topics with other fellow user
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||||
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<script src="../js/toc.js"></script>
|
<script src="../js/kobalt.js"></script>
|
||||||
<script>generateToc();</script>
|
<script>generateKobalt(1);</script>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<script src="../bootstrap/dist/js/docs.min.js"></script>
|
<script src="../bootstrap/dist/js/docs.min.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -40,25 +40,7 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<!-- Static navbar -->
|
<!-- Static navbar -->
|
||||||
<nav class="navbar navbar-default">
|
<nav id="kobalt-navbar" class="navbar navbar-default">
|
||||||
<div class="container-fluid">
|
|
||||||
<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 class="navbar-brand">Kobalt</a>
|
|
||||||
</div>
|
|
||||||
<div id="navbar" class="navbar-collapse collapse">
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li class="active"><a href="../home/index.html">Home</a></li>
|
|
||||||
<li><a href="../documentation/index.html">Documentation</a></li>
|
|
||||||
<li><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!--/.nav-collapse -->
|
|
||||||
</div><!--/.container-fluid -->
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Main component for a primary marketing message or call to action -->
|
<!-- Main component for a primary marketing message or call to action -->
|
||||||
|
|
@ -211,8 +193,8 @@ Is your curiosity piqued? Are you interested in writing some cool Kotlin code an
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||||
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<script src="../js/toc.js"></script>
|
<script src="../js/kobalt.js"></script>
|
||||||
<script>generateToc();</script>
|
<script>generateKobalt(0);</script>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<script src="../../assets/js/docs.min.js"></script>
|
<script src="../../assets/js/docs.min.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,57 @@
|
||||||
|
//
|
||||||
|
// Nav bar
|
||||||
|
//
|
||||||
|
|
||||||
|
var content = [
|
||||||
|
{
|
||||||
|
url: "../home/index.html",
|
||||||
|
title: "Home"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: "../documentation/index.html",
|
||||||
|
title: "Documentation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: "../plug-in/index.html",
|
||||||
|
title: "A plug-in in 10mn"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
var before = '<div class="container-fluid">'
|
||||||
|
+ ' <div class="navbar-header">'
|
||||||
|
+ ' <a class="navbar-brand">Kobalt</a>'
|
||||||
|
+ ' </div>'
|
||||||
|
+ ' <div id="navbar" class="navbar-collapse collapse">'
|
||||||
|
+ ' <ul class="nav navbar-nav">'
|
||||||
|
;
|
||||||
|
|
||||||
|
var after = '</ul>'
|
||||||
|
+ ' </div><!--/.nav-collapse -->'
|
||||||
|
+ ' </div><!--/.container-fluid -->'
|
||||||
|
+ '</nav>'
|
||||||
|
;
|
||||||
|
|
||||||
|
function generateNavBar(index) {
|
||||||
|
var result = before;
|
||||||
|
for (var i = 0; i < content.length; i++) {
|
||||||
|
var cls = "";
|
||||||
|
if (index == i) {
|
||||||
|
cls = 'class="active"';
|
||||||
|
}
|
||||||
|
var c = content[i];
|
||||||
|
result += '<li ' + cls + '><a href="' + c.url + '">' + c.title + '</a></li>';
|
||||||
|
}
|
||||||
|
result += after;
|
||||||
|
|
||||||
|
|
||||||
|
var navBarElement = document.getElementById("kobalt-navbar");
|
||||||
|
navBarElement.innerHTML = result;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Table of contents
|
||||||
|
//
|
||||||
|
|
||||||
function countersToHeading(counters) {
|
function countersToHeading(counters) {
|
||||||
var result = "";
|
var result = "";
|
||||||
for (var i = 0; i < counters.length; i++) {
|
for (var i = 0; i < counters.length; i++) {
|
||||||
|
|
@ -56,7 +110,12 @@ function generateToc() {
|
||||||
if (tocTag) {
|
if (tocTag) {
|
||||||
tocTag.innerHTML = toc;
|
tocTag.innerHTML = toc;
|
||||||
} else {
|
} else {
|
||||||
alert("Couldn't find an id " + tocId);
|
console.log("Couldn't find an id " + tocId);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function generateKobalt(index) {
|
||||||
|
generateToc();
|
||||||
|
generateNavBar(index);
|
||||||
|
}
|
||||||
|
|
@ -40,25 +40,7 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<!-- Static navbar -->
|
<!-- Static navbar -->
|
||||||
<nav class="navbar navbar-default">
|
<nav id="kobalt-navbar" class="navbar navbar-default">
|
||||||
<div class="container-fluid">
|
|
||||||
<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 class="navbar-brand">Kobalt<br></a>
|
|
||||||
</div>
|
|
||||||
<div id="navbar" class="navbar-collapse collapse">
|
|
||||||
<ul class="nav navbar-nav">
|
|
||||||
<li><a href="../home/index.html">Home</a></li>
|
|
||||||
<li><a href="../documentation/index.html">Documentation</a></li>
|
|
||||||
<li class="active"><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!--/.nav-collapse -->
|
|
||||||
</div><!--/.container-fluid -->
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Main component for a primary marketing message or call to action -->
|
<!-- Main component for a primary marketing message or call to action -->
|
||||||
|
|
@ -257,6 +239,9 @@ And that's it! You can now iterate on your plug-in and upload it with additional
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||||
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="../js/kobalt.js"></script>
|
||||||
|
<script>generateKobalt(2);</script>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<script src="../bootstrap/dist/js/docs.min.js"></script>
|
<script src="../bootstrap/dist/js/docs.min.js"></script>
|
||||||
-->
|
-->
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue