depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update toc styles to make toc menu always accessible without scrolling

Browse source
This commit is contained in:
Wu Cheng-Han 2016-08-14 11:24:04 +08:00
parent 8d24d9e97f
commit e08152ed03
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
public/css/extra.css
View file

@ -130,11 +130,16 @@
padding-right: 10px;
max-width: 45vw;
width: 25vw;
max-height: 65vh;
max-height: 70vh;
overflow: auto;
text-align: inherit;
}
.ui-toc-dropdown > .toc {
max-height: calc(70vh - 100px);
overflow: auto;
}
.ui-toc-dropdown[dir='rtl'] .nav {
padding-right: 0;
letter-spacing: 0.0029em;

4
public/js/extra.js
View file

@ -595,6 +595,7 @@ function generateToc(id) {
});
if (target.text() == 'undefined')
target.html('');
var tocMenu = $('<div class="toc-menu"></div');
var toggle = $('<a class="expand-toggle" href="#">Expand all</a>');
var backtotop = $('<a class="back-to-top" href="#">Back to top</a>');
var gotobottom = $('<a class="go-to-bottom" href="#">Go to bottom</a>');
@ -619,7 +620,8 @@ function generateToc(id) {
scrollToBottom();
removeHash();
});
target.append(toggle).append(backtotop).append(gotobottom);
tocMenu.append(toggle).append(backtotop).append(gotobottom);
target.append(tocMenu);
}
//smooth all hash trigger scrolling