me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix cookie notice margins

Browse Source 
Ensure container bottom margin is same as cookie notice height
This commit is contained in:
Matthew Grove
2021-09-01 20:49:53 +01:00
parent 59c8a481eb
commit 45a357fff6
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.js
View File

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