From 2a17431460770b3375b455815f503781f7448c20 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 05 Jul 2023 00:14:15 +0000
Subject: [PATCH] fix popover zindex
---
quartz/styles/base.scss | 13 +++----------
quartz/components/renderPage.tsx | 12 ++++--------
quartz/components/scripts/search.inline.ts | 9 ++++++++-
quartz/components/scripts/graph.inline.ts | 8 ++++++++
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 @@
const Body = BodyConstructor()
const LeftComponent =
- <div class="left">
- <div class="left-inner">
- {left.map(BodyComponent => <BodyComponent {...componentData} />)}
- </div>
+ <div class="left sidebar">
+ {left.map(BodyComponent => <BodyComponent {...componentData} />)}
</div>
const RightComponent =
- <div class="right">
- <div class="right-inner">
- {right.map(BodyComponent => <BodyComponent {...componentData} />)}
- </div>
+ <div class="right sidebar">
+ {right.map(BodyComponent => <BodyComponent {...componentData} />)}
</div>
const doc = <html>
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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
}
}
- & .left-inner {
+ & .sidebar.left {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
@media all and (max-width: $fullPageWidth) {
gap: 1rem;
@@ -124,7 +117,7 @@
}
}
- & .right-inner {
+ & .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
& > * {
@media all and (max-width: $fullPageWidth) {
--
Gitblit v1.10.0