From 2fade08a4c1fb1c973517bee551dd0c33ee2e272 Mon Sep 17 00:00:00 2001 From: Lakshay Bomotra Date: Sun, 25 Oct 2020 20:42:13 +0530 Subject: [PATCH 01/16] added image slider to show past, present and upcoming events --- client/package-lock.json | 62 ++++++++++++++++++++++++++ client/package.json | 2 + client/src/App.js | 2 + client/src/components/Slider/Slider.js | 35 +++++++++++++++ 4 files changed, 101 insertions(+) create mode 100644 client/src/components/Slider/Slider.js diff --git a/client/package-lock.json b/client/package-lock.json index 5e188eb..b460769 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2743,6 +2743,28 @@ "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==" }, + "babel-polyfill": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz", + "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=", + "requires": { + "babel-runtime": "^6.26.0", + "core-js": "^2.5.0", + "regenerator-runtime": "^0.10.5" + }, + "dependencies": { + "core-js": { + "version": "2.6.11", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz", + "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==" + }, + "regenerator-runtime": { + "version": "0.10.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=" + } + } + }, "babel-preset-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz", @@ -3556,6 +3578,11 @@ "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -6703,6 +6730,18 @@ "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==" }, + "infinite-react-carousel": { + "version": "1.2.11", + "resolved": "https://registry.npmjs.org/infinite-react-carousel/-/infinite-react-carousel-1.2.11.tgz", + "integrity": "sha512-7MUNP+eh/6Eud+TViz0HYYvLJq/2CVsdMf9J9X/Ag9jRs/eb319vBpHvNEb0TtmbqrNbnSGHG0D3fVy41edy0g==", + "requires": { + "babel-polyfill": "^6.26.0", + "classnames": "^2.2.5", + "lodash": "^4.17.15", + "prop-types": "^15.7.2", + "resize-observer-polyfill": "^1.5.0" + } + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -10699,6 +10738,14 @@ "scheduler": "^0.19.1" } }, + "react-easy-swipe": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz", + "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==", + "requires": { + "prop-types": "^15.5.8" + } + }, "react-error-overlay": { "version": "6.0.7", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", @@ -10709,6 +10756,16 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-responsive-carousel": { + "version": "3.2.10", + "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.10.tgz", + "integrity": "sha512-O8MV2LoR07BttvWaXesyWkE6s8xRW6p6HiMkelZ3TuPYQwKnlw+fYtZN+bQ3/1jg0D5JQGATY4Hnw/4WEXHnag==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.5.8", + "react-easy-swipe": "^0.0.21" + } + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", @@ -11059,6 +11116,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz", diff --git a/client/package.json b/client/package.json index e62325f..1cbbe00 100644 --- a/client/package.json +++ b/client/package.json @@ -14,8 +14,10 @@ "aos": "^3.0.0-beta.6", "bootstrap": "^4.5.3", "cra-template": "1.0.3", + "infinite-react-carousel": "^1.2.11", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-responsive-carousel": "^3.2.10", "react-scripts": "3.4.1", "redux": "^4.0.5", "styled-components": "^5.2.0" diff --git a/client/src/App.js b/client/src/App.js index a8d992f..70b047a 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -6,6 +6,8 @@ import Commiittee from "./components/CommitteeMembers/committee"; import Homepage from "./components/Homepage/Homepage"; import Timeline from "./components/Timeline/timeline"; import ContactUs from "./components/Contact-Us/ContactUs"; +import CustomSlider from "./components/Slider/Slider"; + function App() { return ( diff --git a/client/src/components/Slider/Slider.js b/client/src/components/Slider/Slider.js new file mode 100644 index 0000000..0f1b21f --- /dev/null +++ b/client/src/components/Slider/Slider.js @@ -0,0 +1,35 @@ +import React from "react"; +import "react-responsive-carousel/lib/styles/carousel.min.css"; +import { Carousel } from 'react-responsive-carousel'; + +export default function CarouselComponent() { + return ( + + ); +} \ No newline at end of file From 7ca7d962fc39fd5edc43f7a485a05cd7032af1ea Mon Sep 17 00:00:00 2001 From: Lakshay Bomotra Date: Mon, 26 Oct 2020 22:54:18 +0530 Subject: [PATCH 02/16] Made it responsive and removed my changes from app.js --- client/src/App.js | 1 - client/src/components/Homepage/Homepage.jsx | 1 + client/src/components/Slider/Slider.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 70b047a..de833b2 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -6,7 +6,6 @@ import Commiittee from "./components/CommitteeMembers/committee"; import Homepage from "./components/Homepage/Homepage"; import Timeline from "./components/Timeline/timeline"; import ContactUs from "./components/Contact-Us/ContactUs"; -import CustomSlider from "./components/Slider/Slider"; function App() { diff --git a/client/src/components/Homepage/Homepage.jsx b/client/src/components/Homepage/Homepage.jsx index 4b60114..bababec 100644 --- a/client/src/components/Homepage/Homepage.jsx +++ b/client/src/components/Homepage/Homepage.jsx @@ -6,6 +6,7 @@ import HomePageBody from "./HomePageBody"; import HomePageHeader from "./HomePageHeader"; import HomePageFooter from "./HomePageFooter"; + const Container = styled.div``; function HomePage() { diff --git a/client/src/components/Slider/Slider.js b/client/src/components/Slider/Slider.js index 0f1b21f..41230bc 100644 --- a/client/src/components/Slider/Slider.js +++ b/client/src/components/Slider/Slider.js @@ -6,7 +6,7 @@ export default function CarouselComponent() { return (