From 8a943993e6f4ed19af33747f7f8344ca051ec190 Mon Sep 17 00:00:00 2001 From: Ramnath K Date: Sun, 15 May 2022 19:49:32 +0530 Subject: [PATCH 1/3] Events page updated --- package.json | 1 + src/Components/Events/EventData.js | 31 ++++++++++ src/Components/Events/EventSlider.js | 56 ++++++++++++++++++ src/Components/Events/Events.css | 62 +++++++++++++++++++- src/Components/Events/Events.js | 86 +++++++++++++++++----------- src/Components/Events/PastEvents.js | 72 +++++++++++++++++++++++ 6 files changed, 271 insertions(+), 37 deletions(-) create mode 100644 src/Components/Events/EventData.js create mode 100644 src/Components/Events/EventSlider.js create mode 100644 src/Components/Events/PastEvents.js diff --git a/package.json b/package.json index 4f7e092..572e74f 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react-dom": "^17.0.2", "react-event-timeline": "^1.6.2", "react-google-sheets": "^0.4.0", + "react-icons": "^4.3.1", "react-motion": "^0.5.2", "react-particles-js": "^2.7.1", "react-router": "^4.3.1", diff --git a/src/Components/Events/EventData.js b/src/Components/Events/EventData.js new file mode 100644 index 0000000..334f132 --- /dev/null +++ b/src/Components/Events/EventData.js @@ -0,0 +1,31 @@ +export const OnGoingEventsData = [ + { + image: 'https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + //image: 'https://i.imgur.com/Wdv7tQ5.png', + title: 'TECH CLUB TALKS 1', + details: 'Internships, projects, resumes....too overwhelming? Allow us to break it down for you! Look out for this online workshop series where various speakers talk about their journey and also tips from your seniors on how to go about these. The first talk is on 12th November, mark your calendars!' + }, + { + image: 'https://media.istockphoto.com/photos/red-generic-sedan-car-isolated-on-white-background-3d-illustration-picture-id1189903200?k=20&m=1189903200&s=612x612&w=0&h=L2bus_XVwK5_yXI08X6RaprdFKF1U9YjpN_pVYPgS0o=', + //image: 'https://i.imgur.com/Wdv7tQ5.png', + title: 'TECH CLUB TALKS 2', + details: 'Internships, projects, resumes....too overwhelming? Allow us to break it down for you! Look out for this online workshop series where various speakers talk about their journey and also tips from your seniors on how to go about these. The first talk is on 12th November, mark your calendars!' + }, + { + image: 'https://i.imgur.com/Wdv7tQ5.png', + title: 'TECH CLUB TALKS 3', + details: 'Internships, projects, resumes....too overwhelming? Allow us to break it down for you! Look out for this online workshop series where various speakers talk about their journey and also tips from your seniors on how to go about these. The first talk is on 12th November, mark your calendars!' + }, + { + image: 'https://images.pexels.com/photos/116675/pexels-photo-116675.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + //image: 'https://i.imgur.com/Wdv7tQ5.png', + title: 'TECH CLUB TALKS 4', + details: 'Internships, projects, resumes....too overwhelming? Allow us to break it down for you! Look out for this online workshop series where various speakers talk about their journey and also tips from your seniors on how to go about these. The first talk is on 12th November, mark your calendars!' + }, + { + image: 'https://i.imgur.com/Wdv7tQ5.png', + //image: 'https://i.imgur.com/Wdv7tQ5.png', + title: 'TECH CLUB TALKS 5', + details: 'Internships, projects, resumes....too overwhelming? Allow us to break it down for you! Look out for this online workshop series where various speakers talk about their journey and also tips from your seniors on how to go about these. The first talk is on 12th November, mark your calendars!' + }, +] \ No newline at end of file diff --git a/src/Components/Events/EventSlider.js b/src/Components/Events/EventSlider.js new file mode 100644 index 0000000..b1f3e9c --- /dev/null +++ b/src/Components/Events/EventSlider.js @@ -0,0 +1,56 @@ +import React, {useState} from "react"; +import { OnGoingEventsData } from "./EventData"; +import {IoIosArrowBack, IoIosArrowForward} from 'react-icons/io'; +import './Events.css' +const EventSlider = ({slides}) => { + const [current, setCurrent] = useState(0) + const length = slides.length + + const nextSlide = () => { + setCurrent(current === length-1 ? 0 : current+1) + } + + const prevSlide = () => { + setCurrent(current === 0 ? length-1 : current-1) + } + + if(!Array.isArray(slides) || slides.length <= 0){ + return null; + } + + return( +
+ + + {OnGoingEventsData.map((slide, index) => { + return ( +
+ {index === current && ( +
+
+
+ content image +
+
+
+
{slide.title}
+
{slide.details}
+ +
+
+ )} + +
+ ) + })} +
+ ); +} + +export default EventSlider \ No newline at end of file diff --git a/src/Components/Events/Events.css b/src/Components/Events/Events.css index 056f9d9..7e111ed 100644 --- a/src/Components/Events/Events.css +++ b/src/Components/Events/Events.css @@ -124,22 +124,63 @@ body { align-items: center; animation: content-intro 2s ease-in-out; } -.slide-left { +/* .slide-left { height: 10vh; display: none; } .slide-right { height: 10vh; display: none; +} */ + +/* for testing */ +.image{ + height: 26vw; + width: 26vw; + border-radius: 10px; +} + +.right-arrow{ + position: absolute; + right: 32px; + top: 40%; + font-size: 3rem; + color: #fff; + z-index: 10; + cursor: pointer; + user-select: none; +} + +.left-arrow{ + position: absolute; + left: 32px; + top: 40%; + font-size: 3rem; + color: #fff; + z-index: 10; + cursor: pointer; + user-select: none; } .event { padding: 0 12vw; display: flex; - /* align-items: center; */ + align-items: center; justify-content: flex-start; } +.slide{ + opacity: ; + transition-duration: 1s ease; +} + +.slide.active{ + opacity: 1; + transition-duration: 1s; + transform: scale(1.08); + /* transform: translateY(-10px) */ +} + .right-content { padding: 0 0 0 20px; color: white; @@ -161,6 +202,10 @@ body { width: 26vw; border: 1px solid wheat; } +/* controlling previous events window size for larger window */ +.small-window{ + display: none; +} @media only screen and (max-width: 576px) { body { @@ -171,9 +216,12 @@ body { font-size: var(--bigtitle-small); } + .carousel.small-window { + justify-content: center; + } + .event { flex-direction: column; - align-items: center; } .event-title { @@ -209,6 +257,14 @@ body { .dm2 { position: absolute; } + + .large-window{ + display: none; + } + + .small-window{ + display: flex; + } } @media only screen and (max-width: 1000px) { diff --git a/src/Components/Events/Events.js b/src/Components/Events/Events.js index 759fa80..3c5fe23 100644 --- a/src/Components/Events/Events.js +++ b/src/Components/Events/Events.js @@ -2,6 +2,9 @@ import React from "react"; // import { useState, useEffect, useRef } from "react"; import "./Events.css"; import Dm from '../../Images/dcm2.png'; +import { OnGoingEventsData } from "./EventData"; +import EventSlider from "./EventSlider"; +import PastEventsSlider from "./PastEvents"; // function useOnScreen(ref, rootMargin = "0px") { // const [isIntersecting, setIntersecting] = useState(false); @@ -22,48 +25,63 @@ import Dm from '../../Images/dcm2.png'; // } const Events = () => { return ( -
-
- {/*Upcoming */}Events +
+
+
+ Ongoing Events +
+
- -
-
- {/**/} +
+
+ Upcoming Events
-
-
-
- {/* */} - Interships 101 -
+ {/*
+
+
-
-
Tech Club Talks
-
- Internships, projects, resumes....too overwhelming? Allow us to - break it down for you! Look out for this online workshop series - where various speakers talk about their journey and also tips from - your seniors on how to go about these. The first talk is on 12th - November, mark your calendars! + +
+
+
+ + Interships 101 +
-
- {/**/} - {/*dm2*/} +
+
Tech Club Talks
+
+ Internships, projects, resumes....too overwhelming? Allow us to + break it down for you! Look out for this online workshop series + where various speakers talk about their journey and also tips from + your seniors on how to go about these. The first talk is on 12th + November, mark your calendars! +
+
+
+ +
+
*/} + +
+
+
+ Past Events & Workshops
-
- {/**/} -
+
diff --git a/src/Components/Events/PastEvents.js b/src/Components/Events/PastEvents.js new file mode 100644 index 0000000..83ac063 --- /dev/null +++ b/src/Components/Events/PastEvents.js @@ -0,0 +1,72 @@ +import React, {useState} from "react"; +import { OnGoingEventsData } from "./EventData"; +import {IoIosArrowBack, IoIosArrowForward} from 'react-icons/io'; +import './Events.css' +const PastEventsSlider = ({slides}) => { + const [current, setCurrent] = useState(0) + const length = slides.length + const nextSlide = () => { + setCurrent(current === length-1 ? 0 : current+1) + } + + const prevSlide = () => { + setCurrent(current === 0 ? length-1 : current-1) + } + + if(!Array.isArray(slides) || slides.length <= 0){ + return null; + } + + return( +
+
+ + + {OnGoingEventsData.map((slide, index) => { + return ( +
+ {index === current && ( +
+
+ content image + +
+
+ = OnGoingEventsData.length ? (index+1)-OnGoingEventsData.length : index+1].image} alt="content image"/> + +
+
+ = OnGoingEventsData.length ? (index+2)-OnGoingEventsData.length : index+2].image} alt="content image" style={{opacity: 0.2}}/> + +
+
+ )} + +
+ ) + })} + +
+
+ + + {OnGoingEventsData.map((slide, index) => { + return ( +
+ {index === current && ( +
+
+ content image +
+
+ )} +
+ ) + })} +
+
+ + ); +} + +export default PastEventsSlider \ No newline at end of file From 558fcbd22eee6fec77216503f9d3817ec5ea1309 Mon Sep 17 00:00:00 2001 From: Ramnath K Date: Wed, 18 May 2022 22:31:33 +0530 Subject: [PATCH 2/3] event page snap scroll and pastevents section view fix --- package.json | 1 + src/Components/Events/EventSlider.js | 20 +++----- src/Components/Events/Events.css | 74 +++++++++++++++++++--------- src/Components/Events/Events.js | 66 ++++++------------------- src/Components/Events/PastEvents.js | 49 +++++++++--------- src/Components/Home/Landing.css | 1 + src/Components/Navbar/Navbar.css | 6 --- 7 files changed, 101 insertions(+), 116 deletions(-) diff --git a/package.json b/package.json index 572e74f..72bc137 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react-scroll": "^1.7.10", "react-scroll-to-element": "^0.2.0", "react-sticky": "^6.0.3", + "react-swipeable": "^7.0.0", "tabletop": "^1.5.2" }, "scripts": { diff --git a/src/Components/Events/EventSlider.js b/src/Components/Events/EventSlider.js index b1f3e9c..5b54845 100644 --- a/src/Components/Events/EventSlider.js +++ b/src/Components/Events/EventSlider.js @@ -1,36 +1,34 @@ -import React, {useState} from "react"; +import React, {useEffect, useState} from "react"; import { OnGoingEventsData } from "./EventData"; import {IoIosArrowBack, IoIosArrowForward} from 'react-icons/io'; import './Events.css' + const EventSlider = ({slides}) => { - const [current, setCurrent] = useState(0) const length = slides.length - + const [x, setX] = useState(0); const nextSlide = () => { - setCurrent(current === length-1 ? 0 : current+1) + x === -100*(length-1) ? setX(0) : setX(x-100) } const prevSlide = () => { - setCurrent(current === 0 ? length-1 : current-1) + x === 0 ? setX(-100*(length-1)) : setX(x+100) } if(!Array.isArray(slides) || slides.length <= 0){ return null; } + return(
{OnGoingEventsData.map((slide, index) => { return ( -
- {index === current && ( +
-
- content image -
+ content image
{slide.title}
@@ -44,8 +42,6 @@ const EventSlider = ({slides}) => {
- )} -
) })} diff --git a/src/Components/Events/Events.css b/src/Components/Events/Events.css index 7e111ed..a3e5914 100644 --- a/src/Components/Events/Events.css +++ b/src/Components/Events/Events.css @@ -38,17 +38,35 @@ --padding-h-small: 8vw; } +.navbar.navbar-inverse.navbar-fixed-top{ + margin-right: 17.5px; +} + a { text-decoration: none; color: white; } -img { +.img{ height: 100%; width: 100%; object-fit: contain; } +.wrapper{ + width: 100%; + height: 100vh; + overflow-y: scroll; + overflow-x: hidden; + scroll-snap-type: y mandatory; +} + +section{ + width: 100%; + height: 100vh; + scroll-snap-align: start; +} + body { /* padding: var(--padding-v-big) var(--padding-h-big); */ font-family: "Raleway"; @@ -134,11 +152,6 @@ body { } */ /* for testing */ -.image{ - height: 26vw; - width: 26vw; - border-radius: 10px; -} .right-arrow{ position: absolute; @@ -162,6 +175,16 @@ body { user-select: none; } +.left-arrow:hover{ + transform: scale(1.5); + transition-duration: 0.5s; +} + +.right-arrow:hover{ + transform: scale(1.5); + transition-duration: 0.5s; +} + .event { padding: 0 12vw; display: flex; @@ -170,15 +193,8 @@ body { } .slide{ - opacity: ; - transition-duration: 1s ease; -} - -.slide.active{ - opacity: 1; - transition-duration: 1s; - transform: scale(1.08); - /* transform: translateY(-10px) */ + min-width: 100%; + transition: 1s; } .right-content { @@ -198,15 +214,33 @@ body { } .event-img { - height: 26vw; - width: 26vw; - border: 1px solid wheat; + width: 20vw; + height: 20vw; + border-radius: 10px; + object-fit: fill; } /* controlling previous events window size for larger window */ .small-window{ display: none; } +.threeWindow { + display: flex; + opacity: 0; +} + +.threeWindow.active{ + display: flex; + opacity: 1; +} + +.centerImage{ + margin-right: auto; + margin-left: auto; + transform: scale(1.2); +} + + @media only screen and (max-width: 576px) { body { /* padding: var(--padding-v-small) var(--padding-h-small); */ @@ -216,10 +250,6 @@ body { font-size: var(--bigtitle-small); } - .carousel.small-window { - justify-content: center; - } - .event { flex-direction: column; } diff --git a/src/Components/Events/Events.js b/src/Components/Events/Events.js index 3c5fe23..b75287f 100644 --- a/src/Components/Events/Events.js +++ b/src/Components/Events/Events.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useEffect, useState} from "react"; // import { useState, useEffect, useRef } from "react"; import "./Events.css"; import Dm from '../../Images/dcm2.png'; @@ -6,6 +6,8 @@ import { OnGoingEventsData } from "./EventData"; import EventSlider from "./EventSlider"; import PastEventsSlider from "./PastEvents"; + + // function useOnScreen(ref, rootMargin = "0px") { // const [isIntersecting, setIntersecting] = useState(false); // useEffect(() => { @@ -23,66 +25,30 @@ import PastEventsSlider from "./PastEvents"; // }, []); // return isIntersecting; // } + const Events = () => { + + return ( -
-
+
+
Ongoing Events
- -
-
+ + +
Upcoming Events
- - {/*
-
- -
- -
-
-
- - Interships 101 -
-
-
-
Tech Club Talks
-
- Internships, projects, resumes....too overwhelming? Allow us to - break it down for you! Look out for this online workshop series - where various speakers talk about their journey and also tips from - your seniors on how to go about these. The first talk is on 12th - November, mark your calendars! -
- -
-
-
- -
-
*/} - -
-
+ + +
Past Events & Workshops
- -
+ +
//
diff --git a/src/Components/Events/PastEvents.js b/src/Components/Events/PastEvents.js index 83ac063..02b0247 100644 --- a/src/Components/Events/PastEvents.js +++ b/src/Components/Events/PastEvents.js @@ -2,20 +2,26 @@ import React, {useState} from "react"; import { OnGoingEventsData } from "./EventData"; import {IoIosArrowBack, IoIosArrowForward} from 'react-icons/io'; import './Events.css' + const PastEventsSlider = ({slides}) => { - const [current, setCurrent] = useState(0) const length = slides.length + const [current, setCurrent] = useState(0) + const [x, setX] = useState(0); const nextSlide = () => { + x === -100*(length-1) ? setX(0) : setX(x-100) setCurrent(current === length-1 ? 0 : current+1) } const prevSlide = () => { + x === 0 ? setX(-100*(length-1)) : setX(x+100) setCurrent(current === 0 ? length-1 : current-1) } if(!Array.isArray(slides) || slides.length <= 0){ return null; } + + return(
@@ -24,24 +30,19 @@ const PastEventsSlider = ({slides}) => { {OnGoingEventsData.map((slide, index) => { return ( -
- {index === current && ( -
-
- content image - -
-
- = OnGoingEventsData.length ? (index+1)-OnGoingEventsData.length : index+1].image} alt="content image"/> - -
-
- = OnGoingEventsData.length ? (index+2)-OnGoingEventsData.length : index+2].image} alt="content image" style={{opacity: 0.2}}/> - -
+
+
+
+ content image +
+
+ = OnGoingEventsData.length ? (index+1)-OnGoingEventsData.length : index+1].image} alt="content image" className="event-img"/> +
- )} - +
+ = OnGoingEventsData.length ? (index+2)-OnGoingEventsData.length : index+2].image} alt="content image" style={{opacity: 0.2}} className="event-img"/> +
+
) })} @@ -52,14 +53,10 @@ const PastEventsSlider = ({slides}) => { {OnGoingEventsData.map((slide, index) => { return ( -
- {index === current && ( -
-
- content image -
-
- )} +
+
+ content image +
) })} diff --git a/src/Components/Home/Landing.css b/src/Components/Home/Landing.css index c508129..fee448a 100644 --- a/src/Components/Home/Landing.css +++ b/src/Components/Home/Landing.css @@ -11,6 +11,7 @@ margin-top: 25vh; } + .hi-link-div { text-align: center; height: 10vh; diff --git a/src/Components/Navbar/Navbar.css b/src/Components/Navbar/Navbar.css index b9a080f..1f65bee 100644 --- a/src/Components/Navbar/Navbar.css +++ b/src/Components/Navbar/Navbar.css @@ -36,12 +36,6 @@ } - - - - - - .navbar-link-style-active{ color: white; padding-left: 10px; From 12946a90027313b8b763ddb79a90117efc4faaeb Mon Sep 17 00:00:00 2001 From: Ramnath K Date: Mon, 23 May 2022 19:44:40 +0530 Subject: [PATCH 3/3] events page pastevents section fix --- src/Components/Events/Events.css | 17 ++++++- src/Components/Events/Events.js | 1 - src/Components/Events/PastEvents.js | 71 ++++++++++++++++++++--------- 3 files changed, 65 insertions(+), 24 deletions(-) diff --git a/src/Components/Events/Events.css b/src/Components/Events/Events.css index a3e5914..d58b815 100644 --- a/src/Components/Events/Events.css +++ b/src/Components/Events/Events.css @@ -39,7 +39,7 @@ } .navbar.navbar-inverse.navbar-fixed-top{ - margin-right: 17.5px; + margin-right: 22px; } a { @@ -197,6 +197,21 @@ body { transition: 1s; } +.slide-item { + padding: 5%; + transition: 0.5s; +} + +.slide-main { + margin-right: auto; + margin-left: auto; + transform: scale(1.2); +} + +.slide-preview { + opacity: 0.2; +} + .right-content { padding: 0 0 0 20px; color: white; diff --git a/src/Components/Events/Events.js b/src/Components/Events/Events.js index b75287f..340aaa9 100644 --- a/src/Components/Events/Events.js +++ b/src/Components/Events/Events.js @@ -7,7 +7,6 @@ import EventSlider from "./EventSlider"; import PastEventsSlider from "./PastEvents"; - // function useOnScreen(ref, rootMargin = "0px") { // const [isIntersecting, setIntersecting] = useState(false); // useEffect(() => { diff --git a/src/Components/Events/PastEvents.js b/src/Components/Events/PastEvents.js index 02b0247..e80f723 100644 --- a/src/Components/Events/PastEvents.js +++ b/src/Components/Events/PastEvents.js @@ -6,14 +6,14 @@ import './Events.css' const PastEventsSlider = ({slides}) => { const length = slides.length const [current, setCurrent] = useState(0) - const [x, setX] = useState(0); + const [x, setX] = useState(100); const nextSlide = () => { - x === -100*(length-1) ? setX(0) : setX(x-100) + x === -100*(length-2) ? setX(100) : setX(x-100) setCurrent(current === length-1 ? 0 : current+1) } const prevSlide = () => { - x === 0 ? setX(-100*(length-1)) : setX(x+100) + x === 100 ? setX(-100*(length-2)) : setX(x+100) setCurrent(current === 0 ? length-1 : current-1) } @@ -24,43 +24,70 @@ const PastEventsSlider = ({slides}) => { return( + //
+ //
+ // + // + // {OnGoingEventsData.map((slide, index) => { + // return ( + //
+ //
+ //
+ // content image + //
+ //
+ // = OnGoingEventsData.length ? (index+1)-OnGoingEventsData.length : index+1].image} alt="content image" className="event-img"/> + + //
+ //
+ // = OnGoingEventsData.length ? (index+2)-OnGoingEventsData.length : index+2].image} alt="content image" style={{opacity: 0.2}} className="event-img"/> + //
+ //
+ //
+ // ) + // })} + + //
+ //
+ // + // + // {OnGoingEventsData.map((slide, index) => { + // return ( + //
+ //
+ // content image + //
+ //
+ // ) + // })} + //
+ //
- {OnGoingEventsData.map((slide, index) => { - return ( -
-
-
- content image -
-
- = OnGoingEventsData.length ? (index+1)-OnGoingEventsData.length : index+1].image} alt="content image" className="event-img"/> - -
-
- = OnGoingEventsData.length ? (index+2)-OnGoingEventsData.length : index+2].image} alt="content image" style={{opacity: 0.2}} className="event-img"/> -
-
+ {OnGoingEventsData.map((slide,index) => { + return( +
+ content
) - })} - + })}
{OnGoingEventsData.map((slide, index) => { return ( -
+
- content image + content
) })}
+
);