Add a fixed sidebar with anchor navigation to the sidebar.
Borrowed from the Bootstrap doc implementation.
This commit is contained in:
Florian Kissling
parent
f8ecee7783
commit
d98cbcec21
@ -20,6 +20,148 @@
|
||||
<link href="vendor/css/anchor.css" type="text/css" rel="stylesheet" />
|
||||
|
||||
<style type="text/css">
|
||||
/*
|
||||
* Side navigation
|
||||
*
|
||||
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
|
||||
* sections of docs content.
|
||||
*/
|
||||
|
||||
/* By default it's not affixed in mobile views, so undo that */
|
||||
.s2-docs-sidebar.affix {
|
||||
position: static;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.s2-docs-sidebar {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* First level of nav */
|
||||
.s2-docs-sidenav {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* All levels of nav */
|
||||
.s2-docs-sidebar .nav > li > a {
|
||||
margin-left: -1px;
|
||||
display: block;
|
||||
padding: 4px 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #767676;
|
||||
}
|
||||
.s2-docs-sidebar .nav > li > a code {
|
||||
background-color: inherit;
|
||||
color: #666;
|
||||
}
|
||||
.s2-docs-sidebar .nav > li > a:hover,
|
||||
.s2-docs-sidebar .nav > li > a:focus {
|
||||
padding-left: 19px;
|
||||
color: #428BCA;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border-left: 1px solid #428BCA;
|
||||
}
|
||||
.s2-docs-sidebar .nav > .active > a,
|
||||
.s2-docs-sidebar .nav > .active:hover > a,
|
||||
.s2-docs-sidebar .nav > .active:focus > a {
|
||||
padding-left: 18px;
|
||||
font-weight: bold;
|
||||
color: #428BCA;
|
||||
background-color: transparent;
|
||||
border-left: 2px solid #428BCA;
|
||||
}
|
||||
|
||||
/* Nav: second level (shown on .active) */
|
||||
.s2-docs-sidebar .nav .nav {
|
||||
display: none; /* Hide by default, but at >768px, show it */
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.s2-docs-sidebar .nav .nav > li > a {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 30px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.s2-docs-sidebar .nav .nav > li > a:hover,
|
||||
.s2-docs-sidebar .nav .nav > li > a:focus {
|
||||
padding-left: 29px;
|
||||
}
|
||||
.s2-docs-sidebar .nav .nav > .active > a,
|
||||
.s2-docs-sidebar .nav .nav > .active:hover > a,
|
||||
.s2-docs-sidebar .nav .nav > .active:focus > a {
|
||||
padding-left: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Back to top (hidden on mobile) */
|
||||
.back-to-top,
|
||||
.s2-docs-theme-toggle {
|
||||
display: none;
|
||||
padding: 4px 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
.back-to-top:hover,
|
||||
.s2-docs-theme-toggle:hover {
|
||||
color: #428BCA;
|
||||
text-decoration: none;
|
||||
}
|
||||
.s2-docs-theme-toggle {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.back-to-top,
|
||||
.s2-docs-theme-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show and affix the side nav when space allows it */
|
||||
@media (min-width: 992px) {
|
||||
.s2-docs-sidebar .s2-docs-sidenav {
|
||||
border-left: 1px solid #eee;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.s2-docs-sidebar .nav > .active > ul {
|
||||
display: block;
|
||||
}
|
||||
/* Widen the fixed sidebar */
|
||||
.s2-docs-sidebar.affix,
|
||||
.s2-docs-sidebar.affix-bottom {
|
||||
width: 213px;
|
||||
}
|
||||
.s2-docs-sidebar.affix {
|
||||
position: fixed; /* Undo the static from mobile first approach */
|
||||
top: 0px;
|
||||
}
|
||||
.s2-docs-sidebar.affix-bottom {
|
||||
position: absolute; /* Undo the static from mobile first approach */
|
||||
}
|
||||
.s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
|
||||
.s2-docs-sidebar.affix .s2-docs-sidenav {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
/* Widen the fixed sidebar again */
|
||||
.s2-docs-sidebar.affix-bottom,
|
||||
.s2-docs-sidebar.affix {
|
||||
width: 263px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Footer */
|
||||
.s2-docs-footer {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
@ -63,14 +205,18 @@
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
background-color: #428BCA;
|
||||
color: #fff;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.jumbotron h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.btn-outline-inverse {
|
||||
color: #FFF;
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.btn-outline-inverse:hover {
|
||||
@ -101,4 +247,56 @@
|
||||
font-size: 60%;
|
||||
vertical-align: .2em;
|
||||
}
|
||||
|
||||
/* Inline code within headings retain the heading's background-color */
|
||||
h2 code,
|
||||
h3 code,
|
||||
h4 code {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* Back to top (hidden on mobile) */
|
||||
.back-to-top {
|
||||
display: none;
|
||||
padding: 4px 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
.back-to-top:hover {
|
||||
color: #428BCA;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.back-to-top {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.s2-docs-nav {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.s2-docs-nav .navbar-brand {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1[id] {
|
||||
padding-top: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: transparent;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.alert {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
54
docs/_includes/nav/options.html
Normal file
54
docs/_includes/nav/options.html
Normal file
@ -0,0 +1,54 @@
|
||||
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
|
||||
<ul class="nav s2-docs-sidenav">
|
||||
<li>
|
||||
<a href="#core-options">Core Options</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#data-attributes">Declaring configuration in the data-* attributes</a></li>
|
||||
<li><a href="#amd">AMD compatibility</a></li>
|
||||
<li><a href="#core-options-display">Display</a></li>
|
||||
<li><a href="#core-options-results">Results</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#dropdown">Dropdown</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#dropdownParent">Attached to body</a></li>
|
||||
<li><a href="#dropdown-attachContainer">Attached below the container</a></li>
|
||||
<li><a href="#dropdown-search">Search</a></li>
|
||||
<li><a href="#dropdown-select-on-close">Select the highlighted option on close</a></li>
|
||||
<li><a href="#closeOnSelect">Close the dropdown when a result is selected</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#events">Events</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#events-public">Public events</a></li>
|
||||
<li><a href="#events-internal">Internal events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#adapters">Adapters</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#adapters-all">All adapters</a></li>
|
||||
<li><a href="#selectionAdapter">Container (selection)</a></li>
|
||||
<li><a href="#dataAdapter">Data set</a></li>
|
||||
<li><a href="#dropdownAdapter">Dropdown</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#setting-default-options">Setting default options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#backwards-compatibility">Backwards compatibility</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#compat-matcher">Simplified function for matching data objects</a></li>
|
||||
<li><a href="#initSelection">Old initial selections with initSelection</a></li>
|
||||
<li><a href="#query">Querying old data with <code>query</code></a></li>
|
||||
<li><a href="#input-fallback">Compatibility with <code><input type="text" /></code></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="back-to-top" href="#top">
|
||||
Back to top
|
||||
</a>
|
||||
</nav>
|
||||
@ -1,4 +1,4 @@
|
||||
<header class="navbar navbar-static-top" id="top" role="banner">
|
||||
<header class="s2-docs-nav navbar navbar-static-top" id="top" role="banner">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse">
|
||||
|
||||
@ -10,20 +10,52 @@
|
||||
|
||||
{% include footer.html %}
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
addAnchors('.container h1, .container h2, .container h3, .container h4, .container h5');
|
||||
})();
|
||||
(function ($) {
|
||||
'use strict';
|
||||
$(function () {
|
||||
var $window = $(window);
|
||||
var $body = $(document.body);
|
||||
var $sidebar = $('.s2-docs-sidebar');
|
||||
|
||||
$body.scrollspy({
|
||||
target: '.s2-docs-sidebar',
|
||||
offset: 40
|
||||
});
|
||||
|
||||
$window.on('load', function () {
|
||||
$body.scrollspy('refresh');
|
||||
});
|
||||
|
||||
$sidebar.affix({
|
||||
offset: {
|
||||
top: function () {
|
||||
var offsetTop = $sidebar.offset().top;
|
||||
var navOuterHeight = $('.s2-docs-nav').height();
|
||||
|
||||
return (this.top = offsetTop - navOuterHeight);
|
||||
},
|
||||
bottom: function () {
|
||||
return (this.bottom = $('.s2-docs-footer').outerHeight(true));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
addAnchors('.s2-docs-container h1, .s2-docs-container h2, .s2-docs-container h3, .s2-docs-container h4, .s2-docs-container h5');
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-57144786-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
ga('create', 'UA-57144786-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2462
docs/options.html
2462
docs/options.html
File diff suppressed because it is too large
Load Diff
11
docs/vendor/css/prettify.css
vendored
11
docs/vendor/css/prettify.css
vendored
@ -8,14 +8,15 @@
|
||||
.pln { color: #48484c; }
|
||||
|
||||
.prettyprint {
|
||||
padding: 8px;
|
||||
padding: 9px 14px;
|
||||
margin-bottom: 14px;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
}
|
||||
.prettyprint.linenums {
|
||||
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
-webkit-box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
|
||||
-moz-box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
|
||||
box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
|
||||
}
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
@ -23,7 +24,7 @@ ol.linenums {
|
||||
margin: 0;
|
||||
}
|
||||
ol.linenums li {
|
||||
padding-left: 12px;
|
||||
padding-left: 4px;
|
||||
color: #bebec5;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user