agorise/palmpay.io-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add dynamic font size to testinomies

Browse source
This commit is contained in:
Letícia Camara 2018-10-04 02:54:54 -03:00
parent af048d2027
commit d7c5d14055
2 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/pages/MarketingPage.js
View file

@ -100,9 +100,7 @@ class MarketingPage extends React.Component {
}
render() {
console.log(this.state.height);
const whiteSpaceheight = (this.state.height > 602) ? this.state.height - 602: 0;
console.log(whiteSpaceheight);
return (
<div>
<AppHeader />

26
src/components/sections/TestimoniesSection.js
View file

@ -43,13 +43,33 @@ class TestimoniesSection extends React.Component {
this.state = {
activeItem: 1,
maxLength: testimonies.length
maxLength: testimonies.length,
width: 0,
height: 0
};
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener('resize', this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowDimensions);
}
updateWindowDimensions() {
this.setState({ width: window.innerWidth, height: window.innerHeight });
}
render() {
const { activeItem, maxLength } = this.state;
const fontSize = (this.state.width > 1000) ? 16 * (1 + (this.state.width/2000)): 16;
return (
<span>
<section className="testimonials text-center" id="testimonies">
@ -77,8 +97,8 @@ class TestimoniesSection extends React.Component {
<CarouselItem itemId={index+1} key={index}>
<Col mb-lg="0" mx="auto" mb="4">
<i className="fa fa-user-circle-o" />
<h5>{testimony.name} &#9733;&#9733;&#9733;&#9733;&#9733;</h5>
<div className="font-weight-light mb-3">
<h5 style={{fontSize}}>{testimony.name} &#9733;&#9733;&#9733;&#9733;&#9733;</h5>
<div style={{fontSize}} className="font-weight-light mb-3">
&#34;{testimony.description}&#34;
</div>
</Col>