Setup scrollspy

This commit is contained in:
Emmanouil Konstantinidis 2017-02-01 14:35:45 +00:00
parent b03dfe4a4d
commit 9ae4d4fc61
3 changed files with 19 additions and 27 deletions

View File

@ -1,5 +1,6 @@
body {
overflow-x: hidden;
position: 'relative';
}
/* Toggle Styles */
@ -17,6 +18,8 @@
}
#sidebar-wrapper {
background: #E8EAEF;
z-index: 1000;
position: fixed;
left: 250px;
@ -24,7 +27,6 @@
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #F7F7F9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
@ -65,10 +67,10 @@
text-indent: 30px;
}
.sidebar-nav li a {
display: block;
border: 0;
border-radius: 0;
font-size: 12px;
font-weight: normal;
color: #999999;
@ -77,14 +79,21 @@
padding: 8px 15px;
}
.sidebar-nav li a:hover {
text-decoration: none;
background: rgba(255,255,255,0.9);
border: 0;
.sidebar-nav li.active > a {
background: none;
}
.sidebar-nav li.active > a:hover {
background: white;
}
.sidebar-nav > li.active > .nav > li.active > a,
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
background: white;
border: 0;
border: 0;
text-decoration: none;
}

View File

@ -26,7 +26,7 @@
<script src="https://unpkg.com/coreapi@0.0.18/dist/coreapi.js"></script>
</head>
<body>
<body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
<div id="wrapper">
{% include "rest_framework/docs/sidebar.html" %}
@ -76,8 +76,6 @@
const doc = codec.decode(schema, {preloaded: true})
const client = new coreapi.Client(null, null, csrf)
$('body').scrollspy({ target: '#toc' })
// Language Control
$('.language-control li a').click(function (event) {
event.preventDefault();

View File

@ -15,33 +15,18 @@
</div>
</div>
<!-- <ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>shell</span> <b class="caret"></b></a>
<ul class="dropdown-menu language-control">
<li class="active"><a href="#" data-language="shell">shell</a></li>
<li><a href="#" data-language="javascript">javascript</a></li>
<li><a href="#" data-language="python">python</a></li>
</ul>
</li>
</ul> -->
<ul class="nav nav-pills nav-stacked sidebar-nav">
<ul id="sidebar-nav" class="nav nav-pills nav-stacked sidebar-nav">
{% for section_key, section in document.data.items %}
<li>
<li role="navigation">
<a href="#{{ section_key }}">{{ section_key }}</a>
<!-- TOC -->
<ul class="nav nav-pills nav-stacked">
{% for link_key, link in section.links.items %}
<li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
<li role="navigation"><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
<!-- /#sidebar-wrapper -->