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

refactor(v2): improve markup and styling on search page (#4919)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-06-09 14:30:01 +03:00 • committed by GitHub
parent f71e83450f
commit d0bbdd0535
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

72
packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
View file

@ -375,16 +375,19 @@ function SearchPage() {
)}
</form>
<div className={clsx('row', 'margin-vert--sm')}>
<div className="row">
<div className={clsx('col', 'col--8', styles.searchResultsColumn)}>
{!!searchResultState.totalResults && (
<strong>
{documentsFoundPlural(searchResultState.totalResults)}
</strong>
)}
{!!searchResultState.totalResults &&
documentsFoundPlural(searchResultState.totalResults)}
</div>
<div className={clsx('col', 'col--4', styles.searchLogoColumn)}>
<div
className={clsx(
'col',
'col--4',
'text--right',
styles.searchLogoColumn,
)}>
<a
target="_blank"
rel="noopener noreferrer"
@ -394,10 +397,7 @@ function SearchPage() {
message: 'Search by Algolia',
description: 'The ARIA label for Algolia mention',
})}>
<svg
viewBox="0 0 168 24"
className={styles.algoliaLogo}
xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 168 24" className={styles.algoliaLogo}>
<g fill="none">
<path
className={styles.algoliaLogoPathFill}
@ -418,34 +418,32 @@ function SearchPage() {
</div>
{searchResultState.items.length > 0 ? (
<section>
<main>
{searchResultState.items.map(
({title, url, summary, breadcrumbs}, i) => (
<article key={i} className={styles.searchResultItem}>
<Link
to={url}
className={styles.searchResultItemHeading}
dangerouslySetInnerHTML={{__html: title}}
/>
<h2 className={styles.searchResultItemHeading}>
<Link to={url} dangerouslySetInnerHTML={{__html: title}} />
</h2>
{breadcrumbs.length > 0 && (
<span className={styles.searchResultItemPath}>
{breadcrumbs.map((html, index) => (
<React.Fragment key={index}>
{index !== 0 && (
<span
className={styles.searchResultItemPathSeparator}>
›
</span>
)}
<span
<nav aria-label="breadcrumbs">
<ul
className={clsx(
'breadcrumbs',
styles.searchResultItemPath,
)}>
{breadcrumbs.map((html, index) => (
<li
key={index}
className="breadcrumbs__item"
// Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{__html: html}}
/>
</React.Fragment>
))}
</span>
))}
</ul>
</nav>
)}
{summary && (
@ -459,7 +457,7 @@ function SearchPage() {
</article>
),
)}
</section>
</main>
) : (
[
searchQuery && !searchResultState.loading && (
@ -479,13 +477,11 @@ function SearchPage() {
{searchResultState.hasMore && (
<div className={styles.loader} ref={setLoaderRef}>
<span>
<Translate
id="theme.SearchPage.fetchingNewResults"
description="The paragraph for fetching new search results">
Fetching new results...
</Translate>
</span>
<Translate
id="theme.SearchPage.fetchingNewResults"
description="The paragraph for fetching new search results">
Fetching new results...
</Translate>
</div>
)}
</div>

41
packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
View file

@ -8,23 +8,20 @@
.searchQueryInput,
.searchVersionInput {
border-radius: var(--ifm-global-radius);
border: 0;
font-size: var(--ifm-font-size-base);
font-family: var(--ifm-font-family-base);
border: 2px solid var(--ifm-toc-border-color);
font: var(--ifm-font-size-base) var(--ifm-font-family-base);
padding: 0.8rem;
width: 100%;
background: var(--docsearch-searchbox-focus-background);
color: var(--docsearch-text-color);
margin-bottom: 1rem;
box-shadow: inset 0 0 0 2px var(--ifm-toc-border-color);
transition: var(--ifm-transition-fast) ease box-shadow;
margin-bottom: 0.5rem;
transition: border var(--ifm-transition-fast) ease;
}
.searchQueryInput:active,
.searchQueryInput:focus,
.searchVersionInput:active,
.searchVersionInput:focus {
box-shadow: var(--docsearch-searchbox-shadow);
border-color: var(--docsearch-primary-color);
outline: none;
}
.searchQueryInput::placeholder {
@ -33,10 +30,7 @@
.searchResultsColumn {
font-size: 0.9rem;
}
.searchLogoColumn {
text-align: right;
font-weight: bold;
}
.algoliaLogo {
@ -53,20 +47,14 @@
}
.searchResultItemHeading {
font-size: var(--ifm-h2-font-size);
font-weight: 400;
margin-bottom: 0;
}
.searchResultItemPath {
font-size: 0.8rem;
color: var(--ifm-color-content-secondary);
display: block;
}
.searchResultItemPathSeparator {
margin: 0 0.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--ifm-color-emphasis-400);
--ifm-breadcrumb-separator-size-multiplier: 1;
}
.searchResultItemSummary {
@ -83,16 +71,11 @@
max-width: 40% !important;
}
.algoliaLogo {
width: 100%;
}
.searchResultsColumn {
max-width: 60% !important;
}
.searchLogoColumn {
overflow: hidden;
max-width: 40% !important;
padding-left: 0 !important;
}
@ -110,11 +93,9 @@
}
.loadingSpinner {
pointer-events: none;
width: 3rem;
height: 3rem;
border: 0.4em solid transparent;
border-color: #eee;
border: 0.4em solid #eee;
border-top-color: var(--ifm-color-primary);
border-radius: 50%;
animation: loadingspin 1s linear infinite;