From c9cdb8f7ed487cd4e7bd1e90a86ed5971debc82f Mon Sep 17 00:00:00 2001 From: Vignesh Duraisamy Date: Mon, 11 Dec 2023 21:01:24 +0530 Subject: [PATCH] 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 --- src/app/about/page.tsx | 12 +++- src/app/eventcluster/[event]/[name]/page.tsx | 2 +- .../[clusterId]/[name]/[eventId]/page.tsx | 2 +- src/app/gallery/page.tsx | 8 ++- src/app/globals.css | 2 +- src/app/home/page.tsx | 15 +++-- src/assets/images/PressButton.png | Bin 0 -> 3115 bytes src/components/AuthLayout/login.tsx | 1 - src/components/AuthLayout/signup.tsx | 1 - src/components/Carousel/slideData.tsx | 4 +- .../ClusterCarousel/ClusterCarousel.tsx | 5 +- src/components/Footer/Social.tsx | 57 ++++++++++++------ src/components/Landing/LoadingMobileView.tsx | 2 +- src/components/Landing/LoadingWebView.tsx | 6 +- src/components/NavBar/NavBar.tsx | 8 ++- 15 files changed, 77 insertions(+), 48 deletions(-) create mode 100644 src/assets/images/PressButton.png diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index e0d1175..f5b07c8 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -11,10 +11,15 @@ const About = () => { const [isScrolled, setIsScrolled] = useState(false); const [scrollAllowed, setScrollAllowed] = useState(true); const contentCard = useRef(null); + const navBarRef = useRef(null); const contentCardDesktop = useRef(null); const router = useRouter(); const simulateScroll = (event: WheelEvent) => { - 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} > {/*
*/} - + {/*
*/} {

- {params.name.replace('%20', ' ')} + {params.name.replaceAll('%20', ' ')}

diff --git a/src/app/events/[clusterId]/[name]/[eventId]/page.tsx b/src/app/events/[clusterId]/[name]/[eventId]/page.tsx index 279b95f..7cf7791 100644 --- 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

- {params.name.replace('%20', ' ')} + {params.name.replaceAll('%20', ' ')}

diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index c313272..6ba7623 100644 --- a/src/app/gallery/page.tsx +++ b/src/app/gallery/page.tsx @@ -48,11 +48,12 @@ const History = () => { const [isScrolled, setIsScrolled] = useState(false); const [touchStart, setTouchStart] = useState(null); const [touchEnd, setTouchEnd] = useState(null); + const navBarRef = useRef(null); const shadowRef = useRef(null); const carouselRef = useRef(null); const router = useRouter(); const simulateScroll = (event: WheelEvent) => { - 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 = () => { >
- +
(false); const router = useRouter(); const simulateScroll = (event: WheelEvent) => { - 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(null); const [touchEnd, setTouchEnd] = useState(null); + const navBarRef = useRef(null); const handleTouchStart = (event: TouchEvent) => { 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) => { + 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} > - +
IW%`Fb4}IvgLYK|53^D)g_baUU7GPDp?^GDaR9 z(^*loLp=TN?b}{fU^_R(R!^5PD$7?-jw>bSXJ1Ye5c8XsuS7lHVp>HS9RBq4&RAxIw~>~wAU$;Eyv zDxXS4L?|iz=;sUu2Wu=Tejyw0lZ~T5Ii5W?P$wsKEGlRj6-f~e?TLb^Oh(>pW$B!k z3Izp`K|BR3Sz7=A048)&PE!E(E2kn2K>`N^Y!VP0+S#LY7hcY0jlgwQG_###Pi|b1 z?ts?gu(o)v000UKNkl==}RhJ;`SqFf&cg1Zth z&?6Ee3YH*|QqrN5sr}FQTQjqHsM+c0$7}ClX8rb>HLpFpq2ZL&4gXkb^)D1tleAhb z`&P4Gmco=5j^I6965lsfDY#s>btFlTVavA~Q-QF=`1) zg-X>*x_*PJy{hhOKUVkMO1556@;aI6RH?dJlp1x_gRYLf$Cs=>TAP&>FSHuf)u}zw zlf5Sw)gITA#~mu2?1Wm=)RXi>Q&9h}Xb`V@P4$zJDZd|x))twdRW|k}lMH}7`TXDo zL=XT7@tCSf5SqH~$^bIo_wR+$dB&LH1huH7W>t66&+O-!{RjV6#K`9tW(cwO_`2+a zR@r>(HxT;4hy4eSE+B#o=4WPR7@?69)M{lT2vhy#a(SL|Z9Lkj>J!%&t`BEO{Kc}N z01V6zlNV1O-)`j1RgFM*-t-BB-8?+6*Wcpv7c-l+)d;1&H?(W-98;^z& zjMIej#_NqQyOFiEhbJ{npXq7(oGX@bEwcM%ql`vH1Rbv>ty0l?)89W24|dnqh``?u zPqTikwW^-&e(K9JfdVfB)EJLwsH0f#pScx*OuIbbmui~}ecAi@Kgz(>{!VLM>hijIvj zM8M?&!R?Xl+wH+%aAYJ%FOnT@M6CE11bDD&F&K>lkU_utBf{|T+f|DZfU&3`zy&w6 z59=eOMN%A}5k|42ro2|G6Zt{`y`B?{=Mn;fFkm$5$pyC)05dla)6c7l#~H;=l{LW- z4m~-s1t%EcL2Vpr2>JmAKy^Ccg4^k_dhN`7T$uk;7Q-wqQe}BPPB##GUQJu)6D-JM zgbWr}$nA7acv<}{#$j^&q&S2ev3i_fI0T}e!1_Zi!C+(nJpnvka}dML;UUbwUx(ha zZ~CQ!_v6nAdpJE}w@!c&LSsT}B0_$lj!^aC)#reo+1Fb*z`mZ5pwjzNI+aSLV+S$u zE2YzEBp+m?v~+YhVmFf;F6t0^g9U^)XA;UFSS)(h-$G7=z-)ea6i$T0iEJ#LNQ4tU z`t^mw#k7RvL?Ts6(ZAuN>7dy=;dI(uyw3$r)>4fRe|=_`VR0Y^)JUg~65(_z9F|gv zVk+mO-$WrTWl}ym&1LXOXA_xe;Y5fKmcUO4gm6$D!G&P_D3LA2ie#CtKP(jzMX6MZ z6@1x@RFGmhU;02wl^6jC+dn0s9ibUfKZs|lgbWDjf-jtsG9VPwnM^5`^%Y{JgYiX1 znDDq=4vXby1RA~^E}PSXv5panX;d}{;X>9&1YfwA%b>D~*_=eAY%X;W2f<5Dgg|hB zkpEGCs1QQb)y(!05D?h}ne-)mzMKR?FMtG zDdh|2vaGdc3t^u$jY>kCL#_(p>{{w00`Ctl7v=>FdJm6^xdRLh>rycnlZr(t9Y%*M zrlevRuk=B>2xUtMgOvf;1ZfGp`r*h&eVR?84iG$6t37ylR62}f_&LbL)-gm-03eJW z2t@2)eEkSIIAr~edB6tEI>O0X($iHK_^?4v1V`dDZqv{=PQ#rT`e^KX&j#1{bhSe} zFm7%U;?=^!IRv^2auw4L5MJ|0oXtFZ^d`IXqOluO1fPaDz$RP(*tX6Muagn=03_eTz$?QLmKL@~WmH}|zxD_QQ&Wb~a=nt?TjYbCqg2K(JiXioK zD1_OXrco~dh_Z#IhUnPxGD^QX-IiLbgeWHJXq4QrghG5CWviH=ybxgP0ID1a>wpQ& z(g*?BAAo%*%6t$j0qrS5l=85(0CR)ZGl0-?hGEzWgBiE8KH#A?BcM?R`5 z#&FQ0gCI^O4;LMx@*xYij|hxT?(gsHOrAy1)e$!5=H@mxkx}-8<~$5lw8SJ5iPlFh z2V^nG=Hb9TO3tAmTI&p3w>FAfc3K(VlnK$%9m+Sixx*MDAbLKxR>cMvn)YS$s2~QI zgZnb!wjhXmp#1!Bo<(|RQy_LIY|CS8rO5kXjf`yBL(OND2{j~N83;2ogSdad{j`X* zQi1!p{_^m`r!7XPAa*`{n4Dxy3qfJxG37#{Y=3lgpA#q$V_TnQ{DXr}UbnW?6NdYf zUw5{)mM1q~)CpHbO@wKAnVJiU(4!Um1Yn3wL~!iGO43jFaUh8MIDRiW*q=15?4Y&2 z_`6;&HeYPYsw0yo_vy7iSChW^&SaX&6QQZHCjdfnYHG?fWcvCJTKW2QWre=Ja^Ym< z9T$=*^$il=)oSJ43KtcI9Y5VqcQ(m;0vaOtr~JvGk58WtJw2(R`jerdQ;GFD{y0Rt zBzquewDQgg+t=_XO+z0)9?#Cse&nKq*<=1or%oKew0ZuJMLaB_9NNm06LF~Jk5)tu`Pqqi^UMPpu~#yte=V002ovPDHLk FV1mzSn = ({ 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 index 572d8e3..998de58 100644 --- a/src/components/AuthLayout/signup.tsx +++ b/src/components/AuthLayout/signup.tsx @@ -71,7 +71,6 @@ export const SignUp: React.FC = ({ 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 index 71206cd..bea4afd 100644 --- a/src/components/Carousel/slideData.tsx +++ b/src/components/Carousel/slideData.tsx @@ -93,7 +93,7 @@ const SlideData: React.FC = ({ details }) => {
{details.name} @@ -103,7 +103,7 @@ const SlideData: React.FC = ({ 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" />
{ 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 index 0010e17..5e9060d 100644 --- 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 ( -
+ Twitter - Medium - Instagram - YouTube - Facebook + + ); +}; + +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 ( +
+ {socialLinks.map((image, index) => ( + + ))}
); }; diff --git a/src/components/Landing/LoadingMobileView.tsx b/src/components/Landing/LoadingMobileView.tsx index 37cf0d9..708b7ea 100644 --- 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 index 16f840e..85b2e68 100644 --- 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?'}
-
+
{ @@ -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 index 39a4627..799b436 100644 --- 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; +} + +const NavBar = ({ NavRef }: NavBarProps) => { const LoginButton = () => { return ( @@ -66,7 +70,7 @@ const NavBar = () => { }, []); return ( -
+