aljaz/pubky-knowledge-base
1
0
Fork 0
mirror of https://github.com/aljazceru/pubky-knowledge-base.git synced 2025-12-17 05:44:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

last changes

Browse Source
This commit is contained in:
flaviomoceri
2024-10-22 10:12:02 +02:00
parent f4436a1fcb
commit 2b5ab82f1a
3 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
quartz/quartz/components/ExplorerNode.tsx
View File

@@ -177,31 +177,46 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
<>
{node.file ? (
// Single file node
<>
{node.displayName === "Readme" && (
<div
style={{
border: "none",
borderTop: "0.1px solid white",
opacity: 0.2,
marginBottom: "20px",
}}
/>
)}
<li key={node.file.slug}>
<a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
{node.displayName}
</a>
</li>
) : (
<li>
{node.name !== "" && (
// Node with entire folder
// Render svg button + folder name, then children
<div class="folder-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="5 8 14 8"
fill="none"
stroke="currentColor"
stroke="grey"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="folder-icon"
class="folder-icon-fixed"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</li>
</>
) : (
<li>
{node.name !== "" && (
// Node with entire folder
// Render svg button + folder name, then children
<div
style={node.displayName === "Explore" ? { marginBottom: "10px" } : {}}
class="folder-container"
>
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
<div key={node.name} data-folderpath={folderPath}>
{folderBehavior === "link" ? (
@@ -218,6 +233,20 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
</button>
)}
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="5 8 14 8"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="folder-icon"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
)}
{/* Recursively render children of folder */}

2
quartz/quartz/components/Head.tsx
View File

@@ -20,7 +20,7 @@ export default (() => {
return (
<head>
<title>{title}</title>
<title>{title} | Pubky Core</title>
<meta charSet="utf-8" />
{cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
<>

27
quartz/quartz/components/styles/explorer.scss
View File

@@ -38,7 +38,7 @@ button#explorer {
grid-template-rows: 1fr;
}
.folder-outer>ul {
.folder-outer > ul {
overflow: hidden;
}
@@ -49,7 +49,7 @@ button#explorer {
transition: max-height 0.35s ease;
margin-top: 0rem;
&.collapsed>.overflow::after {
&.collapsed > .overflow::after {
opacity: 0;
}
@@ -70,7 +70,7 @@ button#explorer {
transform 0.35s ease,
opacity 0.2s ease;
& li>a {
& li > a {
color: var(--dark);
opacity: 0.5;
pointer-events: all;
@@ -81,7 +81,7 @@ button#explorer {
svg {
pointer-events: all;
&>polyline {
& > polyline {
pointer-events: none;
}
}
@@ -92,7 +92,7 @@ svg {
align-items: center;
user-select: none;
& div>a {
& div > a {
color: var(--secondary);
font-family: var(--headerFont);
font-size: 0.95rem;
@@ -101,11 +101,11 @@ svg {
display: inline-block;
}
& div>a:hover {
& div > a:hover {
color: var(--tertiary);
}
& div>button {
& div > button {
color: var(--dark);
background-color: transparent;
border: none;
@@ -132,14 +132,23 @@ svg {
}
.folder-icon {
margin-right: 5px;
margin-left: 0.5rem;
color: var(--secondary);
cursor: pointer;
transition: transform 0.3s ease;
backface-visibility: visible;
}
li:has(> .folder-outer:not(.open))>.folder-container>svg {
.folder-icon-fixed {
margin-left: 0.5rem;
color: var(--secondary);
cursor: pointer;
transition: transform 0.3s ease;
backface-visibility: visible;
transform: rotate(-90deg);
}
li:has(> .folder-outer:not(.open)) > .folder-container > svg {
transform: rotate(-90deg);
}