From 3b828e0a8e54aa196bbdebc010a596bb617b0a2e Mon Sep 17 00:00:00 2001 From: Keerthan N S Date: Wed, 31 Jan 2024 14:54:42 +0530 Subject: [PATCH] [fix]scroll independant --- public/assets/eventSlug/cover.svg | 19312 +++++++++++++++++++++++++++ public/assets/eventSlug/slugBg.svg | 19312 +++++++++++++++++++++++++++ src/lib/apollo-client.ts | 1 + src/pages/event/[slug].tsx | 67 +- src/pages/event/old.tsx | 421 + src/styles/globals.css | 20 +- 6 files changed, 39100 insertions(+), 33 deletions(-) create mode 100644 public/assets/eventSlug/cover.svg create mode 100644 public/assets/eventSlug/slugBg.svg create mode 100644 src/pages/event/old.tsx diff --git a/public/assets/eventSlug/cover.svg b/public/assets/eventSlug/cover.svg new file mode 100644 index 00000000..4f105c52 --- /dev/null +++ b/public/assets/eventSlug/cover.svg @@ -0,0 +1,19312 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/eventSlug/slugBg.svg b/public/assets/eventSlug/slugBg.svg new file mode 100644 index 00000000..6ce926ec --- /dev/null +++ b/public/assets/eventSlug/slugBg.svg @@ -0,0 +1,19312 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/lib/apollo-client.ts b/src/lib/apollo-client.ts index eb7ddf11..00b4d1c0 100644 --- a/src/lib/apollo-client.ts +++ b/src/lib/apollo-client.ts @@ -66,6 +66,7 @@ const authLink = setContext(async (_, { headers }) => { }; }); +// const uri = "https://incridea-test.onrender.com/graphql"; const uri = "http://localhost:4000/graphql"; const sseLink = new SSELink({ uri }); const httpLink = new HttpLink({ uri }); diff --git a/src/pages/event/[slug].tsx b/src/pages/event/[slug].tsx index 51b76c99..cea40577 100644 --- a/src/pages/event/[slug].tsx +++ b/src/pages/event/[slug].tsx @@ -77,39 +77,48 @@ function event({ event, error }: { event: Event; error: String }) { return ( //
//
-
+ //
+
+ {/* bg */} {event ? ( //
-
+ //
+ //
+
+ + {/*
*/} {/*
*/} -
-
-
- {/*
*/} -
- {event.image && ( - {event.name} - )} -

- {event.name} -

-
- +
+
+
+
+ {/*
*/} + {/*
*/} +
+ {event.image && ( + {event.name} + )} +

+ {event.name} +

+
+ +
-
-
+
+
{/*
*/} -
+
{/*

Details

@@ -174,7 +183,7 @@ function event({ event, error }: { event: Event; error: String }) {
}
*/}
-
+

Details

@@ -255,7 +264,7 @@ function event({ event, error }: { event: Event; error: String }) {
-
+

Organizers

diff --git a/src/pages/event/old.tsx b/src/pages/event/old.tsx new file mode 100644 index 00000000..c3f71ae8 --- /dev/null +++ b/src/pages/event/old.tsx @@ -0,0 +1,421 @@ +import EventDetails from "@/src/components/pages/event/EventDetails"; +import EventRegistration from "@/src/components/pages/event/EventRegistration"; +import { + Event, + EventByIdDocument, + PublishedEventsSlugDocument, +} from "@/src/generated/generated"; +import { client } from "@/src/lib/apollo"; + +import Image from "next/image"; +import Link from "next/link"; +import { Toaster } from "react-hot-toast"; +import { BsFillTelephoneFill } from "react-icons/bs"; +import { + IoCashOutline, + IoInformationOutline, + IoLocationOutline, + IoPeopleOutline, + IoPersonOutline, +} from "react-icons/io5"; +import { MdOutlineMailOutline } from "react-icons/md"; +import { BiTimeFive } from "react-icons/bi"; +import { BsFillCalendar2WeekFill } from "react-icons/bs"; + +function event({ event, error }: { event: Event; error: String }) { + const getEventAttributes = () => { + let teamSizeText = "", + eventTypeText = ""; + if (event.minTeamSize === event.maxTeamSize) { + if (event.minTeamSize !== 1) + teamSizeText += `${event.minTeamSize} members per team`; + if (event.minTeamSize === 0) teamSizeText = ""; + } else { + teamSizeText = ` ${event.minTeamSize} - ${event.maxTeamSize} members per team`; + } + + if (event.eventType.includes("MULTIPLE")) { + eventTypeText = + event.eventType.split("_")[0][0] + + event.eventType.split("_")[0].slice(1).toLowerCase() + + " Event (Multiple Entry)"; + } else + eventTypeText = + event.eventType[0] + event.eventType.slice(1).toLowerCase() + " Event"; + + eventTypeText = eventTypeText.replaceAll("Individual", "Solo"); + + return [ + { + name: "Venue", + text: event.venue, + Icon: IoLocationOutline, + }, + { + name: "Event Type", + text: eventTypeText, + Icon: IoPersonOutline, + }, + { + name: "Fees", + text: event.fees, + Icon: IoCashOutline, + }, + { + name: "Team Size", + text: teamSizeText, + Icon: IoPeopleOutline, + }, + { + name: eventTypeText ? "Maximum Participants" : "Maximum Teams", //eventTypeText would be empty for solo events + text: event.maxTeams, + Icon: IoInformationOutline, + }, + ]; + }; + + return ( + //
+ //
+ //
+
+ {/* bg */} + {event ? ( + //
+
+ {/*
*/} + {/*
*/} +
+
+
+ {/*
*/} +
+ {event.image && ( + {event.name} + )} +

+ {event.name} +

+
+ +
+
+
+
+ {/*
*/} +
+ {/*
+

Details

+
+ {getEventAttributes().map((attr) => + attr.text ? ( +
+ {} +

+ {attr.name} {': '} +

+

{attr.text}

+
+ ) : ( + <> + ) + )} +
+
+
+ {event.rounds.map((round) => ( +
+
+ Round {round.roundNo} +
+
+

+ + {round.date && + new Date(round.date).toLocaleDateString("en-IN", { + day: "numeric", + month: "short", + })} +

+

+ + {round.date && + new Date(round.date).toLocaleTimeString('en-IN', { + hour: 'numeric', + minute: 'numeric', + hour12: true, + })} +

+
+
+ ))} +
+
+
+
+ {event.name.toLowerCase() !== 'lazzerena' ? :
+ On-spot registrations only +
} +
*/} +
+
+
+
+

Details

+
+ {getEventAttributes().map((attr) => + attr.text ? ( +
+ {} +

+ {attr.name} {": "} +

+

{attr.text}

+
+ ) : ( + <> + ) + )} +
+
+
+ {event.rounds.map((round) => ( +
+
+ Round {round.roundNo} +
+
+

+ + {round.date && + new Date(round.date).toLocaleDateString( + "en-IN", + { + day: "numeric", + month: "short", + } + )} +

+

+ + {round.date && + new Date(round.date).toLocaleTimeString( + "en-IN", + { + hour: "numeric", + minute: "numeric", + hour12: true, + } + )} +

+
+
+ ))} +
+
+
+
+ {event.name.toLowerCase() !== "lazzerena" ? ( + + ) : ( +
+ On-spot registrations only +
+ )} +
+
+
+
+
+
+
+

Organizers

+
+ {event.organizers.map((organizer) => ( +
+

+ {organizer.user.name} +

+
+ {organizer.user.email && ( + + {" "} + {organizer.user.email} + + )} + {organizer.user.phoneNumber && ( + + {" "} + {organizer.user.phoneNumber} + + )} +
+
+ ))} +
+
+
+
+ + + + + + + + {/*
+

Organizers

+
+ {event.organizers.map((organizer) => ( +
+

+ {organizer.user.name} +

+
+ {organizer.user.email && ( + + {' '} + {organizer.user.email} + + )} + {organizer.user.phoneNumber && ( + + {' '} + {organizer.user.phoneNumber} + + )} +
+
+ ))} +
+
*/} +
+
+ ) : ( +
+

Oops!

+
+

Looks like you've wandered too deep and gotten lost!

+

+ Click{" "} + + here + {" "} + to head back to the events page +

+
+

+ Error message: {error} +

+
+ )} +
+ ); +} + +export default event; + +// ISR +export async function getStaticProps({ params }: { params: Params }) { + try { + const { data: event } = await client.query({ + query: EventByIdDocument, + variables: { + id: params.slug.split("-").pop() as string, + }, + }); + return { + props: { + event: event.eventById, + }, + revalidate: 60, + }; + } catch (error: any) { + return { + props: { + error: error?.message || "Could not find event", + event: null, + }, + }; + } +} + +export async function getStaticPaths() { + // Get the paths we want to pre-render based on posts + const { data: events } = await client.query({ + query: PublishedEventsSlugDocument, + }); + const paths = events.publishedEvents.map((event) => ({ + params: { + slug: `${event.name.toLocaleLowerCase().split(" ").join("-")}-${ + event.id + }`, + }, + })); + + // We'll pre-render only these paths at build time. + // { fallback: 'blocking' } will server-render pages + // on-demand if the path doesn't exist. + return { paths, fallback: "blocking" }; +} + +type Params = { + slug: string; +}; diff --git a/src/styles/globals.css b/src/styles/globals.css index 6dc59aea..0b72d241 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -244,12 +244,12 @@ August 2021 : ok on Chrome v92+, Firefox v90+, Edge v92+ .parchment { position: absolute; - display: flex; + /* display: flex; */ width: 100%; height: 100%; /* center page with absolute position */ top: 0%; left: 50%; - transform: translate(-51%, 0); + transform: translate(-50.5%, 0); /* margin: 2em 0; */ padding: 4em; box-shadow: 2px 3px 20px black, 0 0 125px #8f5922 inset; @@ -279,10 +279,10 @@ August 2021 : ok on Chrome v92+, Firefox v90+, Edge v92+ display: flex; flex-direction: column; align-items: center; - width: 100%; + width: auto; height: auto; margin: 0 auto; - padding: 1em; + padding: 2em; } .mapicon::before{ @@ -392,4 +392,16 @@ August 2021 : ok on Chrome v92+, Firefox v90+, Edge v92+ .masker{ mask: url(https://static.rfstat.com/renderforest/images/website_maker_images/components/component-images/text14-3.4.0.svg) -2px top / auto 100% repeat-x; +} + +@layer utilities { + /* Hide scrollbar for Chrome, Safari, and Opera */ + .no-scrollbar::-webkit-scrollbar { + display: none; + } + /* Hide scrollbar for IE, Edge, and Firefox */ + .no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } } \ No newline at end of file