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