xevion/banner
1
0
Fork 0
mirror of https://github.com/Xevion/banner.git synced 2026-01-31 12:23:33 -06:00
Code Issues Packages Projects Releases 1 Wiki Activity

feat: add delivery mode indicators and tooltips to location column

Browse Source
This commit is contained in:
Xevion
2026-01-29 11:32:35 -06:00
parent 58475c8673
commit b5eaedc9bc
5 changed files with 163 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/CourseTable.svelte
+28 -13
View File
@@ -2,13 +2,16 @@
import type { CourseResponse } from "$lib/api";
import {
abbreviateInstructor,
concernAccentColor,
formatLocationDisplay,
formatLocationTooltip,
formatMeetingDays,
formatMeetingTimesTooltip,
formatTimeRange,
formatLocation,
getDeliveryConcern,
getPrimaryInstructor,
isMeetingTimeTBA,
isTimeTBA,
formatMeetingTimesTooltip,
} from "$lib/course";
import CourseDetail from "./CourseDetail.svelte";
import { fade, fly, slide } from "svelte/transition";
@@ -208,7 +211,7 @@ const columns: ColumnDef<CourseResponse, unknown>[] = [
},
{
id: "location",
accessorFn: (row) => formatLocation(row) ?? "",
accessorFn: (row) => formatLocationDisplay(row) ?? "",
header: "Location",
enableSorting: false,
},
@@ -668,19 +671,31 @@ const table = createSvelteTable({
</SimpleTooltip>
</td>
{:else if colId === "location"}
{@const concern = getDeliveryConcern(course)}
{@const accentColor = concernAccentColor(concern)}
{@const locTooltip = formatLocationTooltip(course)}
{@const locDisplay = formatLocationDisplay(course)}
<td class="py-2 px-2 whitespace-nowrap">
{#if formatLocation(course)}
<span
class="text-muted-foreground"
>{formatLocation(
course,
)}</span
{#if locTooltip}
<SimpleTooltip
text={locTooltip}
delay={200}
passthrough
>
<span
class="text-muted-foreground"
class:pl-2={accentColor !== null}
style:border-left={accentColor ? `2px solid ${accentColor}` : undefined}
>
{locDisplay ?? "—"}
</span>
</SimpleTooltip>
{:else if locDisplay}
<span class="text-muted-foreground">
{locDisplay}
</span>
{:else}
<span
class="text-xs text-muted-foreground/50"
>—</span
>
<span class="text-xs text-muted-foreground/50">—</span>
{/if}
</td>
{:else if colId === "seats"}