fix: UI and add socials (#17)

* fix: press button loading page * fix: cluster image boxes * fix: scroll through nav fixes --------- Co-authored-by: shubham-1806 <[email protected]>
delta · Dec 11, 2023 · c9cdb8f · c9cdb8f
1 parent b5c34e4
commit c9cdb8f
Show file tree

Hide file tree

Showing 15 changed files with 77 additions and 48 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -11,10 +11,15 @@ const About = () => {
     const [isScrolled, setIsScrolled] = useState<boolean>(false);
     const [scrollAllowed, setScrollAllowed] = useState<boolean>(true);
     const contentCard = useRef<HTMLDivElement>(null);
+    const navBarRef = useRef<HTMLDivElement>(null);
     const contentCardDesktop = useRef<HTMLParagraphElement>(null);
     const router = useRouter();
     const simulateScroll = (event: WheelEvent<HTMLDivElement>) => {
-        if (!isScrolled && !contentCardDesktop.current?.contains(event.target as Node)) {
+        if (
+            !isScrolled &&
+            !contentCardDesktop.current?.contains(event.target as Node) &&
+            !navBarRef.current?.contains(event.target as Node)
+        ) {
             event.stopPropagation();
             if (event.deltaY > 0) {
                 setTimeout(() => {
@@ -45,7 +50,8 @@ const About = () => {
         if (
             touchStart === null ||
             touchEnd === null ||
-            contentCard.current?.contains(event.target as Node)
+            contentCard.current?.contains(event.target as Node) ||
+            navBarRef.current?.contains(event.target as Node)
         ) {
             return;
         }
@@ -82,7 +88,7 @@ const About = () => {
             onTouchEnd={scrollAllowed ? handleTouchEnd : undefined}
         >
             {/* <div className="flex w-full relative z-10"> */}
-            <NavBar />
+            <NavBar NavRef={navBarRef} />
             {/* </div> */}
             <motion.div
                 z-index={-1}

diff --git a/src/app/eventcluster/[event]/[name]/page.tsx b/src/app/eventcluster/[event]/[name]/page.tsx
@@ -13,7 +13,7 @@ const events = ({ params }: { params: { event: number; name: string } }) => {
             <p
                 className={`${styles.eventClusterName} font-ROG 2xl:text-6xl xl:text-5xl lg:text-4xl sm:text-3xl text-2xl mt-12 transition-all`}
             >
-                {params.name.replace('%20', ' ')}
+                {params.name.replaceAll('%20', ' ')}
             </p>
             <div className="flex w-full h-[60vh] justify-center items-center">
                 <ClusterCarousel id={params.event} name={params.name} />

diff --git a/src/app/events/[clusterId]/[name]/[eventId]/page.tsx b/src/app/events/[clusterId]/[name]/[eventId]/page.tsx
@@ -14,7 +14,7 @@ const events = ({ params }: { params: { clusterId: number; name: string; eventId
             <p
                 className={`${styles.eventClusterName} font-ROG 2xl:text-6xl xl:text-5xl lg:text-4xl sm:text-3xl text-2xl mt-12 transition-all`}
             >
-                {params.name.replace('%20', ' ')}
+                {params.name.replaceAll('%20', ' ')}
             </p>
             <div className={`mt-12 w-full ${styles.slide}`}>
                 <Carousel id={params.clusterId} eventId={params.eventId} />

diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
@@ -48,11 +48,12 @@ const History = () => {
     const [isScrolled, setIsScrolled] = useState<boolean>(false);
     const [touchStart, setTouchStart] = useState<number | null>(null);
     const [touchEnd, setTouchEnd] = useState<number | null>(null);
+    const navBarRef = useRef<HTMLDivElement>(null);
     const shadowRef = useRef<HTMLDivElement>(null);
     const carouselRef = useRef<HTMLDivElement>(null);
     const router = useRouter();
     const simulateScroll = (event: WheelEvent<HTMLDivElement>) => {
-        if (!isScrolled) {
+        if (!isScrolled && !navBarRef.current?.contains(event.target as Node)) {
             event.stopPropagation();
             if (event.deltaY < 0) {
                 setTimeout(() => {
@@ -91,7 +92,8 @@ const History = () => {
         if (
             touchStart === null ||
             touchEnd === null ||
-            carouselRef.current?.contains(event.target as Node)
+            carouselRef.current?.contains(event.target as Node) ||
+            navBarRef.current?.contains(event.target as Node)
         ) {
             return;
         }
@@ -121,7 +123,7 @@ const History = () => {
         >
             <div className={styles.torch} ref={shadowRef}></div>
             <div className="absolute top-0 w-full p-5">
-                <NavBar />
+                <NavBar NavRef={navBarRef} />
             </div>
             <div className="flex w-[100%] h-[50%] items-center justify-center">
                 <div

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -273,4 +273,4 @@ body {
     .about {
         min-height: max(100vh, 860px);
     }
-}
+}
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
@@ -6,13 +6,13 @@ import rings from '@/assets/images/rings.svg';
 import { NavBar, SideBar } from '@/components';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import { WheelEvent, TouchEvent, useState } from 'react';
+import { WheelEvent, TouchEvent, useState, useRef } from 'react';
 
 export default function Home() {
     const [isScrolled, setIsScrolled] = useState<boolean>(false);
     const router = useRouter();
     const simulateScroll = (event: WheelEvent<HTMLDivElement>) => {
-        if (!isScrolled) {
+        if (!isScrolled && !navBarRef.current?.contains(event.target as Node)) {
             event.stopPropagation();
             if (event.deltaY > 0) {
                 setTimeout(() => {
@@ -25,6 +25,7 @@ export default function Home() {
 
     const [touchStart, setTouchStart] = useState<number | null>(null);
     const [touchEnd, setTouchEnd] = useState<number | null>(null);
+    const navBarRef = useRef<HTMLDivElement>(null);
 
     const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
         setTouchEnd(null);
@@ -35,8 +36,12 @@ export default function Home() {
         setTouchEnd(event.targetTouches[0].clientY);
     };
 
-    const handleTouchEnd = () => {
-        if (touchStart === null || touchEnd === null) {
+    const handleTouchEnd = (event: TouchEvent<HTMLDivElement>) => {
+        if (
+            touchStart === null ||
+            touchEnd === null ||
+            navBarRef.current?.contains(event.target as Node)
+        ) {
             return;
         }
         const distance = touchStart - touchEnd;
@@ -63,7 +68,7 @@ export default function Home() {
                 onTouchMove={handleTouchMove}
                 onTouchEnd={handleTouchEnd}
             >
-                <NavBar />
+                <NavBar NavRef={navBarRef} />
                 <div
                     className={
                         'max-lg:w-[60%] max-xl:w-[45%] max-2xl:w-[35%] w-[22%] h-[50%] absolute left-1/2 -translate-x-1/2 flex justify-center top-[15%] max-h-[90vh]' +

diff --git a/src/assets/images/PressButton.png b/src/assets/images/PressButton.png
diff --git a/src/components/AuthLayout/login.tsx b/src/components/AuthLayout/login.tsx
@@ -196,7 +196,6 @@ export const Login: React.FC<SignupFormProps> = ({ setForm }) => {
     // };
 
     const handleFormSubmit = () => {
-        console.log(loginForm.userPassword);
         if (!loginForm.userPassword) console.log('Please enter your password');
         else {
             handleLogin();

diff --git a/src/components/AuthLayout/signup.tsx b/src/components/AuthLayout/signup.tsx
@@ -71,7 +71,6 @@ export const SignUp: React.FC<SignupFormProps> = ({ setForm }) => {
         //     // customErrorToast("Please verify that you are not a robot");
         //     return;
         // }
-        console.log('submitting');
         userApi
             .authUserRegister({
                 // @ts-ignore-next-line

diff --git a/src/components/Carousel/slideData.tsx b/src/components/Carousel/slideData.tsx
@@ -93,7 +93,7 @@ const SlideData: React.FC<SlideDataProps> = ({ details }) => {
                 <div className={`${styles.mainSlide} flex justify-center flex-col align-middle`}>
                     <div className={`flex justify-center w-full h-5/6 ${styles.slideInfo}`}>
                         <div
-                            className={`flex justify-center items-center flex-col w-1/3 h-full p-7 max-lg:hidden ${styles.slideIntro}`}
+                            className={`flex justify-center items-center flex-col w-1/3 h-full p-7 gap-5 max-lg:hidden ${styles.slideIntro}`}
                         >
                             <div className="font-ROG 2xl:text-2xl xl:text-xl lg:text-lg md:text-base sm:text-sm text-xs h-1/6 transition-all">
                                 {details.name}
@@ -103,7 +103,7 @@ const SlideData: React.FC<SlideDataProps> = ({ details }) => {
                                 width={details.image?.width}
                                 height={details.image?.height}
                                 alt="image about event"
-                                className="h-5/6 w-full rounded-xl"
+                                className="h-[75%] w-full rounded-xl"
                             />
                         </div>
                         <div

diff --git a/src/components/ClusterCarousel/ClusterCarousel.tsx b/src/components/ClusterCarousel/ClusterCarousel.tsx
@@ -121,10 +121,7 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => {
                                     height={Math.min(data.image?.height, 100)}
                                     objectPosition="center"
                                     objectFit="contain"
-                                    style={{
-                                        height: Math.min(data.image?.height, 400).toString() + 'px',
-                                    }}
-                                    className={'rounded-lg'}
+                                    className={`rounded-lg lg:max-h[20vh] lg:max-w-[20vw]`}
                                     alt="cluster"
                                     onClick={() => {
                                         router.push(`/events/${id}/${name}/${data.id}`);

diff --git a/src/components/Footer/Social.tsx b/src/components/Footer/Social.tsx
@@ -3,33 +3,50 @@ import facebook from '../../assets/images/facebook.svg';
 import instagram from '../../assets/images/instagram.svg';
 import youtube from '../../assets/images/youtube.svg';
 import medium from '../../assets/images/medium.svg';
-
+import Link from 'next/link';
 import Image from 'next/image';
 
-const Social = () => {
+const FooterItem = ({ link, imageSrc }: { link: string; imageSrc: string }) => {
     return (
-        <div className="flex justify-around items-center">
+        <Link href={link}>
             <Image
-                src={twitter}
+                src={imageSrc}
                 alt="Twitter"
                 className="w-6 hover:cursor-pointer hover:scale-125"
             />
-            <Image src={medium} alt="Medium" className="w-7 hover:cursor-pointer hover:scale-125" />
-            <Image
-                src={instagram}
-                alt="Instagram"
-                className="w-7 hover:cursor-pointer hover:scale-125"
-            />
-            <Image
-                src={youtube}
-                alt="YouTube"
-                className="w-7 hover:cursor-pointer hover:scale-125"
-            />
-            <Image
-                src={facebook}
-                alt="Facebook"
-                className="w-7 hover:cursor-pointer hover:scale-125"
-            />
+        </Link>
+    );
+};
+
+const socialLinks = [
+    {
+        src: twitter,
+        link: 'https://twitter.com/nitt_pragyan',
+    },
+    {
+        src: medium,
+        link: 'https://medium.com/pragyan-blog',
+    },
+    {
+        src: instagram,
+        link: 'https://www.instagram.com/pragyan_nitt/',
+    },
+    {
+        src: youtube,
+        link: 'https://youtube.com/@PragyanNITTrichy',
+    },
+    {
+        src: facebook,
+        link: 'https://m.facebook.com/pragyan.nitt',
+    },
+];
+
+const Social = () => {
+    return (
+        <div className="flex justify-around items-center">
+            {socialLinks.map((image, index) => (
+                <FooterItem key={index} link={image.link} imageSrc={image.src} />
+            ))}
         </div>
     );
 };

diff --git a/src/components/Landing/LoadingMobileView.tsx b/src/components/Landing/LoadingMobileView.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import offLight from '@/assets/images/OffLight.svg';
 import onlight from '@/assets/images/OnLight.svg';
-import greenbutton from '@/assets/images/PressButton.svg';
+import greenbutton from '@/assets/images/PressButton.png';
 
 const LoadingMobileView = ({
     month,

diff --git a/src/components/Landing/LoadingWebView.tsx b/src/components/Landing/LoadingWebView.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import offLight from '@/assets/images/OffLight.svg';
 import onlight from '@/assets/images/OnLight.svg';
-import greenbutton from '@/assets/images/PressButton.svg';
+import greenbutton from '@/assets/images/PressButton.png';
 
 const LoadingWebView = ({
     month,
@@ -46,7 +46,7 @@ const LoadingWebView = ({
                             {isButtonClicked ? `????????????` : 'READY TO TRAVEL?'}
                         </div>
                     </div>
-                    <div className=" w-[80%] h-[27%] loadingdivs flex justify-end relative ml-[5%] items-start xl:pt-[1%]">
+                    <div className=" w-[70%] h-[27%] loadingdivs flex justify-end relative ml-[5%] items-start pb-[5%] xl:pb-[0] xl:pt-[1%]">
                         <Image
                             src={greenbutton}
                             onClick={() => {
@@ -56,7 +56,7 @@ const LoadingWebView = ({
                             }}
                             alt="button"
                             className={
-                                ' h-[30%] xl:h-[50%] w-[20%] hover:cursor-pointer ' +
+                                ' h-[35%] xl:h-[40%] w-[12%] hover:cursor-pointer ' +
                                 (isButtonClicked ? ' ' : 'greenbutton')
                             }
                         />

diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -9,7 +9,11 @@ import Link from 'next/link';
 import Menu from '@/components/Menu/Menu';
 import styles from './navbar.module.css';
 
-const NavBar = () => {
+interface NavBarProps {
+    NavRef?: React.RefObject<HTMLDivElement>;
+}
+
+const NavBar = ({ NavRef }: NavBarProps) => {
     const LoginButton = () => {
         return (
             <Link href="/login" className={`${styles.navLink} max-lg:hidden`}>
@@ -66,7 +70,7 @@ const NavBar = () => {
     }, []);
 
     return (
-        <div className="w-full flex h-14 box-border px-5 lg:px-7 z-10">
+        <div className="w-full flex h-14 box-border px-5 lg:px-7 z-10" ref={NavRef}>
             <Menu isOpened={isOpened} setIsOpened={setIsOpened} />
             <div className="flex basis-1/2 justify-start items-center lg:px-5">
                 <Link href="/home">
-Original file line number
+Diff line change
@@ Expand Up / @@ -273,4 +273,4 @@ body { @@
         .about {
             min-height: max(100vh, 860px);
         }
-    }
+    }