From 8e4287f29a102cde4b0a657b387ed9f001de0b3b Mon Sep 17 00:00:00 2001 From: Chaitanya Jain <175200580+chaitanya-rahul-jain@users.noreply.github.com> Date: Thu, 17 Oct 2024 18:53:47 +0530 Subject: [PATCH 1/6] feat: add template for media partners --- app/media-partners/loading.tsx | 5 + app/media-partners/media-partners.module.scss | 236 +++++++++++++++ app/media-partners/page.tsx | 272 ++++++++++++++++++ 3 files changed, 513 insertions(+) create mode 100644 app/media-partners/loading.tsx create mode 100644 app/media-partners/media-partners.module.scss create mode 100644 app/media-partners/page.tsx diff --git a/app/media-partners/loading.tsx b/app/media-partners/loading.tsx new file mode 100644 index 00000000..2698b9e0 --- /dev/null +++ b/app/media-partners/loading.tsx @@ -0,0 +1,5 @@ +import Preloader from "@/components/Preloader/Preloader"; + +export default function PreloaderPage() { + return ; +} diff --git a/app/media-partners/media-partners.module.scss b/app/media-partners/media-partners.module.scss new file mode 100644 index 00000000..3df76d49 --- /dev/null +++ b/app/media-partners/media-partners.module.scss @@ -0,0 +1,236 @@ +.wrapper { + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + + .mainContainer { + height: 100vh; + width: 100%; + .scrollbar { + @media screen and (width <= 1150px) { + display: none; + } + margin: 5% 0; + height: 80vh; + width: 10vh; + position: absolute; + right: 0px; + top: 0vh; + transform: translateX(-2rem); + display: flex; + justify-content: center; + + .scrollbarTrack { + width: 8px; + height: 100%; + border-radius: 8px; + background-image: linear-gradient( + 90deg, + #f9e6a2 -10.51%, + #d29e5d 48.78%, + #f9e6a2 111.99% + ); + } + + .scrollbarThumb { + touch-action: none; + position: absolute; + transform: translateY(-50%); + cursor: pointer; + } + } + + .backButton { + position: absolute; + top: 5px; + left: 10px; + z-index: 100; + } + + .title { + text-decoration: none; + position: absolute; + top: 12px; + left: 50%; + transform: translateX(-50%); + height: 70px; + font-family: Rye; + font-size: 52px; + font-weight: 400; + line-height: 43px; + letter-spacing: 0.05em; + text-align: left; + background: linear-gradient( + 0deg, + #fdfbb7 -76.04%, + #efd48d -13.59%, + #d19b5b 71.28%, + #f9e6a2 145.83% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + display: flex; + justify-content: center; + align-items: center; + } + .sponsorsContainer { + z-index: 4; + position: absolute; + top: 90px; + left: 50%; + transform: translateX(-50%); + // background-color: #fff; + width: 80vw; + height: calc(100vh - 100px); + position: relative; + overflow: scroll; + display: grid; + gap: 60px; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + .sponsorItemContainer { + text-decoration: none; + .sponsorItem { + margin-bottom: 50px; + height: 300px; + // background-color: rebeccapurple; + display: flex; + gap: 5px; + flex-direction: column; + justify-content: center; + align-items: center; + text-decoration: none; + cursor: default; + + .sponsorImg { + display: block; + max-height: 200px; + max-width: 100%; + padding-bottom: 5px; + } + .sponsorName { + text-decoration: none; + color: #ffe3ad; + text-shadow: 0px 0px 8px rgba(229, 195, 132, 0.48); + font-family: "Source Serif 4"; + font-size: 40px; + font-style: normal; + font-weight: 600; + letter-spacing: 0.05em; + text-align: center; + } + .sponsorDescription { + font-weight: 500; + letter-spacing: 0.05em; + text-align: center; + color: white; + text-decoration: none; + font-size: 17px; + } + } + &:nth-child(1) { + grid-column-start: 1; + grid-column-end: 7; + } + &:nth-child(2) { + grid-column-start: 1; + grid-column-end: 4; + + @media (width <= 800px) { + grid-column: span 6; + } + } + &:nth-child(3) { + grid-column-start: 4; + grid-column-end: 7; + + @media (width <= 800px) { + grid-column: span 6; + } + } + grid-column: span 2; + + @media (width <= 1300px) { + grid-column: span 3; + } + + @media (width <= 800px) { + grid-column: span 6; + } + } + } + } + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("/backgroundNoiceImg.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + opacity: 0.2; + z-index: -1; + } + + // .backButton { + // position: absolute; + // top: 40px; + // left: 20px; + + // @media screen and (width <= 500px) { + // left: 0; + // top: 0; + // } + // } + } + + @media (max-width: 600px) { + .wrapper { + .mainContainer { + .backButton { + position: absolute; + top: -2px; + left: -14px; + z-index: 100; + } + + .title { + font-size: 40px; + } + .sponsorsContainer { + .sponsorItemContainer { + .sponsorItem { + margin-bottom: 10px; + height: fit-content; + + .sponsorImg { + display: block; + max-height: 150px; + max-width: 100%; + padding-bottom: 5px; + } + .sponsorName { + font-size: 30px; + } + .sponsorDescription { + font-size: 15px; + } + } + } + } + } + } + } + \ No newline at end of file diff --git a/app/media-partners/page.tsx b/app/media-partners/page.tsx new file mode 100644 index 00000000..f12d2374 --- /dev/null +++ b/app/media-partners/page.tsx @@ -0,0 +1,272 @@ +"use client"; + +import styles from "./media-partners.module.scss"; + +import React, { useRef } from "react"; +import Link from "next/link"; +import BackButton from "@/components/Registration/BackButton/BackButton"; +import Trees from "@/components/ComingSoon/Trees"; +import Image from "next/image"; +import axios from "axios"; +import PrePreloader from "@/components/PreloaderProMax/PreloaderProMax"; +import CursorEffect from "@/components/CursorEffect/CursorEffect"; + +export default function Sponsors() { + const [sponsors, setSponsors] = React.useState([]); + React.useEffect(() => { + axios + .get("https://www.bits-oasis.org/2024/main/wallet/sponsors/") + .then((response) => { + const sortedSponsors = response.data.sort( + (a: any, b: any) => a.order - b.order + ); + setSponsors(sortedSponsors); + // setSponsors(response.data); + }); + }, []); + + const containerRef = useRef(null); + + const scrollbarThumbRef = useRef(null); + const handleMouseDown = (e: MouseEvent | TouchEvent | any) => { + e.preventDefault(); + + const initialClientY = + (e as MouseEvent).clientY || (e as TouchEvent).touches[0].clientY; + + const scrollbarThumbElem = scrollbarThumbRef.current; + const scrollBarContainer = document.querySelector( + `.${styles.scrollbarTrack}` + ) as HTMLElement; + + if (scrollbarThumbElem && scrollBarContainer) { + const thumbOffsetTop = + initialClientY - scrollbarThumbElem.getBoundingClientRect().top; + + const handleDragMove = (moveEvent: MouseEvent | TouchEvent) => { + moveEvent.preventDefault(); + + const clientY = + (moveEvent as MouseEvent).clientY || + (moveEvent as TouchEvent).touches[0].clientY; + const scrollBarContainerRect = + scrollBarContainer.getBoundingClientRect(); + + // Calculate new top position of the scrollbar thumb relative to the scrollbar track + let newTop = clientY - scrollBarContainerRect.top - thumbOffsetTop; + + // Constrain newTop within the scrollbar track bounds + newTop = Math.max( + 0, + Math.min( + newTop, + scrollBarContainer.clientHeight - scrollbarThumbElem.offsetHeight + ) + ); + + // Calculate the percentage of scroll based on new position + const percentage = + newTop / + (scrollBarContainer.clientHeight - scrollbarThumbElem.offsetHeight); + + // Update the scrollTop of the form container based on the percentage + if (containerRef.current) { + const maxScrollTopValue = + containerRef.current.scrollHeight - + containerRef.current.clientHeight; + containerRef.current.scrollTop = percentage * maxScrollTopValue; + } + }; + + document.addEventListener("mousemove", handleDragMove); + document.addEventListener("touchmove", handleDragMove); + + const handleDragEnd = () => { + document.removeEventListener("mousemove", handleDragMove); + document.removeEventListener("mouseup", handleDragEnd); + document.removeEventListener("touchmove", handleDragMove); + document.removeEventListener("touchend", handleDragEnd); + }; + + document.addEventListener("mouseup", handleDragEnd); + document.addEventListener("touchend", handleDragEnd); + } + }; + const handleTrackSnap = (e: MouseEvent | TouchEvent | any) => { + const formContainerElem = containerRef.current; + const scrollBarContainer = document.querySelector( + `.${styles.scrollbar}` + ) as HTMLElement; + // console.log(formContainerElem, scrollBarContainer); + if (!formContainerElem || !scrollBarContainer) return; + + // Determine clientY for mouse or touch event + const clientY = + (e as MouseEvent).clientY || (e as TouchEvent).touches[0].clientY; + + // Calculate position within the scrollbar track + const scrollBarContainerRect = scrollBarContainer.getBoundingClientRect(); + + let relativeClickPosition = clientY - scrollBarContainerRect.top; + + // Constrain the position within the scrollbar track's height + relativeClickPosition = Math.max( + 0, + Math.min(relativeClickPosition, scrollBarContainer.clientHeight) + ); + + // Calculate scroll percentage based on relative click position + const percentage = relativeClickPosition / scrollBarContainer.clientHeight; + + // Calculate max scroll top value + const maxScrollTopValue = + formContainerElem.scrollHeight - formContainerElem.clientHeight; + + // Scroll the form container based on the calculated percentage + formContainerElem.scrollTo({ + top: percentage * maxScrollTopValue, + behavior: "smooth", + }); + }; + const handleScroll = () => { + // console.log("scrolling"); + if (containerRef.current && scrollbarThumbRef.current) { + const { scrollHeight, clientHeight, scrollTop } = containerRef.current; + + if (scrollHeight > clientHeight) { + const maxScrollTopValue = scrollHeight - clientHeight; + const percentage = (scrollTop / maxScrollTopValue) * 100; + scrollbarThumbRef.current.style.top = `${Math.min(percentage, 100)}%`; + + // gsap.to(scrollbarThumbRef.current, { + // top: `${Math.min(percentage, 100)}%`, + // // delay: 0.2, + // ease: "none", + // }); + + // if (!wheelRotating) { + // gsap.to(wheelRef.current, { + // rotate: 360 + 360 * (percentage / 200), + // duration: 2, + // ease: "power1.out", + // }); + // } + } + } + }; + return ( + <> + + +
+
+ {/* + + */} +
+ + + +
Sponsors
+
handleScroll()} + ref={containerRef} + > + {sponsors.map((sponsor, index) => ( + +
+ +
{sponsor.name}
+
+ {sponsor.description} +
+
+ + + //
+ ))} +
+
+
+ scrollBarThumb + {/* + + + + + */} +
+
+ + + + + + + + + + + {/* */} +
+ + ); +} From 77a66bde11cac910b96d1b9cb0bf603709aac37e Mon Sep 17 00:00:00 2001 From: Animeshdj Date: Thu, 17 Oct 2024 20:15:51 +0530 Subject: [PATCH 2/6] style: add responsiveness (events) --- app/events/[categoryname]/categories.module.scss | 13 ++++++++++++- app/events/[categoryname]/page.tsx | 2 +- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/app/events/[categoryname]/categories.module.scss b/app/events/[categoryname]/categories.module.scss index 945241aa..c31824ba 100644 --- a/app/events/[categoryname]/categories.module.scss +++ b/app/events/[categoryname]/categories.module.scss @@ -44,6 +44,12 @@ scale: 0.5; } + @media screen and (max-width: 600px) { + top: 1rem; + left: 1rem; + scale: 0.3; + } + svg { mix-blend-mode: difference; } @@ -150,7 +156,6 @@ margin-top: 73px; font-size: 55px; line-height: 70px; - text-align: center; } @@ -159,6 +164,10 @@ line-height: 50px; margin-top: 50px; } + + @media screen and (max-height: 700px) and (max-width: 600px) { + margin-top: 2rem; + } } .eventSubTitle { margin: 20px 0; @@ -383,6 +392,8 @@ } .longDescription { + font-size: 1.75rem; + line-height: 40px; @media screen and (max-height: 900px) { font-size: 1.25rem; line-height: 1.5rem; diff --git a/app/events/[categoryname]/page.tsx b/app/events/[categoryname]/page.tsx index d817973b..cbfe6c4a 100644 --- a/app/events/[categoryname]/page.tsx +++ b/app/events/[categoryname]/page.tsx @@ -217,7 +217,7 @@ export default function Page({ params }: { params: { categoryname: string } }) {
500 + eventsList[eventID]?.about.length > 350 ? `${styles.longDescription}` : "" }`} From 46d37c3978df739848773b98282a7af58106963d Mon Sep 17 00:00:00 2001 From: Atharv Agarwal Date: Thu, 17 Oct 2024 20:18:49 +0530 Subject: [PATCH 3/6] fix: play button when other songs are played --- components/MobileLanding/Artist/Artist.tsx | 6 +++++ .../Artist/MusicButtons/MusicButton.tsx | 25 +++++++++++++------ .../MobileLanding/MobileLanding.tsx | 7 ++++++ 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/components/MobileLanding/Artist/Artist.tsx b/components/MobileLanding/Artist/Artist.tsx index 3d9467a3..c096b080 100644 --- a/components/MobileLanding/Artist/Artist.tsx +++ b/components/MobileLanding/Artist/Artist.tsx @@ -15,6 +15,8 @@ interface Props { music: string; artist: string; spotifyUrl: string; + playingArtist: string | null; + setPlayingArtist: any; } gsap.registerPlugin(ScrollTrigger); @@ -27,6 +29,8 @@ export default function Artist({ music, artist, spotifyUrl, + playingArtist, + setPlayingArtist, }: Props) { const artistRef: any = useRef(null); useGSAP( @@ -96,6 +100,8 @@ export default function Artist({ music={music} spotifyUrl={spotifyUrl} reverse={!reverse} + playingArtist={playingArtist} + setPlayingArtist={setPlayingArtist} />
diff --git a/components/MobileLanding/Artist/MusicButtons/MusicButton.tsx b/components/MobileLanding/Artist/MusicButtons/MusicButton.tsx index 267eb5fc..3f9747ac 100644 --- a/components/MobileLanding/Artist/MusicButtons/MusicButton.tsx +++ b/components/MobileLanding/Artist/MusicButtons/MusicButton.tsx @@ -11,6 +11,8 @@ interface Props { artist: string; spotifyUrl: string; reverse: boolean; + playingArtist: string | null; + setPlayingArtist: any; } export default function MusicSection({ @@ -18,31 +20,38 @@ export default function MusicSection({ artist, spotifyUrl, reverse, + playingArtist, + setPlayingArtist, }: Props) { const [isMusicPlaying, setIsMusicPlaying] = useState(false); function playClickHandler() { - const allAudios = document.querySelectorAll(".music"); const thisAudio: HTMLMediaElement = document.querySelector(`#${artist}`)!; - allAudios.forEach((elem: any) => { - if (!elem.paused) { - elem.pause(); - } - }); - if (!isMusicPlaying) { + if (playingArtist !== artist) { thisAudio .play() .then(() => { + setPlayingArtist(artist); setIsMusicPlaying(true); }) .catch((err) => { console.log(err); }); - } else { + } else if (playingArtist === artist) { + thisAudio.pause(); + setPlayingArtist(null); setIsMusicPlaying(false); } } + useEffect(() => { + const thisAudio: HTMLMediaElement = document.querySelector(`#${artist}`)!; + if (playingArtist !== artist && !thisAudio.paused) { + thisAudio.pause(); + setIsMusicPlaying(false); + } + }, [playingArtist]); + return ( <>