Sponsors (#24)

* fix: navbar mobile animation * feat: responsiveness * feat: responsiveness, fixed sponsor button issue and overflow issue * wip: responsiveness, todo: decrease card sizes * fix: aboutCard skill issue :( * fix: signUp * fix(footer): delta and login * fix: mobile responsiveness * fix: mobile responsiveness * fix: mobile responsiveness * fix: mobile responsiveness * fix: astronaut * fix: mobile sponsors button, center cards always * fix: mobile sponsors button, center cards always * fix: s20 ultra overflow * fix: ipad mini overlap, and add more screens * fix: scroll behavior * fix: scroll behavior * fix: scroll behavior * fix: astronaut, sponsor button placement, integrate cms * fix: sponsorcard alignment * fix: sponsorsContainer overflow * fix: sponsorsContainer overflow * fix: zindex issue --------- Co-authored-by: SRISOWRIRAJAN K S <[email protected]> Co-authored-by: Bhoopesh <[email protected]>
delta · Dec 25, 2023 · b166b9b · b166b9b
1 parent 01bc9d7
commit b166b9b
Show file tree

Hide file tree

Showing 17 changed files with 310 additions and 84 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -51,6 +51,10 @@ body {
     color: white;
 }
 
+.page-layout {
+    min-height: max(100vh, 760px);
+}
+
 .footer-bg {
     border-radius: 10px;
     background: rgba(0, 0, 0, 0.45);

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     return (
         <html lang="en">
             <body>
-                <div className="w-full min-h-screen bg-[#070B12]">{children}</div>
+                <div className="w-full min-h-screen bg-[#070B12] page-layout">{children}</div>
                 <Footer />
                 <Toast />
             </body>

diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx
@@ -1,40 +1,49 @@
+'use client';
 import { NavBar, SponsorButton, SponsorCard } from '@/components';
 import styles from './sponsors.module.css';
 import Image from 'next/image';
 
 import astronaut from '../../assets/images/astronaut.svg';
+import { getSponsors } from '@/utils/events_cms';
+import { useEffect, useState } from 'react';
 
 export default function Sponsors() {
-    const sponsorsList: SponsorCardProps[] = []; // change to let
+    const [sponsorsList, setSponsorsList] = useState<SponsorCardProps[]>([]);
+    useEffect(() => {
+        const a = async () => {
+            setSponsorsList(await getSponsors());
+        };
+        a();
+    }, []);
 
-    // backend logic
-    //  sponsorsList =   await(await fetch("backend url",{next:{tags:['collection']}})).json();
     return (
-        <div className="p-5">
+        <div className={styles.page}>
             <NavBar />
             <div className={styles.parent}>
                 <div className={styles.background}>
                     <h1 className={styles.backgroundText}>SPONSORS</h1>
                 </div>
                 <div className={styles.foreground}>
                     {sponsorsList.length > 0 ? (
-                        <>
+                        <div className="flex flex-col">
+                            <div className={styles.sponsorText}>SPONSORS</div>
                             <div className={styles.sponsorButtonUp}>
                                 <SponsorButton />
                             </div>
-                            <div className={styles.sponsorText}>SPONSORS</div>
-                            <div className={styles.sponsorList}>
-                                {sponsorsList.map((e: SponsorCardProps) => (
-                                    <SponsorCard name={e.name} logo={e.logo} key={e.toString()} />
-                                ))}
+                            <div className={styles.parentList}>
+                                <div className={styles.sponsorList}>
+                                    {sponsorsList.map((e: SponsorCardProps) => (
+                                        <SponsorCard name={e.name} logo={e.logo} key={e.name} />
+                                    ))}
+                                </div>
                             </div>
-                        </>
+                        </div>
                     ) : (
                         <>
                             <h1 className={styles.sponsor}>SPONSORS</h1>
                             {sponsorsList.length <= 0 && (
                                 <div className={styles.sponsorParent}>
-                                    <div className={styles.sponsorButton}>
+                                    <div className={`${styles.sponsorButton} ${styles.empty}`}>
                                         <SponsorButton />
                                     </div>
                                     <Image

diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css
@@ -2,36 +2,53 @@
   display: grid;
 }
 
-.foreground {
-  display: flex;
-  flex-direction: column;
-  gap:1px;
-}
-
 .foreground,
 .background {
   width: 100vw;
   max-width: 100vw;
-  overflow: hidden;
+  overflow-x: hidden;
   grid-area: 1/1;
   max-height: 86vh;
 }
 
+.foreground {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+
+  height: 100vh;
+  width: 100%;
+}
+
 .sponsor {
   color: #fff;
   text-align: center;
   font-family: ROG;
   font-size: 74.8px;
+
+  align-self: center;
+  width: fit-content;
+
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  padding-top:60px;
+  padding-top: 60px;
+
+  @media screen and (max-width:560px) {
+    font-size: 34.8px;
+    text-align: center;
+  }
+
+  @media screen and (min-width:656px) and (max-width:656px) {
+    font-size: 34.8px;
+  }
 }
 
 .background {
   display: flex;
   justify-content: center;
   align-items: center;
+  width: fit-content;
 }
 
 .backgroundText {
@@ -48,6 +65,11 @@
   color: transparent;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ffffff90;
+
+  @media screen and (max-width:560px) {
+    font-size: 3rem;
+    overflow: hidden;
+  }
 }
 
 .sponsorParent {
@@ -57,11 +79,29 @@
   gap: 2px;
   height: fit-content;
   transform: translateY(-10%);
+  width: min-content;
+
+  @media screen and (max-width:560px) {
+    overflow: none;
+    padding-left: 0px;
+  }
 }
 
 .sponsorButton {
-  margin-top: 90px;
-  height: fit-content;
+  padding: 0px;
+  width: min-content;
+  height: min-content;
+
+  @media screen and (max-width:560px) {
+    transform: translate(10%, -5%);
+    margin-top: 60px;
+  }
+}
+
+.empty{
+  height: 35%;
+  display: flex;
+  align-items: flex-end;
 }
 
 .sponsorText {
@@ -74,23 +114,122 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+
+  @media screen and (min-width:768px) and (max-width:840px) {
+    font-size: 94.8px;
+  }
+
+  @media screen and (max-width:560px) {
+    font-size: 44px;
+  }
+
+  @media screen and (max-width:300px) {
+    font-size: 34px;
+  }
 }
 
 .sponsorButtonUp {
-  position: absolute;
+  /* position: absolute;
   right: 30px;
-  margin-top: 85px;
+  top: 85px; */
+
+  position: relative;
+  transform: translate(36%, -5%);
   display: flex;
   justify-content: center;
   align-items: center;
+
+
+  @media screen and (min-width:768px) and (max-width:820px) {
+    margin-top: 30px;
+    transform: translate(27%, -5%);
+  }
+
+  @media screen and (max-width:560px) {
+    transform: translate(10%, -55%);
+    margin-top: 60px;
+  }
+
+
+  @media screen and (min-width:656px) and (max-width:656px) {
+    margin-top: 15px;
+    transform: translate(23%, -5%);
+  }
+
+  @media screen and (min-width:540px) and (max-width:540px) {
+    transform: translate(27%, -45%);
+  }
+
+  @media screen and (min-width:412px) and (max-width:412px) {
+    transform: translate(13%, -45%);
+  }
+
+  @media screen and (min-width:912px) and (max-width:912px) {
+    transform: translate(32%, 3%);
+  }
+
+  @media screen and (max-width:300px) {
+    width: fit-content;
+    height: fit-content;
+    transform: translate(-8%, -65%);
+    margin-top: 60px;
+  }
 }
 
 .sponsorList {
   /* margin-top: 140px; */
   display: flex;
   flex-wrap: wrap;
-  max-height: 100%;
+  width: fit-content;
+  height: fit-content;
+  overflow-x: hidden;
+
+  gap: 115px;
+  justify-content: center;
+
+  @media screen and (max-width:560px) {
+    gap: 5px;
+  }
+
+
 }
-.astro{
+
+.astro {
   overflow: hidden;
+  min-width: 320px !important;
+
+  @media screen and (max-width:560px) {
+    display: none;
+  }
+}
+
+.parentList {
+  padding: 50px;
+  padding-top: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  @media screen and (max-width:560px) {
+    padding: 0px;
+    transform: translateY(-80px);
+  }
+
+  @media screen and (min-width:656px) and (max-width:656px) {
+    transform: translateY(30px);
+  }
+
 }
+
+.parentList::-webkit-scrollbar,
+.foreground::-webkit-scrollbar,
+.sponsorList::-webkit-scrollbar {
+  display: none;
+}
+
+.page {
+  padding: 5px;
+  min-height: 100vh;
+  min-width: 100vw;
+}
diff --git a/src/assets/images/astronaut.svg b/src/assets/images/astronaut.svg
diff --git a/src/assets/images/top-left-border.svg b/src/assets/images/top-left-border.svg
diff --git a/src/assets/images/top-right-border.svg b/src/assets/images/top-right-border.svg
diff --git a/src/components/AboutCard/AboutCard.tsx b/src/components/AboutCard/AboutCard.tsx
@@ -6,8 +6,11 @@ const AboutCard: React.FC<AboutCardProps> = ({ cardRef }) => {
     const content1 = AboutContent.content1;
     const content2 = AboutContent.content2;
     return (
-        <div className="AboutCard max-lg:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[50rem] md:h-[60%] flex justify-center items-center pt-20 p-11 ">
-            <p ref={cardRef} className="font-Nunito text-xl h-[90%] w-[88.5%] overflow-auto p-1">
+        <div className="AboutCard max-lg:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[50rem] md:h-[60%] md:max-h-96 flex justify-center items-center pt-20 p-11">
+            <p
+                ref={cardRef}
+                className="font-Nunito text-xl h-[90%] w-[85%] overflow-auto p-1 text-justify"
+            >
                 {content}
                 <br />
                 <br />

diff --git a/src/components/AuthLayout/form.module.css b/src/components/AuthLayout/form.module.css
@@ -278,6 +278,6 @@ div.formInput {
 
 @media screen and (max-width: 500px) {
     .registerFormContainer {
-        max-width: 80%;
+        max-width: 95%;
     }
 }
diff --git a/src/components/AuthLayout/signup.tsx b/src/components/AuthLayout/signup.tsx
@@ -437,14 +437,12 @@ export const SignUp: React.FC<SignupFormProps> = ({ setForm }) => {
                         </div>
                     )}
                 </div>
-                <div className={styles.formPageNav}>
+                <div className={styles.formPageNav + ' max-sm:scale-105'}>
                     {formPage > 1 && (
                         <Image
                             className={`${styles.formPageNavArrow} ${styles.formPageNavArrowLeft}`}
                             src={ArrowSolid}
                             alt="Navigation Arrow Right"
-                            width={20}
-                            height={20}
                             onClick={() => setFormPage(formPage - 1)}
                         />
                     )}
@@ -453,8 +451,6 @@ export const SignUp: React.FC<SignupFormProps> = ({ setForm }) => {
                             className={styles.formPageNavArrow}
                             src={ArrowSolid}
                             alt="Navigation Arrow Right"
-                            width={20}
-                            height={20}
                             onClick={() => validateFormPage(formPage)}
                         />
                     )}