From 2a17431460770b3375b455815f503781f7448c20 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Tue, 4 Jul 2023 17:14:15 -0700 Subject: [PATCH] fix popover zindex --- quartz/components/renderPage.tsx | 12 ++++-------- quartz/components/scripts/graph.inline.ts | 8 ++++++++ quartz/components/scripts/search.inline.ts | 9 ++++++++- quartz/styles/base.scss | 13 +++---------- 4 files changed, 23 insertions(+), 19 deletions(-) diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 8de60bf..cff61dd 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -38,17 +38,13 @@ export function renderPage(slug: string, componentData: QuartzComponentProps, co const Body = BodyConstructor() const LeftComponent = -
-
- {left.map(BodyComponent => )} -
+
+ {left.map(BodyComponent => )}
const RightComponent = -
-
- {right.map(BodyComponent => )} -
+
+ {right.map(BodyComponent => )}
const doc = diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts index 33e90c7..b0f1a38 100644 --- a/quartz/components/scripts/graph.inline.ts +++ b/quartz/components/scripts/graph.inline.ts @@ -274,12 +274,20 @@ async function renderGraph(container: string, slug: string) { function renderGlobalGraph() { const slug = document.body.dataset["slug"]! const container = document.getElementById("global-graph-outer") + const sidebar = container?.closest(".sidebar") as HTMLElement container?.classList.add("active") + if (sidebar) { + sidebar.style.zIndex = "1" + } + renderGraph("global-graph-container", slug) function hideGlobalGraph() { container?.classList.remove("active") const graph = document.getElementById("global-graph-container") + if (sidebar) { + sidebar.style.zIndex = "unset" + } if (!graph) return removeAllChildren(graph) } diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts index 054d352..e257c0a 100644 --- a/quartz/components/scripts/search.inline.ts +++ b/quartz/components/scripts/search.inline.ts @@ -60,6 +60,7 @@ document.addEventListener("nav", async (e: unknown) => { const data = await fetchData const container = document.getElementById("search-container") + const sidebar = container?.closest(".sidebar") as HTMLElement const searchIcon = document.getElementById("search-icon") const searchBar = document.getElementById("search-bar") as HTMLInputElement | null const results = document.getElementById("results-container") @@ -69,12 +70,18 @@ document.addEventListener("nav", async (e: unknown) => { if (searchBar) { searchBar.value = "" // clear the input when we dismiss the search } + if (sidebar) { + sidebar.style.zIndex = "unset" + } if (results) { removeAllChildren(results) } } function showSearch() { + if (sidebar) { + sidebar.style.zIndex = "1" + } container?.classList.add("active") searchBar?.focus() } @@ -145,7 +152,7 @@ document.addEventListener("nav", async (e: unknown) => { searchIcon?.addEventListener("click", showSearch) searchBar?.removeEventListener("input", onType) searchBar?.addEventListener("input", onType) - + // setup index if it hasn't been already if (!index) { index = new Document({ diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 4d1145d..d0faa7f 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -89,15 +89,8 @@ a { flex-direction: column; } - & .left, & .right { + & .sidebar { flex: 1; - width: calc(calc(100vw - $pageWidth) / 2); - @media all and (max-width: $fullPageWidth) { - width: initial; - } - } - - & .left-inner, & .right-inner { display: flex; flex-direction: column; gap: 2rem; @@ -116,7 +109,7 @@ a { } } - & .left-inner { + & .sidebar.left { left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); @media all and (max-width: $fullPageWidth) { gap: 1rem; @@ -124,7 +117,7 @@ a { } } - & .right-inner { + & .sidebar.right { right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); & > * { @media all and (max-width: $fullPageWidth) {