DMC/studentportalen
1
1
Fork 0
Code Issues 50 Pull Requests Actions Projects 1 Wiki Activity

Start time grid #62

Merged
stne3960 merged 30 commits from start_time_grid into main 2026-01-16 14:17:09 +01:00
Conversation 7 Commits 30 Files Changed 32 +18 -28
1 changed files with 18 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b57227a448 - Show all commits

46
frontend/src/components/InlineModal/InlineModal.tsx
View File

@ -21,10 +21,10 @@ const baseClasses = clsx(
const contentClasses = clsx("flex flex-col", "gap-(--spacing-lg)");
// Position arrow so its center is 48px from the edge
// Values are offset by -10px to account for arrow border rendering
// Arrow is 20px wide, so offset is 48 - 10 = 38px
const arrowPositionClasses: Record<ArrowPosition, string> = {
left: "left-[38px]",
right: "right-[58px]",
right: "right-[38px]",
};
export default function InlineModal({
stne3960 marked this conversation as resolved Outdated
ansv7779 commented 2026-01-12 11:48:27 +01:00
Outdated
Review
Copy Link

This needs some documentation what it is. Inline and modal are to me opposing concepts. What actually is it? When would I use it compared to a modal dialog and how is it different from just a <div>?

This needs some documentation what it is. Inline and modal are to me opposing concepts. What actually is it? When would I use it compared to a modal dialog and how is it different from just a `<div>`?
@ -38,38 +38,28 @@ export default function InlineModal({
return (
<div className={clsx(baseClasses, className)} {...props}>
{/* Arrow pointing up - uses two layered CSS triangles to create a bordered arrow effect.
CSS triangles are made with borders on a zero-size element, but can't have their own border/stroke.
Solution: layer two triangles - a larger one in border color behind, a smaller one in background color on top. */}
<div
{/* Arrow pointing up */}
stne3960 marked this conversation as resolved
ansv7779 commented 2026-01-12 11:49:10 +01:00
Review
Copy Link

Everything else is a SVG icon, why not this too? Using a CSS border trick feels like a relic from the past.

Everything else is a SVG icon, why not this too? Using a CSS border trick feels like a relic from the past.
<svg
className={clsx(
"absolute -top-[10px]",
"absolute -top-[11px]",
!useCustomOffset && arrowPositionClasses[arrowPosition],
)}
style={useCustomOffset ? { left: arrowOffset } : undefined}
width="20"
height="11"
viewBox="0 0 20 11"
fill="none"
>
{/* Border arrow: triangle in border color (sky-100), sits behind */}
<div
className={clsx(
"absolute",
"w-0 h-0",
"border-l-[10px] border-l-transparent",
"border-r-[10px] border-r-transparent",
"border-b-[10px] border-b-sky-100",
)}
{/* Fill triangle - extends below viewBox to cover any artifacts */}
<path d="M0 12L10 1L20 12H0Z" fill="var(--color-sky-20)" />
{/* Stroke only on diagonal edges - stops before bottom */}
<path
d="M0.5 10.5L10 1L19.5 10.5"
stroke="var(--color-sky-100)"
strokeWidth="1"
fill="none"
/>
{/* Fill arrow: triangle in background color (sky-20), offset 1px down to cover inner part,
leaving only the border visible around the edge */}
<div
className={clsx(
"absolute top-[1.5px]",
"w-0 h-0",
"border-l-[10px] border-l-transparent",
"border-r-[10px] border-r-transparent",
"border-b-[10px] border-b-sky-20",
)}
/>
</div>
</svg>
{/* Content */}
<div className={contentClasses}>{children}</div>