Fixes #28

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hello-bar",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "main": "build/index.js",
   "scripts": {
     "start": "node scripts/start.js",
@@ -140,6 +140,7 @@
     ]
   },
   "dependencies": {
+    "debounce": "^1.2.0",
     "font-color-contrast": "^1.0.3"
   }
 }

src/docs/App.js

@@ -2,7 +2,7 @@ import "./css/App.css";
 import Lib from "../lib";
 
 const checkOutText =
-  "Check out this repository on GitHub now! <a class='cta wiggle' href='https://github.com/AnandChowdhary/hello-bar'>⭐ Star now</a>";
+  "Check out this repository on GitHub now! <a class='cta wiggle' href='https://github.com/AnandChowdhary/hello-bar'>&#9733; &nbsp;Star now</a>";
 const euText =
   "🍪 This website uses cookies to make your experience better. <a class='cta' href='#'>Cookie policy</a>";
 const randomText = ["You are seeing message A!", "You are seeing message B!"];

src/docs/css/App.css

@@ -4,11 +4,11 @@ body {
 }
 h1 {
   font-weight: 300;
-  margin-top: 30vh;
-  margin-bottom: 5vh;
+  margin-top: 1rem;
+  margin-bottom: 5rem;
 }
 .options {
-  margin-bottom: 20vh;
+  margin-bottom: 10rem;
 }
 .options div {
   margin-bottom: 1rem;
@@ -17,5 +17,5 @@ p {
   max-width: 400px;
   line-height: 1.5;
   margin: auto;
-  margin-bottom: 10vh;
+  margin-bottom: 10rem;
 }

src/lib/App.js

@@ -1,5 +1,6 @@
 import "./css/App.css";
 import fontColorContrast from "font-color-contrast";
+import debounce from "debounce";
 import cachedFetch from "./cachedFetch";
 import euCountries from "./euCountries";
 import getParameterByName from "./getParameterByName";
@@ -54,6 +55,14 @@ class App {
       this.marginProp = "marginTop";
     }
     this.events = {};
+    window.addEventListener("resize", debounce(() => {
+      if (!document.querySelector(`#${this.id}`)) return;
+      this.$emit("window-resize");
+      this.unMove();
+      if (!this.settings.disableBodyMove) this.moveElements(document.body);
+      this.moveElements(this.settings.move);
+      this.colorizeBar();
+    }, 200));
     this.confirmShow()
       .then(() => {
         this.$emit("before-created");
@@ -172,18 +181,22 @@ class App {
     this.$emit("show-bar", this.bar);
   }
 
-  hideBar() {
-    if (!document.querySelector(`#${this.id}`)) return;
-    this.bar.classList.remove("hello-bar--is-visible");
-    sessionStorage.setItem("hello-bar--session-showed", true);
-    localStorage.setItem("hello-bar--user-showed", true);
+  unMove() {
     const movedElements = document.querySelectorAll(".hello-bar--has-moved");
     for (let i = 0; i < movedElements.length; i++) {
       const currentMargin = parseInt(movedElements[i].style[this.marginProp]);
       movedElements[i].style[this.marginProp] = `${currentMargin -
         this.height}px`;
       movedElements[i].classList.remove("hello-bar--has-moved");
     }
+  }
+
+  hideBar() {
+    if (!document.querySelector(`#${this.id}`)) return;
+    this.bar.classList.remove("hello-bar--is-visible");
+    sessionStorage.setItem("hello-bar--session-showed", true);
+    localStorage.setItem("hello-bar--user-showed", true);
+    this.unMove();
     setTimeout(() => {
       this.bar.parentNode.removeChild(this.bar);
     }, (this.settings.duration || 500) + 1);
@@ -232,12 +245,6 @@ class App {
     this.bar.style.color = textColor;
     this.bar.style.textAlign = this.settings.align || "center";
     if (document.querySelector(".hello-bar p.hello-bar-text .cta")) {
-      document.querySelector(
-        ".hello-bar p.hello-bar-text .cta"
-      ).style.height = `${this.height}px`;
-      document.querySelector(
-        ".hello-bar p.hello-bar-text .cta"
-      ).style.lineHeight = `${this.height}px`;
       document.querySelector(".hello-bar p.hello-bar-text .cta").style.color =
         this.settings.background || "#eeeeee";
       document.querySelector(

src/lib/css/App.css

@@ -26,11 +26,14 @@
     overflow-y: hidden;
     margin-right: 1.5rem;
     overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 2rem;
 }
 
 .hello-bar p.hello-bar-text {
-    margin: 0;
-    padding: 0.66rem;
+    margin: 0 auto;
     text-align: inherit;
     max-width: 100%;
     line-height: 1;
@@ -45,9 +48,7 @@
     vertical-align: middle;
     width: auto;
     border: none;
-    padding: 0 1rem;
-    margin-top: -0.66rem;
-    margin-bottom: -0.66rem;
+    padding: 0.3rem 1rem;
     border: 0.3rem solid;
     border-radius: 10rem;
     font: inherit;
@@ -61,13 +62,6 @@
     color: inherit;
     font-weight: bold;
 }
-.hello-bar p.hello-bar-text::before,
-.hello-bar p.hello-bar-text::after {
-    content: "";
-    display: inline-block;
-    background-color: red;
-    width: 2rem;
-}
 .hello-bar .hello-bar-text--after {
     position: absolute;
     right: 1rem;
@@ -103,13 +97,11 @@
 .hello-bar.hello-bar--size-large {
     font-size: 120%;
 }
-.hello-bar.hello-bar--size-large p.hello-bar-text {
-    padding: 1rem;
+.hello-bar.hello-bar--size-large .hello-bar-container {
+    height: 4rem;
 }
 .hello-bar.hello-bar--size-large p.hello-bar-text .cta {
-    padding: 0 1.25rem;
-    margin-top: -1rem;
-    margin-bottom: -1rem;
+    padding: 0.75rem 1.25rem;
     border: 0.5rem solid;
     margin-left: 0.5rem;
 }

yarn.lock

@@ -2949,6 +2949,11 @@ date-now@^0.1.4:
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
   integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 [email protected], debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"