Skip to content

Commit

Permalink
[wip] style course list card
Browse files Browse the repository at this point in the history
  • Loading branch information
@rebeccahongsf
rebeccahongsf committed May 8, 2024
1 parent 6f30a00 commit 07f5486
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 166 deletions.
54 changes: 28 additions & 26 deletions src/components/algolia-results/summer-course/summer-course.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Image from "next/image";
import useAccordion from "@lib/hooks/useAccordion";
import {H3, H4} from "@components/elements/headers";
import {formatCurrency} from "@lib/utils/format-currency";
import {ChevronDownIcon} from "@heroicons/react/20/solid";
import { CheckCircleIcon, ChevronDownIcon } from "@heroicons/react/24/solid";

type Props = {
hit: AlgoliaHit
Expand All @@ -26,20 +26,20 @@ const SummerCourse = ({hit}: Props) => {
});

return (
<div className="flex flex-col">
<div className="flex gap-5">
<div className="flex flex-col rounded-[25px] bg-fog-light rs-py-3 rs-px-4 rs-mb-4">
<div className="flex gap-11">

<div className="flex flex-col flex-grow">
<H3><a href={hit.url}>{hit.title}</a></H3>
<div className="order-first">
<H3><a href={hit.url} className="font-normal">{hit.title}</a></H3>
<div className="order-first font-semibold text-archway-dark mb-6">
{hit.sum_course_catalog_number}
</div>
</div>

{hit.photo &&
<div className="order-first relative aspect-1 w-1/4">
<Image
className="object-cover"
className="object-cover rounded-[25px]"
src={hit.photo}
alt={""}
fill
Expand All @@ -48,93 +48,95 @@ const SummerCourse = ({hit}: Props) => {
</div>
}

<div className="w-1/4 shrink-0">
<div className="w-1/4 shrink-0 *:mb-4">
{hit.sum_course_units &&
<div>
<span className="font-bold">Units: </span>{hit.sum_course_units}
<span className="font-semibold">Units: </span>{hit.sum_course_units}
</div>
}
{(start && end) &&
<div>
<span className="font-bold">Dates: </span>{`${start} - ${end}`}
<span className="font-semibold">Dates: </span>{`${start} - ${end}`}
</div>
}
{hit.sum_course_course_cost &&
<div>
<span className="font-bold">Course Cost: </span>{formatCurrency(hit.sum_course_course_cost)}
<span className="font-semibold">Course Cost: </span>{formatCurrency(hit.sum_course_course_cost)}
</div>
}
{hit.sum_course_population &&
<div>
<span className="font-bold">Units: </span>{hit.sum_course_population.join(", ")}
<span className="font-semibold">Population: </span>{hit.sum_course_population.join(", ")}
</div>
}
</div>
</div>

{hit.sum_course_availability &&
<div className="order-first">
{hit.sum_course_availability}
<div className="order-first flex flex-row items-center rs-mb-2">
<CheckCircleIcon width={20} className="text-digital-green mr-2" />
{hit.sum_course_availability.toUpperCase()}
</div>
}

<button {...buttonProps} className="group">
<button {...buttonProps} className="group text-digital-blue underline">
<span className="flex gap-5 items-center w-full">
<H4 className="ml-auto mb-0 p-0 text-m0 group-hocus:underline">Show all details</H4>
<H4 className="ml-auto mb-0 p-0 text-m0 group-hocus:underline">{expanded ? "Collapse details" : "Show all details"}</H4>
<ChevronDownIcon width={20} className={expanded ? "rotate-180" : undefined}/>
</span>
</button>

<div {...panelProps}>
<div className="flex gap-5">
<div className="flex gap-5 rs-mt-2">
<div className="flex-grow">
<div>
<div className="font-bold">Summary:</div>
<div className="font-semibold text-m1 mb-5">Summary:</div>
{hit.html}
</div>

{hit.sum_course_notes &&
<div>
<div className="font-bold">Course notes:</div>
<div className="mt-8">
<div className="font-semibold text-m1 mb-5">Course notes:</div>
{hit.sum_course_notes}
</div>
}
</div>

<div className="w-1/4 shrink-0">
<div className="w-1/4 shrink-0 *:mb-4">
<div className="font-semibold text-m1">Details:</div>
{hit.sum_course_interest &&
<div>
<span className="font-bold">Interest Area: </span>{hit.sum_course_interest.join(", ")}
<span className="font-semibold">Interest Area: </span>{hit.sum_course_interest.join(", ")}
</div>
}

{hit.sum_course_schedule &&
<div>
<span className="font-bold">Time: </span>{hit.sum_course_schedule}
<span className="font-semibold">Time: </span>{hit.sum_course_schedule}
</div>
}

{hit.sum_course_format &&
<div>
<span className="font-bold">Format: </span>{hit.sum_course_format}
<span className="font-semibold">Format: </span>{hit.sum_course_format}
</div>
}

{hit.sum_course_length &&
<div>
<span className="font-bold">Course length: </span>{hit.sum_course_length}
<span className="font-semibold">Course length: </span>{hit.sum_course_length}
</div>
}

{hit.sum_course_prerequisites &&
<div>
<span className="font-bold">Pre-requisites: </span>{hit.sum_course_prerequisites}
<span className="font-semibold">Pre-requisites: </span>{hit.sum_course_prerequisites}
</div>
}

{hit.sum_course_cross_listing &&
<div>
<span className="font-bold">Cross Listings: </span>{hit.sum_course_cross_listing}
<span className="font-semibold">Cross Listings: </span>{hit.sum_course_cross_listing}
</div>
}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/elements/headers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {twMerge} from "tailwind-merge";

type Props = HtmlHTMLAttributes<HTMLHeadingElement>

const headingLinkClasses = "[&_a]:text-digital-red [&_a]:hocus:text-black [&_a]:hocus:underline";
const headingLinkClasses = "[&_a]:text-digital-blue [&_a]:hocus:text-black [&_a]:no-underline [&_a]:hocus:underline";

export const H1 = ({children, className, ...props}: Props) => {
return (
Expand Down
190 changes: 51 additions & 139 deletions src/components/paragraphs/summer-user-favorite/user-favorite-paragraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,78 +2,64 @@ import { HtmlHTMLAttributes} from "react";
import {
ParagraphSumUserFavorite
} from "@lib/gql/__generated__/drupal.d";
import { H2, H3 } from "@components/elements/headers";
import Wysiwyg from "@components/elements/wysiwyg";
import Image from "next/image";
import { CheckCircleIcon } from "@heroicons/react/24/solid";
import SummerCourse from "@components/algolia-results/summer-course/summer-course";

const favoriteCourseList = [
{
"id": "bKznYa7VJrv0elPPaZ1ZI3QkgRJyFzfOfX8b",
"path": "https://example.com/g76H32uJqR",
"sumCourseAvailability": "Available",
"sumCourseCatalogNumber": "ASTRO-101",
"sumCourseClassNumber": 492,
"sumCourseCourseCost": 7800,
"sumCourseCrossListing": ["x4Y7zJ9A", "mP1lN3oR"],
"sumCourseDescription": "In turpis. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
"sumCourseEndDate": "2024-05-17T11:09:28.440Z",
"sumCourseFormat": "Hybrid",
"sumCourseImage": {
"url": "http://summer.lagunita.loc/sites/summer/files/media/image/temp-img_1.jpg",
"alt": ""
},
"sumCourseInstructors": ["5n64D08X5K", "Px2Ng5z68R"],
"sumCourseInterestArea": "Mathematics",
"sumCourseLength": "Short",
"sumCourseNotes": "Vivamus consectetuer hendrerit lacus. Proin faucibus arcu quis ante. Nunc nonummy metus. Sed hendrerit. Maecenas vestibulum mollis diam.",
"sumCoursePopulation": ["Graduate", "Part-time"],
"sumCoursePrerequisites": ["ASTRO-001"],
"sumCourseSchedule": "e4KLfvQNQw1o3a0WmWLaN00b63IXixsNcLdPpGYSZa",
"sumCourseStartDate": "2023-08-14T04:33:14.440Z",
"sumCourseSyllabusFile": {
"url": "https://example.com/syllabus_L6T8h1J6.pdf",
"name": "syllabus_yeKcGkVp.pdf"
},
"sumCourseUniqueImportId": 640,
"sumCourseUnits": 3,
"sumStudentsAlsoStudied": 72,
"title": "Race Against the Stars"
"url": "https://example.com/g76H32uJqR",
"title": "Race Against the Stars",
"summary": undefined,
"photo": "http://summer.lagunita.loc/sites/summer/files/media/image/temp-img_1.jpg",
"updated": 0,
"html": "This class introduces the core concepts and methods of Cultural and Social Anthropology. Through the ethnographic study of human societies, anthropology has emerged as a dynamic discipline that inquiries into the complexity of humanity. It has produced new kinds of inquiry into race, class, gender, history, power, language, economy, culture, and local, transnational, and global phenomena. This course will introduce students to anthropology’s unique approach to studying human culture and society and teach them core anthropological concepts. It will also present students with cross-cultural case studies on contemporary issues, including environmental problems and climate change, capitalism, gender and sexuality, race, immigration, and colonialism.",
"type": "",
"sum_course_availability": "Available",
"sum_course_catalog_number": "ASTRO-101",
"sum_course_class_number": "492",
"sum_course_course_cost": 7800,
"sum_course_cross_listing": "ASTRO-100",
"sum_course_description": "In turpis. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas arcu quis ligula mattis placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
"sum_course_end_date": "2024-05-17T11:09:28.440Z",
"sum_course_format": "Hybrid",
"sum_course_interest": ["Mathematics"],
"sum_course_length": "Short",
"sum_course_notes": "Vivamus consectetuer hendrerit lacus. Proin faucibus arcu quis ante. Nunc nonummy metus. Sed hendrerit. Maecenas vestibulum mollis diam.",
"sum_course_population": ["Graduate", "Part-time"],
"sum_course_prerequisites": "ASTRO-001",
"sum_course_schedule": "9:00 - 11:30am Monday, Wednesday, Friday",
"sum_course_start_date": "2023-08-14T04:33:14.440Z",
"sum_course_units": 3,
"sum_students_also_studied": 72
},
{
"id": "dO3RbI6Fov8Na6RpP3nM8U2RkLXtVcTmS6R5",
"path": "https://example.com/f94Z29cVqS",
"sumCourseAvailability": "Not Available",
"sumCourseCatalogNumber": "ANTHRO-123",
"sumCourseClassNumber": 815,
"sumCourseCourseCost": 4750,
"sumCourseCrossListing": ["oW8aE5bT", "qD1fH7jR"],
"sumCourseDescription": "Quisque rutrum. Etiam iaculis nunc ac metus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Phasellus consectetuer vestibulum elit.",
"sumCourseEndDate": "2023-11-30T05:07:42.015Z",
"sumCourseFormat": "Online",
"sumCourseImage": {
"url": "http://summer.lagunita.loc/sites/summer/files/media/image/temp-img_1.jpg",
"alt": ""
},
"sumCourseInstructors": ["VzQfY4mCqL", "YjBrV8yNpW"],
"sumCourseInterestArea": "Science",
"sumCourseLength": "Long",
"sumCourseNotes": "Etiam feugiat lorem non metus. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Sed in libero ut nibh placerat accumsan. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla.",
"sumCoursePopulation": ["Undergraduate", "Full-time"],
"sumCoursePrerequisites": ["oW8aE5bT", "qD1fH7jR"],
"sumCourseSchedule": "m6L6NbGcUgDRirfDoDZF",
"sumCourseStartDate": "2023-03-12T17:38:42.015Z",
"sumCourseSyllabusFile": {
"url": "https://example.com/syllabus_D5F6s3Jv.pdf",
"name": "syllabus_xN3G6sRc.pdf"
},
"sumCourseUniqueImportId": 318,
"sumCourseUnits": 8,
"sumStudentsAlsoStudied": 58,
"title": "Microbiology: Human Health & Society"
"url": "https://example.com/f94Z29cVqS",
"title": "Microbiology: Human Health & Society",
"summary": undefined,
"photo": "http://summer.lagunita.loc/sites/summer/files/media/image/temp-img_1.jpg",
"updated": 0,
"html": "This class introduces the core concepts and methods of Cultural and Social Anthropology. Through the ethnographic study of human societies, anthropology has emerged as a dynamic discipline that inquiries into the complexity of humanity. It has produced new kinds of inquiry into race, class, gender, history, power, language, economy, culture, and local, transnational, and global phenomena. This course will introduce students to anthropology’s unique approach to studying human culture and society and teach them core anthropological concepts. It will also present students with cross-cultural case studies on contemporary issues, including environmental problems and climate change, capitalism, gender and sexuality, race, immigration, and colonialism.",
"type": "",
"sum_course_availability": "Not Available",
"sum_course_catalog_number": "ASTRO-123",
"sum_course_class_number": "815",
"sum_course_course_cost": 4750,
"sum_course_cross_listing": "ASTRO-101",
"sum_course_description": "Quisque rutrum. Etiam iaculis nunc ac metus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Phasellus consectetuer vestibulum elit.",
"sum_course_end_date": "2023-11-30T05:07:42.015Z",
"sum_course_format": "Online",
"sum_course_interest": ["Science"],
"sum_course_length": "Long",
"sum_course_notes": "Etiam feugiat lorem non metus. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Sed in libero ut nibh placerat accumsan. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla.",
"sum_course_population": ["Undergraduate", "Full-time"],
"sum_course_prerequisites": "ASTRO-001",
"sum_course_schedule": "9:00 - 11:30am Monday, Wednesday, Friday",
"sum_course_start_date": "2023-03-12T17:38:42.015Z",
"sum_course_units": 8,
"sum_students_also_studied": 58
}
]


type Props = HtmlHTMLAttributes<HTMLDivElement> & {
paragraph: ParagraphSumUserFavorite
}
Expand All @@ -85,81 +71,7 @@ const UserFavoriteParagraph = async ({paragraph, ...props}: Props) => {
<div>
{/* Favorites List */}
</div>
<section>
{favoriteCourseList.map((course) =>
<article key={course.id} className="rounded-[25px] bg-fog-light rs-py-3 rs-px-4 rs-mb-4">
<div className="flex flex-row justify-between rs-mb-1">
<div className="flex flex-row items-center"><CheckCircleIcon width={20} className="text-digital-green mr-2" />{course.sumCourseAvailability.toUpperCase()}</div>
<div>Favorite Icon Here</div>
</div>
<div className="flex flex-row rs-mb-3">
{course.sumCourseImage &&
<div className="relative aspect-1/1 w-full h-[200px] md:w-[500px] md:h-[500px] *:rounded-[25px]">
<Image
className="object-cover"
src={course.sumCourseImage.url}
alt={course.sumCourseImage.alt || ""}
fill
sizes="100vw"
/>
</div>
}
<div>
<div>{course.sumCourseCatalogNumber}</div>
<H2>{course.title}</H2>
</div>
<div>
{course.sumCourseUnits && <div><span>Units: </span>{course.sumCourseUnits}</div>}
{course.sumCourseCourseCost && <div><span>Course cost: </span>{course.sumCourseCourseCost}</div>}
{course.sumCoursePopulation &&
<div>
<span>Population: </span>
{course.sumCoursePopulation.map((population, i) => <p className="inline-block mb-0" key={`population-${i}`}>
{population}{course.sumCoursePopulation && course.sumCoursePopulation.length > 1 && i !== course.sumCoursePopulation.length - 1 && ", "}
</p>
)}
</div>
}
</div>
</div>

<button>Show all details</button>
{/* Show/Hide */}
<div className="flex flex-row rs-mt-2">
<div>
{course.sumCourseDescription &&
<div className="rs-mb-1"><H3 className="text-m1 mb-5">Summary:</H3><Wysiwyg html={course.sumCourseDescription} /></div>
}
{course.sumCourseNotes &&
<><H3 className="text-m1 mb-5">Course notes:</H3><Wysiwyg html={course.sumCourseNotes} /></>
}
</div>
<div>
<H3 className="text-m1 ">Details:</H3>
{course.sumCourseInterestArea && <div><span>Interest Area:</span> {course.sumCourseInterestArea}</div>}
{course.sumCourseSchedule && <div><span>Time:</span> {course.sumCourseSchedule}</div>}
{course.sumCourseUnits && <div><span>Units:</span> {course.sumCourseUnits}</div>}
{course.sumCourseFormat && <div><span>Format: </span>{course.sumCourseFormat}</div>}
{course.sumCourseLength && <div><span>Course length:</span>{course.sumCourseLength}</div>}

{course.sumCoursePrerequisites && (
<div>
<span>Cross Listings: </span>
{course.sumCoursePrerequisites && course.sumCoursePrerequisites.length > 1 ? course.sumCoursePrerequisites.join(", ") : course.sumCoursePrerequisites[0]}
</div>
)}

{course.sumCourseCrossListing && (
<div>
<span>Cross Listings: </span>
{course.sumCourseCrossListing && course.sumCourseCrossListing.length > 1 ? course.sumCourseCrossListing.join(", ") : course.sumCourseCrossListing[0]}
</div>
)}
</div>
</div>
</article>
)}
</section>
{favoriteCourseList.map((course, i) => <SummerCourse hit={course} key={i} />)}
</div>
)
}
Expand Down

0 comments on commit 07f5486

Please sign in to comment.