From 7758ec4463aadbffbef4bcf660f6ac83348c22ea Mon Sep 17 00:00:00 2001 From: Aman Tahiliani <65684756+AmanTahiliani@users.noreply.github.com> Date: Sun, 8 May 2022 23:27:29 +0530 Subject: [PATCH] Added slider to publications --- package.json | 3 + src/App.css | 126 +++++++++++++++------------- src/App.js | 10 +-- src/components/Header.js | 4 +- src/components/about.css | 2 +- src/components/publicationSlider.js | 43 ++++++++++ yarn.lock | 45 +++++++++- 7 files changed, 165 insertions(+), 68 deletions(-) create mode 100644 src/components/publicationSlider.js diff --git a/package.json b/package.json index b15b8b2..dc01459 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,11 @@ "react": "^18.1.0", "react-bootstrap": "^2.3.1", "react-dom": "^18.1.0", + "react-icons": "^4.3.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "react-slick": "^0.29.0", + "slick-carousel": "^1.8.1", "web-vitals": "^2.1.0" }, "scripts": { diff --git a/src/App.css b/src/App.css index 1afb369..ac52efd 100644 --- a/src/App.css +++ b/src/App.css @@ -1,63 +1,71 @@ -.App { - text-align: center; - background-color: #282c34; - position: absolute; - top: 0px; - right: 0px; - left: 0px; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - color: azure; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { + .App { + text-align: center; + background-color: #282c34; + position: absolute; + top: 0px; + right: 0px; + left: 0px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + color: azure; + } + .App-logo { - animation: App-logo-spin infinite 20s linear; + height: 40vmin; + pointer-events: none; } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); + + @media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } } - to { - transform: rotate(360deg); + + .App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; } -} - -.About { - width: 100%; - position: absolute; - top: 100px; - bottom: 0px; -} - -hr { - width: 70%; - margin-left: 15% !important; - margin-right: 15% !important; - border: 10px solid aquamarine; -} - -.publications { - margin-top: 150px; -} \ No newline at end of file + + .App-link { + color: #61dafb; + } + + @keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + .About { + width: 100%; + position: absolute; + top: 120px; + bottom: 0px; + } + + hr { + width: 70%; + margin-left: 15% !important; + margin-right: 15% !important; + border: 10px solid aquamarine; + } + + .publications { + margin-top: 230px; + } + + .slick-dots button:before { + color: grey !important; + } + + .slick-dots li.slick-active button:before { + color: White !important; + } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 54d89fe..cf49074 100644 --- a/src/App.js +++ b/src/App.js @@ -5,18 +5,18 @@ import About from "./components/About"; import Publication from "./components/Publication"; import publicationData from "./components/publications.json" import { getByTitle } from "@testing-library/react"; +import SimpleSlider from "./components/publicationSlider"; function App() { return (
- -
+ +

Publications

- {publicationData.map(({title,authors, publish_date, abstract,link}) =>( - - ))} + +
); diff --git a/src/components/Header.js b/src/components/Header.js index 5bf6d50..3b72059 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -16,10 +16,10 @@ class Header extends Component { Home - About + About - Publications + Publications diff --git a/src/components/about.css b/src/components/about.css index ef16361..c6fa00b 100644 --- a/src/components/about.css +++ b/src/components/about.css @@ -3,7 +3,7 @@ width: 75%; margin-top: 80px; margin-left: 12.5%; - padding-top: 4%; + padding-top: 5.5%; padding-bottom: 4%; } diff --git a/src/components/publicationSlider.js b/src/components/publicationSlider.js new file mode 100644 index 0000000..a14b804 --- /dev/null +++ b/src/components/publicationSlider.js @@ -0,0 +1,43 @@ +import React, { Component } from "react"; +import Slider from "react-slick"; +import publicationData from "./publications.json" +import Publication from "./Publication"; +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; +import {FaArrowAltCircleRight,FaArrowAltCircleLeft} from "react-icons/fa" +export default class SimpleSlider extends Component { + constructor(props) { + super(props); + this.next = this.next.bind(this); + this.previous = this.previous.bind(this); + } + next() { + this.slider.slickNext(); + } + previous() { + this.slider.slickPrev(); + } + render() { + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + }; + return ( +
+ (this.slider = c)} {...settings}> + {publicationData.map(({title,authors, publish_date, abstract,link}) =>( + + ))} + +
+ + + +
+
+ ); + } +} diff --git a/yarn.lock b/yarn.lock index 4cdcdd2..c8e57bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2977,7 +2977,7 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== -classnames@^2.3.1: +classnames@^2.2.5, classnames@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== @@ -3756,6 +3756,11 @@ enhanced-resolve@^5.9.2: graceful-fs "^4.2.4" tapable "^2.2.0" +enquire.js@^2.1.6: + version "2.1.6" + resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814" + integrity sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ= + entities@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" @@ -5694,6 +5699,13 @@ json-stable-stringify-without-jsonify@^1.0.1: resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE= +json2mq@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a" + integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo= + dependencies: + string-convert "^0.2.0" + json5@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" @@ -7217,6 +7229,11 @@ react-error-overlay@^6.0.11: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== +react-icons@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca" + integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ== + react-is@^16.13.1, react-is@^16.3.2: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -7312,6 +7329,17 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" +react-slick@^0.29.0: + version "0.29.0" + resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb" + integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA== + dependencies: + classnames "^2.2.5" + enquire.js "^2.1.6" + json2mq "^0.2.0" + lodash.debounce "^4.0.8" + resize-observer-polyfill "^1.5.0" + react-transition-group@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" @@ -7471,6 +7499,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +resize-observer-polyfill@^1.5.0: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d" @@ -7787,6 +7820,11 @@ slash@^4.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7" integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew== +slick-carousel@^1.8.1: + version "1.8.1" + resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d" + integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA== + sockjs@^0.3.21: version "0.3.24" resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce" @@ -7908,6 +7946,11 @@ statuses@2.0.1: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow= +string-convert@^0.2.0: + version "0.2.1" + resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97" + integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c= + string-length@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"