Add dynamic font size to testinomies

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

View file

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

View file

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