From 5d373dd095cef5be20e7adddace427728c97a94f Mon Sep 17 00:00:00 2001 From: Saahith <22772542+saahithjanapati@users.noreply.github.com> Date: Thu, 25 Sep 2025 11:53:15 -0400 Subject: [PATCH] Refactor catalog tables for responsive layout --- src/Catalog.css | 856 +++++++++++++++++++-------------------------- src/CatalogPage.js | 327 +++++++++-------- 2 files changed, 539 insertions(+), 644 deletions(-) diff --git a/src/Catalog.css b/src/Catalog.css index 49037ad..261246d 100644 --- a/src/Catalog.css +++ b/src/Catalog.css @@ -1,645 +1,517 @@ - - -table{ - width: 100%; /* Set the fixed width for the entire table */ - border: none; - border-spacing: 0; -} - -body{ +body { overflow-x: hidden; } - -.back-to-top { - position: fixed; - bottom: 20px; - right: 20px; - padding: 10px 20px; - background-color: #ffffff; /* White theme background */ - color: #000000; /* White theme text color */ - border: none; - border-radius: 5px; - cursor: pointer; - opacity: 0; /* Start with hidden */ - transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; - font-size: 15px; /* Default font size */ - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - font-weight: bold; - z-index: 1000; /* Ensure it appears in front of other elements */ - border-radius: 50%; /* Make the button circular */ - +.catalog, +.catalogPage { + width: 100%; + max-width: 1100px; + margin: 0 auto; + padding: 1.5rem 1rem 4rem; + box-sizing: border-box; } -.back-to-top:hover { - background-color: #d7d3d3; /* Light theme hover background */ +.catalog { + --card-background: rgba(24, 66, 118, 0.35); + --card-border: rgba(255, 255, 255, 0.12); + --row-background: rgba(24, 66, 118, 0.5); + color: #ffffff; +} + +.catalogPage { + --card-background: rgba(24, 66, 118, 0.55); + --card-border: rgba(255, 255, 255, 0.15); + --row-background: rgba(24, 66, 118, 0.65); + --row-alt-background: rgba(24, 66, 118, 0.45); + --row-border: rgba(255, 255, 255, 0.1); + --text-color: #ffffff; + --muted-text-color: rgba(255, 255, 255, 0.65); + --button-background: #ffffff; + --button-text: #000000; + --button-border: #ffffff; + --badge-background: rgba(255, 255, 255, 0.1); + display: flex; + flex-direction: column; + gap: 1.75rem; + color: var(--text-color); } -.back-to-top.show { - opacity: 1; /* Fade in when the button should be visible */ +.catalogPage h1, +.catalogPage h2, +.catalogPage h3, +.catalogPage h4, +.catalogPage p, +.catalogPage span, +.catalogPage label { + color: var(--text-color); } - -@media (prefers-color-scheme: light) { - .back-to-top { - border: 1px solid #000000; /* Add a black border in light mode */ - } +.catalogPage a { + color: inherit; } - -@media (prefers-color-scheme: dark) { - .back-to-top { - background-color: #ffffff; /* White theme background for dark mode */ - color: #000000; /* White theme text color for dark mode */ - } - - .back-to-top:hover { - background-color: #d7d3d3; /* Light theme hover background for dark mode */ - } +.catalog-page-header { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: flex-start; } -@media (max-width: 768px) { - .back-to-top { - padding: 10px 20px; /* Increase padding for smaller screens */ - font-size: 15px; /* Increase font size for smaller screens */ - } +.catalog-page-header h2, +.catalog-page-header h3 { + margin: 0; } -@media (max-width: 480px) { - .back-to-top { - padding: 8px 16px; /* Increase padding for very small screens */ - font-size: 13px; /* Increase font size for very small screens */ - } +.department-title { + font-size: clamp(1.4rem, 2vw, 2rem); + margin: 0; } -.department-container { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease-out; +.catalog-page-header h3 { + font-size: 1rem; + font-weight: 500; + color: var(--muted-text-color); } -.department-container.expanded { - max-height: 1000px; /* Adjust this value based on your content */ - transition: max-height 0.5s ease-in; +.semester-select { + display: flex; + flex-direction: column; + gap: 0.5rem; + font-size: 0.95rem; +} + +.semester-select select { + min-width: 220px; + padding: 0.5rem 0.75rem; + border-radius: 0.75rem; + border: 1px solid var(--button-border); + background: var(--button-background); + color: var(--button-text); + font-size: 1rem; +} + +.toggle-button { + background-color: var(--button-background); + color: var(--button-text); + border: 1px solid var(--button-border); + border-radius: 999px; + padding: 0.45rem 1.25rem; + font-weight: 600; + cursor: pointer; + font-size: 0.95rem; + transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } -.department-table { - padding: 15px 0; - margin: 0; - list-style-type: none; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 15px; - width: 100%; +.toggle-button:hover { + transform: translateY(-1px); } -.department-item { - background: rgba(255, 255, 255, 0.05); - border-radius: 8px; - transition: all 0.2s ease-in-out; - text-align: left; - box-sizing: border-box; +.catalog-content { + display: flex; + flex-direction: column; + gap: 1.5rem; } -.department-item:hover { - transform: translateY(-3px); - background: rgba(255, 255, 255, 0.1); +.subject-section { + display: flex; + flex-direction: column; + gap: 1.5rem; } -.department-item a { - display: block; - padding: 20px; - text-decoration: none; - color: inherit; +.subject { + font-size: clamp(1.5rem, 2.2vw, 2.25rem); + margin: 0; } -.department-item a .department-name { - color: #fff; - font-size: 16px; - font-weight: bold; +.course-container { + background: var(--card-background); + border: 1px solid var(--card-border); + border-radius: 1.5rem; + overflow: hidden; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); } - -/* .minimized-table td { - display: none; /* Hide the table contents }*/ - -/* CSS for Minimized Table */ -/* .minimized-table tr { - display: none; /* Hide the table contents */ -/* } */ - - - - -.expanded-table { - display: table; +.course-header { + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 1.5rem; + border-bottom: 1px solid var(--card-border); } - -.catalog-section { +.course-toggle { + appearance: none; + border: none; + background: none; + color: inherit; display: flex; - flex-direction: column; + justify-content: space-between; align-items: flex-start; - padding-bottom: 10px; - border-bottom: 1px solid #333; + gap: 1.5rem; + padding: 0; + cursor: pointer; + text-align: left; } -/* Example to limit the width of the entire catalog container */ -.catalog { - max-width: 800px; /* Adjust the max-width as needed */ - margin: 0 auto; /* Center the catalog in its parent container */ +.course-title { + display: flex; + flex-direction: column; + gap: 0.35rem; + flex: 1; } - - -.section-title { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - font-size: 30px; - font-weight: bold; - color: white; - text-align: left; - cursor: pointer; - padding: 10px 0; +.course-code { + font-size: 0.95rem; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--muted-text-color); } -.chevron { - border-style: solid; - border-width: 0.1em 0.1em 0 0; - content: ''; - display: inline-block; - height: 0.3em; - width: 0.3em; - transform: rotate(135deg); - transition: transform 0.3s ease-out; - border-color: #888; +.course-name { + font-size: clamp(1.15rem, 2.2vw, 1.75rem); + font-weight: 600; } -.chevron.expanded { - transform: rotate(-45deg); +.course-toggle-icon { + font-size: 1.75rem; + line-height: 1; + font-weight: 400; } - -.button-container{ +.course-actions { display: flex; - justify-content: flex-end; + flex-wrap: wrap; + gap: 0.75rem; +} + +.catalog-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.45rem 0.95rem; + border-radius: 999px; + border: 1px solid var(--button-border); + background: var(--button-background); + color: var(--button-text); + font-weight: 600; + font-size: 0.9rem; + text-decoration: none; + transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } +.catalog-button:hover { + transform: translateY(-1px); +} - - - -.section-type{ - width: 20% +.course-toggle:focus-visible, +.toggle-button:focus-visible, +.catalog-button:focus-visible, +.semester-select select:focus-visible { + outline: 3px solid rgba(255, 255, 255, 0.8); + outline-offset: 3px; } -.section-number{ - width: 5% +.section-table { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0 1.5rem 1.5rem; } -.instructor{ - width: 20% +.section-table[hidden] { + display: none !important; } -.enrollment{ +.section-header { + display: none; +} +.section-row { + display: grid; + grid-template-columns: 1fr; + gap: 0.9rem; + padding: 1.25rem; + border-radius: 1.25rem; + background: var(--row-background); + border: 1px solid var(--row-border); } -.meeting-table{ - width: 100%; - vertical-align: top; +.section-row .column::before { + content: attr(data-label); + display: block; + font-size: 0.7rem; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-bottom: 0.35rem; + color: var(--muted-text-color); } -.meeting-table-head, -.meeting-table-content, -.meeting-row { - width: 100%; +.section-row .instructor p { + margin: 0.15rem 0; } -.meeting-table-head, -.meeting-row { +.meeting-grid { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - column-gap: 12px; - text-align: center; + gap: 0.4rem; } -.meeting-table-content { +.meeting-row { display: grid; - row-gap: 6px; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.5rem 0.75rem; + font-size: 0.95rem; } .meeting-row .days, .meeting-row .time { - display: block; + font-weight: 500; } -.days{ -} - -.time{ -} - -.custom-table button{ - /* background: #e88c42; */ +.back-to-top { + position: fixed; + bottom: 20px; + right: 20px; + padding: 10px 20px; + background-color: #ffffff; color: #000000; - font-size: 15px; - padding: 0.5em 0.5em; border: none; - border-radius: 5px; + border-radius: 50%; cursor: pointer; + opacity: 0; + transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; + font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; font-weight: bold; + z-index: 1000; } -a { - font-size: 16px; -} - -p{ - font-size: 16px; -} - -tr{ - font-size: 16px; -} - - -.catalogPage .custom-table { - width: 100%; - max-width: 1000px; /* Limit the table width on large screens */ - border: 1px solid #fff; - border-radius: 3px; - table-layout: fixed; +.back-to-top:hover { + background-color: #d7d3d3; } -.custom-table th, .custom-table td { - padding: 8px; /* Adjust padding as needed */ - text-align: center; /* Center-align text within cells */ -} -.custom-table td { - padding: 8px; /* Adjust padding as needed */ - text-align: center; -} -.custom-table th { - /* background-color: #656769; */ - background-color: #184276; - text-align: center; - /* background-color: #1d1d1e; */ +.back-to-top.show { + opacity: 1; } -.custom-table .column-names { - position: sticky; - /* top: 2.5em; */ +.department-container { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; } -.custom-table .title-header { - position: sticky; - /* top: 0; */ - - z-index: 5; /* Ensure the header appears above the table content */ +.department-container.expanded { + max-height: 1000px; + transition: max-height 0.5s ease-in; } -.custom-table .title-header th{ - position: sticky; - text-align: left; - /* top: 0; */ - - z-index: 5; /* Ensure the header appears above the table content */ +.catalog-section { + display: flex; + flex-direction: column; + align-items: flex-start; + padding-bottom: 10px; + border-bottom: 1px solid var(--card-border); + gap: 1rem; } -.course-title{ - font-size: 30px; +.section-title { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + font-size: 1.75rem; font-weight: bold; - padding: 20px; - + color: inherit; text-align: left; - flex-grow: 1; -} - -.external-buttons{ - width: 20%; - /* min-width: 350px; */ - text-align: right; -} - - - - - -.custom-table .expanded { - display: table-row; -} - -.custom-table .collapsed { - display: none; -} - - - - -.custom-table tr { - border: none; /* Remove all borders for data rows */ -} - -/* Style for even rows */ -.custom-table tr:nth-child(even) { - /* background-color: #1e2b53; Background color for odd rows */ - background-color: #1e2b53; /* Background color for odd rows */ - - -} - -/* Style for odd rows */ -.custome-table tr:nth-child(odd) { - background-color: #191c21; /* Background color for even rows */ - -} - - -/* Style for all rows of the inner table */ -.custom-table tr:nth-child(even) .meeting-table .meeting-row, -.custom-table tr:nth-child(odd) .meeting-table .meeting-row { - background-color: inherit; /* Inherit background color from outer table */ + cursor: pointer; + padding: 10px 0; } -h3, h2, .custom-table tr{ - color: #fff; +.chevron { + border-style: solid; + border-width: 0.1em 0.1em 0 0; + content: ''; + display: inline-block; + height: 0.5em; + width: 0.5em; + transform: rotate(135deg); + transition: transform 0.3s ease-out; + border-color: currentColor; } -h2{ - font-size: 30px; +.chevron.expanded { + transform: rotate(-45deg); } -ul { +.department-table { + padding: 0; + margin: 0; list-style-type: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1rem; + width: 100%; } -.custom-table button:hover{ - background-color: #b4b0b0; -} - - - - -tr.title-header:hover th{ - cursor: pointer; /* Optional: Change the cursor to a pointer to indicate it's clickable */ - text-decoration: underline; -} - -.toggle-button{ - /* background: #e88c42; */ - color: #000000; - font-size: 15px; - padding: 0.5em 0.5em; - border: none; - border-radius: 5px; - cursor: pointer; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - font-weight: bold; +.department-item { + background: var(--card-background); + border-radius: 0.85rem; + transition: all 0.2s ease-in-out; + text-align: left; + box-sizing: border-box; + border: 1px solid var(--card-border); } -.toggle-button:hover{ - background-color: #d7d3d3; +.department-item:hover { + transform: translateY(-3px); + background: var(--row-background); } - - - - - - -/* light / dark mode stuff */ - -@media (prefers-color-scheme: light) { - .section-title{ - color: #000000; - } - - .chevron { - border-color: #999; - } - - h1, h2, h3, h4, h5 { - color: #000000; - } - - .department-item { - background: #f1f1f1; - border: 1px solid #e5e5e5; - } - - .department-item:hover { - background: #e9e9e9; - border-color: #ddd; - } - - .department-item a .department-name { - color: #000; - } - - - .catalogPage .catalog-button:hover{ - background-color: #c1baba; - - } - - .toggle-button{ - background-color: #ffffff; - border: 1px solid #000000; - border-radius: 5px; - } - - .catalogPage .custom-table { - border: 1px solid #000000; - - } - .catalogPage .custom-table tr{ - color: #000000; - } - .catalogPage .custom-table th { - /* background-color: #ffdeb3; */ - background-color: #fff4e6; - background-color: #e7e7e7; - - } - /* Style for even rows */ - .catalogPage .custom-table tr:nth-child(even) { - /* background-color: #fff4e6; */ - background-color: #f0f0f0; - } - - /* Style for odd rows */ - .catalogPage .custom-table tr:nth-child(odd) { - background-color: #ffffff; /* Background color for even rows */ - - } - - /* Style for all rows of the inner table */ - .catalogPage .custom-table tr:nth-child(even) .meeting-table .meeting-row, - .catalogPage .custom-table tr:nth-child(odd) .meeting-table .meeting-row { - background-color: inherit; /* Inherit background color from outer table */ - } - - - .catalogPage .custom-table button{ - /* background: #e88c42; */ - background-color: #ffffff; - border: 1px solid #000000; - border-radius: 5px; - } - +.department-item a { + display: block; + padding: 1.25rem; + text-decoration: none; + color: inherit; } -.catalogPage .subject { - font-size: 35px; +.department-item a .department-name { + font-size: 1rem; + font-weight: 600; } -@media (max-width: 1000px) { - .catalogPage h2{ - font-size: 14px +@media (min-width: 768px) { + .catalog-page-header { + flex-direction: row; + align-items: flex-end; + flex-wrap: wrap; + gap: 1.25rem; } - .catalogPage h3{ - font-size: 14px; + .catalog-page-header .toggle-button { + margin-left: auto; } - - .catalogPage .section-title{ - font-size: 20px; - cursor: pointer; + .course-header { + flex-direction: row; + align-items: center; } - /* .catalogPage .section-title:hover{ - cursor: pointer; - } */ - - - - .catalogPage .custom-table { - width: 90%; + .course-toggle { + align-items: center; } - @media (max-width: 768px) { - .catalogPage .hide-button { - display: none; - } + .course-actions { + justify-content: flex-end; } - .catalogPage .catalog-button { - text-align: right; - font-size: 8px; - white-space: nowrap; + .section-table { + gap: 0; + padding-bottom: 2rem; } - .toggle-button { - font-size: 8px; + .section-header { + display: grid; + grid-template-columns: 1.25fr 0.9fr 1.1fr 0.85fr 1.25fr; + gap: 1rem; + padding: 0 1.5rem 0.75rem; + font-size: 0.75rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--muted-text-color); } - .catalogPage .external-buttons { - padding: 0.2em 0.2em; - font-size: 8px; - width: 5%; + .section-row { + grid-template-columns: 1.25fr 0.9fr 1.1fr 0.85fr 1.25fr; + gap: 1rem; + border-radius: 0; + background: transparent; + border: none; + padding: 1rem 1.5rem; + border-top: 1px solid var(--row-border); } - .catalogPage .course-title { - font-size: max(min(calc(4.5vw - 10px), 30px), 10px); + .section-row:nth-child(odd) { + background: var(--row-background); } - .catalogPage .custom-table button{ - font-size: max(min(calc(4vw - 12px), 15px), 8px); + .section-row:nth-child(even) { + background: var(--row-alt-background); } - - .catalogPage table { - font-size: 8px; - border: none; - border-collapse: collapse; + .section-row .column::before { + display: none; } - .catalogPage .subject { - font-size: max(min(calc(4.5vw - 10px), 35px), 15px); - } - - .catalogPage a { - font-size: max(min(calc(4vw - 12px), 15px), 7px); + .meeting-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); } +} - .catalogPage p{ - font-size: max(min(calc(4vw - 12px), 15px), 7px); +@media (max-width: 768px) { + .catalog-button.hide-button { + display: none; } - .catalogPage tr{ - font-size: max(min(calc(4vw - 12px), 15px), 7px); + .section-title { + font-size: 1.35rem; } - .catalogPage .table-header { - font-size: max(min(calc(4vw - 12px), 15px), 7px); + .back-to-top { + padding: 10px 20px; + font-size: 15px; } +} - .catalogPage .section-type{ - width: 10%; - font-size: max(min(calc(4vw - 12px), 15px), 7px); +@media (max-width: 480px) { + .back-to-top { + padding: 8px 16px; + font-size: 13px; } +} - .catalogPage .section-number{ - width: 10%; - padding: 0px; - font-size: max(min(calc(4vw - 12px), 15px), 7px); +@media (prefers-color-scheme: light) { + .back-to-top { + border: 1px solid #000000; } - .catalogPage .instructor{ - width: 10%; - padding: 0px; - font-size: max(min(calc(4vw - 12px), 15px), 8px); + .catalogPage { + --card-background: #ffffff; + --card-border: #e0e6f3; + --row-background: #f6f8fb; + --row-alt-background: #ffffff; + --row-border: #e0e6f3; + --text-color: #10243d; + --muted-text-color: #4b5a6b; + --button-background: #10243d; + --button-text: #ffffff; + --button-border: #10243d; + --badge-background: #e7edf8; } - .catalogPage .enrollment{ - width: 1%; - padding: 0px; - font-size: max(min(calc(4vw - 12px), 15px), 8px); - - } - .catalogPage .meeting-table{ - width: 10%; + .catalog { + --card-background: #ffffff; + --card-border: #e0e6f3; + --row-background: #f1f4fb; + color: #10243d; } - .catalogPage .days{ - width: 9%; + .course-toggle:focus-visible, + .toggle-button:focus-visible, + .catalog-button:focus-visible, + .semester-select select:focus-visible { + outline-color: rgba(16, 36, 61, 0.6); } +} - .catalogPage .time{ - width: 9%; +@media (prefers-color-scheme: dark) { + .back-to-top { + background-color: #ffffff; + color: #000000; } - .catalogPage .location{ - width: 9%; + .back-to-top:hover { + background-color: #d7d3d3; } } -@media (max-width: 768px) { /* Adjust the breakpoint as needed */ - .section-title{ - font-size: 20px; - } - .catalog-section { - padding: 10px; /* Add some padding to the section for narrower screens */ - } - .department-table { - grid-template-columns: 1fr; /* One column when the screen is under 768 pixels */ - } - .department-item { - /* flex-basis: 100%; /* Set it to 100% to display one item per row on mobile */ - } - strong{ - font-size: 14px; - } - -} diff --git a/src/CatalogPage.js b/src/CatalogPage.js index 48859dc..0fbdd03 100644 --- a/src/CatalogPage.js +++ b/src/CatalogPage.js @@ -1,7 +1,6 @@ -import React, { useState, useEffect, useCallback} from 'react'; -import { useParams, useNavigate} from 'react-router-dom'; -import './Catalog.css' -import './Catalog.css' +import React, { useState, useEffect, useCallback } from 'react'; +import { useParams, useNavigate } from 'react-router-dom'; +import './Catalog.css'; import { requirementMapping } from './RequirementMap'; function CatalogPage() { @@ -148,18 +147,16 @@ function CatalogPage() { const generateMeetingTable = (meetings) => { if (!meetings || meetings.length === 0) { - return [ + return (
TBA TBA
- ]; + ); } - const rows = []; - - for (const [index, meeting] of meetings.entries()) { - const meetingDays = meeting?.days === '-' ? 'TBA' : (meeting?.days || 'TBA'); + return meetings.map((meeting, index) => { + const meetingDays = meeting?.days === '-' ? 'TBA' : meeting?.days || 'TBA'; const hasTime = meeting?.start_time && @@ -167,33 +164,36 @@ function CatalogPage() { meeting.start_time !== '-' && meeting.end_time !== '-'; - const meetingTimeString = hasTime - ? `${meeting.start_time}-${meeting.end_time}` - : 'TBA'; + const meetingTimeString = hasTime ? `${meeting.start_time}-${meeting.end_time}` : 'TBA'; - rows.push( + return (
{meetingDays} {meetingTimeString}
); + }); + }; + + const generateInstructorHTML = (instructors = []) => { + if (!instructors.length) { + return

TBA

; } - return rows; - }; + return instructors.map((instructor) => { + const key = `${instructor.name}-${instructor.email || 'no-email'}`; - const generateInstructorHTML = (instructors) => { - const elements = []; - for (const instructor of instructors){ - if(instructor.email.length > 0){ - elements.push(

{instructor.name}

); - } - else{ - elements.push(

{instructor.name}

); + if (instructor.email?.length) { + return ( +

+ {instructor.name} +

+ ); } - } - return elements; - } + + return

{instructor.name}

; + }); + }; const getSisLink = (subject, catalog_number) => { @@ -216,143 +216,166 @@ function CatalogPage() { }; - const elements = []; - - - async function addRequirementName() { - if (department.includes('-')) { - elements.push(

{requirementMapping[department]}

); + const handleToggleKeyDown = (event, tableKey) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + toggleTableExpansion(tableKey); } - } - - - addRequirementName(); - - - - if (metadata && metadata?.semester && metadata?.last_updated) { - // Create a Date object from the UTC time string - const utcDate = new Date(metadata.last_updated); + }; - // Get the user's current timezone - const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; - - // Format the UTC time to the user's timezone - const userTimeOptions = { timeZone: userTimezone, hour12: true, year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'}; - const userTime = utcDate.toLocaleTimeString(undefined, userTimeOptions); - elements.push(

Last Updated on {userTime}

); + const departmentTitle = department.includes('-') ? requirementMapping[department] : null; + + let formattedLastUpdated = null; + if (metadata?.semester && metadata?.last_updated) { + const utcDate = new Date(metadata.last_updated); + const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + const userTimeOptions = { + timeZone: userTimezone, + hour12: true, + year: '2-digit', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + }; + formattedLastUpdated = utcDate.toLocaleTimeString(undefined, userTimeOptions); } - - - - - elements.push( -
- -
- ); - - - - if(data) { - - elements.push( - ); - - for (const [subject, courseArr] of Object.entries(data)) { - elements.push(

{subject}

); - for (const course of courseArr) { - - const tableKey = `${course.subject}${course.catalog_number}`; - const isExpanded = tableExpansions[tableKey]; - - const trClassName = `${isExpanded ? 'expanded' : 'collapsed'} animate-expansion`; - - // console.log(`Rendering table ${tableKey}: ${isExpanded ? 'expanded' : 'collapsed'}`); - // const trClassName = isExpanded ? 'expanded' : 'collapsed'; - const table = []; - table.push( - - toggleTableExpansion(tableKey)}>{course.subject} {course.catalog_number}: {course.descr} - - -
- - - -
- - - ); - - table.push( - - Section Type - Section Number - Instructor - Enrollment - -
- Days - Time -
- - - ); - - for (const section of course.sessions) { - const classSectionString = section.topic !== null ? `${section.class_section} - ${section.topic}` : `${section.class_section}`; - - table.push( - {section.section_type} ({section.units} units) - {classSectionString} - {generateInstructorHTML(section.instructors)} - {`${section.enrollment_total}/${section.class_capacity}`} - -
- {generateMeetingTable(section.meetings)} -
- - ); - } - - elements.push( -
- - {table} -
+ const renderCourseCard = (course) => { + const tableKey = `${course.subject}${course.catalog_number}`; + const isExpanded = tableExpansions[tableKey]; + const sectionId = `${tableKey}-content`; + const sessions = course.sessions ?? []; + + return ( +
+
+ +
+ + SIS + + + theCourseForum + + + VA Grades + +
+
+ +
+ ); + }; - } + const renderCourses = () => { + if (!data) { + return null; } - - } - - - + return Object.entries(data).map(([subject, courseArr]) => ( +
+

{subject}

+ {courseArr.map((course) => renderCourseCard(course))} +
+ )); + }; return (
-
- {elements} - {noDataFound &&

No classes found for {department} in the semester.

} +
+ {departmentTitle &&

{departmentTitle}

} + {formattedLastUpdated &&

Last Updated on {formattedLastUpdated}

} +
+ + +
+ {data && ( + + )}
+
{renderCourses()}
+ {noDataFound &&

No classes found for {department} in the semester.

} {showBackToTop && (