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)"); const contentClasses = clsx("flex flex-col", "gap-(--spacing-lg)");
// Position arrow so its center is 48px from the edge // 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> = { const arrowPositionClasses: Record<ArrowPosition, string> = {
left: "left-[38px]", left: "left-[38px]",
right: "right-[58px]", right: "right-[38px]",
}; };
export default function InlineModal({ 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 ( return (
<div className={clsx(baseClasses, className)} {...props}> <div className={clsx(baseClasses, className)} {...props}>
{/* Arrow pointing up - uses two layered CSS triangles to create a bordered arrow effect. {/* 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.
CSS triangles are made with borders on a zero-size element, but can't have their own border/stroke. <svg
Solution: layer two triangles - a larger one in border color behind, a smaller one in background color on top. */}
<div
className={clsx( className={clsx(
"absolute -top-[10px]", "absolute -top-[11px]",
!useCustomOffset && arrowPositionClasses[arrowPosition], !useCustomOffset && arrowPositionClasses[arrowPosition],
)} )}
style={useCustomOffset ? { left: arrowOffset } : undefined} 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 */} {/* Fill triangle - extends below viewBox to cover any artifacts */}
<div <path d="M0 12L10 1L20 12H0Z" fill="var(--color-sky-20)" />
className={clsx( {/* Stroke only on diagonal edges - stops before bottom */}
"absolute", <path
"w-0 h-0", d="M0.5 10.5L10 1L19.5 10.5"
"border-l-[10px] border-l-transparent", stroke="var(--color-sky-100)"
"border-r-[10px] border-r-transparent", strokeWidth="1"
"border-b-[10px] border-b-sky-100", fill="none"
)}
/> />
{/* Fill arrow: triangle in background color (sky-20), offset 1px down to cover inner part, </svg>
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>
{/* Content */} {/* Content */}
<div className={contentClasses}>{children}</div> <div className={contentClasses}>{children}</div>