From b270a93c8ae2240d09ca88e81b0a7dca5b76e676 Mon Sep 17 00:00:00 2001 From: SRISOWRIRAJAN K S Date: Wed, 13 Dec 2023 02:06:50 +0530 Subject: [PATCH 01/24] fix: navbar mobile animation --- src/components/Menu/Menu.tsx | 6 +-- src/components/NavBar/navbar.module.css | 54 ++++++++++++++++++------- 2 files changed, 43 insertions(+), 17 deletions(-) diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index bddc7cd..7bd8e9d 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -38,9 +38,9 @@ const Menu: React.FC = ({ isOpened, setIsOpened }) => { return (
{isOpened ? ( -
+
{ if (setIsOpened) setIsOpened(false); }} @@ -61,7 +61,7 @@ const Menu: React.FC = ({ isOpened, setIsOpened }) => { />
    Date: Wed, 13 Dec 2023 10:44:32 +0530 Subject: [PATCH 02/24] feat: responsiveness --- src/app/sponsors/sponsors.module.css | 30 +++++++++++++++++-- src/assets/images/astronaut.svg | 2 +- .../SponsorsButton/SponsorsButton.tsx | 4 +-- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index bfa8b0b..2d6053b 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -5,7 +5,7 @@ .foreground { display: flex; flex-direction: column; - gap:1px; + gap: 1px; } .foreground, @@ -22,16 +22,28 @@ text-align: center; font-family: ROG; font-size: 74.8px; + + align-self: center; + width: fit-content; + + @media screen and (max-width:560px) { + font-size: 34.8px; + text-align: center; + } + font-style: normal; font-weight: 400; line-height: normal; padding-top:60px; + } .background { display: flex; justify-content: center; align-items: center; + width: fit-content; + background-color: red; } .backgroundText { @@ -48,6 +60,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 { @@ -62,6 +79,8 @@ .sponsorButton { margin-top: 90px; height: fit-content; + padding: 0px; + } .sponsorText { @@ -91,6 +110,11 @@ flex-wrap: wrap; max-height: 100%; } -.astro{ + +.astro { overflow: hidden; -} + + @media screen and (max-width:560px) { + display: none; + } +} \ No newline at end of file diff --git a/src/assets/images/astronaut.svg b/src/assets/images/astronaut.svg index 90d0816..e43f383 100644 --- a/src/assets/images/astronaut.svg +++ b/src/assets/images/astronaut.svg @@ -1,4 +1,4 @@ - + diff --git a/src/components/SponsorsButton/SponsorsButton.tsx b/src/components/SponsorsButton/SponsorsButton.tsx index 5e5df0e..55107d6 100644 --- a/src/components/SponsorsButton/SponsorsButton.tsx +++ b/src/components/SponsorsButton/SponsorsButton.tsx @@ -9,8 +9,8 @@ export default function SponsorButton() { return ( <> Date: Wed, 13 Dec 2023 11:22:35 +0530 Subject: [PATCH 03/24] feat: responsiveness, fixed sponsor button issue and overflow issue --- src/app/sponsors/sponsors.module.css | 30 +++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index 2d6053b..63c8d64 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -2,12 +2,6 @@ display: grid; } -.foreground { - display: flex; - flex-direction: column; - gap: 1px; -} - .foreground, .background { width: 100vw; @@ -17,6 +11,16 @@ max-height: 86vh; } +.foreground { + display: flex; + flex-direction: column; + gap: 1px; + + height: 100%; + width: 100%; +} + + .sponsor { color: #fff; text-align: center; @@ -43,7 +47,6 @@ justify-content: center; align-items: center; width: fit-content; - background-color: red; } .backgroundText { @@ -74,13 +77,22 @@ 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: translateX(8%); + } } .sponsorText { From 7b6ec63bcd874c547613e050d079461a44befddb Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Wed, 13 Dec 2023 19:23:27 +0530 Subject: [PATCH 04/24] wip: responsiveness, todo: decrease card sizes --- src/app/sponsors/page.tsx | 2 +- src/app/sponsors/sponsors.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index 3b36ded..8b4b0b2 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -5,7 +5,7 @@ import Image from 'next/image'; import astronaut from '../../assets/images/astronaut.svg'; export default function Sponsors() { - const sponsorsList: SponsorCardProps[] = []; // change to let + const sponsorsList: SponsorCardProps[] = Array(30).fill({ logo: '', name: 'hiw' }); // backend logic // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index 63c8d64..dda8d42 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -91,7 +91,7 @@ width: min-content; height: min-content; @media screen and (max-width:560px) { - transform: translateX(8%); + transform: translate(8%,-35%); } } From 89dc297f04688f1d82b367ee8aa35c0fda403492 Mon Sep 17 00:00:00 2001 From: Bhoopesh Date: Wed, 13 Dec 2023 20:51:28 +0530 Subject: [PATCH 05/24] fix: aboutCard skill issue :( --- src/components/AboutCard/AboutCard.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/AboutCard/AboutCard.tsx b/src/components/AboutCard/AboutCard.tsx index ab24e4d..b234c22 100644 --- a/src/components/AboutCard/AboutCard.tsx +++ b/src/components/AboutCard/AboutCard.tsx @@ -6,8 +6,11 @@ const AboutCard: React.FC = ({ cardRef }) => { const content1 = AboutContent.content1; const content2 = AboutContent.content2; return ( -
    -

    +

    +

    {content}

    From f0ab9417ed55a1134ebb641d4d10c33a5a85e025 Mon Sep 17 00:00:00 2001 From: Bhoopesh Date: Wed, 13 Dec 2023 23:23:44 +0530 Subject: [PATCH 06/24] fix: signUp --- src/components/AuthLayout/form.module.css | 2 +- src/components/AuthLayout/signup.tsx | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/AuthLayout/form.module.css b/src/components/AuthLayout/form.module.css index 41cbe12..ef94b9d 100644 --- 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 index 3f1ba43..55ba6e8 100644 --- a/src/components/AuthLayout/signup.tsx +++ b/src/components/AuthLayout/signup.tsx @@ -437,14 +437,12 @@ export const SignUp: React.FC = ({ setForm }) => {

    )}
    -
    +
    {formPage > 1 && ( Navigation Arrow Right setFormPage(formPage - 1)} /> )} @@ -453,8 +451,6 @@ export const SignUp: React.FC = ({ setForm }) => { className={styles.formPageNavArrow} src={ArrowSolid} alt="Navigation Arrow Right" - width={20} - height={20} onClick={() => validateFormPage(formPage)} /> )} From fd82443c3d99dba793408601abcc553ba089a51b Mon Sep 17 00:00:00 2001 From: Bhoopesh Date: Wed, 13 Dec 2023 23:58:17 +0530 Subject: [PATCH 07/24] fix(footer): delta and login --- src/app/globals.css | 4 ++++ src/app/layout.tsx | 2 +- src/components/Footer/Footer.tsx | 14 +++++++++++--- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index bf34876..7fef580 100644 --- 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 index 53a948e..4924cb5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,7 +13,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( -
    {children}
    +
    {children}
    diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index c47c6da..0f05982 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -2,11 +2,12 @@ import Clock from '../Clock/Clock'; import Social from './Social'; import { usePathname } from 'next/navigation'; -import Link from 'next/link'; const Footer = () => { const pathname = usePathname(); - if (pathname === '/') { + const ommitedPaths = ['/login/', '/signup/']; + + if (ommitedPaths.includes(pathname)) { return null; } @@ -17,7 +18,14 @@ const Footer = () => {

    - Made With ♥ by DELTA FORCE{' '} + Made With ♥ by + + {' '} + DELTA FORCE + {' '} and Graphique

    From 12ec5c39e66ba25953fff560d217e5a9b8143269 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Thu, 14 Dec 2023 00:37:50 +0530 Subject: [PATCH 08/24] fix: mobile responsiveness --- src/app/sponsors/page.tsx | 8 +++++-- src/app/sponsors/sponsors.module.css | 22 +++++++++++++++++++- src/components/SponsorCard/SponsorCard.tsx | 13 +++++++++--- src/components/SponsorCard/styles.module.css | 2 ++ 4 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index 8b4b0b2..c7ae090 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -5,7 +5,11 @@ import Image from 'next/image'; import astronaut from '../../assets/images/astronaut.svg'; export default function Sponsors() { - const sponsorsList: SponsorCardProps[] = Array(30).fill({ logo: '', name: 'hiw' }); + const sponsorsList: SponsorCardProps[] = Array(30).fill({ + logo: '', + l: (202930 * Math.random()).toString(), + name: 'hiw', + }); // backend logic // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); @@ -25,7 +29,7 @@ export default function Sponsors() {
    SPONSORS
    {sponsorsList.map((e: SponsorCardProps) => ( - + ))}
    diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index dda8d42..8d1c230 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -90,8 +90,10 @@ padding: 0px; width: min-content; height: min-content; + @media screen and (max-width:560px) { - transform: translate(8%,-35%); + transform: translate(10%, -85%); + margin-top: 60px; } } @@ -105,6 +107,11 @@ font-style: normal; font-weight: 400; line-height: normal; + + + @media screen and (max-width:560px) { + font-size: 44px; + } } .sponsorButtonUp { @@ -114,6 +121,10 @@ display: flex; justify-content: center; align-items: center; + @media screen and (max-width:560px) { + transform: translate(10%, -45%); + margin-top: 60px; + } } .sponsorList { @@ -121,6 +132,15 @@ display: flex; flex-wrap: wrap; max-height: 100%; + overflow-y: scroll; + overflow-x: hidden; + + @media screen and (max-width:560px) { + flex-wrap: nowrap; + flex-direction: column; + align-items: center; + gap:5px; + } } .astro { diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx index cebbe76..0597454 100644 --- a/src/components/SponsorCard/SponsorCard.tsx +++ b/src/components/SponsorCard/SponsorCard.tsx @@ -1,13 +1,20 @@ +'use client'; import styles from './styles.module.css'; import topLeftBorder from '../../assets/images/top-left-border.svg'; import topRightBorder from '../../assets/images/top-right-border.svg'; import bottomBorder from '../../assets/images/bottom-border.svg'; import Image from 'next/image'; +import { motion } from 'framer-motion'; +import { useEffect, useState } from 'react'; const SponsorCard = ({ name, logo }: SponsorCardProps) => { + const [dim, setDim] = useState(0.75); + useEffect(() => { + setDim(window.innerWidth < 560 ? 0.65 : 0.75); + }, []); return ( -
    +
    @@ -17,13 +24,13 @@ const SponsorCard = ({ name, logo }: SponsorCardProps) => {
    -
    {name}
    +
    {name}
    {logo != '' && {name}}
    -
    +     ); }; export default SponsorCard; diff --git a/src/components/SponsorCard/styles.module.css b/src/components/SponsorCard/styles.module.css index 0fc982e..c5f8add 100644 --- a/src/components/SponsorCard/styles.module.css +++ b/src/components/SponsorCard/styles.module.css @@ -1,5 +1,7 @@ .parent { display: grid; + flex-shrink: 1; + flex-grow: 0; } .borderOverlay, From 8c185d10f4786f51c09b188e3f3356f5bf797912 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Thu, 14 Dec 2023 03:50:44 +0530 Subject: [PATCH 09/24] fix: mobile responsiveness --- src/app/sponsors/page.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index c7ae090..728aa32 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -5,11 +5,7 @@ import Image from 'next/image'; import astronaut from '../../assets/images/astronaut.svg'; export default function Sponsors() { - const sponsorsList: SponsorCardProps[] = Array(30).fill({ - logo: '', - l: (202930 * Math.random()).toString(), - name: 'hiw', - }); + const sponsorsList: SponsorCardProps[] = []; // backend logic // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); From e9eff44cd282d80be7c0680caf267aa43092e535 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Thu, 14 Dec 2023 11:56:14 +0530 Subject: [PATCH 10/24] fix: mobile responsiveness --- src/app/sponsors/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index 728aa32..3dc03c2 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -25,7 +25,7 @@ export default function Sponsors() {
    SPONSORS
    {sponsorsList.map((e: SponsorCardProps) => ( - + ))}
    From ee5ccbaf1dc7a2911c5467a09f5a1cee5a1f1c23 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Thu, 14 Dec 2023 11:59:58 +0530 Subject: [PATCH 11/24] fix: mobile responsiveness --- src/app/sponsors/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index 728aa32..3dc03c2 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -25,7 +25,7 @@ export default function Sponsors() {
    SPONSORS
    {sponsorsList.map((e: SponsorCardProps) => ( - + ))}
    From e8aca4cf546976380810cd2fe0f8526e12ee623c Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Thu, 14 Dec 2023 12:32:07 +0530 Subject: [PATCH 12/24] fix: astronaut --- src/app/sponsors/sponsors.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index 8d1c230..accabd1 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -20,7 +20,6 @@ width: 100%; } - .sponsor { color: #fff; text-align: center; @@ -145,7 +144,7 @@ .astro { overflow: hidden; - + min-width: 220px !important; @media screen and (max-width:560px) { display: none; } From 090cc478abc55b10f92a98b83e821a9cb87024b8 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Thu, 14 Dec 2023 22:39:52 +0530 Subject: [PATCH 13/24] fix: mobile sponsors button, center cards always --- src/app/sponsors/page.tsx | 12 ++++++---- src/app/sponsors/sponsors.module.css | 25 +++++++++++++++++--- src/assets/images/top-left-border.svg | 2 +- src/assets/images/top-right-border.svg | 2 +- src/components/SponsorCard/SponsorCard.tsx | 4 ++-- src/components/SponsorCard/styles.module.css | 18 +++++++------- 6 files changed, 43 insertions(+), 20 deletions(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index 3dc03c2..d6ccc8b 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -5,7 +5,7 @@ import Image from 'next/image'; import astronaut from '../../assets/images/astronaut.svg'; export default function Sponsors() { - const sponsorsList: SponsorCardProps[] = []; + const sponsorsList: SponsorCardProps[] = Array(30).fill({ name: 'nextjs', logo: '/next.svg' }); // backend logic // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); @@ -23,10 +23,12 @@ export default function Sponsors() {
    SPONSORS
    -
    - {sponsorsList.map((e: SponsorCardProps) => ( - - ))} +
    +
    + {sponsorsList.map((e: SponsorCardProps) => ( + + ))} +
    ) : ( diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index accabd1..f48b26f 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -91,7 +91,7 @@ height: min-content; @media screen and (max-width:560px) { - transform: translate(10%, -85%); + transform: translate(10%, -05%); margin-top: 60px; } } @@ -120,6 +120,7 @@ display: flex; justify-content: center; align-items: center; + @media screen and (max-width:560px) { transform: translate(10%, -45%); margin-top: 60px; @@ -131,21 +132,39 @@ display: flex; flex-wrap: wrap; max-height: 100%; - overflow-y: scroll; + width: fit-content; + height: fit-content; overflow-x: hidden; + gap: 115px; + justify-content: center; + @media screen and (max-width:560px) { flex-wrap: nowrap; flex-direction: column; align-items: center; - gap:5px; + gap: 5px; } } .astro { overflow: hidden; min-width: 220px !important; + @media screen and (max-width:560px) { display: none; } +} + +.parentList { + padding: 50px; + display: flex; + justify-content: center; + align-items: center; + overflow-y: scroll; + + +} +.parentList::-webkit-scrollbar { + display: none; } \ No newline at end of file diff --git a/src/assets/images/top-left-border.svg b/src/assets/images/top-left-border.svg index be9956d..4016c5a 100644 --- a/src/assets/images/top-left-border.svg +++ b/src/assets/images/top-left-border.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/top-right-border.svg b/src/assets/images/top-right-border.svg index 8681aeb..ccc2310 100644 --- a/src/assets/images/top-right-border.svg +++ b/src/assets/images/top-right-border.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx index 0597454..60c242f 100644 --- a/src/components/SponsorCard/SponsorCard.tsx +++ b/src/components/SponsorCard/SponsorCard.tsx @@ -9,9 +9,9 @@ import { motion } from 'framer-motion'; import { useEffect, useState } from 'react'; const SponsorCard = ({ name, logo }: SponsorCardProps) => { - const [dim, setDim] = useState(0.75); + const [dim, setDim] = useState(1); useEffect(() => { - setDim(window.innerWidth < 560 ? 0.65 : 0.75); + setDim(window.innerWidth < 560 ? 0.65 : 1); }, []); return ( diff --git a/src/components/SponsorCard/styles.module.css b/src/components/SponsorCard/styles.module.css index c5f8add..63ca903 100644 --- a/src/components/SponsorCard/styles.module.css +++ b/src/components/SponsorCard/styles.module.css @@ -6,8 +6,8 @@ .borderOverlay, .sponsorParent { - width: 455px; - height: 340px; + width: 341px; + height:255px; grid-area: 1/1; } @@ -34,8 +34,8 @@ } .title { - width: 425px; - height: 85px; + width: 318px; + height: 64px; flex-shrink: 0; transform: translateY(-15%); background: rgba(57, 158, 184, 0.5); @@ -52,8 +52,8 @@ font-style: normal; font-weight: 400; line-height: normal; - width: 405px; - height: 65px; + width: 304px; + height: 49px; flex-shrink: 0; border: 5px solid rgba(255, 255, 255, 0.5); display: flex; @@ -62,8 +62,8 @@ } .body { - width: 425px; - height: 195px; + width: 319px; + height: 146px; flex-shrink: 0; border: 0.5px solid #fff; @@ -71,4 +71,6 @@ display: flex; justify-content: center; align-items: center; + + padding: 10px; } \ No newline at end of file From 020215e49cc19358c37fecffa3c3923762c95150 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Thu, 14 Dec 2023 23:02:02 +0530 Subject: [PATCH 14/24] fix: mobile sponsors button, center cards always --- src/app/sponsors/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index d6ccc8b..be1d96a 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -5,7 +5,7 @@ import Image from 'next/image'; import astronaut from '../../assets/images/astronaut.svg'; export default function Sponsors() { - const sponsorsList: SponsorCardProps[] = Array(30).fill({ name: 'nextjs', logo: '/next.svg' }); + const sponsorsList: SponsorCardProps[] = []; // backend logic // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); From 18c6bfd3290b72a5b127d258058876d7551dbc5b Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Fri, 15 Dec 2023 00:36:01 +0530 Subject: [PATCH 15/24] fix: s20 ultra overflow --- src/app/sponsors/page.tsx | 3 +- src/app/sponsors/sponsors.module.css | 11 ++++---- src/components/SponsorCard/SponsorCard.tsx | 33 ++++++++++++---------- 3 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index be1d96a..eac50ea 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -1,3 +1,4 @@ +'use client'; import { NavBar, SponsorButton, SponsorCard } from '@/components'; import styles from './sponsors.module.css'; import Image from 'next/image'; @@ -5,7 +6,7 @@ import Image from 'next/image'; import astronaut from '../../assets/images/astronaut.svg'; export default function Sponsors() { - const sponsorsList: SponsorCardProps[] = []; + const sponsorsList: SponsorCardProps[] = Array(30).fill({ name: 'nextjs', logo: '/next.svg' }); // backend logic // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index f48b26f..54446ee 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -122,7 +122,7 @@ align-items: center; @media screen and (max-width:560px) { - transform: translate(10%, -45%); + transform: translate(10%, -55%); margin-top: 60px; } } @@ -139,10 +139,7 @@ gap: 115px; justify-content: center; - @media screen and (max-width:560px) { - flex-wrap: nowrap; - flex-direction: column; - align-items: center; + @media screen and (max-width:560px) { gap: 5px; } } @@ -163,8 +160,12 @@ align-items: center; overflow-y: scroll; + @media screen and (max-width:560px) { + padding: 0px; + } } + .parentList::-webkit-scrollbar { display: none; } \ No newline at end of file diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx index 60c242f..fddb877 100644 --- a/src/components/SponsorCard/SponsorCard.tsx +++ b/src/components/SponsorCard/SponsorCard.tsx @@ -13,24 +13,27 @@ const SponsorCard = ({ name, logo }: SponsorCardProps) => { useEffect(() => { setDim(window.innerWidth < 560 ? 0.65 : 1); }, []); + return ( - -
    -
    - - -
    - -
    -
    -
    -
    {name}
    + <> + +
    +
    + + +
    +
    -
    - {logo != '' && {name}} +
    +
    +
    {name}
    +
    +
    + {logo != '' && {name}} +
    -
    -     + + ); }; export default SponsorCard; From c564fade04391b8ed66231c524c1bd92056e5b86 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Fri, 15 Dec 2023 01:21:17 +0530 Subject: [PATCH 16/24] fix: ipad mini overlap, and add more screens --- src/app/sponsors/sponsors.module.css | 32 +++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index 54446ee..4f867df 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -107,10 +107,17 @@ 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 { @@ -121,10 +128,29 @@ justify-content: center; align-items: center; + @media screen and (min-width:768px) and (max-width:820px) { + margin-top: 170px; + right: 10px; + } + @media screen and (max-width:560px) { transform: translate(10%, -55%); margin-top: 60px; } + + + @media screen and (width:820px) { + margin-top: 170px; + right: 10px; + } + + + + + @media screen and (max-width:300px) { + transform: translate(20%, -55%); + margin-top: 60px; + } } .sponsorList { @@ -139,7 +165,7 @@ gap: 115px; justify-content: center; - @media screen and (max-width:560px) { + @media screen and (max-width:560px) { gap: 5px; } } @@ -164,6 +190,10 @@ padding: 0px; } + @media screen and (min-width:768px) and (max-width:860px){ + margin-top: 10px; + transform: translateY(30px); + } } .parentList::-webkit-scrollbar { From ea397b12f9acee9f5c7db1c3e72a337a16243c75 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Fri, 15 Dec 2023 16:00:59 +0530 Subject: [PATCH 17/24] fix: scroll behavior --- src/app/sponsors/page.tsx | 2 +- src/app/sponsors/sponsors.module.css | 55 +++++++++++++------- src/components/SponsorCard/SponsorCard.tsx | 12 +---- src/components/SponsorCard/styles.module.css | 6 ++- 4 files changed, 43 insertions(+), 32 deletions(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index eac50ea..65a9424 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -20,10 +20,10 @@ export default function Sponsors() {
    {sponsorsList.length > 0 ? ( <> +
    SPONSORS
    -
    SPONSORS
    {sponsorsList.map((e: SponsorCardProps) => ( diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index 4f867df..ab51b38 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -6,7 +6,7 @@ .background { width: 100vw; max-width: 100vw; - overflow: hidden; + overflow-x: hidden; grid-area: 1/1; max-height: 86vh; } @@ -29,16 +29,19 @@ align-self: center; width: fit-content; + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top: 60px; + @media screen and (max-width:560px) { font-size: 34.8px; text-align: center; } - font-style: normal; - font-weight: 400; - line-height: normal; - padding-top:60px; - + @media screen and (min-width:656px) and (max-width:656px) { + font-size: 34.8px; + } } .background { @@ -121,16 +124,20 @@ } .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: 170px; - right: 10px; + margin-top: 30px; + transform: translate(27%, -5%); } @media screen and (max-width:560px) { @@ -139,16 +146,23 @@ } - @media screen and (width:820px) { - margin-top: 170px; - right: 10px; + @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 (max-width:300px) { - transform: translate(20%, -55%); + width: fit-content; + height: fit-content; + transform: translate(-8%, -65%); margin-top: 60px; } } @@ -157,7 +171,6 @@ /* margin-top: 140px; */ display: flex; flex-wrap: wrap; - max-height: 100%; width: fit-content; height: fit-content; overflow-x: hidden; @@ -181,21 +194,23 @@ .parentList { padding: 50px; + padding-top: 0px; display: flex; justify-content: center; align-items: center; - overflow-y: scroll; @media screen and (max-width:560px) { padding: 0px; + transform: translateY(-80px); } - @media screen and (min-width:768px) and (max-width:860px){ - margin-top: 10px; + @media screen and (min-width:656px) and (max-width:656px) { transform: translateY(30px); } } -.parentList::-webkit-scrollbar { +.parentList::-webkit-scrollbar, +.foreground::-webkit-scrollbar, +.sponsorList::-webkit-scrollbar { display: none; } \ No newline at end of file diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx index fddb877..5d182bc 100644 --- a/src/components/SponsorCard/SponsorCard.tsx +++ b/src/components/SponsorCard/SponsorCard.tsx @@ -1,22 +1,14 @@ -'use client'; import styles from './styles.module.css'; import topLeftBorder from '../../assets/images/top-left-border.svg'; import topRightBorder from '../../assets/images/top-right-border.svg'; import bottomBorder from '../../assets/images/bottom-border.svg'; import Image from 'next/image'; -import { motion } from 'framer-motion'; -import { useEffect, useState } from 'react'; const SponsorCard = ({ name, logo }: SponsorCardProps) => { - const [dim, setDim] = useState(1); - useEffect(() => { - setDim(window.innerWidth < 560 ? 0.65 : 1); - }, []); - return ( <> - +
    @@ -32,7 +24,7 @@ const SponsorCard = ({ name, logo }: SponsorCardProps) => { {logo != '' && {name}}
    - +
    ); }; diff --git a/src/components/SponsorCard/styles.module.css b/src/components/SponsorCard/styles.module.css index 63ca903..880e0c1 100644 --- a/src/components/SponsorCard/styles.module.css +++ b/src/components/SponsorCard/styles.module.css @@ -2,12 +2,16 @@ display: grid; flex-shrink: 1; flex-grow: 0; + + @media screen and (max-width:560px) { + transform: scale(0.65); + } } .borderOverlay, .sponsorParent { width: 341px; - height:255px; + height: 255px; grid-area: 1/1; } From 60455e5398335fd01271b222bde997c4f5a66e95 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Fri, 15 Dec 2023 16:03:56 +0530 Subject: [PATCH 18/24] fix: scroll behavior --- src/app/sponsors/sponsors.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index ab51b38..e79e815 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -159,6 +159,10 @@ 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; From 8d9821a81e9ce38d21e23e03b1dfb5fd2624a9a3 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Fri, 15 Dec 2023 16:04:52 +0530 Subject: [PATCH 19/24] fix: scroll behavior --- src/app/sponsors/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index 65a9424..c5adb95 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -6,7 +6,7 @@ import Image from 'next/image'; import astronaut from '../../assets/images/astronaut.svg'; export default function Sponsors() { - const sponsorsList: SponsorCardProps[] = Array(30).fill({ name: 'nextjs', logo: '/next.svg' }); + const sponsorsList: SponsorCardProps[] = []; // backend logic // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); From 6b891a4571f0eeecd88e52b98ef36a6b39a4207e Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Mon, 18 Dec 2023 03:17:08 +0530 Subject: [PATCH 20/24] fix: astronaut, sponsor button placement, integrate cms --- src/app/sponsors/page.tsx | 16 +++++++++++----- src/app/sponsors/sponsors.module.css | 20 ++++++++++++++++---- src/components/SponsorCard/SponsorCard.tsx | 10 +++++++++- src/components/SponsorCard/styles.module.css | 6 ++++++ src/utils/events_cms.ts | 15 +++++++++++++++ 5 files changed, 57 insertions(+), 10 deletions(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index c5adb95..216f261 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -4,14 +4,20 @@ 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[] = []; + const [sponsorsList, setSponsorsList] = useState([]); + useEffect(() => { + const a = async () => { + setSponsorsList(await getSponsors()); + }; + a(); + }, []); - // backend logic - // sponsorsList = await(await fetch("backend url",{next:{tags:['collection']}})).json(); return ( -
    +
    @@ -37,7 +43,7 @@ export default function Sponsors() {

    SPONSORS

    {sponsorsList.length <= 0 && (
    -
    +
    {
    {name}
    - {logo != '' && {name}} + {logo != '' && ( + {name} + )}
    diff --git a/src/components/SponsorCard/styles.module.css b/src/components/SponsorCard/styles.module.css index 880e0c1..e4997fe 100644 --- a/src/components/SponsorCard/styles.module.css +++ b/src/components/SponsorCard/styles.module.css @@ -35,6 +35,7 @@ align-items: center; flex-direction: column; + gap:10px } .title { @@ -77,4 +78,9 @@ align-items: center; padding: 10px; +} +.logo{ + object-fit: contain; + max-height: 100%; + max-width: 100%; } \ No newline at end of file diff --git a/src/utils/events_cms.ts b/src/utils/events_cms.ts index 403fe0d..1393cdd 100644 --- a/src/utils/events_cms.ts +++ b/src/utils/events_cms.ts @@ -68,3 +68,18 @@ export const getGallery = async () => { }); return details; }; + +export const getSponsors = async () => { + let res = await axios.get(`${CMS_URL}/api/sponsors?populate=*`); + let detailArray = res.data.data; + //@ts-ignore + let details: any = []; + // eslint-disable @typescript-eslint/ban-ts-comment + //@ts-ignore + detailArray.forEach((data: any) => { + let detail = data.attributes; + details.push({ name: detail.name, logo: `${CMS_URL}${detail.logo.data.attributes.url}` }); + }); + + return details; +}; From 77b1802e2e94bf7f340afd2d8998833c4e6eca59 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Mon, 18 Dec 2023 03:22:18 +0530 Subject: [PATCH 21/24] fix: sponsorcard alignment --- src/components/SponsorCard/SponsorCard.tsx | 2 +- src/components/SponsorCard/styles.module.css | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/SponsorCard/SponsorCard.tsx b/src/components/SponsorCard/SponsorCard.tsx index c947747..0dedf51 100644 --- a/src/components/SponsorCard/SponsorCard.tsx +++ b/src/components/SponsorCard/SponsorCard.tsx @@ -10,7 +10,7 @@ const SponsorCard = ({ name, logo }: SponsorCardProps) => { <>
    -
    +
    diff --git a/src/components/SponsorCard/styles.module.css b/src/components/SponsorCard/styles.module.css index e4997fe..366f5a4 100644 --- a/src/components/SponsorCard/styles.module.css +++ b/src/components/SponsorCard/styles.module.css @@ -20,7 +20,9 @@ justify-content: space-between; flex-direction: column; } - +.topBorder{ + transform: translateY(-7px); +} .topRightBorder { top: 0px; right: 0px; @@ -35,7 +37,6 @@ align-items: center; flex-direction: column; - gap:10px } .title { From 7c5d30ac3e963ff14f7dd98dbea28af8d2d29f18 Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Mon, 18 Dec 2023 23:05:01 +0530 Subject: [PATCH 22/24] fix: sponsorsContainer overflow --- src/app/sponsors/page.tsx | 4 ++-- src/app/sponsors/sponsors.module.css | 12 +++++++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index 216f261..17c9e46 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -25,7 +25,7 @@ export default function Sponsors() {
    {sponsorsList.length > 0 ? ( - <> +
    SPONSORS
    @@ -37,7 +37,7 @@ export default function Sponsors() { ))}
    - +
    ) : ( <>

    SPONSORS

    diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index 6488a34..08ac44b 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -190,6 +190,8 @@ @media screen and (max-width:560px) { gap: 5px; } + + } .astro { @@ -217,6 +219,10 @@ @media screen and (min-width:656px) and (max-width:656px) { transform: translateY(30px); } + + @media screen and (max-height:656px) { + transform: translateY(80px); + } } .parentList::-webkit-scrollbar, @@ -224,7 +230,11 @@ .sponsorList::-webkit-scrollbar { display: none; } - +.sponsorList,.parentList{ + @media screen and (max-height:656px) { + margin-top: 100px; + } +} .page { padding: 5px; min-height: 100vh; From 67ac19fe4776021e6c91dd1ebac9f56d9dd285db Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Mon, 18 Dec 2023 23:05:35 +0530 Subject: [PATCH 23/24] fix: sponsorsContainer overflow --- src/app/sponsors/sponsors.module.css | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/app/sponsors/sponsors.module.css b/src/app/sponsors/sponsors.module.css index 08ac44b..9ebd5c9 100644 --- a/src/app/sponsors/sponsors.module.css +++ b/src/app/sponsors/sponsors.module.css @@ -220,9 +220,6 @@ transform: translateY(30px); } - @media screen and (max-height:656px) { - transform: translateY(80px); - } } .parentList::-webkit-scrollbar, @@ -230,11 +227,7 @@ .sponsorList::-webkit-scrollbar { display: none; } -.sponsorList,.parentList{ - @media screen and (max-height:656px) { - margin-top: 100px; - } -} + .page { padding: 5px; min-height: 100vh; From 88edf4b0d5b785a1222bb03808e8046f751f0b0f Mon Sep 17 00:00:00 2001 From: Ayush Chadha Date: Tue, 19 Dec 2023 00:38:20 +0530 Subject: [PATCH 24/24] fix: zindex issue --- src/components/SponsorCard/styles.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SponsorCard/styles.module.css b/src/components/SponsorCard/styles.module.css index 366f5a4..fb15c75 100644 --- a/src/components/SponsorCard/styles.module.css +++ b/src/components/SponsorCard/styles.module.css @@ -6,6 +6,7 @@ @media screen and (max-width:560px) { transform: scale(0.65); } + z-index: 4; } .borderOverlay, @@ -73,7 +74,7 @@ flex-shrink: 0; border: 0.5px solid #fff; - background: rgba(2, 33, 41, 0.5); + background: rgba(2, 33, 41, 0.7); display: flex; justify-content: center; align-items: center;