fix popover zindex
This commit is contained in:
parent
a90142ba2d
commit
7e3781c6d0
@ -38,18 +38,14 @@ 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>
|
||||||
<Head {...componentData} />
|
<Head {...componentData} />
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -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()
|
||||||
}
|
}
|
||||||
|
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user