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

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

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