GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 15:05:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Reorganize search button DOM hierarchy

Browse Source
This commit is contained in:
ndrooo 2024-08-09 18:58:30 -04:00
parent 7716dc86c8
commit 3f2e2a1ede
2 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
quartz/components/Search.tsx
View File

@ -18,10 +18,9 @@ export default ((userOpts?: Partial<SearchOptions>) => {
const opts = { ...defaultOptions, ...userOpts } const opts = { ...defaultOptions, ...userOpts }
const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
return ( return (
<button class={classNames(displayClass, "search")} id="search-button"> <div class={classNames(displayClass, "search")}>
<div id="search-icon"> <button class="search-button" id="search-button">
<p>{i18n(cfg.locale).components.search.title}</p> <p>{i18n(cfg.locale).components.search.title}</p>
<div></div>
<svg <svg
role="img" role="img"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -33,7 +32,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
<circle cx="8" cy="8" r="7" /> <circle cx="8" cy="8" r="7" />
</g> </g>
</svg> </svg>
</div> </button>
<div id="search-container"> <div id="search-container">
<div id="search-space"> <div id="search-space">
<input <input
@ -47,7 +46,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
<div id="search-layout" data-preview={opts.enablePreview}></div> <div id="search-layout" data-preview={opts.enablePreview}></div>
</div> </div>
</div> </div>
</button> </div>
) )
} }

19
quartz/components/styles/search.scss
View File

@ -1,28 +1,25 @@
@use "../../styles/variables.scss" as *; @use "../../styles/variables.scss" as *;
.search { .search {
border: none;
background: none;
font-family: inherit;
font-size: inherit;
min-width: fit-content; min-width: fit-content;
max-width: 14rem; max-width: 14rem;
padding: 0;
flex-grow: 0.3; flex-grow: 0.3;
text-align: inherit;
& > #search-icon { & > .search-button {
background-color: var(--lightgray); background-color: var(--lightgray);
border: none;
border-radius: 4px; border-radius: 4px;
font-family: inherit;
font-size: inherit;
height: 2rem; height: 2rem;
padding: 0;
display: flex; display: flex;
align-items: center; align-items: center;
text-align: inherit;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
width: 100%;
& > div { justify-content: space-between;
flex-grow: 1;
}
& > p { & > p {
display: inline; display: inline;