vdoc: fix scrollbar on mobile (#7614)

pull/7650/head
Daniel Däschle 2020-12-27 15:14:16 +01:00 committed by GitHub
parent 6f194f2fa9
commit 5c4c5042b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 11 deletions

View File

@ -79,7 +79,9 @@ body {
} }
#page { #page {
height: 100%; height: 100%;
overflow-y: scroll; padding-top: 56px;
box-sizing: border-box;
overflow: hidden;
} }
/** Reset for menus */ /** Reset for menus */
@ -112,8 +114,8 @@ body {
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 8px; width: 4px;
height: 8px; height: 4px;
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
background: transparent; background: transparent;
@ -256,10 +258,13 @@ body {
} }
/* Main content */ /* Main content */
.doc-scrollview {
height: 100%;
overflow-y: scroll;
}
.doc-container { .doc-container {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
margin-top: 56px;
} }
.doc-content { .doc-content {
display: flex; display: flex;
@ -505,6 +510,13 @@ pre {
/* Medium screen and up */ /* Medium screen and up */
@media (min-width: 768px) { @media (min-width: 768px) {
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-thumb {
border: 3px solid transparent;
}
.doc-container { .doc-container {
flex-direction: row; flex-direction: row;
} }
@ -549,6 +561,9 @@ pre {
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
#page {
padding-top: 0;
}
.doc-nav { .doc-nav {
width: 300px; width: 300px;
} }
@ -584,7 +599,6 @@ pre {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.doc-container { .doc-container {
margin-top: 0;
margin-left: 300px; margin-left: 300px;
} }
.doc-node { .doc-node {

View File

@ -81,14 +81,16 @@ const (
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="doc-container"> <div class="doc-scrollview">
<div class="doc-content"> <div class="doc-container">
{{ contents }} <div class="doc-content">
<div class="footer"> {{ contents }}
{{ footer_content }} <div class="footer">
{{ footer_content }}
</div>
</div> </div>
{{ right_content }}
</div> </div>
{{ right_content }}
</div> </div>
</div> </div>
{{ footer_assets }} {{ footer_assets }}