From 2df99f997c7476b833ac5595e2eb861a0de31d3e Mon Sep 17 00:00:00 2001 From: Sam Der Date: Sun, 29 Oct 2023 13:49:41 -0700 Subject: [PATCH] Set up sample clipboard (#95) * feat: Schedule Page component structure feat: component organiztion on schedule page * feature: create clipboard schedule * feat: draft clipboard * fix: build error * fix: heading sizes and h1 title * fix: Bootstrap vars, set up Accordion item map * fix: remove unused files * fix: responsive margins, accessibility * fix: simplify accordion header layout --------- Co-authored-by: Tyler Yu Co-authored-by: Albert Wang --- .../src/app/resources/{#page.tsx => page.tsx} | 0 .../src/app/schedule/{#page.tsx => page.tsx} | 0 apps/site/src/assets/icons/accordion-btn.svg | 21 +++++++ apps/site/src/assets/images/clip.svg | 22 +++++++ apps/site/src/lib/styles/_zothacks-theme.scss | 1 + apps/site/src/lib/styles/globals.scss | 19 ++++++ .../views/Home/sections/FAQ/FAQ.module.scss | 7 --- .../src/views/Schedule/Schedule.module.scss | 21 +++++++ apps/site/src/views/Schedule/Schedule.tsx | 21 ++++++- .../ClipboardSchedule.module.scss | 36 +++++++++++ .../ClipboardSchedule/ClipboardSchedule.tsx | 61 +++++++++++++++++++ 11 files changed, 200 insertions(+), 9 deletions(-) rename apps/site/src/app/resources/{#page.tsx => page.tsx} (100%) rename apps/site/src/app/schedule/{#page.tsx => page.tsx} (100%) create mode 100644 apps/site/src/assets/icons/accordion-btn.svg create mode 100644 apps/site/src/assets/images/clip.svg create mode 100644 apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss create mode 100644 apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx diff --git a/apps/site/src/app/resources/#page.tsx b/apps/site/src/app/resources/page.tsx similarity index 100% rename from apps/site/src/app/resources/#page.tsx rename to apps/site/src/app/resources/page.tsx diff --git a/apps/site/src/app/schedule/#page.tsx b/apps/site/src/app/schedule/page.tsx similarity index 100% rename from apps/site/src/app/schedule/#page.tsx rename to apps/site/src/app/schedule/page.tsx diff --git a/apps/site/src/assets/icons/accordion-btn.svg b/apps/site/src/assets/icons/accordion-btn.svg new file mode 100644 index 00000000..0bef7079 --- /dev/null +++ b/apps/site/src/assets/icons/accordion-btn.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/images/clip.svg b/apps/site/src/assets/images/clip.svg new file mode 100644 index 00000000..4cd185d2 --- /dev/null +++ b/apps/site/src/assets/images/clip.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/lib/styles/_zothacks-theme.scss b/apps/site/src/lib/styles/_zothacks-theme.scss index 9ec26c33..bbc59f3d 100644 --- a/apps/site/src/lib/styles/_zothacks-theme.scss +++ b/apps/site/src/lib/styles/_zothacks-theme.scss @@ -16,3 +16,4 @@ $light-blue: #81deeb; $blue: #3902fd; $purple: #6600b6; $navbar-red: #ff0000; +$brown: #aa703c; diff --git a/apps/site/src/lib/styles/globals.scss b/apps/site/src/lib/styles/globals.scss index 1d73ccee..345a64c4 100644 --- a/apps/site/src/lib/styles/globals.scss +++ b/apps/site/src/lib/styles/globals.scss @@ -1,4 +1,23 @@ +@use "bootstrap-utils" as bootstrap; + +$container-padding: 8rem; + .background { background-image: url("~@/assets/background/anteater-head-tiling.gif"); background-size: 464px; // half size for 2x scaling } + +.accordion { + --bs-accordion-active-color: theme.$black; + --bs-accordion-bg: transparent; + --bs-accordion-active-bg: transparent; + --bs-accordion-border-color: transparent; + --bs-accordion-border-radius: 0; + --bs-accordion-btn-icon-width: 14px; +} + +section.container { + // responsive padding + @include bootstrap.padding-top($container-padding); + @include bootstrap.padding-bottom($container-padding); +} diff --git a/apps/site/src/views/Home/sections/FAQ/FAQ.module.scss b/apps/site/src/views/Home/sections/FAQ/FAQ.module.scss index 49ce5f15..8d7702c7 100644 --- a/apps/site/src/views/Home/sections/FAQ/FAQ.module.scss +++ b/apps/site/src/views/Home/sections/FAQ/FAQ.module.scss @@ -38,14 +38,7 @@ } .accordion { - --bs-accordion-active-color: theme.$black; - --bs-accordion-bg: transparent; - --bs-accordion-active-bg: transparent; - --bs-accordion-border-color: transparent; - --bs-accordion-btn-focus-box-shadow: 0; - --bs-accordion-border-radius: 0; --bs-accordion-btn-icon-width: 14px; - --bs-accordion-btn-icon: url("~@/assets/icons/plus-lg.svg"); --bs-accordion-btn-active-icon: url("~@/assets/icons/dash-lg.svg"); } diff --git a/apps/site/src/views/Schedule/Schedule.module.scss b/apps/site/src/views/Schedule/Schedule.module.scss index e69de29b..1919760f 100644 --- a/apps/site/src/views/Schedule/Schedule.module.scss +++ b/apps/site/src/views/Schedule/Schedule.module.scss @@ -0,0 +1,21 @@ +@use "bootstrap-utils" as bootstrap; + +$container-padding: 8rem; + +.schedule { + h1 { + text-align: center; + + @include bootstrap.rfs(8rem, margin-bottom); + } + + margin: 10rem 1rem; + + @include bootstrap.media-breakpoint-up(md) { + margin: 10rem 7rem; + } + + h2 { + text-align: center; + } +} diff --git a/apps/site/src/views/Schedule/Schedule.tsx b/apps/site/src/views/Schedule/Schedule.tsx index 29d9b621..3c43e230 100644 --- a/apps/site/src/views/Schedule/Schedule.tsx +++ b/apps/site/src/views/Schedule/Schedule.tsx @@ -1,5 +1,22 @@ -import "./Schedule.module.scss"; +import ClipboardSchedule from "./sections/ClipboardSchedule/ClipboardSchedule"; +import styles from "./Schedule.module.scss"; export default function Schedule() { - return

Schedule

; + return ( +
+

Schedule

+ +
+ ); } diff --git a/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss b/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss new file mode 100644 index 00000000..47a9d0eb --- /dev/null +++ b/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss @@ -0,0 +1,36 @@ +@use "bootstrap-utils" as bootstrap; +@use "zothacks-theme" as theme; + +.accordion { + --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; + + button::after { + margin-left: 1rem; + } +} + +.clip { + position: absolute; + width: 75%; + top: 0; + left: 50%; + transform: translate(-50%, -55%); + + @include bootstrap.media-breakpoint-up(lg) { + width: 60%; + } +} + +.clipboard { + @include bootstrap.rfs(7.5rem, border-radius); + + background-color: white; + border: 1.25rem solid theme.$brown; +} + +.accordionItem { + border-top: 2px solid theme.$light-blue; + border-bottom: 2px solid theme.$light-blue; +} diff --git a/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx b/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx new file mode 100644 index 00000000..1c21e2ae --- /dev/null +++ b/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx @@ -0,0 +1,61 @@ +"use client"; + +import Image from "next/image"; + +import Accordion from "react-bootstrap/Accordion"; +import Container from "react-bootstrap/Container"; +import Col from "react-bootstrap/Col"; +import Row from "react-bootstrap/Row"; + +import clip from "@/assets/images/clip.svg"; + +import styles from "./ClipboardSchedule.module.scss"; + +interface ClipboardScheduleProps { + schedule: { + _key: string; + title: string; + description: string; + location: string; + startDate: Date; + endDate: Date; + }[]; +} + +function ClipboardSchedule({ schedule }: ClipboardScheduleProps) { + return ( + +
+ Clipboard clip +
+

Countdown Timer

+ + {schedule.map( + ( + { _key, title, description, location, startDate, endDate }, + index, + ) => ( + + +

{title}

+ + {location}, {startDate.toString()} - {endDate.toString()} + + + {description} + + ), + )} + + + ); +} + +export default ClipboardSchedule;