Skip to content

Commit 19b35fb

Browse files
authored
Merge pull request #148 from sureshmangs/master
Solving Image heights for mentor thumbnails #142
2 parents 8cdc3e5 + d22cf10 commit 19b35fb

File tree

2 files changed

+66
-66
lines changed

2 files changed

+66
-66
lines changed

package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/components/MentorProfile.js

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react'
1+
import React, { Component } from 'react'
22
import ReactImageFallback from "react-image-fallback";
33
import data from '../response/response'
44

@@ -8,86 +8,86 @@ import loader from '../assets/loader.gif';
88
import mentorImage from '../assets/mentor-default.svg';
99

1010

11-
class MentorProfile extends Component{
11+
class MentorProfile extends Component {
1212

13-
state ={
13+
state = {
1414
mentorId: null,
15-
mentorProfile:null
15+
mentorProfile: null
1616
}
1717

18-
componentDidMount(){
18+
componentDidMount() {
1919
let id = this.props.match.params.mentorId;
20-
20+
2121
this.setState({
22-
mentorId:id,
22+
mentorId: id,
2323
// eslint-disable-next-line
24-
mentorProfile: data.filter(item=>item.id == id)[0]
24+
mentorProfile: data.filter(item => item.id == id)[0]
2525
});
26-
26+
2727
}
28-
28+
2929

3030
render() {
31-
const hasProfileData = this.state.mentorProfile ? (<div>
32-
<div className="row mt-5 no-gutters">
33-
<div className="col-sm-4 col-md-4 ">
34-
<ReactImageFallback
35-
src={this.state.mentorProfile.image}
36-
fallbackImage={mentorImage} //this shows if the montor does not have any image
37-
initialImage={loader}
38-
alt={this.state.mentorProfile.name}
39-
className="card-img mentor-img-thumbnail img-fluid" />
40-
41-
</div>
42-
43-
<div className="col-md-8">
44-
<div className="card-body">
45-
<h4 className="card-title">{this.state.mentorProfile.name}</h4>
46-
<p className="card-text"><small className="text-muted">{this.state.mentorProfile.country}</small></p>
47-
<p className="card-text">{this.state.mentorProfile.biography}</p>
48-
<p className="card-text ">{this.state.mentorProfile.technology}</p>
31+
const hasProfileData = this.state.mentorProfile ? (<div>
32+
<div className="row mt-5 no-gutters">
33+
<div className="col-sm-4 col-md-4 ">
34+
<ReactImageFallback
35+
src={this.state.mentorProfile.image}
36+
fallbackImage={mentorImage} //this shows if the montor does not have any image
37+
initialImage={loader}
38+
alt={this.state.mentorProfile.name}
39+
className="card-img mentor-img-thumbnail img-fluid" />
40+
41+
</div>
42+
43+
<div className="col-md-8">
44+
<div className="card-body">
45+
<h4 className="card-title">{this.state.mentorProfile.name}</h4>
46+
<p className="card-text"><small className="text-muted">{this.state.mentorProfile.country}</small></p>
47+
<p className="card-text">{this.state.mentorProfile.biography}</p>
48+
<p className="card-text ">{this.state.mentorProfile.technology}</p>
4949

50+
</div>
51+
</div>
5052
</div>
51-
</div>
52-
</div>
53-
<div className="row mt-3 no-gutters">
54-
<div >
55-
<h5 className="card-title">Technology Stack</h5>
56-
<div className="">
57-
{
58-
this.state.mentorProfile.technology.split(',').map((item,key)=>{
59-
let programmingLanguage = item.toLowerCase();
60-
61-
///below are icons generated by devicon
62-
return<i key={key} className={`devicon-${programmingLanguage.trim()}-plain colored`}></i>
63-
64-
//if you would like to use Font Mfizz vector icons uncomment the line bellow
65-
// return<i key={key} className={`icon-${programmingLanguage.trim()}`}></i>
66-
67-
68-
69-
})
70-
}
71-
72-
53+
<div className="row mt-3 no-gutters">
54+
<div >
55+
<h5 className="card-title">Technology Stack</h5>
56+
<div className="">
57+
{
58+
this.state.mentorProfile.technology.split(',').map((item, key) => {
59+
let programmingLanguage = item.toLowerCase();
60+
61+
///below are icons generated by devicon
62+
return <i key={key} className={`devicon-${programmingLanguage.trim()}-plain colored`}></i>
63+
64+
//if you would like to use Font Mfizz vector icons uncomment the line bellow
65+
// return<i key={key} className={`icon-${programmingLanguage.trim()}`}></i>
66+
67+
68+
69+
})
70+
}
71+
72+
73+
</div>
74+
</div>
75+
7376
</div>
74-
</div>
75-
76-
</div>
77-
</div>) : (<h2>Loading Data</h2>)
77+
</div>) : (<h2>Loading Data</h2>)
78+
7879

79-
8080
return (
81-
<div>
82-
<Header />
83-
<div className="container">
84-
85-
{hasProfileData}
86-
81+
<div>
82+
<Header />
83+
<div className="container">
84+
85+
{hasProfileData}
86+
87+
</div>
8788
</div>
88-
</div>
8989
)
90-
}
90+
}
9191
}
9292

9393
export default MentorProfile;

0 commit comments

Comments
 (0)