From 567c4aec3ca7baaeb548fff2005d83f7e6228d79 Mon Sep 17 00:00:00 2001 From: Xevion Date: Sat, 31 Jan 2026 14:16:10 -0600 Subject: [PATCH] feat(web): implement aligned course codes with jetbrains mono --- web/bun.lock | 33 ++++++++++++----------- web/package.json | 1 + web/src/lib/components/CourseTable.svelte | 18 ++++++++----- web/src/routes/layout.css | 2 ++ 4 files changed, 32 insertions(+), 22 deletions(-) diff --git a/web/bun.lock b/web/bun.lock index 951d605..3e7d6ae 100644 --- a/web/bun.lock +++ b/web/bun.lock @@ -5,6 +5,7 @@ "": { "name": "banner-web", "dependencies": { + "@fontsource-variable/jetbrains-mono": "^5.2.8", "@icons-pack/svelte-simple-icons": "^6.5.0", "d3-scale": "^4.0.2", "d3-shape": "^3.2.0", @@ -16,27 +17,27 @@ }, "devDependencies": { "@biomejs/biome": "^1.9.4", - "@fontsource-variable/inter": "^5.2.5", - "@lucide/svelte": "^0.563.0", - "@sveltejs/adapter-static": "^3.0.8", - "@sveltejs/kit": "^2.16.0", - "@sveltejs/vite-plugin-svelte": "^5.0.3", - "@tailwindcss/vite": "^4.0.0", + "@fontsource-variable/inter": "^5.2.8", + "@lucide/svelte": "^0.563.1", + "@sveltejs/adapter-static": "^3.0.10", + "@sveltejs/kit": "^2.50.1", + "@sveltejs/vite-plugin-svelte": "^5.1.1", + "@tailwindcss/vite": "^4.1.18", "@tanstack/table-core": "^8.21.3", "@types/d3-scale": "^4.0.9", "@types/d3-shape": "^3.1.8", "@types/d3-time-format": "^4.0.3", "@types/node": "^25.1.0", - "bits-ui": "^1.3.7", + "bits-ui": "^1.8.0", "clsx": "^2.1.1", - "jsdom": "^26.0.0", - "svelte": "^5.19.0", - "svelte-check": "^4.1.4", - "tailwind-merge": "^3.0.1", - "tailwindcss": "^4.0.0", - "typescript": "^5.7.2", - "vite": "^6.3.5", - "vitest": "^3.0.5", + "jsdom": "^26.1.0", + "svelte": "^5.49.1", + "svelte-check": "^4.3.5", + "tailwind-merge": "^3.4.0", + "tailwindcss": "^4.1.18", + "typescript": "^5.9.3", + "vite": "^6.4.1", + "vitest": "^3.2.4", }, }, }, @@ -137,6 +138,8 @@ "@fontsource-variable/inter": ["@fontsource-variable/inter@5.2.8", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="], + "@fontsource-variable/jetbrains-mono": ["@fontsource-variable/jetbrains-mono@5.2.8", "", {}, "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q=="], + "@icons-pack/svelte-simple-icons": ["@icons-pack/svelte-simple-icons@6.5.0", "", { "peerDependencies": { "@sveltejs/kit": "^2.5.0", "svelte": "^4.2.0 || ^5.0.0" } }, "sha512-Xj3PTioiV3TJ1NTKsXY95NFG8FUqw90oeyDZIlslWHs1KkuCheu1HOPrlHb0/IM0b4cldPgx/0TldzxzBlM8Cw=="], "@internationalized/date": ["@internationalized/date@3.10.1", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA=="], diff --git a/web/package.json b/web/package.json index 1d3720b..316c5c7 100644 --- a/web/package.json +++ b/web/package.json @@ -38,6 +38,7 @@ "vitest": "^3.2.4" }, "dependencies": { + "@fontsource-variable/jetbrains-mono": "^5.2.8", "@icons-pack/svelte-simple-icons": "^6.5.0", "d3-scale": "^4.0.2", "d3-shape": "^3.2.0", diff --git a/web/src/lib/components/CourseTable.svelte b/web/src/lib/components/CourseTable.svelte index 94d8ab2..4161e89 100644 --- a/web/src/lib/components/CourseTable.svelte +++ b/web/src/lib/components/CourseTable.svelte @@ -147,6 +147,11 @@ function timeIsTBA(course: CourseResponse): boolean { return isMeetingTimeTBA(mt) && isTimeTBA(mt); } +// Calculate max subject code length for alignment +let maxSubjectLength = $derived( + courses.length > 0 ? Math.max(...courses.map((c) => c.subject.length)) : 3 +); + // Column definitions const columns: ColumnDef[] = [ { @@ -453,6 +458,11 @@ const table = createSvelteTable({ {:else if colId === "course_code"} {@const subjectDesc = subjectMap[course.subject]} + {@const paddedSubject = + course.subject.padStart( + maxSubjectLength, + " ", + )} - {course.subject} - {course.courseNumber}{#if course.sequenceNumber}-{course.sequenceNumber}{/if} + {paddedSubject} {course.courseNumber}{#if course.sequenceNumber}-{course.sequenceNumber}{/if} {:else if colId === "title"} diff --git a/web/src/routes/layout.css b/web/src/routes/layout.css index 4790fed..7954588 100644 --- a/web/src/routes/layout.css +++ b/web/src/routes/layout.css @@ -1,5 +1,6 @@ @import "tailwindcss"; @import "@fontsource-variable/inter"; +@import "@fontsource-variable/jetbrains-mono"; @custom-variant dark (&:where(.dark, .dark *)); @@ -60,6 +61,7 @@ --color-surface-100: var(--card); --color-surface-content: var(--foreground); --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif; + --font-mono: "JetBrains Mono Variable", ui-monospace, monospace; --animate-accordion-down: accordion-down 200ms ease-out; --animate-accordion-up: accordion-up 200ms ease-out; }