#47 Call-to-action button animations and responsive behavior corrections

ofcyln · Jun 19, 2020 · c1a0ac9 · c1a0ac9
1 parent 33335e2
commit c1a0ac9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 7 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,7 +6,7 @@
               [ngStyle]="{'z-index': '2', 'box-shadow': '0px 3px 9px -4px #333'}"></app-header>
 
   <section [ngStyle]="{'overflow-y': 'auto', 'height': 'calc(100% - 64px)'}"
-           class="w-100">
+           class="w-100 router-container">
     <router-outlet></router-outlet>
   </section>
 </main>
diff --git a/src/app/components/calculate/calculate.component.ts b/src/app/components/calculate/calculate.component.ts
@@ -75,7 +75,7 @@ export class CalculateComponent implements OnInit {
   captureScreen() {
     this.isLoading = true;
 
-    this.animate('#bmc-wbtn', 'animate');
+    this.animate('#bmc-wbtn', 'animate', '.donation-container');
     this.animate('#at4-share', 'animate');
     this.animate('.at-expanding-share-button-toggle-bg', 'animate');
 
@@ -95,22 +95,49 @@ export class CalculateComponent implements OnInit {
 
       this.isLoading = false;
 
-      this.stopAnimate('#bmc-wbtn', 'animate');
+      this.stopAnimate('#bmc-wbtn', 'animate', '.donation-container');
       this.stopAnimate('#at4-share', 'animate');
       this.stopAnimate('.at-expanding-share-button-toggle-bg', 'animate');
     });
   }
 
-  animate(querySelector: string, className: string) {
-    const affectedElement = document.querySelector(querySelector);
+  animate(querySelector: string, className: string, source?: string) {
+    const affectedElement = this.doc.querySelector(querySelector);
+
+    if (source === '.donation-container') {
+      const container = this.doc.querySelector('.router-container');
+      const node = this.doc.createElement('section');
+      node.classList.add('donation-container');
+      container?.appendChild(node);
+
+      const coffee = this.doc.querySelector('.donation-container');
+
+      if (!!coffee && !!affectedElement) {
+        coffee.appendChild(affectedElement);
+
+        coffee.classList.add(className);
+      }
+
+      return;
+    }
 
     if (affectedElement) {
       affectedElement.classList.add(className);
     }
   }
 
-  stopAnimate(querySelector: string, className: string) {
-    const affectedElement = document.querySelector(querySelector);
+  stopAnimate(querySelector: string, className: string, source?: string) {
+    const affectedElement = this.doc.querySelector(querySelector);
+
+    if (source === '.donation-container') {
+      const coffee = this.doc.querySelector('.donation-container');
+
+      if (!!coffee && !!affectedElement) {
+        coffee.classList.remove(className);
+      }
+
+      return;
+    }
 
     if (affectedElement) {
       affectedElement.classList.remove(className);

diff --git a/src/assets/scss/custom-add-this-service-styles.scss b/src/assets/scss/custom-add-this-service-styles.scss
@@ -75,6 +75,7 @@ body {
 					background: #fff !important;
 					animation-delay: 0.4s;
 					border-radius: 50%;
+					z-index: -1;
 					animation: bigger-wave 2s ease-out infinite;
 				}
 			}

diff --git a/src/assets/scss/custom-buymeacoffee-service-styles.scss b/src/assets/scss/custom-buymeacoffee-service-styles.scss
@@ -8,6 +8,16 @@ body {
 			height: 20px !important;
 			width: 20px !important;
 		}
+	}
+
+	.donation-container {
+		border-radius: 50%;
+		position: fixed;
+		width: 50px;
+		height: 50px;
+		bottom: 10px;
+		right: 10px;
+		z-index: 9;
 
 		&.animate {
 			&::before {
@@ -44,3 +54,14 @@ body {
 		right: 10px !important;
 	}
 }
+
+@media only screen and (max-width: 800px) {
+	body {
+		.donation-container {
+			width: 30px !important;
+			height: 30px !important;
+			right: initial !important;
+			left: 10px !important;
+		}
+	}
+}