From 20b2eaef676619ebc2692f9d6742871ebd311bd7 Mon Sep 17 00:00:00 2001 From: Yoyo Date: Wed, 3 Jul 2024 16:56:30 +1200 Subject: [PATCH 1/4] Event Details Layout - Missing Image Everything apart from the image is implemented. --- frontend/src/app/events/event-info/page.tsx | 9 +++ frontend/src/ui/events/EventInfo.module.css | 68 +++++++++++++++++++++ frontend/src/ui/events/EventInfo.tsx | 27 ++++++++ 3 files changed, 104 insertions(+) create mode 100644 frontend/src/ui/events/EventInfo.module.css create mode 100644 frontend/src/ui/events/EventInfo.tsx diff --git a/frontend/src/app/events/event-info/page.tsx b/frontend/src/app/events/event-info/page.tsx index e69de29..1fcbad3 100644 --- a/frontend/src/app/events/event-info/page.tsx +++ b/frontend/src/app/events/event-info/page.tsx @@ -0,0 +1,9 @@ +import EventInfo from '@/ui/events/EventInfo'; + +export default function EventDetails() { + return ( +
+ +
+ ); + } \ No newline at end of file diff --git a/frontend/src/ui/events/EventInfo.module.css b/frontend/src/ui/events/EventInfo.module.css new file mode 100644 index 0000000..0a342f0 --- /dev/null +++ b/frontend/src/ui/events/EventInfo.module.css @@ -0,0 +1,68 @@ +.descriptionBorder{ + border-radius:75px; + background-color: #5E4127; + max-width: 1260px; + min-width: 450px; + width: 100%; + min-height: 930px; + height: 100%; + padding: 50px; + margin: 50px auto; + font-size: 20px; + color: #FBF5F0; +} + +.descriptionBorder button{ + min-width: 300px; + max-width:1160px; + width:100%; + height:100px; + border-radius:15px; + background-color:#dd995b; + border-style:solid; + border-width:10px; + border-color: #FBF5F0; + color:#FBF5F0; + font-size: 50px; + padding-bottom:50px; + font-weight: bold; + align-self: center; + margin-top:50px; + margin-bottom:50px; + overflow-y: hidden; +} + +.infoBorder{ + display: flex; + flex-direction:row; + border-radius:75px; + background-color: #AA6F29; + max-width: 1160px; + min-width: 450px; + width: 100%; + min-height: 480px; + height: 100%; + padding: 50px; + margin: 0 auto; +} + +.info{ + display: flex; + flex-direction:column; +} + +.info h1{ + font-weight: bold; + text-decoration: underline 5px; + text-align: center; + width: 570px; + font-size: 90px; + color: #F4E5D7; + text-shadow: 8px 8px #5E4127; + text-underline-offset: 9px; +} + +.info p{ + font-size: 30px; + color: #FBF5F0; +} \ No newline at end of file diff --git a/frontend/src/ui/events/EventInfo.tsx b/frontend/src/ui/events/EventInfo.tsx new file mode 100644 index 0000000..f1a5a1f --- /dev/null +++ b/frontend/src/ui/events/EventInfo.tsx @@ -0,0 +1,27 @@ +'use client'; + +import React from 'react'; +import styles from './EventInfo.module.css'; + +function EventInfo(){ + const handleSubmit = (event: React.ChangeEvent) => { + alert(`This should lead to the sign up popups.`) +} + return ( +
+
+
+

Bring Your Pet to Pool Day

+

Date: Sunday February 30th

+

Time: 12:00pm-2.00pm

+

Entry Fee: $6.00

+
+ +
+ +

Join us for a paw-some poolside adventure at ASPA's "Pet-Pool Palooza" event! Dive into fun with your furry friends as we transform the pool deck into a pet paradise. Whether it's a playful splash with your pooch or a relaxing float with your feline friend, our pet-friendly pool day promises wagging tails and happy purrs all around. With contests, prizes, and plenty of treats, it's a tail-wagging, water-loving extravaganza you won't want to miss!

+
+ ) +} + +export default EventInfo \ No newline at end of file From 8fe7e3a350585ecead82b1789743100f9ae8afac Mon Sep 17 00:00:00 2001 From: Yoyo Date: Wed, 3 Jul 2024 19:42:59 +1200 Subject: [PATCH 2/4] Completed the Parts of Event Info Section Added image and changed line height of the title --- frontend/public/Event Photo.svg | 9 +++++++++ frontend/src/ui/events/EventInfo.module.css | 1 + frontend/src/ui/events/EventInfo.tsx | 3 ++- 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 frontend/public/Event Photo.svg diff --git a/frontend/public/Event Photo.svg b/frontend/public/Event Photo.svg new file mode 100644 index 0000000..a78ba17 --- /dev/null +++ b/frontend/public/Event Photo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/ui/events/EventInfo.module.css b/frontend/src/ui/events/EventInfo.module.css index 0a342f0..3da238f 100644 --- a/frontend/src/ui/events/EventInfo.module.css +++ b/frontend/src/ui/events/EventInfo.module.css @@ -55,6 +55,7 @@ font-weight: bold; text-decoration: underline 5px; text-align: center; + line-height:85px; width: 570px; font-size: 90px; color: #F4E5D7; diff --git a/frontend/src/ui/events/EventInfo.tsx b/frontend/src/ui/events/EventInfo.tsx index f1a5a1f..a8ee315 100644 --- a/frontend/src/ui/events/EventInfo.tsx +++ b/frontend/src/ui/events/EventInfo.tsx @@ -2,6 +2,7 @@ import React from 'react'; import styles from './EventInfo.module.css'; +import Image from "next/image"; function EventInfo(){ const handleSubmit = (event: React.ChangeEvent) => { @@ -16,7 +17,7 @@ function EventInfo(){

