feat(explorer): improve accessibility and consistency (+ bug fix) (#488)
* feat(consistency): use `all: unset` on button * style: improve accessibility and consistency for explorer * fix: localStorage bug with folder name changes * chore: bump quartz version
This commit is contained in:
parent
9738b95e1b
commit
31d6601a0d
@ -2,7 +2,7 @@
|
|||||||
"name": "@jackyzha0/quartz",
|
"name": "@jackyzha0/quartz",
|
||||||
"description": "🌱 publish your digital garden and notes as a website",
|
"description": "🌱 publish your digital garden and notes as a website",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "4.0.11",
|
"version": "4.1.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"author": "jackyzha0 <j.zhao2k19@gmail.com>",
|
"author": "jackyzha0 <j.zhao2k19@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
@ -79,7 +79,7 @@ export default ((userOpts?: Partial<Options>) => {
|
|||||||
data-savestate={opts.useSavedState}
|
data-savestate={opts.useSavedState}
|
||||||
data-tree={jsonTree}
|
data-tree={jsonTree}
|
||||||
>
|
>
|
||||||
<h3>{opts.title}</h3>
|
<h1>{opts.title}</h1>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="14"
|
width="14"
|
||||||
@ -98,7 +98,7 @@ export default ((userOpts?: Partial<Options>) => {
|
|||||||
<div id="explorer-content">
|
<div id="explorer-content">
|
||||||
<ul class="overflow" id="explorer-ul">
|
<ul class="overflow" id="explorer-ul">
|
||||||
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
|
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
|
||||||
<div id="explorer-end" />
|
<li id="explorer-end" />
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -145,7 +145,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<li>
|
||||||
{node.file ? (
|
{node.file ? (
|
||||||
// Single file node
|
// Single file node
|
||||||
<li key={node.file.slug}>
|
<li key={node.file.slug}>
|
||||||
@ -174,17 +174,17 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
|||||||
<polyline points="6 9 12 15 18 9"></polyline>
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||||||
</svg>
|
</svg>
|
||||||
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
|
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
|
||||||
<li key={node.name} data-folderpath={folderPath}>
|
<div key={node.name} data-folderpath={folderPath}>
|
||||||
{folderBehavior === "link" ? (
|
{folderBehavior === "link" ? (
|
||||||
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
|
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
|
||||||
{node.name}
|
{node.name}
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<button class="folder-button">
|
<button class="folder-button">
|
||||||
<h3 class="folder-title">{node.name}</h3>
|
<p class="folder-title">{node.name}</p>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</li>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* Recursively render children of folder */}
|
{/* Recursively render children of folder */}
|
||||||
@ -210,6 +210,6 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</li>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -113,9 +113,11 @@ function setupExplorer() {
|
|||||||
) as HTMLElement
|
) as HTMLElement
|
||||||
|
|
||||||
// Get corresponding content <ul> tag and set state
|
// Get corresponding content <ul> tag and set state
|
||||||
const folderUL = folderLi.parentElement?.nextElementSibling
|
if (folderLi) {
|
||||||
if (folderUL) {
|
const folderUL = folderLi.parentElement?.nextElementSibling
|
||||||
setFolderState(folderUL as HTMLElement, folderUl.collapsed)
|
if (folderUL) {
|
||||||
|
setFolderState(folderUL as HTMLElement, folderUl.collapsed)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
button#explorer {
|
button#explorer {
|
||||||
|
all: unset;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -8,7 +9,7 @@ button#explorer {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& h3 {
|
& h1 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -58,7 +59,7 @@ button#explorer {
|
|||||||
max-height 0.35s ease,
|
max-height 0.35s ease,
|
||||||
transform 0.35s ease,
|
transform 0.35s ease,
|
||||||
opacity 0.2s ease;
|
opacity 0.2s ease;
|
||||||
& div > li > a {
|
& li > a {
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
@ -92,7 +93,7 @@ svg {
|
|||||||
color: var(--tertiary) !important;
|
color: var(--tertiary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
& li > button {
|
& div > button {
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
@ -103,7 +104,7 @@ svg {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
& h3 {
|
& p {
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--secondary);
|
color: var(--secondary);
|
||||||
@ -138,5 +139,7 @@ div:has(> .folder-outer:not(.open)) > .folder-container > svg {
|
|||||||
|
|
||||||
#explorer-end {
|
#explorer-end {
|
||||||
// needs height so IntersectionObserver gets triggered
|
// needs height so IntersectionObserver gets triggered
|
||||||
height: 1px;
|
height: 4px;
|
||||||
|
// remove default margin from li
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user