From 747406391896bc900d5cad30d572b97da765c1af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Let=C3=ADcia=20Camara?= <lettcamara@gmail.com>
Date: Fri, 28 Sep 2018 17:32:48 -0300
Subject: [PATCH] Add dynamic white height at marketing

---
 src/components/MarketingHeader.js     |   3 +
 src/components/pages/MarketingPage.js | 192 ++++++++++++++------------
 2 files changed, 110 insertions(+), 85 deletions(-)

diff --git a/src/components/MarketingHeader.js b/src/components/MarketingHeader.js
index b9f53c0..931e7df 100644
--- a/src/components/MarketingHeader.js
+++ b/src/components/MarketingHeader.js
@@ -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>
     );
   }
 }
diff --git a/src/components/pages/MarketingPage.js b/src/components/pages/MarketingPage.js
index 0cdf661..b929cb1 100644
--- a/src/components/pages/MarketingPage.js
+++ b/src/components/pages/MarketingPage.js
@@ -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>
   );
   }
 }