Time: 12:00pm-2.00pm

Entry Fee: $6.00

- + Event Photo

Join us for a paw-some poolside adventure at ASPA's "Pet-Pool Palooza" event! Dive into fun with your furry friends as we transform the pool deck into a pet paradise. Whether it's a playful splash with your pooch or a relaxing float with your feline friend, our pet-friendly pool day promises wagging tails and happy purrs all around. With contests, prizes, and plenty of treats, it's a tail-wagging, water-loving extravaganza you won't want to miss!

From 2d7cdf68da120c7a9fa51f9a71933f5d348b6598 Mon Sep 17 00:00:00 2001 From: Yoyo Date: Thu, 4 Jul 2024 00:41:32 +1200 Subject: [PATCH 3/4] Finished layout of whole Event Details page Completed the layout of the whole page. Need to fix the sizing of the Event title so that the scroll bar disappears, and the Upcoming events' title so that it is not following the Title's styling. Also need to make the components responsive. --- frontend/src/app/events/event-info/page.tsx | 10 ++++-- frontend/src/ui/events/EventInfo.module.css | 8 ++++- .../ui/events/UpcomingEventCard.module.css | 27 ++++++++++++++ frontend/src/ui/events/UpcomingEventCard.tsx | 16 +++++++++ .../src/ui/events/UpcomingEvents.module.css | 36 +++++++++++++++++++ frontend/src/ui/events/UpcomingEvents.tsx | 24 +++++++++++++ 6 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 frontend/src/ui/events/UpcomingEventCard.module.css create mode 100644 frontend/src/ui/events/UpcomingEventCard.tsx create mode 100644 frontend/src/ui/events/UpcomingEvents.module.css create mode 100644 frontend/src/ui/events/UpcomingEvents.tsx diff --git a/frontend/src/app/events/event-info/page.tsx b/frontend/src/app/events/event-info/page.tsx index 1fcbad3..0d6cb91 100644 --- a/frontend/src/app/events/event-info/page.tsx +++ b/frontend/src/app/events/event-info/page.tsx @@ -1,9 +1,15 @@ import EventInfo from '@/ui/events/EventInfo'; +import UpcomingEvents from '@/ui/events/UpcomingEvents'; export default function EventDetails() { return ( -
+
+
-
+
+
+ +
+ ); } \ No newline at end of file diff --git a/frontend/src/ui/events/EventInfo.module.css b/frontend/src/ui/events/EventInfo.module.css index 3da238f..4d6dbaa 100644 --- a/frontend/src/ui/events/EventInfo.module.css +++ b/frontend/src/ui/events/EventInfo.module.css @@ -34,6 +34,7 @@ .infoBorder{ display: flex; + justify-content: space-evenly; flex-direction:row; border-radius:75px; background-color: #AA6F29; @@ -42,13 +43,16 @@ width: 100%; min-height: 480px; height: 100%; - padding: 50px; + padding-top: 50px; + padding-bottom: 50px; + padding-right:50px; margin: 0 auto; } .info{ display: flex; flex-direction:column; + align-items: space-evenly; } .info h1{ @@ -56,6 +60,7 @@ text-decoration: underline 5px; text-align: center; line-height:85px; + letter-spacing: -1px; width: 570px; font-size: 90px; color: #F4E5D7; @@ -66,4 +71,5 @@ .info p{ font-size: 30px; color: #FBF5F0; + margin: 15px 50px; } \ No newline at end of file diff --git a/frontend/src/ui/events/UpcomingEventCard.module.css b/frontend/src/ui/events/UpcomingEventCard.module.css new file mode 100644 index 0000000..7c8bc71 --- /dev/null +++ b/frontend/src/ui/events/UpcomingEventCard.module.css @@ -0,0 +1,27 @@ +.card { + display: flex; + text-align: left; + flex-direction: column; + justify-content: center; + width: 395px; + height: 250px; + } + + .card img { + width: 345px; + height: 200px; + object-fit: cover; + border-style: solid; + border-width: 20px; + border-color: #DD995B; + border-radius: 45px; + } + + .card h1{ + text-align: center; + font-weight: medium; + font-size: 30px; + color: #FFFFFF; + margin-top: 5px; + margin-bottom: 5px; + } \ No newline at end of file diff --git a/frontend/src/ui/events/UpcomingEventCard.tsx b/frontend/src/ui/events/UpcomingEventCard.tsx new file mode 100644 index 0000000..63c73e8 --- /dev/null +++ b/frontend/src/ui/events/UpcomingEventCard.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import styles from './UpcomingEventCard.module.css'; + +interface Event { + eventName: string; + imgUrl: string; + } + + export default function UpcomingEventCard({ event }: { event: Event }) { + return ( +
+ {event.eventName} +

{event.eventName}

+
+ ); + } \ No newline at end of file diff --git a/frontend/src/ui/events/UpcomingEvents.module.css b/frontend/src/ui/events/UpcomingEvents.module.css new file mode 100644 index 0000000..c0e05fc --- /dev/null +++ b/frontend/src/ui/events/UpcomingEvents.module.css @@ -0,0 +1,36 @@ +.container { + padding: 0px 10px 20px 10px; + margin: 20px 0px; + display: flex; + flex-direction: column; + align-items: center; + } + + .content { + display: flex; + flex-direction: row; + justify-content: space-between; + max-width: 90%; + margin-bottom: 10px; + justify-content: space-evenly; + } + + .content h1{ + text-align: center; + font-weight: medium; + font-size: 30px; + color: #FFFFFF; + margin-top: 5px; + margin-bottom: 5px; + } + + .container h1{ + font-weight: bold; + text-decoration: underline 5px; + font-size: 90px; + color: #F4E5D7; + text-shadow: 8px 8px #5E4127; + text-underline-offset: 9px; + margin-bottom: 10px; + } + \ No newline at end of file diff --git a/frontend/src/ui/events/UpcomingEvents.tsx b/frontend/src/ui/events/UpcomingEvents.tsx new file mode 100644 index 0000000..27781d2 --- /dev/null +++ b/frontend/src/ui/events/UpcomingEvents.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import styles from "./UpcomingEvents.module.css"; +import UpcomingEventCard from "./UpcomingEventCard" + +export default function UpcomingEvents() { + const upcomingEvents = [ + {eventName: "Event 1", imgUrl: "https://fastly.4sqi.net/img/general/200x200/32264433_4nGcfHNabq9lyah9S3b1PlpX_6p0qENU25inJ93SWZ4.jpg"}, + {eventName: "Event 2", imgUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Backyardpool.jpg/1200px-Backyardpool.jpg"}, + {eventName: "Event 3", imgUrl: "https://spothopper-static.s3.us-east-1.amazonaws.com/web/daviebilliardclub--com/custom/fb_image.jpg"} +] + return ( +
+

+ More Upcoming Events! +

+
+ {upcomingEvents.map((event) => ( + + ))} +
+
+ + ); +} \ No newline at end of file From d3ca518be494f9b51f66ff40068ad188e965d9d6 Mon Sep 17 00:00:00 2001 From: Yoyo Date: Mon, 15 Jul 2024 17:35:40 +1200 Subject: [PATCH 4/4] Final Touch Up For the Page Fixed the mentioned issues in previous commits, and made most of the page responsive --- frontend/src/ui/events/EventInfo.module.css | 18 ++++++++++++++---- .../src/ui/events/UpcomingEventCard.module.css | 4 +++- frontend/src/ui/events/UpcomingEventCard.tsx | 2 +- .../src/ui/events/UpcomingEvents.module.css | 8 +++++++- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/frontend/src/ui/events/EventInfo.module.css b/frontend/src/ui/events/EventInfo.module.css index 4d6dbaa..2ce90d3 100644 --- a/frontend/src/ui/events/EventInfo.module.css +++ b/frontend/src/ui/events/EventInfo.module.css @@ -13,7 +13,7 @@ } .descriptionBorder button{ - min-width: 300px; + min-width: 400px; max-width:1160px; width:100%; height:100px; @@ -39,7 +39,7 @@ border-radius:75px; background-color: #AA6F29; max-width: 1160px; - min-width: 450px; + min-width: 570px; width: 100%; min-height: 480px; height: 100%; @@ -59,9 +59,11 @@ font-weight: bold; text-decoration: underline 5px; text-align: center; - line-height:85px; + line-height:110px; letter-spacing: -1px; - width: 570px; + max-width: 570px; + min-width: 300px; + width: 100%; font-size: 90px; color: #F4E5D7; text-shadow: 8px 8px #5E4127; @@ -72,4 +74,12 @@ font-size: 30px; color: #FBF5F0; margin: 15px 50px; +} + +@media screen and (max-width: 1075px){ + .infoBorder{ + flex-direction:column; + align-items:center; + padding-left: 50px; + } } \ No newline at end of file diff --git a/frontend/src/ui/events/UpcomingEventCard.module.css b/frontend/src/ui/events/UpcomingEventCard.module.css index 7c8bc71..4300683 100644 --- a/frontend/src/ui/events/UpcomingEventCard.module.css +++ b/frontend/src/ui/events/UpcomingEventCard.module.css @@ -15,13 +15,15 @@ border-width: 20px; border-color: #DD995B; border-radius: 45px; + align-self: center; } - .card h1{ + .card h2{ text-align: center; font-weight: medium; font-size: 30px; color: #FFFFFF; margin-top: 5px; margin-bottom: 5px; + overflow-y: hidden; } \ No newline at end of file diff --git a/frontend/src/ui/events/UpcomingEventCard.tsx b/frontend/src/ui/events/UpcomingEventCard.tsx index 63c73e8..1d39661 100644 --- a/frontend/src/ui/events/UpcomingEventCard.tsx +++ b/frontend/src/ui/events/UpcomingEventCard.tsx @@ -10,7 +10,7 @@ interface Event { return (
{event.eventName} -

{event.eventName}

+

{event.eventName}

); } \ No newline at end of file diff --git a/frontend/src/ui/events/UpcomingEvents.module.css b/frontend/src/ui/events/UpcomingEvents.module.css index c0e05fc..305f2df 100644 --- a/frontend/src/ui/events/UpcomingEvents.module.css +++ b/frontend/src/ui/events/UpcomingEvents.module.css @@ -33,4 +33,10 @@ text-underline-offset: 9px; margin-bottom: 10px; } - \ No newline at end of file + + @media screen and (max-width: 1250px){ + .content{ + flex-direction:column; + align-items:center; + } +} \ No newline at end of file