3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-09 07:07:25 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): adjust padding for custom search box location (#4856)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-05-28 11:01:26 +03:00 • committed by GitHub
parent 5bc0209f56
commit a9343a1916
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
View file

@ -8,16 +8,11 @@
import React from 'react';
import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
import SearchBar from '@theme/SearchBar';
import styles from './styles.module.css';
export default function SearchNavbarItem({mobile}: Props): JSX.Element | null {
if (mobile) {
return null;
}
return (
<div className={styles.searchWrapper}>
<SearchBar />
</div>
);
return <SearchBar />;
}

57
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file

@ -16,6 +16,7 @@ import useSearchQuery from '@theme/hooks/useSearchQuery';
import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
import {translate} from '@docusaurus/Translate';
import styles from './styles.module.css';
let DocSearchModal = null;
@ -164,34 +165,36 @@ function DocSearch({contextualSearch, ...props}) {
/>
</Head>
<DocSearchButton
onTouchStart={importDocSearchModalIfNeeded}
onFocus={importDocSearchModalIfNeeded}
onMouseOver={importDocSearchModalIfNeeded}
onClick={onOpen}
ref={searchButtonRef}
translations={{
buttonText: translatedSearchLabel,
buttonAriaLabel: translatedSearchLabel,
}}
/>
<div className={styles.searchBox}>
<DocSearchButton
onTouchStart={importDocSearchModalIfNeeded}
onFocus={importDocSearchModalIfNeeded}
onMouseOver={importDocSearchModalIfNeeded}
onClick={onOpen}
ref={searchButtonRef}
translations={{
buttonText: translatedSearchLabel,
buttonAriaLabel: translatedSearchLabel,
}}
/>
{isOpen &&
createPortal(
<DocSearchModal
onClose={onClose}
initialScrollY={window.scrollY}
initialQuery={initialQuery}
navigator={navigator}
transformItems={transformItems}
hitComponent={Hit}
resultsFooterComponent={resultsFooterComponent}
transformSearchClient={transformSearchClient}
{...props}
searchParameters={searchParameters}
/>,
searchContainer.current,
)}
{isOpen &&
createPortal(
<DocSearchModal
onClose={onClose}
initialScrollY={window.scrosllY}
initialQuery={initialQuery}
navigator={navigator}
transformItems={transformItems}
hitComponent={Hit}
resultsFooterComponent={resultsFooterComponent}
transformSearchClient={transformSearchClient}
{...props}
searchParameters={searchParameters}
/>,
searchContainer.current,
)}
</div>
</>
);
}

1
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
View file

@ -11,6 +11,7 @@
}
.DocSearch-Button {
margin: 0;
transition: all var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
}

9
packages/docusaurus-theme-classic/src/theme/NavbarItem/styles.module.css → packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css
View file

@ -6,8 +6,15 @@
*/
@media (max-width: 996px) {
.searchWrapper {
.searchBox {
position: absolute;
right: var(--ifm-navbar-padding-horizontal);
}
}
@media (min-width: 997px) {
.searchBox {
padding: var(--ifm-navbar-item-padding-vertical)
var(--ifm-navbar-item-padding-horizontal);
}
}