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

Add dynamic white height at marketing

Browse source
This commit is contained in:
Letícia Camara 2018-09-28 17:32:48 -03:00
parent 0adabb78e9
commit 7474063918
2 changed files with 110 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/MarketingHeader.js
View file

@ -18,6 +18,7 @@ class MarketingHeader extends React.Component {
this.state = { this.state = {
collapse: false collapse: false
}; };
this.onClick = this.onClick.bind(this); this.onClick = this.onClick.bind(this);
this.handleNavbarClick = this.handleNavbarClick.bind(this); this.handleNavbarClick = this.handleNavbarClick.bind(this);
} }
@ -36,6 +37,7 @@ class MarketingHeader extends React.Component {
render() { render() {
return ( return (
<div>
<Navbar <Navbar
dark dark
expand="md" expand="md"
@ -61,6 +63,7 @@ class MarketingHeader extends React.Component {
</Collapse> </Collapse>
</Container> </Container>
</Navbar> </Navbar>
</div>
); );
} }
} }

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

@ -19,8 +19,24 @@ class MarketingPage extends React.Component {
this.onClick4 = this.onClick4.bind(this); this.onClick4 = this.onClick4.bind(this);
this.state = { this.state = {
collapse: false, collapse: false,
accordion: false accordion: false,
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 });
} }
toggle() { toggle() {
@ -84,93 +100,99 @@ class MarketingPage extends React.Component {
} }
render() { render() {
console.log(this.state.height);
const whiteSpaceheight = (this.state.height > 602) ? this.state.height - 602: 0;
console.log(whiteSpaceheight);
return ( return (
<div> <div>
<AppHeader /> <AppHeader />
<div id="maincontent"> <div id="maincontent">
<section data-spy="scroll" data-target="#mainNav" id="services"> <section data-spy="scroll" data-target="#mainNav" id="services">
<div className="containerfix"> <div className="containerfix">
<div className="row"> <div className="row">
<div className="col-md-10 mx-md-auto"> <div className="col-md-10 mx-md-auto">
<div> <div>
<div> <div>
<Button <Button
block block
color="primary" color="primary"
onClick={this.onClick1} onClick={this.onClick1}
style={{ marginBottom: "1rem" }}> style={{ marginBottom: "1rem" }}>
<FormattedMessage id="marketing.button.presentations" /> <FormattedMessage id="marketing.button.presentations" />
</Button> </Button>
</div> </div>
<Collapse isOpen={this.state.accordion === 1}> <Collapse isOpen={this.state.accordion === 1}>
<div className="list-group"> <div className="list-group">
<FormattedHTMLMessage id="marketing.accordion.presentations1" /> <FormattedHTMLMessage id="marketing.accordion.presentations1" />
<FormattedHTMLMessage id="marketing.accordion.presentations2" /> <FormattedHTMLMessage id="marketing.accordion.presentations2" />
<FormattedHTMLMessage id="marketing.accordion.presentations3" /> <FormattedHTMLMessage id="marketing.accordion.presentations3" />
</div> </div>
</Collapse> </Collapse>
<div> <div>
<Button <Button
block block
color="primary" color="primary"
onClick={this.onClick2} onClick={this.onClick2}
style={{ marginBottom: "1rem" }}> style={{ marginBottom: "1rem" }}>
<FormattedMessage id="marketing.button.flyers" /> <FormattedMessage id="marketing.button.flyers" />
</Button> </Button>
</div> </div>
<Collapse isOpen={this.state.accordion === 2}> <Collapse isOpen={this.state.accordion === 2}>
<div className="list-group"> <div className="list-group">
<FormattedHTMLMessage id="marketing.accordion.flyers1" /> <FormattedHTMLMessage id="marketing.accordion.flyers1" />
<FormattedHTMLMessage id="marketing.accordion.flyers2" /> <FormattedHTMLMessage id="marketing.accordion.flyers2" />
<FormattedHTMLMessage id="marketing.accordion.flyers3" /> <FormattedHTMLMessage id="marketing.accordion.flyers3" />
<FormattedHTMLMessage id="marketing.accordion.flyers4" /> <FormattedHTMLMessage id="marketing.accordion.flyers4" />
<FormattedHTMLMessage id="marketing.accordion.flyers5" /> <FormattedHTMLMessage id="marketing.accordion.flyers5" />
<FormattedHTMLMessage id="marketing.accordion.flyers6" /> <FormattedHTMLMessage id="marketing.accordion.flyers6" />
<FormattedHTMLMessage id="marketing.accordion.flyers7" /> <FormattedHTMLMessage id="marketing.accordion.flyers7" />
<FormattedHTMLMessage id="marketing.accordion.flyers8" /> <FormattedHTMLMessage id="marketing.accordion.flyers8" />
<FormattedHTMLMessage id="marketing.accordion.flyers9" /> <FormattedHTMLMessage id="marketing.accordion.flyers9" />
<FormattedHTMLMessage id="marketing.accordion.flyers10" /> <FormattedHTMLMessage id="marketing.accordion.flyers10" />
</div> </div>
</Collapse> </Collapse>
<div> <div>
<Button <Button
block block
color="primary" color="primary"
onClick={this.onClick3} onClick={this.onClick3}
style={{ marginBottom: "1rem" }}> style={{ marginBottom: "1rem" }}>
<FormattedMessage id="marketing.button.business_cards" /> <FormattedMessage id="marketing.button.business_cards" />
</Button> </Button>
</div> </div>
<Collapse isOpen={this.state.accordion === 3}> <Collapse isOpen={this.state.accordion === 3}>
<div className="list-group"> <div className="list-group">
<FormattedHTMLMessage id="marketing.accordion.business_cards1" /> <FormattedHTMLMessage id="marketing.accordion.business_cards1" />
<FormattedHTMLMessage id="marketing.accordion.business_cards2" /> <FormattedHTMLMessage id="marketing.accordion.business_cards2" />
</div> </div>
</Collapse> </Collapse>
<div> <div>
<Button <Button
block block
color="primary" color="primary"
onClick={this.onClick4} onClick={this.onClick4}
style={{ marginBottom: "1rem" }}> style={{ marginBottom: "1rem" }}>
<FormattedMessage id="marketing.button.promotional_displays" /> <FormattedMessage id="marketing.button.promotional_displays" />
</Button> </Button>
</div> </div>
<Collapse isOpen={this.state.accordion === 4}> <Collapse isOpen={this.state.accordion === 4}>
<div className="list-group"> <div className="list-group">
<FormattedHTMLMessage id="marketing.accordion.promotional_displays1" /> <FormattedHTMLMessage id="marketing.accordion.promotional_displays1" />
</div> </div>
</Collapse> </Collapse>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
<Footer /> {/* Add dynamic white spaces */}
</div> <div className="dynamic-white-space" style={{height: whiteSpaceheight}}>
</div>
<Footer />
</div>
); );
} }
} }