From 45a357fff65851d16b858c25accffc8f6a205497 Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Wed, 1 Sep 2021 20:49:53 +0100
Subject: [PATCH] Fix cookie notice margins Ensure container bottom margin is
 same as cookie notice height

---
 src/App.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index e26cf1c..8724b83 100644
--- a/src/App.js
+++ b/src/App.js
@@ -111,7 +111,7 @@ class App extends React.Component {
     if (this.cookies.get("parandum-cookies-accepted") !== "true") {
       this.cookieNotice.style.display = "flex";
       this.cookieNotice.animate({
-        bottom: [`-${this.cookieNotice.offsetHeight}px`, "0px"],
+        bottom: [`-${this.cookieNoticeHeight}px`, "0px"],
       }, {
         duration: 1000,
         easing: "ease-in-out",
@@ -119,7 +119,7 @@ class App extends React.Component {
         fill: "forwards",
       });
       this.root.animate({
-        marginBottom: ["0px", `${this.cookieNotice.offsetHeight}px`],
+        marginBottom: ["0px", `${this.cookieNoticeHeight}px`],
       }, {
         duration: 1000,
         easing: "ease-in-out",
@@ -132,15 +132,15 @@ class App extends React.Component {
 
   updateCookieNoticeMargins = () => {
     if (this.cookieNoticeHeight !== this.cookieNotice.offsetHeight) {
+      this.cookieNoticeHeight = this.cookieNotice.offsetHeight;
       this.root.animate({
-        marginBottom: [`${this.root.marginBottom}px`, `${this.cookieNotice.offsetHeight}px`],
+        marginBottom: [`${this.root.marginBottom}px`, `${this.cookieNoticeHeight}px`],
       }, {
         duration: 500,
         easing: "ease-in-out",
         iterations: 1,
         fill: "forwards",
       });
-      this.cookieNoticeHeight = this.cookieNotice.offsetHeight;
     }
   }
 
@@ -168,8 +168,9 @@ class App extends React.Component {
 
   acceptCookies = () => {
     window.removeEventListener('resize', this.updateCookieNoticeMargins);
+    this.cookieNoticeHeight = this.cookieNotice.offsetHeight;
     this.cookieNotice.animate({
-      bottom: ["0px", `-${this.cookieNotice.offsetHeight}px`],
+      bottom: ["0px", `-${this.cookieNoticeHeight}px`],
     }, {
       duration: 1000,
       easing: "ease-in-out",
@@ -177,7 +178,7 @@ class App extends React.Component {
       fill: "forwards",
     });
     this.root.animate({
-      marginBottom: [`${this.cookieNotice.offsetHeight}px`, "0px"],
+      marginBottom: [`${this.cookieNoticeHeight}px`, "0px"],
     }, {
       duration: 1000,
       easing: "ease-in-out",