Skip to content

Commit d0cb020

Browse files
ksraj123ksraj123
committed
page transition added
1 parent 57342d0 commit d0cb020

File tree

17 files changed

+152
-133
lines changed

17 files changed

+152
-133
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"react-router-hash-link": "^1.2.2",
3939
"react-scripts": "^3.4.0",
4040
"react-slideshow-image": "^1.3.3",
41+
"react-transition-group": "^4.4.1",
4142
"react-twitter-embed": "^3.0.3",
4243
"serve": "^11.3.0",
4344
"typescript": "^3.9.6",

‎src/App.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,24 @@ footer{
122122
color: #61dafb;
123123
}
124124

125+
.fade-appear, .fade-enter {
126+
opacity: 0;
127+
z-index: 1;
128+
}
129+
.fade-appear-active, .fade-enter.fade-enter-active {
130+
opacity: 1;
131+
transition: opacity 300ms linear 150ms;
132+
}
133+
134+
.fade-exit {
135+
opacity: 1;
136+
}
137+
138+
.fade-exit.fade-exit-active {
139+
opacity: 0;
140+
transition: opacity 150ms linear;
141+
}
142+
125143
@keyframes App-logo-spin {
126144
from {
127145
transform: rotate(0deg);

‎src/App.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Switch, Route, HashRouter as Router } from "react-router-dom";
22
import React from "react";
33
import "./App.css";
4+
import {CSSTransition, TransitionGroup} from 'react-transition-group';
45
import NewHome from "./pages/Home/NewHome";
56
import NavBar from "./components/NavBar";
67
import Footer from "./components/Footer";
@@ -13,17 +14,18 @@ function App() {
1314
<div className="App" style={{ width: "100%" }}>
1415
<Router>
1516
<NavBar />
16-
<Switch>
17-
<Route path="/team">
18-
<Team />
19-
</Route>
20-
<Route path="/codeofconduct">
21-
<COC />
22-
</Route>
23-
<Route exact path="/">
24-
<NewHome />
25-
</Route>
26-
</Switch>
17+
<Route render={({location}) => {
18+
// console.log(location);
19+
return (<TransitionGroup>
20+
<CSSTransition timeout={450} classNames="fade" key={location.pathname}>
21+
<Switch location={location}>
22+
<Route path="/team"><Team/></Route>
23+
<Route path="/codeofconduct"><COC/></Route>
24+
<Route exact path="/"><NewHome/></Route>
25+
</Switch>
26+
</CSSTransition>
27+
</TransitionGroup>)
28+
}} />
2729
<Footer />
2830
</Router>
2931
</div>

‎src/components/Activities/ActivityCard.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ const ActivityCard = (props) => {
1818
</p>
1919
</div>
2020
<div className="activity-card-links mt-auto">
21-
{props.activity.links.map((link) => {
21+
{props.activity.links.map((link, index) => {
2222
return (
23-
<a className="activity-card-link custom-links" href={link.href}>
23+
<a key={index} className="activity-card-link custom-links" href={link.href}>
2424
{link.name}
2525
</a>
2626
);

‎src/components/Footer/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,32 +50,32 @@ const Footer = () => {
5050
<Row>
5151
<Col className="footer-icon" sm={2} xs={4}>
5252
<a href="https://twitter.com/codeuino?lang=en">
53-
<i class="fab fa-twitter fa-2x text-white"></i>
53+
<i className="fab fa-twitter fa-2x text-white"></i>
5454
</a>
5555
</Col>
5656
<Col className="footer-icon" sm={2} xs={4}>
5757
<a href="https://www.facebook.com/codeuino/">
58-
<i class="fab fa-facebook-f fa-2x text-white"></i>
58+
<i className="fab fa-facebook-f fa-2x text-white"></i>
5959
</a>
6060
</Col>
6161
<Col className="footer-icon" sm={2} xs={4}>
6262
<a href="https://github.com/codeuino">
63-
<i class="fab fa-github fa-2x text-white"></i>
63+
<i className="fab fa-github fa-2x text-white"></i>
6464
</a>
6565
</Col>
6666
<Col className="footer-icon" sm={2} xs={4}>
6767
<a href="https://www.linkedin.com/company/codeuino/">
68-
<i class="fab fa-linkedin-in fa-2x text-white"></i>
68+
<i className="fab fa-linkedin-in fa-2x text-white"></i>
6969
</a>
7070
</Col>
7171
<Col className="footer-icon" sm={2} xs={4}>
7272
<a href="https://www.youtube.com/channel/UCmC2EOPv_oyJIevTyzlZTDQ">
73-
<i class="fab fa-youtube fa-2x text-white"></i>
73+
<i className="fab fa-youtube fa-2x text-white"></i>
7474
</a>
7575
</Col>
7676
<Col className="footer-icon" sm={2} xs={4}>
7777
<a href="https://medium.com/codeuino">
78-
<i class="fab fa-medium-m fa-2x text-white"></i>
78+
<i className="fab fa-medium-m fa-2x text-white"></i>
7979
</a>
8080
</Col>
8181
</Row>

‎src/components/NavBar/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const NavBar = () => {
88
const navbarRef = useRef(null);
99

1010
const smoothScroll = el => {
11-
console.log(navbarRef.current.offsetHeight);
11+
// console.log(navbarRef.current.offsetHeight);
1212
window.scrollTo({
1313
top: el.offsetTop - navbarRef.current.offsetHeight,
1414
left: 0,

‎src/components/ScrollToTopBtn/ScrollToTopBtn.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ class ScrollToTopBtn extends Component {
4141
<div className="scroll-to-top">
4242
{is_visible && (
4343
<div onClick={() => this.scrollToTop()}>
44-
<span class="fa-stack fa-lg">
45-
<i class="fa fa-circle fa-stack-2x"></i>
46-
<i class="fa fa-arrow-up fa-stack-1x fa-inverse" aria-hidden="true"></i>
44+
<span className="fa-stack fa-lg">
45+
<i className="fa fa-circle fa-stack-2x"></i>
46+
<i className="fa fa-arrow-up fa-stack-1x fa-inverse" aria-hidden="true"></i>
4747
</span>
4848
</div>
4949
)}

‎src/pages/COC/COC.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ export default function ComponentName() {
55
}, [])
66
return (
77
<div>
8-
<div class="mt-12"></div>
9-
<div class="container">
8+
<div className="mt-12"></div>
9+
<div className="container">
1010
<div className="row">
1111
<div className="col-md-2"></div>
1212
<div className="col-md-8" style={{maxWidth: "100%"}}>

‎src/pages/Home/Components/Activities.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ class Activities extends React.Component {
1515
render() {
1616
return (
1717
<div id='activity' className="pt-10">
18-
<span class="badge badge-pill badge-primary-soft mb-3 text-center">
19-
<span class="h6 text-uppercase font-weight-bold">CODEUINO’s Participation</span>
18+
<span className="badge badge-pill badge-primary-soft mb-3 text-center">
19+
<span className="h6 text-uppercase font-weight-bold">CODEUINO’s Participation</span>
2020
</span>
2121
<h1 className='component-heading'>Contests, Programs, and Mentorship Opportunities</h1>
2222
<div className='container d-flex justify-content-center'>
2323
<div className='row'>
2424
{CURRENT_ACTIVITIES.map((currentActivity, index) => {
2525
return (
26-
<div className='col-md-4 p-0 mt-5 activity-cards'>
26+
<div key={index} className='col-md-4 p-0 mt-5 activity-cards'>
2727
<ActivityCard
2828
key={index}
2929
activity={currentActivity}

‎src/pages/Home/Components/LandingPageComponent.js‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@ import { HashLink as Link } from "react-router-hash-link";
66
const LandingPageComponent = () => {
77
return (
88
<React.Fragment>
9-
<section class="pt-4 pt-md-5">
10-
<div class="container">
11-
<div class="row align-items-center">
12-
<div class="col-12 col-md-5 col-lg-6 order-md-2">
9+
<section className="pt-4 pt-md-5">
10+
<div className="container">
11+
<div className="row align-items-center">
12+
<div className="col-12 col-md-5 col-lg-6 order-md-2">
1313
<img
1414
src={Banner}
15-
class="img-fluid mw-md-100 mw-lg-100 mb-6 mb-md-0"
15+
className="img-fluid mw-md-100 mw-lg-100 mb-6 mb-md-0"
1616
alt="all-channels"
1717
/>
1818
</div>
19-
<div class="col-12 col-md-7 col-lg-6 order-md-1">
20-
<h1 class="display-3 text-center text-md-left">
19+
<div className="col-12 col-md-7 col-lg-6 order-md-1">
20+
<h1 className="display-3 text-center text-md-left">
2121
Learn, Build, Contribute, Grow.
2222
<br />
2323
</h1>
@@ -28,14 +28,14 @@ const LandingPageComponent = () => {
2828
<div className="text-center text-md-left">
2929
<a
3030
href="https://github.com/codeuino"
31-
class="btn btn-primary shadow lift pr-5 mr-5"
31+
className="btn btn-primary shadow lift pr-5 mr-5"
3232
style={{ backgroundColor: " #22247A" }}
3333
>
3434
<span className="fe fe-github mr-1"></span>Github
3535
</a>
3636
<a
3737
href="http://slack.codeuino.org"
38-
class="btn btn-primary shadow lift pr-5"
38+
className="btn btn-primary shadow lift pr-5"
3939
style={{ backgroundColor: " #22247A" }}
4040
>
4141
<span className="fe fe-slack mr-1"></span>Slack
@@ -45,8 +45,8 @@ const LandingPageComponent = () => {
4545
</div>
4646
</div>
4747
</section>
48-
<div class="mt-10 container lift" style={{borderRadius:"25px",textAlign:"left",color:"white",backgroundColor:" #22247A",width:"100%"}}>
49-
<div class="row pt-6 pb-6 pl-md-6 pr-md-6">
48+
<div className="mt-10 container lift" style={{borderRadius:"25px",textAlign:"left",color:"white",backgroundColor:" #22247A",width:"100%"}}>
49+
<div className="row pt-6 pb-6 pl-md-6 pr-md-6">
5050
<div className="col-md-3 text-center p-0" style={{display: 'flex', flexDirection: 'column', justifyContent: 'center'}}>
5151
<h1 className="m-0 display-3">Mission</h1>
5252
<p className="m-0">Of our Community</p>
@@ -63,19 +63,19 @@ const LandingPageComponent = () => {
6363

6464
</div>
6565
</div>
66-
<section class="pt-10"
66+
<section className="pt-10"
6767
id="aboutUs"
6868
style={{ width: "100%", alignContent: "left" }}>
69-
<div class="container">
70-
<span class="badge badge-pill badge-primary-soft mb-3 text-center">
71-
<span class="h6 text-uppercase font-weight-bold">About Us</span>
69+
<div className="container">
70+
<span className="badge badge-pill badge-primary-soft mb-3 text-center">
71+
<span className="h6 text-uppercase font-weight-bold">About Us</span>
7272
</span>
73-
<h1 class="component-heading">Our Background and Mission</h1>
74-
<div class="row align-items-center">
75-
<div class="row" style={{ textAlign: "left" }}>
76-
<div class="col-md-4 col-12">
73+
<h1 className="component-heading">Our Background and Mission</h1>
74+
<div className="row align-items-center">
75+
<div className="row" style={{ textAlign: "left" }}>
76+
<div className="col-md-4 col-12">
7777
<p className="text-md-left text-center mb-md-0"><span
78-
class="fa fa-question-circle fa-2x mr-1 "
78+
className="fa fa-question-circle fa-2x mr-1 "
7979
style={{ color: " #22247A" }}></span></p>
8080
<h2 className="text-md-left text-center">What is Codeuino?</h2>
8181
<p style={{ textAlign: "justify" }}>
@@ -95,9 +95,9 @@ const LandingPageComponent = () => {
9595
world..
9696
</p>
9797
</div>
98-
<div class="col-md-4 col-12 pt-md-0 pt-6">
98+
<div className="col-md-4 col-12 pt-md-0 pt-6">
9999
<p className="text-md-left text-center mb-md-0"><span
100-
class="fa fa-user-circle fa-2x mr-1"
100+
className="fa fa-user-circle fa-2x mr-1"
101101
style={{ color: " #22247A" }}></span></p>
102102
<h2 className="text-md-left text-center">Who we Are?</h2>
103103
<p style={{ textAlign: "justify" }}>
@@ -115,9 +115,9 @@ const LandingPageComponent = () => {
115115
networking.
116116
</p>
117117
</div>
118-
<div class="col-md-4 col-12 pt-md-0 pt-6">
118+
<div className="col-md-4 col-12 pt-md-0 pt-6">
119119
<p className="text-md-left text-center mb-md-0"><span
120-
class="fa fa-check fa-2x mr-1"
120+
className="fa fa-check fa-2x mr-1"
121121
style={{ color: " #22247A" }}></span></p>
122122
<h2 className="text-md-left text-center">What do we do?</h2>
123123
<p style={{ textAlign: "justify" }}>
@@ -139,7 +139,7 @@ const LandingPageComponent = () => {
139139
</div>
140140
</div>
141141
</div>
142-
<img alt="about us graphics" class="mt-10" src={poster} style={{ width: "100%" }} />
142+
<img alt="about us graphics" className="mt-10" src={poster} style={{ width: "100%" }} />
143143
</div>
144144
</section>
145145
</React.Fragment>

0 commit comments

Comments
 (0)