Fixed Timeline svg draws making window too wide, adjusted navbar to perform responsive transition at a larger screen size, removed more obsolete attrs
This commit is contained in:
@@ -11,21 +11,21 @@ import {Image} from "astro:assets";
|
||||
<div class="flex flex-wrap items-center justify-between mx-auto p-6">
|
||||
<a href="/">
|
||||
<Image src={logo_title_large}
|
||||
class="h-10 sm:h-14 w-auto"
|
||||
class="h-10 lg:h-14 w-auto"
|
||||
alt="logo title"
|
||||
loading="eager"
|
||||
/>
|
||||
</a>
|
||||
<button data-collapse-toggle="navbar-multi-level" type="button"
|
||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden focus:ring-2 focus:ring-caperren-green"
|
||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm lg:hidden focus:ring-2 focus:ring-caperren-green"
|
||||
aria-controls="navbar-multi-level" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="z-40 hidden w-full md:block md:w-auto" id="navbar-multi-level">
|
||||
<div class="z-40 hidden w-full lg:block lg:w-auto" id="navbar-multi-level">
|
||||
<NestedNavbarEntry items={siteLayout}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,20 +12,20 @@ const getHrefPath = (entry: navLink): string => {
|
||||
return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path));
|
||||
}
|
||||
---
|
||||
<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "md:flex-row md:space-x-8 md:mt-0")}>
|
||||
<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}>
|
||||
{
|
||||
items.map((entry, index) => (
|
||||
items.map((entry) => (
|
||||
(entry.enabled ?? true) && (
|
||||
<li>
|
||||
{Array.isArray(entry.children) && entry.children.length ? (
|
||||
<button id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
|
||||
data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)}
|
||||
data-dropdown-placement="bottom"
|
||||
class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light md:hover:bg-transparent md:border-0 md:hover:text-caperren-green-light md:p-0 ">
|
||||
class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light lg:hover:bg-transparent lg:border-0 lg:hover:text-caperren-green-light lg:p-0 ">
|
||||
{entry.navText}
|
||||
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 10 6">
|
||||
viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m1 1 4 4 4-4"/>
|
||||
@@ -33,7 +33,7 @@ const getHrefPath = (entry: navLink): string => {
|
||||
</button>
|
||||
|
||||
<div id={"dropdownNavbar" + getNavLinkSuffix(entry)}
|
||||
class="z-10 hidden bg-black border border-caperren-green shadow-sm w-screen md:w-max">
|
||||
class="z-10 hidden bg-black border border-caperren-green shadow-sm w-screen lg:w-max">
|
||||
<Astro.self items={entry.children} paths={[...paths, entry.path]}
|
||||
depth={depth + 1}/>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@ const getHrefPath = (entry: navLink): string => {
|
||||
) : (
|
||||
|
||||
<a href={getHrefPath(entry)}
|
||||
class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark md:p-0"
|
||||
class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark lg:p-0"
|
||||
aria-current="page">{entry.navText}</a>
|
||||
|
||||
)}
|
||||
|
||||
@@ -5,28 +5,31 @@ const timeline: timelineEntry[] = Astro.props.timeline || [];
|
||||
---
|
||||
|
||||
<custom-timeline>
|
||||
<div class="relative z-10 grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
|
||||
data-timeline>
|
||||
{timeline.map((entry, index) => (
|
||||
<div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
|
||||
data-timeline-node-index={index}
|
||||
>
|
||||
<h3 class="text-lg font-bold">
|
||||
{entry.event}
|
||||
</h3>
|
||||
<h4 class="font-semibold leading-none">
|
||||
{entry.eventDetail}
|
||||
</h4>
|
||||
<time class="mb-2 mt-1 text-sm italic leading-none">
|
||||
{entry.date}
|
||||
</time>
|
||||
{entry.description && (
|
||||
<p class="text-sm font-normal">
|
||||
{entry.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="z-10 grid gap-6 grid-flow-row max-w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
|
||||
data-timeline>
|
||||
{timeline.map((entry, index) => (
|
||||
<div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
|
||||
data-timeline-node-index={index}
|
||||
>
|
||||
<h3 class="text-lg font-bold">
|
||||
{entry.event}
|
||||
</h3>
|
||||
<h4 class="font-semibold leading-none">
|
||||
{entry.eventDetail}
|
||||
</h4>
|
||||
<time class="mb-2 mt-1 text-sm italic leading-none">
|
||||
{entry.date}
|
||||
</time>
|
||||
{entry.description && (
|
||||
<p class="text-sm font-normal">
|
||||
{entry.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div class="z-0 h-10 w-full max-w-full overflow-x-visible" data-custom-timeline-line-wrapper/>
|
||||
</div>
|
||||
</custom-timeline>
|
||||
|
||||
|
||||
@@ -25,21 +25,47 @@ class CustomTimeline extends HTMLElement {
|
||||
}
|
||||
}).filter(pair => pair !== undefined)
|
||||
|
||||
let contentBodyScrolling = document.getElementById("content-body-scrolling")
|
||||
let contentBodyScrolling = document.getElementById("content-body-scrolling");
|
||||
let wrapper = this.querySelector("[data-custom-timeline-line-wrapper]") as HTMLElement;
|
||||
|
||||
const position = (line: LeaderLine) => {
|
||||
wrapper.style.transform = "none";
|
||||
let rectWrapper = wrapper.getBoundingClientRect();
|
||||
|
||||
wrapper.style.transform = "translate(-" +
|
||||
(Number(rectWrapper.left)) + "px, -"
|
||||
+
|
||||
(Number(rectWrapper.top)) + "px)"
|
||||
|
||||
console.log(wrapper.style.transform)
|
||||
line.position()
|
||||
|
||||
}
|
||||
|
||||
pairs.forEach(pair => {
|
||||
let line = new LeaderLine({
|
||||
start: pair[0],
|
||||
end: pair[1],
|
||||
color: '#10ac25',
|
||||
size: 3,
|
||||
startSocket: "right",
|
||||
endSocket: "left",
|
||||
startPlug: "square",
|
||||
endPlug: "arrow3"
|
||||
});
|
||||
contentBodyScrolling?.addEventListener("scroll", () => line.position())
|
||||
start: pair[0],
|
||||
end: pair[1],
|
||||
color: '#10ac25',
|
||||
size: 3,
|
||||
startSocket: "right",
|
||||
endSocket: "left",
|
||||
startPlug: "square",
|
||||
endPlug: "arrow3"
|
||||
});
|
||||
|
||||
// Find new element by hidden id and add to wrapper div
|
||||
const newLineEl = document.querySelector(`body .leader-line:has(path#leader-line-${line._id}-line-path)`);
|
||||
if (newLineEl) wrapper.appendChild(newLineEl);
|
||||
|
||||
// Add position updaters for scrolling and resize events
|
||||
contentBodyScrolling?.addEventListener("scroll", () => position(line));
|
||||
window.addEventListener("resize", () => position(line));
|
||||
|
||||
// Perform the initial positioning
|
||||
position(line);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -28,8 +28,8 @@ const pageEnabled = pathToMetadata(Astro.url.pathname).enabled ?? true;
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>{pageEnabled ? pageTitle : "Corwin Perren"}</title>
|
||||
</head>
|
||||
<body class="flex flex-col bg-black text-white h-dvh">
|
||||
<div id="content-body-scrolling" class="grow overflow-y-scroll">
|
||||
<body class="flex flex-col bg-black text-white h-dvh w-full max-w-full">
|
||||
<div id="content-body-scrolling" class="grow overflow-x-hidden overflow-y-scroll">
|
||||
<Navbar/>
|
||||
<main class="mx-6 my-6">
|
||||
{(Astro.props.title && showTitle && pageEnabled) && (
|
||||
|
||||
@@ -11,7 +11,3 @@
|
||||
--color-caperren-green-light: #00ff2a;
|
||||
--color-caperren-green-dark: #06370e;
|
||||
}
|
||||
|
||||
.leader-line {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user