From a3e50ccfaab384f98feab92fc286574de6ed732f Mon Sep 17 00:00:00 2001 From: Bhoopesh <82646284+bhoopesh369@users.noreply.github.com> Date: Tue, 12 Dec 2023 14:07:07 +0530 Subject: [PATCH] fix: about and swiper (#19) * fix: many fixes * wip: swiper and aboutsPage * fix: aboutCard * fix: aboutCard Image * fix: navref --- src/app/about/page.tsx | 8 +- .../[clusterId]/[name]/[eventId]/page.tsx | 1 + src/app/globals.css | 65 +++++-- src/app/home/page.tsx | 4 +- src/app/layout.tsx | 5 +- src/assets/fonts/Nunito-Regular.ttf | Bin 0 -> 132204 bytes src/assets/fonts/Nunito-VariableFont_wght.ttf | Bin 277844 -> 0 bytes src/assets/images/aboutCard.png | Bin 12897 -> 36364 bytes src/components/AboutCard/AboutCard.module.css | 8 + src/components/AboutCard/AboutCard.tsx | 7 +- src/components/AboutCard/AboutCardMob.tsx | 10 +- src/components/Carousel/carousel.tsx | 14 +- src/components/Carousel/slideData.tsx | 2 +- .../ClusterCarousel/ClusterCarousel.tsx | 28 ++- src/components/NavBar/navbar.module.css | 4 + src/components/Toast/Toast.tsx | 3 +- src/contexts/UserContext.tsx | 160 +++++++++--------- 17 files changed, 191 insertions(+), 128 deletions(-) create mode 100644 src/assets/fonts/Nunito-Regular.ttf delete mode 100644 src/assets/fonts/Nunito-VariableFont_wght.ttf diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index f5b07c8..5428bcf 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -87,9 +87,7 @@ const About = () => { onTouchMove={scrollAllowed ? handleTouchMove : undefined} onTouchEnd={scrollAllowed ? handleTouchEnd : undefined} > - {/*
*/} - {/*
*/} { animate={{ y: '-40%' }} transition={{ duration: 1.5 }} > - bigmascot + bigmascot
diff --git a/src/app/events/[clusterId]/[name]/[eventId]/page.tsx b/src/app/events/[clusterId]/[name]/[eventId]/page.tsx index 7cf7791..5a1e8cc 100644 --- a/src/app/events/[clusterId]/[name]/[eventId]/page.tsx +++ b/src/app/events/[clusterId]/[name]/[eventId]/page.tsx @@ -7,6 +7,7 @@ import Carousel from '@/components/Carousel/carousel'; import styles from '../../../carousel.module.css'; const events = ({ params }: { params: { clusterId: number; name: string; eventId: number } }) => { + console.log(params.clusterId, params.name, params.eventId); return (
diff --git a/src/app/globals.css b/src/app/globals.css index 8b8ee8a..e8d6c04 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -18,8 +18,8 @@ } @font-face { - font-family: 'Nunito'; - src: url('../assets/fonts/Nunito-VariableFont_wght.ttf'); + font-family: 'Nunito' !important; + src: url('../assets/fonts/Nunito-Regular.ttf'); } @font-face { @@ -91,6 +91,16 @@ body { -o-animation: fadeout 1.5s; } +@keyframes fadeout { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + .blue-scroll { animation: blue-glow 0.5s; -moz-animation: blue-glow 1.5s; @@ -103,17 +113,9 @@ body { from { background-color: initial; } - to { - background-color: #000; - } -} -@keyframes fadeout { - from { - opacity: 1; - } to { - opacity: 0; + background-color: #000; } } @@ -125,10 +127,11 @@ body { } @keyframes fadein { - from { + 0% { opacity: 0; } - to { + + 50% { opacity: 1; } } @@ -158,6 +161,7 @@ body { background-position: center; background-repeat: no-repeat; } + .AboutCard { background: url('../assets/images/aboutCardMOB.png'); background-repeat: no-repeat; @@ -173,9 +177,11 @@ body { .rings { animation: rings 0.7s; } + .rings2 { animation: rings2 0.7s; } + .fullrings { animation: fullrings 0.7s; } @@ -184,6 +190,7 @@ body { 0% { opacity: 0.6; } + 100% { opacity: 1; } @@ -193,6 +200,7 @@ body { 0% { transform: translateY(-30vh); } + 90% { transform: translateY(20vh); } @@ -212,9 +220,11 @@ body { 0% { opacity: 0; } + 90% { opacity: 0; } + 100% { opacity: 1; } @@ -225,13 +235,16 @@ body { mask-image: radial-gradient(circle, #000 90%, transparent 90%); mask-position: 0% 0%; } + 80% { mask-position: 0% 800px; } + 81% { mask-image: none; opacity: 0.4; } + 100% { opacity: 1; } @@ -263,7 +276,7 @@ body { filter: hue-rotate(137deg) drop-shadow(0 0 20px #23a347) brightness(120%); } -@media screen and (min-width: 1240px) { +@media screen and (min-width: 1024px) { .about { min-height: max(100vh, 742px); } @@ -273,4 +286,26 @@ body { .about { min-height: max(100vh, 860px); } -} \ No newline at end of file +} + +.markdown>* { + all: revert; +} + +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgb(170, 168, 168); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + background: rgba(126, 251, 254, 1); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(126, 251, 254, 1); +} diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 633c1f9..fd19a41 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -112,8 +112,8 @@ export default function Home() { draggable={false} className="wingman lg:w-48 w-32 absolute inset-0 m-auto bottom-1/3" /> -

- A TIMELESS ODYSSEY +

+ THE SAGA OF TIME

diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d27efed..eccb4cb 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,9 @@ import Footer from '@/components/Footer/Footer'; import './globals.css'; import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; import { content } from '@/components/AboutCard/AboutContent.json'; import Toast from '@/components/Toast/Toast'; -const inter = Inter({ subsets: ['latin'] }); - export const metadata: Metadata = { title: "Pragyan '24 | Let's Celebrate Technology", description: content, @@ -15,7 +12,7 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - +
{children}
diff --git a/src/components/ClusterCarousel/ClusterCarousel.tsx b/src/components/ClusterCarousel/ClusterCarousel.tsx index be926c8..897e1a7 100644 --- a/src/components/ClusterCarousel/ClusterCarousel.tsx +++ b/src/components/ClusterCarousel/ClusterCarousel.tsx @@ -3,7 +3,7 @@ 'use client'; import { Swiper, SwiperSlide } from 'swiper/react'; -import { Pagination, Navigation } from 'swiper/modules'; +import { Pagination, Navigation, Autoplay } from 'swiper/modules'; import 'swiper/css'; import 'swiper/css/navigation'; @@ -24,6 +24,7 @@ import { CMS_URL } from '@/config/config'; const ClusterCarousel = ({ id, name }: { id: number; name: string }) => { const [details, setDetails] = useState([]); const [index, setIndex] = useState(0); + const [swiper, setSwiper] = useState(null); const getDetails = async () => { let res = await getClusterDetails(id); setDetails(res); @@ -34,6 +35,12 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => { getDetails(); }, []); + useEffect(() => { + if (!details || !swiper) return; + swiper.activeIndex = 0; + console.log('resetting'); + }, [details, swiper]); + const breakpoints = { 100: { slidesPerView: 1, @@ -54,9 +61,9 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => { }; // eslint-disable-next-line @typescript-eslint/no-explicit-any - const [swiper, setSwiper] = useState(null); const handleSlideChange = (index: number) => { + if (details.length > 0 && index) setIndex(index % details.length); const currentSlide = swiper?.slides[index]; if (currentSlide) { currentSlide.style.transform = 'scale(1.0)'; @@ -80,15 +87,20 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => { }; const goToNextSlide = () => { - if (swiper) swiper.activeIndex = 1; - swiper?.slideNext(); - setIndex((index + 1) % details.length); + if (details.length > 0) { + console.log(swiper.activeIndex); + swiper?.slideNext(); + setIndex((index + 1) % details.length); + } }; const goToPreviousSlide = () => { - if (swiper) swiper.activeIndex = 1; - swiper?.slidePrev(); - setIndex((index - 1 + details.length) % details.length); + if (details.length > 0) { + console.log(swiper.activeIndex); + swiper?.slidePrev(); + console.log((index - 1 + details.length) % details.length); + setIndex((index - 1 + details.length) % details.length); + } }; return ( diff --git a/src/components/NavBar/navbar.module.css b/src/components/NavBar/navbar.module.css index 3aa1394..077b76e 100644 --- a/src/components/NavBar/navbar.module.css +++ b/src/components/NavBar/navbar.module.css @@ -92,6 +92,10 @@ margin-top: 12rem; } +.li:nth-child(3) { + margin-top: 0rem; +} + /* @keyframes imagewipe { 0% { diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx index 363f540..145da77 100644 --- a/src/components/Toast/Toast.tsx +++ b/src/components/Toast/Toast.tsx @@ -8,11 +8,10 @@ const Toast = () => { gutter={8} containerClassName="toasty" containerStyle={{ - fontFamily: 'DotMatrix_TR', + fontFamily: 'Orbitron', }} toastOptions={{ className: '', - style: { font: 'inherit', fontSize: '1rem', diff --git a/src/contexts/UserContext.tsx b/src/contexts/UserContext.tsx index 880d224..db5b5a1 100644 --- a/src/contexts/UserContext.tsx +++ b/src/contexts/UserContext.tsx @@ -1,90 +1,90 @@ -import React, { createContext, useCallback, useState, useEffect, ReactNode } from "react"; -import { API_URL } from "../config/config"; +import React, { createContext, useCallback, useState, useEffect, ReactNode } from 'react'; +import { API_URL } from '../config/config'; export const userContext = createContext({ - isLoggedIn: false, - loadingAuth: true, - userID: undefined, - userName: undefined, - qrCode: undefined, - setUserName: () => undefined, - setIsLoggedIn: () => false, - setuserID: () => undefined, - userData: null, + isLoggedIn: false, + loadingAuth: true, + userID: undefined, + userName: undefined, + qrCode: undefined, + setUserName: () => undefined, + setIsLoggedIn: () => false, + setuserID: () => undefined, + userData: null, }); -const UserContextProvider = ({ children }: {children : ReactNode}) => { - const [userID, setuserID] = useState(); - const [userName, setUserName] = useState(); - const [qrCode, setQr] = useState(""); - const [isLoggedIn, setIsLoggedIn] = useState(false); - const [loadingAuth, setLoadingAuth] = useState(true); - const [userData, setUserData] = useState(null); +const UserContextProvider = ({ children }: { children: ReactNode }) => { + const [userID, setuserID] = useState(); + const [userName, setUserName] = useState(); + const [qrCode, setQr] = useState(''); + const [isLoggedIn, setIsLoggedIn] = useState(false); + const [loadingAuth, setLoadingAuth] = useState(true); + const [userData, setUserData] = useState(null); - const isAuth = useCallback(() => { - setLoadingAuth(true); - fetch(`${API_URL}/user/details`, { - method: "GET", - credentials: "include", - headers: { - "Content-Type": "application/json", - }, - }) - .then((res) => res.json()) - .then((response) => { - if (response.status_code === 401) { - setIsLoggedIn(false); - } else { - setIsLoggedIn(true); - } - setLoadingAuth(false); - setUserData(response.message); - }) - .catch((e) => { - console.log(e); - setLoadingAuth(false); - }); - }, [userID]); + const isAuth = useCallback(() => { + setLoadingAuth(true); + fetch(`${API_URL}/user/details`, { + method: 'GET', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(res => res.json()) + .then(response => { + if (response.status_code === 401) { + setIsLoggedIn(false); + } else { + setIsLoggedIn(true); + } + setLoadingAuth(false); + setUserData(response.message); + }) + .catch(e => { + console.log(e); + setLoadingAuth(false); + }); + }, [userID]); - const getQr = useCallback(() => { - fetch(`${API_URL}/pr/qr`, { - method: "POST", - credentials: "include", - headers: { - "Content-Type": "application/json", - }, - }) - .then((res) => res.json()) - .then((data) => { - if (data.status_code === 200) { - setQr(data.message); - } else setQr(""); - }) - .catch((e) => console.log(e)); - }, [loadingAuth, isLoggedIn]); + const getQr = useCallback(() => { + fetch(`${API_URL}/pr/qr`, { + method: 'POST', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(res => res.json()) + .then(data => { + if (data.status_code === 200) { + setQr(data.message); + } else setQr(''); + }) + .catch(e => console.log(e)); + }, [loadingAuth, isLoggedIn]); - useEffect(() => { - isAuth(); - getQr(); - }, [isAuth]); + useEffect(() => { + isAuth(); + getQr(); + }, [isAuth]); - return ( - - {children} - - ); + return ( + + {children} + + ); }; -export default UserContextProvider; \ No newline at end of file +export default UserContextProvider;