mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Fixed sidebar jitter by switching to sticky positioning
This commit is contained in:
parent
9d89ad337d
commit
7eb6cb6536
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
material/assets/javascripts/bundle.37a8e348.min.js
vendored
Normal file
2
material/assets/javascripts/bundle.37a8e348.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/bundle.37a8e348.min.js.map
Normal file
1
material/assets/javascripts/bundle.37a8e348.min.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,12 +1,12 @@
|
||||
{
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.0f38e514.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.0f38e514.min.js.map",
|
||||
"assets/javascripts/vendor.js": "assets/javascripts/vendor.d7126665.min.js",
|
||||
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d7126665.min.js.map",
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.37a8e348.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.37a8e348.min.js.map",
|
||||
"assets/javascripts/vendor.js": "assets/javascripts/vendor.d1e549c9.min.js",
|
||||
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d1e549c9.min.js.map",
|
||||
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.58d22e8e.min.js",
|
||||
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.58d22e8e.min.js.map",
|
||||
"assets/stylesheets/main.css": "assets/stylesheets/main.97f5b1b6.min.css",
|
||||
"assets/stylesheets/main.css.map": "assets/stylesheets/main.97f5b1b6.min.css.map",
|
||||
"assets/stylesheets/main.css": "assets/stylesheets/main.91a7bba4.min.css",
|
||||
"assets/stylesheets/main.css.map": "assets/stylesheets/main.91a7bba4.min.css.map",
|
||||
"assets/stylesheets/palette.css": "assets/stylesheets/palette.a4b61a0c.min.css",
|
||||
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.a4b61a0c.min.css.map"
|
||||
}
|
3
material/assets/stylesheets/main.91a7bba4.min.css
vendored
Normal file
3
material/assets/stylesheets/main.91a7bba4.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/main.91a7bba4.min.css.map
Normal file
1
material/assets/stylesheets/main.91a7bba4.min.css.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -41,7 +41,7 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.97f5b1b6.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.91a7bba4.min.css' | url }}">
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a4b61a0c.min.css' | url }}">
|
||||
{% endif %}
|
||||
@ -178,8 +178,8 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/vendor.d7126665.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.0f38e514.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/vendor.d1e549c9.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.37a8e348.min.js' | url }}"></script>
|
||||
{%- set translations = {} -%}
|
||||
{%- for key in [
|
||||
"clipboard.copy",
|
||||
|
@ -43,10 +43,8 @@ import { Main } from "../../../main"
|
||||
import { Sidebar } from "../_"
|
||||
import {
|
||||
resetSidebarHeight,
|
||||
resetSidebarLock,
|
||||
resetSidebarOffset,
|
||||
setSidebarHeight,
|
||||
setSidebarLock,
|
||||
setSidebarOffset
|
||||
} from "../set"
|
||||
|
||||
@ -131,7 +129,6 @@ export function applySidebar(
|
||||
withLatestFrom(header$),
|
||||
tap(([{ height, lock }, { height: offset }]) => {
|
||||
setSidebarHeight(el, height)
|
||||
setSidebarLock(el, lock)
|
||||
|
||||
/* Set offset in locked state depending on header height */
|
||||
if (lock)
|
||||
@ -147,7 +144,6 @@ export function applySidebar(
|
||||
finalize(() => {
|
||||
resetSidebarOffset(el)
|
||||
resetSidebarHeight(el)
|
||||
resetSidebarLock(el)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
@ -71,28 +71,3 @@ export function resetSidebarHeight(
|
||||
): void {
|
||||
el.style.height = ""
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Set sidebar lock
|
||||
*
|
||||
* @param el - Sidebar element
|
||||
* @param value - Whether the sidebar is locked
|
||||
*/
|
||||
export function setSidebarLock(
|
||||
el: HTMLElement, value: boolean
|
||||
): void {
|
||||
el.setAttribute("data-md-state", value ? "lock" : "")
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset sidebar lock
|
||||
*
|
||||
* @param el - Sidebar element
|
||||
*/
|
||||
export function resetSidebarLock(
|
||||
el: HTMLElement
|
||||
): void {
|
||||
el.removeAttribute("data-md-state")
|
||||
}
|
||||
|
@ -122,6 +122,7 @@ hr {
|
||||
|
||||
// Increase top spacing of content area to give typography more room
|
||||
&__inner {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-top: px2rem(24px + 6px);
|
||||
}
|
||||
|
@ -26,27 +26,7 @@
|
||||
|
||||
// Content container
|
||||
.md-content {
|
||||
|
||||
// [tablet landscape +]: Add space for table of contents
|
||||
@include break-from-device(tablet landscape) {
|
||||
margin-right: px2rem(242px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: initial;
|
||||
margin-left: px2rem(242px);
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Add space for table of contents
|
||||
@include break-from-device(screen) {
|
||||
margin-left: px2rem(242px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(242px);
|
||||
}
|
||||
}
|
||||
flex: 1;
|
||||
|
||||
// Define spacing
|
||||
&__inner {
|
||||
|
@ -34,7 +34,8 @@ $md-toggle__drawer--checked:
|
||||
|
||||
// Sidebar container
|
||||
.md-sidebar {
|
||||
position: absolute;
|
||||
position: sticky;
|
||||
top: px2rem(48px);
|
||||
width: px2rem(242px);
|
||||
padding: px2rem(24px) 0;
|
||||
overflow: hidden;
|
||||
@ -44,12 +45,6 @@ $md-toggle__drawer--checked:
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Lock sidebar to container height (account for fixed header)
|
||||
&[data-md-state="lock"] {
|
||||
position: fixed;
|
||||
top: px2rem(48px);
|
||||
}
|
||||
|
||||
// [tablet -]: Convert navigation to drawer
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
@ -95,34 +90,17 @@ $md-toggle__drawer--checked:
|
||||
// Secondary sidebar with table of contents
|
||||
&--secondary {
|
||||
display: none;
|
||||
order: 2;
|
||||
|
||||
// [tablet landscape +]: Show table of contents next to body copy
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: block;
|
||||
margin-left: calc(100% - #{px2rem(242px)});
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: calc(100% - #{px2rem(242px)});
|
||||
margin-left: initial;
|
||||
}
|
||||
|
||||
// Ensure smooth scrolling on iOS
|
||||
.md-sidebar__scrollwrap {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Limit to grid
|
||||
@include break-from-device(screen) {
|
||||
margin-left: px2rem((1220 - 242) * 1px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem((1220 - 242) * 1px);
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for scrolling on overflow
|
||||
|
Loading…
Reference in New Issue
Block a user