status-im
/
codimd
mirror of https://github.com/status-im/codimd.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update toc styles to make toc menu always accessible without scrolling

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; padding-right: 10px;
max-width: 45vw; max-width: 45vw;
width: 25vw; width: 25vw;
max-height: 65vh; max-height: 70vh;
overflow: auto; overflow: auto;
text-align: inherit; text-align: inherit;
} }
.ui-toc-dropdown > .toc {
max-height: calc(70vh - 100px);
overflow: auto;
}
.ui-toc-dropdown[dir='rtl'] .nav { .ui-toc-dropdown[dir='rtl'] .nav {
padding-right: 0; padding-right: 0;
letter-spacing: 0.0029em; letter-spacing: 0.0029em;

4
public/js/extra.js
View File

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