tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix popover zindex

Browse Source
This commit is contained in:
Jacky Zhao 2023-07-04 17:14:15 -07:00
parent a90142ba2d
commit 7e3781c6d0
4 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
quartz/components/renderPage.tsx
View File

@ -38,17 +38,13 @@ export function renderPage(slug: string, componentData: QuartzComponentProps, co
const Body = BodyConstructor() const Body = BodyConstructor()
const LeftComponent = const LeftComponent =
<div class="left"> <div class="left sidebar">
<div class="left-inner"> {left.map(BodyComponent => <BodyComponent {...componentData} />)}
{left.map(BodyComponent => <BodyComponent {...componentData} />)}
</div>
</div> </div>
const RightComponent = const RightComponent =
<div class="right"> <div class="right sidebar">
<div class="right-inner"> {right.map(BodyComponent => <BodyComponent {...componentData} />)}
{right.map(BodyComponent => <BodyComponent {...componentData} />)}
</div>
</div> </div>
const doc = <html> const doc = <html>

8
quartz/components/scripts/graph.inline.ts
View File

@ -274,12 +274,20 @@ async function renderGraph(container: string, slug: string) {
function renderGlobalGraph() { function renderGlobalGraph() {
const slug = document.body.dataset["slug"]! const slug = document.body.dataset["slug"]!
const container = document.getElementById("global-graph-outer") const container = document.getElementById("global-graph-outer")
const sidebar = container?.closest(".sidebar") as HTMLElement
container?.classList.add("active") container?.classList.add("active")
if (sidebar) {
sidebar.style.zIndex = "1"
}
renderGraph("global-graph-container", slug) renderGraph("global-graph-container", slug)
function hideGlobalGraph() { function hideGlobalGraph() {
container?.classList.remove("active") container?.classList.remove("active")
const graph = document.getElementById("global-graph-container") const graph = document.getElementById("global-graph-container")
if (sidebar) {
sidebar.style.zIndex = "unset"
}
if (!graph) return if (!graph) return
removeAllChildren(graph) removeAllChildren(graph)
} }

7
quartz/components/scripts/search.inline.ts
View File

@ -60,6 +60,7 @@ document.addEventListener("nav", async (e: unknown) => {
const data = await fetchData const data = await fetchData
const container = document.getElementById("search-container") const container = document.getElementById("search-container")
const sidebar = container?.closest(".sidebar") as HTMLElement
const searchIcon = document.getElementById("search-icon") const searchIcon = document.getElementById("search-icon")
const searchBar = document.getElementById("search-bar") as HTMLInputElement | null const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
const results = document.getElementById("results-container") const results = document.getElementById("results-container")
@ -69,12 +70,18 @@ document.addEventListener("nav", async (e: unknown) => {
if (searchBar) { if (searchBar) {
searchBar.value = "" // clear the input when we dismiss the search searchBar.value = "" // clear the input when we dismiss the search
} }
if (sidebar) {
sidebar.style.zIndex = "unset"
}
if (results) { if (results) {
removeAllChildren(results) removeAllChildren(results)
} }
} }
function showSearch() { function showSearch() {
if (sidebar) {
sidebar.style.zIndex = "1"
}
container?.classList.add("active") container?.classList.add("active")
searchBar?.focus() searchBar?.focus()
} }

13
quartz/styles/base.scss
View File

@ -89,15 +89,8 @@ a {
flex-direction: column; flex-direction: column;
} }
& .left, & .right { & .sidebar {
flex: 1; flex: 1;
width: calc(calc(100vw - $pageWidth) / 2);
@media all and (max-width: $fullPageWidth) {
width: initial;
}
}
& .left-inner, & .right-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
@ -116,7 +109,7 @@ a {
} }
} }
& .left-inner { & .sidebar.left {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $fullPageWidth) {
gap: 1rem; gap: 1rem;
@ -124,7 +117,7 @@ a {
} }
} }
& .right-inner { & .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
& > * { & > * {
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $fullPageWidth) {