Skip to content

Commit

Permalink
Updated main UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spazzinq
Spazzinq committed Nov 13, 2024
1 parent 18528ff commit e9a621a
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 111 deletions.
4 changes: 2 additions & 2 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function RootLayout({
>
<div className="flex flex-col h-screen ">
<Navbar />
<main className="container mx-auto max-w-7xl px-1 md:px-6 flex-grow">
<main className="container mx-auto flex-grow px-1 lg:px-7 lg:pt-10">
{children}
</main>
<footer className="w-full flex items-center justify-center py-3">
Expand All @@ -67,7 +67,7 @@ export default function RootLayout({
</span>
<br />

<div className=" space-x-5">
<div className="space-x-5">
<Link
isExternal
href="https://www.sccs.swarthmore.edu/docs/policy"
Expand Down
16 changes: 7 additions & 9 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default async function Page(props: {
homePageProps["fullCourseList"] = (
<Suspense
fallback={
<div className="grid gap-4 ">
<div className="grid gap-3">
<Skeleton className="rounded-lg w-full h-48 align-top justify-start" />
<Skeleton className="rounded-lg w-full h-48 align-top justify-start" />
<Skeleton className="rounded-lg w-full h-48 align-top justify-start" />
Expand Down Expand Up @@ -116,18 +116,16 @@ async function Home(props: any) {

return (
<>
<div className="grid grid-cols-3 p-4 h-full">
<div className="col-span-3 md:col-span-2 col-start-1">
<div className="grid grid-rows-subgrid grid-cols-1 gap-5 h-full">
<div className="row-start-1 mt-auto mb-auto">
<Search codes={codes} terms={terms} times={uniqueTimes} />
</div>
<div className="row-start-2 h-[62vh] overflow-y-scroll overflow-x-clip scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent">
<div className="grid grid-cols-10 p-4 h-full">
<div className="col-span-10 lg:col-span-7">
<div className="flex flex-col gap-5 h-full">
<Search codes={codes} terms={terms} times={uniqueTimes} />
<div className="row-start-2 h-[70vh] overflow-y-scroll overflow-x-clip scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent">
{props.fullCourseList}
</div>
</div>
</div>
<div className="col-span-3 md:col-start-3">
<div className="col-span-10 lg:col-span-3">
<CreatePlan />
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/rating/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,13 +182,13 @@ export default function RatingPage() {
<></>
)}

<Card className="my-10 mx-1 md:mx-4 justify-center items-center place-items-center">
<Card className="my-10 mx-1 lg:mx-4 justify-center items-center place-items-center">
<CardHeader className="">
<h1 className=" text-center ml-auto mr-auto col-span-3 row-start-1 row-span-1 text-2xl mb-2 mt-2">
Leave a Rating
</h1>
</CardHeader>
<CardBody className="flex gap-5 px-4 md:px-20 w-full">
<CardBody className="flex gap-5 px-4 lg:px-20 w-full">
<Autocomplete
isRequired
aria-label="Select Professor"
Expand Down
28 changes: 15 additions & 13 deletions components/CourseCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ export default function CourseCard(props: any) {
return (
<div
key={index}
className="flex w-6 h-6 md:w-8 md:h-8 rounded-md justify-center items-center"
className="flex w-6 h-6 lg:w-8 lg:h-8 rounded-md justify-center items-center"
style={{ backgroundColor: color_mappings[index] }}
>
<p className="font-bold text-sm md:text-base text-white">{item[0]}</p>
<p className="font-bold text-sm lg:text-base text-white">{item[0]}</p>
</div>
);
}
Expand Down Expand Up @@ -87,19 +87,21 @@ export default function CourseCard(props: any) {
<CardHeader className="pl-6" onClick={() => updatePlan(props.course)}>
<div className="flex items-center flex-row justify-between w-full">
<div className="flex flex-col">
<h1 className="font-bold text-md md:text-2xl text-left">
<h1 className="font-bold text-md lg:text-2xl text-left">
{props.course.courseTitle.replace("&amp;", "&")}
</h1>
<h2 className="flex text-sm md:text-lg text-left">
<h2 className="flex text-sm lg:text-lg text-left">
{props.course.subject} {props.course.courseNumber} |{" "}
{props.course.creditHours} credit(s)
{props.course.sectionAttributes.length > 0 && (
<div className="hidden md:flex max-w-48 md:max-w-64 items-center">&nbsp;|&nbsp;{attributeCodes}</div>
<div className="hidden lg:flex max-w-48 lg:max-w-64 items-center">
&nbsp;|&nbsp;{attributeCodes}
</div>
)}
</h2>
</div>
<div className="flex items-center pt-2">
<div className="absolute top-4 right-4 h-20 w-20 md:h-24 md:w-24 overflow-clip rounded-md">
<div className="absolute top-4 right-4 h-20 w-20 lg:h-24 lg:w-24 overflow-clip rounded-md">
<Image
// src={"https://www.swarthmore.edu/sites/default/files/styles/headshot/public/assets/images/user_photos/cmurphy4.jpg.webp"}
alt={props.course.instructor.displayName.replace("&#39;", "'")}
Expand All @@ -120,12 +122,12 @@ export default function CourseCard(props: any) {
<div className="flex justify-between flex-row">
<div className="gap-4">
{props.course.facultyMeet.meetingTimes.room ? (
<div className="bg-[#2C2C33] py-1 px-2 md:py-2 md:px-3 w-auto max-w-64 rounded-md">
<div className="font-semibold text-sm md:text-lg text-white">
<div className="bg-[#2C2C33] py-1 px-2 lg:py-2 lg:px-3 w-auto max-w-64 rounded-md">
<div className="font-semibold text-sm lg:text-lg text-white">
{props.course.facultyMeet.meetingTimes.buildingDescription}{" "}
{props.course.facultyMeet.meetingTimes.room}
</div>
<div className="text-sm md:text-base">
<div className="text-sm lg:text-base">
{props.course.facultyMeet.meetingTimes ? (
<div className="mt-1">
<div className="font-normal">
Expand Down Expand Up @@ -166,8 +168,8 @@ export default function CourseCard(props: any) {
<div className="flex flex-col pr-3 pt-10">
<div className="flex flex-row gap-5 justify-end">
<div>
<div className="text-right text-sm md:text-md">Instructor</div>
<div className="text-right text-md md:text-xl font-bold">
<div className="text-right text-sm lg:text-md">Instructor</div>
<div className="text-right text-md lg:text-xl font-bold">
{props.course.instructor.displayName.replace("&#39;", "'")}
</div>
</div>
Expand All @@ -188,8 +190,8 @@ export default function CourseCard(props: any) {
<Error color="error" />
</div>
) : (
<div className="flex flex-row ml-auto pt-1 md:pt-2 gap-2">
<div className="text-sm md:text-md text-slate">
<div className="flex flex-row ml-auto pt-1 lg:pt-2 gap-2">
<div className="text-sm lg:text-md text-slate">
Seats Available: {props.course.seatsAvailable}
</div>
</div>
Expand Down
141 changes: 70 additions & 71 deletions components/CreatePlan.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import {
import AddIcon from "@mui/icons-material/Add";
import DeleteIcon from "@mui/icons-material/Delete";
import IosShareIcon from "@mui/icons-material/IosShare";
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import HighlightOffIcon from "@mui/icons-material/HighlightOff";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";

import axios from "axios";
import { Select, SelectItem } from "@nextui-org/react";
import { useRouter } from "next/navigation";
Expand Down Expand Up @@ -128,7 +130,7 @@ export default function CreatePlan(props: any) {
<Card
key={course.id}
className={
"bg-light_foreground min-h-14 max-h-14 rounded-sm scroll-none drop-shadow-lg transition-colors mb-3"
"bg-light_foreground min-h-14 rounded-sm scroll-none drop-shadow-lg transition-colors"
}
shadow="sm"

Expand All @@ -142,19 +144,17 @@ export default function CreatePlan(props: any) {
/>

<CardHeader className="justify-between ">
<div className="ml-4">
<div className="ml-2 lg:text-base truncate">
{course.courseTitle.replace(/&amp;/g, "&")}
</div>
<Button
isIconOnly
className=""
startContent={<HighlightOffIcon />}
size={"sm"}
onClick={() =>
removeCourseFromPlan(selectedCoursePlan[0], course)
}
>
X
</Button>
/>
</CardHeader>
</Card>
)
Expand All @@ -167,79 +167,78 @@ export default function CreatePlan(props: any) {

const scrollToPlan = () => {
if (scrollRef.current)
scrollRef.current.scrollIntoView({behavior: 'smooth', inline: "start"});
}
scrollRef.current.scrollIntoView({ behavior: "smooth", inline: "start" });
};

return (
<>
<Divider className="hidden md:absolute h-[60vh] mt-32" orientation="vertical" />

<div className="grid grid-cols-1 grid-rows-10 md:ml-10 gap-5 h-[66vh] mt-10 overflow-clip">
<div className="flex flex-row" ref={scrollRef}>
<div className="font-bold text-primary h1">Create a Plan</div>
<button className="flex md:hidden" onClick={scrollToPlan}>
<ExpandLessIcon/>
</button>
</div>
<div className="grid grid-rows-subgrid grid-cols-3 gap-2 ">
<Input
isRequired
className="col-span-2 "
label="Give your plan a name..."
size="lg"
value={coursePlanName}
onChange={(event: any) => {
setCoursePlanName(event.target.value);
}}
/>
<Button
size="lg"
startContent={<AddIcon />}
onClick={() => createPlan()}
>
<div>Create</div>
</Button>
</div>
<div className="flex flex-col mt-5 lg:mt-0 lg:ml-10 gap-5">
{/* <div className="flex flex-row" ref={scrollRef}>
<div className="font-bold text-primary h1">Create a Plan</div>
<button className="flex lg:hidden" onClick={scrollToPlan}>
<ExpandLessIcon />
</button>
</div> */}
<div className="flex flex-col gap-3">
<div>
<div className="font-bold text-lg">Create a Plan</div>
<div className="flex mt-2 items-center gap-2">
<Input
isRequired
label="Plan Name"
placeholder="Name your plan..."
size="lg"
value={coursePlanName}
onChange={(event: any) => {
setCoursePlanName(event.target.value);
}}
/>
<Button
startContent={<AddIcon />}
size="md"
onClick={() => createPlan()}
></Button>
</div>
</div>

<div>
<div className="grid grid-rows-subgrid grid-cols-3 ">
<Divider className="mt-2" />
<div className="text-center">or</div>
<Divider className="mt-2" />
<div className="grid grid-cols-3 items-center">
<Divider />
{/* --------------------------------- or --------------------------- */}
<div className="text-center mt-1">or</div>
<Divider />
</div>
</div>

{/* --------------------------------- or --------------------------- */}

<div className="font-bold gap-0">Select a Plan</div>
<div className="grid grid-cols-5 gap-2">
<Select
className="col-span-3"
label="Select Plan"
selectedKeys={selectedCoursePlan}
selectionMode="single"
size="sm"
onChange={handleSelectionChange}
>
{coursePlans != null
? coursePlans.map((plan: any) => (
<SelectItem key={plan.id}>{plan.name}</SelectItem>
))
: null}
</Select>

<Button
isIconOnly
className=""
size="md"
startContent={<DeleteIcon />}
onClick={deletePlan}
/>
<Button isIconOnly size="md" startContent={<IosShareIcon />} />
<div>
<div className="font-bold text-lg">Select a Plan</div>
<div className="flex mt-2 items-center justify gap-2">
<Select
className="col-span-3"
label="Selected Plan"
selectedKeys={selectedCoursePlan}
selectionMode="single"
size="lg"
onChange={handleSelectionChange}
>
{coursePlans != null
? coursePlans.map((plan: any) => (
<SelectItem key={plan.id}>{plan.name}</SelectItem>
))
: null}
</Select>

<Button
isIconOnly
size="md"
startContent={<DeleteIcon />}
onClick={deletePlan}
/>
<Button isIconOnly size="md" startContent={<IosShareIcon />} />
</div>
</div>
</div>

<div
className="grid overflow-y-scroll gap-1 h-[30vh] mt-5 scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent"
className="grid grid-cols-1 h-[55vh] overflow-y-scroll gap-2 scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent"
id="scrollMe"
>
<CoursesList />
Expand Down
2 changes: 1 addition & 1 deletion components/FullCourseList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function FullCourseList({
return (
<>
<div ref={myref}></div>
<div className="grid gap-4 ">
<div className="grid gap-3">
{courses?.map((course: any) => (
<div key={course.id}>
<CourseCard course={course} />
Expand Down
10 changes: 5 additions & 5 deletions components/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,10 @@ export default function Search(props: any) {
};

return (
<div className="grid grid-cols-6 gap-5">
<div className="grid grid-cols-9 gap-2">
<Input
isClearable
className="md:max-w-xs col-span-6 md:col-span-3"
className="col-span-9 lg:col-span-3"
defaultValue={searchParams.get("query")?.toString()}
label="Search"
labelPlacement="inside"
Expand All @@ -152,7 +152,7 @@ export default function Search(props: any) {
/>

<Select
className="max-w-xs col-span-2 md:col-span-1"
className="col-span-3 lg:col-span-2"
defaultSelectedKeys={searchParams.get("term")?.toString()}
disallowEmptySelection={true}
label="Select Term"
Expand All @@ -163,7 +163,7 @@ export default function Search(props: any) {
{RenderSelectOptions()}
</Select>
<Select
className="max-w-xs col-span-2 md:col-span-1"
className="col-span-3 lg:col-span-2"
label="Day of the Week"
selectedKeys={selectedDOTW}
selectionMode={"multiple"}
Expand Down Expand Up @@ -194,7 +194,7 @@ export default function Search(props: any) {
</Select>

<Select
className="max-w-xs col-span-2 md:col-span-1"
className="col-span-3 lg:col-span-2"
label="Start Time"
selectedKeys={selectedStartTime}
selectionMode={"multiple"}
Expand Down
Loading

0 comments on commit e9a621a

Please sign in to comment.