From c1a0ac93b6748c05cc7bc960b691edbafd52066d Mon Sep 17 00:00:00 2001
From: Osman Fikret Ceylan <ofcyln@gmail.com>
Date: Fri, 19 Jun 2020 21:41:07 +0200
Subject: [PATCH] #47 Call-to-action button animations and responsive behavior
 corrections

---
 src/app/app.component.html                    |  2 +-
 .../calculate/calculate.component.ts          | 39 ++++++++++++++++---
 .../scss/custom-add-this-service-styles.scss  |  1 +
 .../custom-buymeacoffee-service-styles.scss   | 21 ++++++++++
 4 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3455f7b..ec5f495 100644
--- 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
index 8dcaf0f..211dd9f 100644
--- 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
index 42b1e9e..c95fef8 100644
--- 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
index 2ef637c..cdcd0ad 100644
--- 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;
+		}
+	}
+}