nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(DocSearch): extend dropdown to fill the viewport height (#72)

Browse source
This commit is contained in:
Sylvain Pace 2020-09-02 08:27:08 +02:00 committed by François Chalifour
parent 4a55755ef0
commit a8fb06305a
2 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/docsearch-css/src/modal.css
View file

@ -566,6 +566,7 @@ svg.DocSearch-Hit-Select-Icon {
.DocSearch-Container {
height: 100vh;
height: -webkit-fill-available;
height: calc(var(--docsearch-vh, 1vh) * 100);
position: absolute;
}
@ -586,11 +587,19 @@ svg.DocSearch-Hit-Select-Icon {
box-shadow: none;
height: 100vh;
height: -webkit-fill-available;
height: calc(var(--docsearch-vh, 1vh) * 100);
margin: 0;
max-width: 100%;
width: 100%;
}
.DocSearch-Dropdown {
max-height: calc(
var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) -
var(--docsearch-spacing) - var(--docsearch-footer-height)
);
}
.DocSearch-Cancel {
appearance: none;
background: none;

19
packages/docsearch-react/src/DocSearchModal.tsx
View file

@ -51,6 +51,7 @@ export function DocSearchModal({
} as any);
const containerRef = React.useRef<HTMLDivElement | null>(null);
const modalRef = React.useRef<HTMLDivElement | null>(null);
const searchBoxRef = React.useRef<HTMLDivElement | null>(null);
const dropdownRef = React.useRef<HTMLDivElement | null>(null);
const inputRef = React.useRef<HTMLInputElement | null>(null);
@ -328,6 +329,22 @@ export function DocSearchModal({
}
}, [initialQuery, refresh]);
// We rely on a CSS property to set the modal height to the full viewport height
// because all mobile browsers don't compute their height the same way.
// See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
React.useEffect(() => {
const setFullViewportHeight = () => {
if (modalRef.current) {
const vh = window.innerHeight * 0.01;
modalRef.current.style.setProperty('--docsearch-vh', `${vh}px`);
}
};
setFullViewportHeight();
window.addEventListener('resize', setFullViewportHeight);
return () => window.removeEventListener('resize', setFullViewportHeight);
}, []);
return (
<div
ref={containerRef}
@ -348,7 +365,7 @@ export function DocSearchModal({
}
}}
>
<div className="DocSearch-Modal">
<div className="DocSearch-Modal" ref={modalRef}>
<header className="DocSearch-SearchBar" ref={searchBoxRef}>
<SearchBox
{...autocomplete}