diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: schedule grid — clean time labels and corner cell background

Browse Source
This commit is contained in:
Diana Dolgolyova
2026-03-26 19:56:16 +03:00
parent 76307e298b
commit c4c3a7ab0d
1 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/admin/schedule/page.tsx
View File

@@ -95,10 +95,8 @@ function timeToMinutes(timeStr: string): number {
return t.h * 60 + t.m; return t.h * 60 + t.m;
} }
const GRID_TOP_PAD = 8; // px — space so the first time label isn't clipped
function minutesToY(minutes: number): number { function minutesToY(minutes: number): number {
return ((minutes - HOUR_START * 60) / 60) * HOUR_HEIGHT + GRID_TOP_PAD; return ((minutes - HOUR_START * 60) / 60) * HOUR_HEIGHT;
} }
function yToMinutes(y: number): number { function yToMinutes(y: number): number {
@@ -912,7 +910,7 @@ function CalendarGrid({
<div className="min-w-[600px]"> <div className="min-w-[600px]">
{/* Day headers */} {/* Day headers */}
<div className="flex border-b border-white/10 bg-neutral-800/50"> <div className="flex border-b border-white/10 bg-neutral-800/50">
<div className="w-14 shrink-0" /> <div className="w-14 shrink-0 bg-neutral-900" />
{sortedDays.map((day, di) => ( {sortedDays.map((day, di) => (
<div <div
key={day.day} key={day.day}
@@ -929,12 +927,12 @@ function CalendarGrid({
{/* Time grid */} {/* Time grid */}
<div className="flex"> <div className="flex">
{/* Time labels */} {/* Time labels */}
<div className="w-14 shrink-0 relative" style={{ height: `${TOTAL_HOURS * HOUR_HEIGHT + GRID_TOP_PAD}px` }}> <div className="w-14 shrink-0 relative" style={{ height: `${TOTAL_HOURS * HOUR_HEIGHT}px` }}>
{hours.slice(0, -1).map((h) => ( {hours.slice(0, -1).map((h, i) => (
<div <div
key={h} key={h}
className="absolute left-0 right-0 text-right pr-2 text-xs text-neutral-500" className={`absolute left-0 right-0 text-right pr-2 text-xs text-neutral-500${i > 0 ? " -translate-y-1/2" : ""}`}
style={{ top: `${(h - HOUR_START) * HOUR_HEIGHT + GRID_TOP_PAD - 6}px` }} style={{ top: `${(h - HOUR_START) * HOUR_HEIGHT}px` }}
> >
{String(h).padStart(2, "0")}:00 {String(h).padStart(2, "0")}:00
</div> </div>
@@ -953,7 +951,7 @@ function CalendarGrid({
key={day.day} key={day.day}
ref={(el) => { columnRefs.current[di] = el; }} ref={(el) => { columnRefs.current[di] = el; }}
className={`flex-1 border-l border-white/10 relative ${drag ? "cursor-grabbing" : "cursor-pointer"}`} className={`flex-1 border-l border-white/10 relative ${drag ? "cursor-grabbing" : "cursor-pointer"}`}
style={{ height: `${TOTAL_HOURS * HOUR_HEIGHT + GRID_TOP_PAD}px` }} style={{ height: `${TOTAL_HOURS * HOUR_HEIGHT}px` }}
onMouseMove={(e) => { onMouseMove={(e) => {
if (drag) return; if (drag) return;
// Ignore if hovering over a class block // Ignore if hovering over a class block
@@ -980,7 +978,7 @@ function CalendarGrid({
<div <div
key={h} key={h}
className="absolute left-0 right-0 border-t border-white/5" className="absolute left-0 right-0 border-t border-white/5"
style={{ top: `${(h - HOUR_START) * HOUR_HEIGHT + GRID_TOP_PAD}px` }} style={{ top: `${(h - HOUR_START) * HOUR_HEIGHT}px` }}
/> />
))} ))}
{/* Half-hour lines */} {/* Half-hour lines */}
@@ -988,7 +986,7 @@ function CalendarGrid({
<div <div
key={`${h}-30`} key={`${h}-30`}
className="absolute left-0 right-0 border-t border-white/[0.02]" className="absolute left-0 right-0 border-t border-white/[0.02]"
style={{ top: `${(h - HOUR_START) * HOUR_HEIGHT + HOUR_HEIGHT / 2 + GRID_TOP_PAD}px` }} style={{ top: `${(h - HOUR_START) * HOUR_HEIGHT + HOUR_HEIGHT / 2}px` }}
/> />
))} ))}