phoedos/pmd
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive floating table-of-contents to documentation website

Browse Source
This commit is contained in:
jeickhoff
2022-02-23 19:21:02 +01:00
parent a6e55845f7
commit a6ac757649
4 changed files with 105 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/_layouts/default.html
View File

@ -78,26 +78,37 @@
<div id="topbar-content-offset">
{% include topnav.html %}
<!-- Page Content -->
<div class="container">
<div class="col-lg-12">&nbsp;</div>
<!-- Content Row -->
<div class="row">
{% assign content_col_size = "col-md-12" %}
{% unless page.hide_sidebar %}
<!-- Sidebar Column -->
<div class="col-md-3" id="tg-sb-sidebar">
{% include sidebar.html %}
</div>
{% assign content_col_size = "col-md-9" %}
{% endunless %}
<div class="container-toc-wrapper">
<div class="container">
<div class="col-lg-12">&nbsp;</div>
<!-- Content Row -->
<div class="row">
{% assign content_col_size = "col-md-12" %}
{% unless page.hide_sidebar %}
<!-- Sidebar Column -->
<div class="col-md-3" id="tg-sb-sidebar">
{% include sidebar.html %}
</div>
{% assign content_col_size = "col-md-9" %}
{% endunless %}
<!-- Content Column -->
<div class="{{content_col_size}}" id="tg-sb-content">
{{content}}
<!-- Content Column -->
<div class="{{content_col_size}}" id="tg-sb-content">
{{content}}
</div>
<!-- /.row -->
</div>
<!-- /.row -->
<!-- /.container -->
</div>
<!-- /.container -->
{% unless page.toc == false %}
<!-- Sticky TOC column -->
<div class="toc-col">
{% include toc.html %}
</div>
{% endunless %}
<!-- /.toc-container-wrapper -->
</div>
</div>
</body>

4
docs/_layouts/page.html
View File

@ -34,9 +34,7 @@ layout: default
<div class="summary">{{page.summary}}</div>
{% endif %}
{% unless page.toc == false %}
{% include toc.html %}
{% endunless %}
<div id="inline-toc"><!-- empty, move TOC here when screen size too small --></div>
{% if site.github_editme_path %}

62
docs/css/customstyles.css
View File

@ -1,6 +1,68 @@
body {
font-size:15px;
}
@media (max-width: 1349px) {
/* Small screen, inline TOC*/
.container-toc-wrapper {
display: block;
}
div.toc-col {
display: none;
}
div#toc{
margin-top: 15px;
margin-left: 0px;
margin-right: 0px;
}
.container {
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1350px) {
/* Medium screens, keep sticky TOC but remove justify-content*/
div#toc{
margin-top: 60px;
margin-left: -15px;
margin-right: 15px;
}
.container {
margin-left: 15px;
margin-right: 15px;
}
.container-toc-wrapper {
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1600px) {
/* Sticky TOC functionality */
div#toc{
margin-top: 60px;
margin-left: -15px;
margin-right: 15px;
}
.container {
margin-left: 15px;
margin-right: 15px;
}
.container-toc-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
}
.bs-callout {
padding: 20px;

15
docs/js/customscripts.js
View File

@ -1,6 +1,14 @@
$('#mysidebar').height($(".nav").height());
// Detect small devices and move the TOC in line
function moveToc(){
if(window.innerWidth < 1350){
$( "#toc" ).detach().appendTo("#inline-toc").removeClass("affix");
} else {
$( "#toc" ).detach().appendTo(".toc-col").addClass("affix");
}
}
$( document ).ready(function() {
@ -8,7 +16,7 @@ $( document ).ready(function() {
// position as your scroll. if you have a lot of nav items, this height may not work for you.
var h = $(window).height();
//console.log (h);
if (h > 800) {
if (h > 600) {
$( "#mysidebar" ).attr("class", "nav affix");
}
// activate tooltips. although this is a bootstrap js function, it must be activated this way in your theme.
@ -20,6 +28,8 @@ $( document ).ready(function() {
* AnchorJS
*/
anchors.add('h2,h3,h4,h5');
// Check if TOC needs to be moved on page load
moveToc();
});
@ -53,3 +63,6 @@ $(function() {
}
});
});
// Check if TOC needs to be moved on window resizing
$(window).resize(function () {moveToc();});