From 135be6838e705acb32d24df8c0a4ff5746630bc8 Mon Sep 17 00:00:00 2001 From: aidenm1 Date: Sat, 7 Dec 2024 16:49:02 -0800 Subject: [PATCH] created desktop view for specific event in myevents page --- app/events/[event_id]/page.tsx | 341 +++++++++++++++++-------------- app/events/[event_id]/styles.ts | 73 +++++-- components/MyEventCard/styles.ts | 2 +- 3 files changed, 249 insertions(+), 167 deletions(-) diff --git a/app/events/[event_id]/page.tsx b/app/events/[event_id]/page.tsx index b22c80b..b0eba0d 100644 --- a/app/events/[event_id]/page.tsx +++ b/app/events/[event_id]/page.tsx @@ -12,6 +12,7 @@ import { fetchFacilityContactByID, } from '@/api/supabase/queries/facilities'; import { fetchPerformer } from '@/api/supabase/queries/volunteers'; +import Back from '@/public/images/back.svg'; import LocPin from '@/public/images/black_loc_pin.svg'; import BPLogo from '@/public/images/bp-logo.png'; import Calendar from '@/public/images/calendar_icon.svg'; @@ -19,7 +20,6 @@ import FacilityContactPin from '@/public/images/facility_contact_icon.svg'; import HostPin from '@/public/images/host_icon.svg'; import ProducerIcon from '@/public/images/producer_icon.svg'; import PerformerPin from '@/public/images/volunteer_performer_icon.svg'; -import WhiteBack from '@/public/images/white_back.svg'; import COLORS from '@/styles/colors'; import { Event, @@ -38,6 +38,7 @@ export default function EventDisplay({ const [event, setEvent] = useState(); const [facility, setFacility] = useState(); const [facility_contact, setFacilityContact] = useState(); + const [host_email, setHostEmail] = useState(); const [host_name, setHostName] = useState(); const [host_phone_number, setHostPhoneNumber] = useState(); const [performer, setPerformer] = useState(); @@ -56,9 +57,11 @@ export default function EventDisplay({ if (fetchedEvent.needs_host) { const host: Volunteers = await fetchEventHostByID(params.event_id); + setHostEmail(host.email); setHostName(`${host.first_name} ${host.last_name}`); setHostPhoneNumber(host.phone_number); } else { + setHostEmail('email column needs to be added to facility table'); setHostName(fetchedFacility.host_name); setHostPhoneNumber(fetchedFacility.host_contact); } @@ -81,7 +84,6 @@ export default function EventDisplay({ new Date(event.end_date_time), true, ); - const location = facility.street_address_1 + ', ' + facility.city; return ( @@ -89,192 +91,227 @@ export default function EventDisplay({ - - - - - Event Title Here - - - - - {time} - - - - - + + + + + + Event Title Here + + + - {facility.name} + {time} - - {location} - - - - - - Notes - -
- - Notes from the facility - - - Facility notes go here - -
-
- - Notes from the producer - - - {event.notes} - -
- - - - Contacts - - - - + + + + - {facility_contact.first_name} {facility_contact.last_name} - - - Facility Contact - - - {facility_contact.phone_number} - - - - - - - - {host_name} + {facility.name} - - Event Host - - {/* Should this be fixed, or should it changed based on needs_host? */} - - {host_phone_number} - - - - - - + {facility.street_address_1} +
+ {facility.city} + + + + + + Notes + +
- {performer.first_name} {performer.last_name} + Facility Notes - - Volunteer Performer - - {/* Should this be fixed, or should it changed based on needs_host? */} - - {performer.phone_number} - - - - - - + Facility notes go here + +
+
- Producer Name + Producer Notes - - Show Producer - - {/* Should this be fixed, or should it changed based on needs_host? */} - - Producer Number - - - - + {event.notes} + +
+ + + + + + Contacts + + + + + + {facility_contact.first_name} {facility_contact.last_name} + + + Facility Contact + + + {facility_contact.email} + + + {facility_contact.phone_number} + + + + + + + + {host_name} + + + Event Host + + + {host_email} + + + {host_phone_number} + + + + + + + + {performer.first_name} {performer.last_name} + + + Volunteer Performer + + + {performer.email} + + + {performer.phone_number} + + + + + + + + Producer Name + + + Show Producer + + + producer@email.com + + + 800-867-5309 + + + + + ); diff --git a/app/events/[event_id]/styles.ts b/app/events/[event_id]/styles.ts index 36315b2..8f66d11 100644 --- a/app/events/[event_id]/styles.ts +++ b/app/events/[event_id]/styles.ts @@ -6,12 +6,10 @@ import COLORS from '@/styles/colors'; import { H4, H5, P, SMALL } from '@/styles/text'; export const BackImage = styled(NextImage)` - position: absolute; - top: 0; - left: 0; width: 1.5rem; height: 1.5rem; - margin: 1rem; + z-index: 3; + margin-top: 1.5rem; `; export const ImageWrapper = styled.div` @@ -34,6 +32,7 @@ export const GradientOverlay = styled.div` left: 0; width: 100%; height: 100%; + z-index: 1; background: linear-gradient( 0deg, rgba(0, 0, 0, 0.35) 0%, @@ -43,35 +42,64 @@ export const GradientOverlay = styled.div` export const Page = styled.div` flex-direction: column; + display: flex; min-width: 100%; min-height: 100svh; overflow: hidden; - margin-bottom: 3.75rem; + @media (max-width: 768px) { + margin-bottom: 3.75rem; + } +`; + +export const LeftWrapper = styled.div` + @media (min-width: 768px) { + width: 50%; + } +`; + +export const RightWrapper = styled.div` + @media (min-width: 768px) { + padding-left: 3.875rem; + display: flex; + flex-direction: column; + align-items: flex-end; + border-left: 1px solid ${COLORS.gray6}; + } `; export const Container = styled.div` - padding-left: 1.75rem; - padding-right: 1.75rem; display: flex; - flex-direction: column; + @media (max-width: 768px) { + flex-direction: column; + margin-left: 1.75rem; + margin-right: 1.75rem; + } + @media (min-width: 768px) { + margin-left: 9.1875rem; + margin-right: 5.1875rem; + } + justify-content: space-between; `; export const Curve = styled.div` - z-index: 10; + z-index: 2; margin: -1.5rem 0; position: relative; padding: 0.75rem 2rem 1rem 2rem; display: flex; flex-direction: column; - border-radius: 20px 20px 0 0; + @media (max-width: 768px) { + border-radius: 20px 20px 0 0; + } background: ${COLORS.gray1}; `; export const EventText = styled(H4)` font-style: normal; line-height: normal; - margin-top: 1.5rem; - margin-bottom: 0.5rem; + margin-top: 1rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid ${COLORS.gray6}; `; export const CalLocPin = styled(NextImage)` @@ -85,6 +113,7 @@ export const DateLocation = styled.div` display: flex; align-items: flex-start; justify-content: left; + margin-top: 1rem; `; export const ParaText = styled(P)` @@ -100,9 +129,16 @@ export const LocationDetails = styled.div` `; export const SubHeadingText = styled(H5)` - padding-top: 2.5rem; + margin-top: 3rem; border-bottom: 1px solid ${COLORS.gray6}; - padding-bottom: 0.25rem; + margin-bottom: 0.25rem; +`; + +export const ContactsSubHeadingText = styled(SubHeadingText)` + @media (min-width: 768px) { + padding-right: 13rem; + margin-top: 5rem; + } `; export const AllNotesAndContactsContainer = styled.div` @@ -134,3 +170,12 @@ export const ContactTypeText = styled(SMALL)` export const PhoneNumberText = styled(P)` padding-top: 0.125rem; `; + +export const EmailText = styled(P)` + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-skip-ink: none; + text-decoration-thickness: auto; + text-underline-offset: auto; + text-underline-position: from-font; +`; diff --git a/components/MyEventCard/styles.ts b/components/MyEventCard/styles.ts index 28e278a..d974dfc 100644 --- a/components/MyEventCard/styles.ts +++ b/components/MyEventCard/styles.ts @@ -7,7 +7,7 @@ import { P, SMALLER } from '@/styles/text'; export const EventImage = styled(NextImage)` width: 20%; - height: 90%; + height: auto; `; export const EventContainer = styled.main`