Skip to content

Commit 92938e2

Browse files
ksraj123ksraj123
committed
clickable fading blog cards
1 parent d0cb020 commit 92938e2

File tree

4 files changed

+106
-62
lines changed

4 files changed

+106
-62
lines changed

‎src/App.js‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Switch, Route, HashRouter as Router } from "react-router-dom";
2+
import {CSSTransition, TransitionGroup} from 'react-transition-group';
23
import React from "react";
34
import "./App.css";
4-
import {CSSTransition, TransitionGroup} from 'react-transition-group';
55
import NewHome from "./pages/Home/NewHome";
66
import NavBar from "./components/NavBar";
77
import Footer from "./components/Footer";
@@ -10,26 +10,23 @@ import COC from "./pages/COC/COC";
1010

1111
function App() {
1212
return (
13-
<>
14-
<div className="App" style={{ width: "100%" }}>
15-
<Router>
16-
<NavBar />
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-
}} />
29-
<Footer />
30-
</Router>
31-
</div>
32-
</>
13+
<div className="App" style={{ width: "100%" }}>
14+
<Router>
15+
<NavBar />
16+
<Route render={({location}) => {
17+
return (<TransitionGroup>
18+
<CSSTransition timeout={450} classNames="fade" key={location.pathname}>
19+
<Switch location={location}>
20+
<Route path="/team"><Team/></Route>
21+
<Route path="/codeofconduct"><COC/></Route>
22+
<Route exact path="/"><NewHome/></Route>
23+
</Switch>
24+
</CSSTransition>
25+
</TransitionGroup>)
26+
}} />
27+
<Footer />
28+
</Router>
29+
</div>
3330
);
3431
}
3532

‎src/components/Medium/Medium.css‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,52 @@
55

66
.Medium-post {
77
height: 500px;
8-
overflow-y: scroll;
8+
overflow-y: hidden;
99
overflow-x: hidden;
1010
text-align: left;
1111
padding: 20px;
12+
padding-bottom: 100px;
1213
margin: 20px;
1314
flex-shrink: 1;
15+
cursor: pointer;
16+
}
17+
18+
.Medium-post .fading-box {
19+
position: absolute;
20+
width: 100%;
21+
height: 40%;
22+
bottom: 0;
23+
left: 0;
24+
background-image: linear-gradient(to bottom, transparent, white);
25+
z-index: 1;
26+
}
27+
28+
.fading-box .view-more {
29+
padding: 10px 40px;
30+
border: 2px solid rgb(34, 36, 122);
31+
color: white;
32+
position: absolute;
33+
bottom: -70px;
34+
width: 100%;
35+
background-color: rgb(34, 36, 122);
36+
transition: all 0.5s ease;
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
}
41+
42+
.Medium-post:hover .view-more {
43+
bottom: 0px;
44+
}
45+
46+
.Medium-post .outer-link {
47+
text-decoration: none;
48+
color: inherit;
49+
}
50+
51+
.Medium-post:hover {
52+
box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
53+
transition: box-shadow 1s ease;
1454
}
1555

1656
@media (max-width: 768px){

‎src/components/Medium/Medium.js‎

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,55 @@
1-
import React from 'react';
2-
import axios from 'axios';
3-
import xml2js from 'xml2js';
4-
import './Medium.css';
1+
import React from "react";
2+
import axios from "axios";
3+
import xml2js from "xml2js";
4+
import "./Medium.css";
55

6+
class Medium extends React.Component {
7+
state = {
8+
posts: []
9+
};
610

7-
class Medium extends React.Component{
11+
componentDidMount() {
12+
const mediumURL = "https://medium.com/feed/codeuino";
13+
axios
14+
.get(`https://api.codetabs.com/v1/proxy?quest=${mediumURL}`)
15+
.then(res => {
16+
const data = res.data;
17+
xml2js.parseString(data, (err, result) => {
18+
this.setState({
19+
posts: result.rss.channel[0].item.slice(0, 3)
20+
});
21+
});
22+
});
23+
}
824

9-
state = {
10-
posts : []
11-
}
12-
13-
componentDidMount(){
14-
const mediumURL = "https://medium.com/feed/codeuino";
15-
axios.get(`https://api.codetabs.com/v1/proxy?quest=${mediumURL}`)
16-
.then((res) => {
17-
const data = res.data;
18-
xml2js.parseString(data, (err, result) => {
19-
this.setState({
20-
posts: result.rss.channel[0].item.slice(0, 3)
21-
})
22-
});
23-
})
24-
}
25-
26-
render(){
27-
return(
28-
<div
29-
class="container"
30-
style={{ width: "100%", alignContent: "left" }}
31-
>
32-
<h1 class="component-heading">Latest Blogs</h1>
33-
<div class="row justify-content-center Medium" style={{ textAlign: "left" }}>
34-
{this.state.posts.map((post, index) => (
35-
<div
36-
className="col-md-4 Medium-post"
37-
key={index}
38-
dangerouslySetInnerHTML={{__html: post["content:encoded"][0]}}></div>
39-
))}
25+
render() {
26+
return (
27+
<div class="container" style={{ width: "100%", alignContent: "left" }}>
28+
<h1 class="component-heading">Latest Blogs</h1>
29+
<div
30+
class="row justify-content-center Medium"
31+
style={{ textAlign: "left" }}
32+
>
33+
{this.state.posts.map((post, index) => (
34+
<div className="col-md-4 Medium-post" key={index}>
35+
<a class="outer-link" href={post.link[0]}>
36+
<div
37+
dangerouslySetInnerHTML={{
38+
__html: post["content:encoded"][0]
39+
}}
40+
></div>
41+
<div className="fading-box">
42+
<div className="view-more">
43+
View More
44+
</div>
4045
</div>
46+
</a>
4147
</div>
42-
43-
);
44-
}
48+
))}
49+
</div>
50+
</div>
51+
);
52+
}
4553
}
4654

4755
export default Medium;

‎src/components/NavBar/index.js‎

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

1010
const smoothScroll = el => {
11-
// console.log(navbarRef.current.offsetHeight);
1211
window.scrollTo({
1312
top: el.offsetTop - navbarRef.current.offsetHeight,
1413
left: 0,

0 commit comments

Comments
 (0)