Hide ToC when scrolling to bottom.

This commit is contained in:
Cotes Chung 2019-11-27 17:08:54 +08:00
parent 54ed9bcc18
commit bd5e8be215
4 changed files with 28 additions and 24 deletions

View file

@ -69,13 +69,11 @@
{% endfor %}
</div> <!-- div.d-flex.flex-wrap -->
</div> <!-- #access-tags -->
</div> <!-- .access -->
{% if page.layout == 'post' and site.toc and page.toc %}
<div id="toc-wrap" class="pl-0 pr-4">
<div id="toc-wrap" class="pl-0 pr-4 mb-5">
<h3 data-toc-skip class="pl-3 pt-2">
{{- site.data.label.panel.toc -}}
</h3>

View file

@ -75,6 +75,17 @@ layout: default
{% endif %}
</div><!-- div.post-tail -->
</div> <!-- .post -->
</div> <!-- #post-wrap -->
{% include panel.html %}
</div> <!-- .row -->
<div class="row d-flex justify-content-center bg-white">
<div id="post-extend-wrap" class="col-12 col-lg-11 col-xl-8">
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
{% include related-posts.html %}
<div class="post-pager d-flex justify-content-between">
@ -97,18 +108,13 @@ layout: default
</a>
</div> <!-- div.post-pager -->
</div> <!-- .post -->
</div> <!-- #post-wrap -->
{% include panel.html %}
<div id="comment-wrap" class="col-12 col-lg-11 col-xl-8">
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
{% if site.disqus.comments and page.comments %}
{% include disqus.html %}
{% endif %}
</div>
</div>
</div> <!-- .pl-1 pr-1 -->
</div> <!-- wrap -->
</div> <!-- .row -->

View file

@ -352,12 +352,12 @@ body {
-webkit-transition: transform 0.4s ease;
}
#main>div.row>div:nth-child(1),
#main>div.row>div:nth-child(2) {
#main>div.row:first-child>div:nth-child(1),
#main>div.row:first-child>div:nth-child(2) {
margin-top: 3rem; /* same as the height of topbar */
}
#main>div.row>div:first-child {
#main>div.row:first-child>div:first-child {
min-height: calc(100vh - 3rem - 6rem); /* 3rem for topbar, 6rem for footer */
}
@ -806,7 +806,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
@media all and (max-width: 576px) {
#main>div.row>div:first-child {
#main>div.row:first-child>div:first-child {
min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
}
@ -969,8 +969,8 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
top: 0 !important;
}
#main>div.row>div:nth-child(1),
#main>div.row>div:nth-child(2) {
#main>div.row:first-child>div:nth-child(1),
#main>div.row:first-child>div:nth-child(2) {
margin-top: 0;
}

View file

@ -108,33 +108,33 @@
right: 1rem;
}
#comment-wrap {
#post-extend-wrap {
min-height: 2rem;
}
/*
The following resposive design aim to make #comment-wrap margin-right same as pannel's width
The following resposive design aim to make #post-extend-wrap margin-right same as pannel's width
*/
@media all and (min-width: 1201px) {
#comment-wrap {
#post-extend-wrap {
margin-right: 25%;
}
}
@media all and (min-width: 1460px) {
#comment-wrap {
#post-extend-wrap {
margin-right: 300px;
}
}
@media all and (min-width: 1650px) {
#comment-wrap {
#post-extend-wrap {
margin-right: calc((100% - 1150px) / 10 + 300px);
}
}
@media all and (min-width: 1700px) {
#comment-wrap {
#post-extend-wrap {
margin-right: calc((100% - 1150px) / 8 + 300px);
}
}