1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-23 23:21:00 +01:00

Fixed search not being shown when using header autohiding

This commit is contained in:
squidfunk 2021-01-24 11:51:10 +01:00
parent b5e7679ca6
commit be1f9c113e
22 changed files with 90 additions and 50 deletions

View File

@ -45,7 +45,7 @@ mkdocs-material-6.2.0 (2020-12-22)
* Added support for navigation sections
* Added support for navigation expansion
* Added support for integrating table of contents into navigation
* Added support for auto-hiding header on scroll
* Added support for autohiding header on scroll
* Added support for hiding navigation and table of contents per page
* Added support for arbitrary items in navigation tabs
* Refactored navigation tabs to simplify grouping behavior

View File

@ -35,7 +35,7 @@ template: overrides/main.html
- Added support for navigation sections
- Added support for navigation expansion
- Added support for integrating table of contents into navigation
- Added support for auto-hiding header on scroll
- Added support for autohiding header on scroll
- Added support for hiding navigation and table of contents per page
- Added support for arbitrary items in navigation tabs
- Refactored navigation tabs to simplify grouping behavior

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

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

View File

@ -1,14 +1,14 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.83e5331e.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.83e5331e.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.93c04032.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.93c04032.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.596b5164.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.596b5164.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.5f54cce3.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.5f54cce3.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.8c7e0a7e.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.8c7e0a7e.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.15aa0b43.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.15aa0b43.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.46d791ea.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.46d791ea.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.75751829.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.75751829.min.css.map"
"assets/stylesheets/main.css": "assets/stylesheets/main.e67d4e15.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.e67d4e15.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.fc79678c.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.fc79678c.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.3e379585.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.3e379585.min.css.map"
}

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

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,3 @@
@-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.md-typeset figure>p+figcaption{margin-top:-1.2rem}.md-typeset .twitter{color:#00acee}.md-typeset .tx-video{width:auto}.md-typeset .tx-video__inner{position:relative;width:100%;height:0;padding-bottom:56.138%}.md-typeset .tx-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border:none}.md-typeset .tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-insiders-button{font-weight:400}.md-typeset .tx-insiders-count{font-weight:700}.md-typeset .tx-insiders-list{margin:2em 0;overflow:auto}.md-typeset .tx-insiders-list__item{display:block;float:left;width:3rem;height:3rem;margin:.2rem;overflow:hidden;border-radius:100%;transform:scale(1);transition:color 125ms,transform 125ms}.md-typeset .tx-insiders-list__item img{display:block;width:100%;height:auto;-webkit-filter:grayscale(100%);filter:grayscale(100%);transition:-webkit-filter 125ms;transition:filter 125ms;transition:filter 125ms, -webkit-filter 125ms}.md-typeset .tx-insiders-list__item:focus,.md-typeset .tx-insiders-list__item:hover{transform:scale(1.1)}.md-typeset .tx-insiders-list__item:focus img,.md-typeset .tx-insiders-list__item:hover img{-webkit-filter:grayscale(0%);filter:grayscale(0%)}.md-typeset .tx-insiders-list__item--private{color:var(--md-default-fg-color--lighter);font-weight:700;font-size:1.2rem;line-height:3rem;text-align:center;background:var(--md-default-fg-color--lightest)}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:focus,.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns ol,.md-typeset .tx-columns ul{-moz-columns:2;columns:2}@media screen and (max-width: 29.9375em){.md-typeset .tx-columns ol,.md-typeset .tx-columns ul{-moz-columns:initial;columns:initial}}.md-typeset .tx-columns li{-moz-column-break-inside:avoid;break-inside:avoid}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
/*# sourceMappingURL=overrides.46d791ea.min.css.map*/
/*# sourceMappingURL=overrides.fc79678c.min.css.map*/

View File

@ -39,10 +39,10 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.15aa0b43.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.e67d4e15.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.75751829.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3e379585.min.css' | url }}">
{% if palette.primary %}
{% import "partials/palette.html" as map %}
{% set primary = map.primary(
@ -184,8 +184,8 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.93c04032.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.83e5331e.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/vendor.5f54cce3.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.596b5164.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

View File

@ -22,7 +22,7 @@
<meta name="twitter:title" content="{{ title }}">
<meta name="twitter:description" content="{{ config.site_description }}">
<meta name="twitter:image" content="{{ image }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.46d791ea.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.fc79678c.min.css' | url }}">
{% endblock %}
{% block announce %}
<a href="https://twitter.com/squidfunk">

View File

@ -48,7 +48,11 @@ import {
catchError,
map,
bufferCount,
distinctUntilKeyChanged
distinctUntilKeyChanged,
mapTo,
startWith,
combineLatestWith,
distinctUntilChanged
} from "rxjs/operators"
import {
@ -413,26 +417,58 @@ export function initialize(config: unknown) {
// opportunities for refactoring, but we'll address them when this feature
// got some feedback from the community.
if (config.features.includes("header.autohide")) {
viewport$
// Threshold for header-hiding - always show if scrolled less than 400px.
// Also, search is not allowed to be active. Maybe make this dynamic.
const threshold$ = viewport$
.pipe(
map(({ offset }) => offset.y > 400),
combineLatestWith(watchToggle("search")),
map(([threshold, search]) => threshold && !search),
distinctUntilChanged()
)
// Scroll direction (true = down, false = up) + inflection point
const direction$ = viewport$
.pipe(
map(({ offset }) => offset.y),
bufferCount(2, 1),
map(([a, b]) => [a < b, b] as const),
distinctUntilKeyChanged(0),
switchMap(([direction, y0]) => viewport$
.pipe(
map(({ offset }) => offset.y),
filter(y1 => y1 > 400),
map(y1 => Math.abs(y0 - y1)),
filter(y => y > 100),
map(() => direction),
take(1)
)
)
distinctUntilKeyChanged(0)
)
.subscribe(hide => {
const header = getElement("[data-md-component=header]")
header?.setAttribute("data-md-state", hide ? "hidden": "shadow")
// When the threshold is exceeded, and the search is not active, subscribe
// to the direction observable (always do a new subscription), and track
// scroll progress.
const hide$ = threshold$
.pipe(
switchMap(active => !active
? of(false)
: direction$
.pipe(
combineLatestWith(viewport$),
filter(([[, y], { offset }]) => Math.abs(y - offset.y) > 100),
map(([[direction]]) => direction)
)
),
distinctUntilChanged()
)
// Set header state depending on main state. There's still some possibility
// for improvement, as the page seems to jump when focusing the unfocused
// search. This would mean we would need to delay the focus/change event
// until the header is focussed, which we need to address in a refactoring.
hide$
.pipe(
combineLatestWith(main$),
map(([hide, main]) => main.active
? hide ? "hidden" : "shadow"
: ""
),
combineLatestWith(useComponent("header"))
)
.subscribe(([state, el]) => {
el.setAttribute("data-md-state", state)
})
}

View File

@ -104,7 +104,11 @@
// Show overlay when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
width: 100%;
height: 100%;
// Hack: when the header is translated upon scrolling, a new layer is
// induced, which means that the height will now refer to the height of
// the header, albeit positioning is fixed. This should be mitigated
// in all cases when setting the height to 2x the viewport.
height: 200vh;
opacity: 1;
transition:
width 0ms,