feature: clipboard paper animation (#116)

undefined
HackAtUCI · Nov 3, 2023 · 2e37433 · 2e37433
1 parent 0afac00
commit 2e37433
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 59 deletions.
diff --git a/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss b/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss
@@ -2,6 +2,10 @@
 @use "zothacks-theme" as theme;
 
 .accordion {
+ padding-top: 50px;
+ padding-bottom: 100px;
+ @include bootstrap.rfs(7.5rem, border-radius);
+ border: 3px solid black;
  --bs-accordion-btn-icon: url("~@/assets/icons/accordion-btn.svg");
  --bs-accordion-btn-active-icon: url("~@/assets/icons/accordion-btn.svg");
  --bs-accordion-btn-icon-width: 25px;
@@ -14,20 +18,25 @@
 .clip {
  position: absolute;
  width: 75%;
- top: 0;
+ top: 1%;
  left: 50%;
  transform: translate(-50%, -55%);
+ z-index: 10;
 
  @include bootstrap.media-breakpoint-up(lg) {
  width: 60%;
  }
 }
-
 .clipboard {
  @include bootstrap.rfs(7.5rem, border-radius);
+ background-color: theme.$brown;
+ padding: 5px;
+ border: 1.25rem solid theme.$brown;
+}
 
+.clipboardPaper {
+ @include bootstrap.rfs(7.5rem, border-radius);
  background-color: white;
- border: 1.25rem solid theme.$brown;
 }
 
 .accordionItem {

diff --git a/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx b/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { motion, Variants } from "framer-motion";
 
 import Accordion from "react-bootstrap/Accordion";
 import Col from "react-bootstrap/Col";
@@ -39,69 +40,77 @@ const weekdayFormat = new Intl.DateTimeFormat("en", {
  weekday: "long",
 });
 
+const variant: Variants = {
+ initial: {
+ y: 200,
+ },
+ animate: {
+ y: 0,
+ },
+};
+
 function ClipboardSchedule({ schedule }: ClipboardScheduleProps) {
  return (
- <Container
- as="section"
- className={styles.clipboard + " px-0 pt-5 position-relative"}
- >
+ <Container as="section" className={" px-0 pt-0 position-relative"}>
  <div className={styles.clip}>
  <Image src={clip} alt="Clipboard clip" className={styles.clip} />
  </div>
- <Accordion defaultActiveKey="0" className={styles.accordion}>
- {schedule.map((day, i) => (
- <div className="mt-5" key={i}>
- <h2>
- {weekdayFormat.format(
- utcToZonedTime(day[0].startTime, "America/Los_Angeles"),
- )}
- </h2>
- <p className="text-center mb-5 h3">
- {monthDayFormat.format(
- utcToZonedTime(day[0].startTime, "America/Los_Angeles"),
- )}
- </p>
- {day.map(
- ({ title, description, location, hosts, startTime, endTime }) => {
- const startTimeZoned = utcToZonedTime(
+ <div className={styles.clipboard}>
+ <motion.div
+ className={styles.clipboardPaper}
+ variants={variant}
+ initial="initial"
+ animate="animate"
+ >
+ <Accordion defaultActiveKey="0" className={styles.accordion}>
+ {schedule.map((day, i) => (
+ <div key={i}>
+ <h2 className="mt-5">
+ {weekdayFormat.format(day[0].startTime)}
+ </h2>
+ <p className="text-center mb-5 h3">
+ {monthDayFormat.format(day[0].startTime)}
+ </p>
+ {day.map(
+ ({
+ title,
+ description,
+ location,
+ hosts,
  startTime,
- "America/Los_Angeles",
- ),
- endTimeZoned = utcToZonedTime(endTime, "America/Los_Angeles");
- return (
- <Accordion.Item
- key={title}
- eventKey={title}
- className={styles.accordionItem}
- >
- <Accordion.Header as="h3">
- <Row className="w-100 align-items-center">
- <Col lg>
- <span className={styles.eventTitle + " h3 mb-0"}>
- {title}
- </span>
- </Col>
- {/* <span>{hosts?.join()}</span> */}
+ endTime,
+ }) => (
+ <Accordion.Item
+ key={title}
+ eventKey={title}
+ className={styles.accordionItem}
+ >
+ <Accordion.Header as="h3">
+ <Row className="w-100 align-items-center">
+ <Col lg>
+ <span className={styles.eventTitle + " h3 mb-0"}>
+ {title}
+ </span>
+ </Col>
+ {/* <span>{hosts?.join()}</span> */}
 
- <Col lg className={styles.mobileLocation}>
- <span>
- {location},{" "}
- {dateTimeFormat.formatRange(
- startTimeZoned,
- endTimeZoned,
- )}
- </span>
- </Col>
- </Row>
- </Accordion.Header>
- <Accordion.Body>{description}</Accordion.Body>
- </Accordion.Item>
- );
- },
- )}
- </div>
- ))}
- </Accordion>
+ <Col lg className={styles.mobileLocation}>
+ <span>
+ {location},{" "}
+ {dateTimeFormat.formatRange(startTime, endTime)}
+ </span>
+ </Col>
+ </Row>
+ </Accordion.Header>
+ <Accordion.Body>{description}</Accordion.Body>
+ </Accordion.Item>
+ ),
+ )}
+ </div>
+ ))}
+ </Accordion>
+ </motion.div>
+ </div>
  </Container>
  );
 }