Added floating phone button

ZoomREI · Nov 21, 2024 · 7359f50 · 7359f50
2 parents 7ccafa7 + a4d9c48
commit 7359f50
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 0 deletions.
diff --git a/wp-content/plugins/chris-buys-blocks/src/ao-header/render.php b/wp-content/plugins/chris-buys-blocks/src/ao-header/render.php
@@ -26,6 +26,10 @@
                 <span class="ao-header__phone--text">Call Us On </span>
                 <span class="ao-header__phone--number"><?php echo $phoneNumber; ?></span>
             </div>
+
+            <div class="contact-phone">
+                <?php echo get_responsive_image('ao-header/phone-icon', 'Phone Icon', 'phone-icon'); ?>
+            </div>
         </a>
     </div>
 </header>
diff --git a/wp-content/plugins/chris-buys-blocks/src/ao-header/style.css b/wp-content/plugins/chris-buys-blocks/src/ao-header/style.css
@@ -71,6 +71,20 @@
 	height: 60%;
 	object-fit: contain;
 }
+.contact-phone {
+	position: fixed;
+	right: 1rem;
+	bottom: 20vh;
+	z-index: 99;
+	background-color: white;
+	border-radius: 50%;
+	padding: 0.125rem;
+}
+
+.contact-phone img {
+	width: 3rem;
+	height: auto;
+}
 
 @media (min-width: 1024px) {
 	.ao-header__phone--icon {
@@ -83,6 +97,10 @@
 	/* .ao-header__phone-icon img {
 		max-width: none;
 	} */
+
+	.ao-header .contact-phone{
+		display: none !important;
+	}
 }
 
 .ao-header__phone--number {

diff --git a/wp-content/plugins/chris-buys-blocks/src/cw-header/render.php b/wp-content/plugins/chris-buys-blocks/src/cw-header/render.php
@@ -33,6 +33,10 @@
                 <span class="cw-header__phone--text">Call Us On</span>
                 <span class="cw-header__phone--number"><?php echo $phoneNumber; ?></span>
             </div>
+
+            <div class="contact-phone">
+                <?php echo get_responsive_image('cw-header/phone-icon', 'Phone Icon', 'phone-icon'); ?>
+            </div>
         </a>
     </div>
 </header>
diff --git a/wp-content/plugins/chris-buys-blocks/src/cw-header/style.css b/wp-content/plugins/chris-buys-blocks/src/cw-header/style.css
@@ -143,6 +143,20 @@
 		object-fit: contain;
 	}
 }
+.contact-phone {
+	position: fixed;
+	right: 1rem;
+	bottom: 20vh;
+	z-index: 99;
+	background-color: white;
+	border-radius: 50%;
+	padding: 0.125rem;
+}
+
+.contact-phone img {
+	width: 3rem;
+	height: auto;
+}
 
 .cw-header__phone--number {
 	text-decoration: unset;
@@ -157,4 +171,7 @@
 		margin-left: 0.2rem;
 		margin-top: 0px;
 	}
+	.cw-header .contact-phone{
+		display: none !important;
+	}
 }
diff --git a/wp-content/plugins/chris-buys-blocks/src/lc-header/render.php b/wp-content/plugins/chris-buys-blocks/src/lc-header/render.php
@@ -25,6 +25,10 @@
                 <span class="lc-header__phone--text">Call Us On</span>
                 <span class="lc-header__phone--number"><?php echo $phoneNumber; ?></span>
             </div>
+
+            <div class="contact-phone">
+                <?php echo get_responsive_image('lc-header/phone-icon', 'Phone Icon', 'phone-icon'); ?>
+            </div>
         </a>
     </div>
 </header>
diff --git a/wp-content/plugins/chris-buys-blocks/src/lc-header/style.css b/wp-content/plugins/chris-buys-blocks/src/lc-header/style.css
@@ -54,6 +54,20 @@
 .lc-header__phone--icon img {
 	max-width: 0.625rem;
 }
+.contact-phone {
+	position: fixed;
+	right: 1rem;
+	bottom: 20vh;
+	z-index: 99;
+	background-color: white;
+	border-radius: 50%;
+	padding: 0.125rem;
+}
+
+.contact-phone img {
+	width: 3rem;
+	height: auto;
+}
 
 @media (min-width: 1024px) {
 	.lc-header__phone--icon {
@@ -63,6 +77,10 @@
 	.lc-header__phone--icon img {
 		max-width: none;
 	}
+
+	.lc-header .contact-phone{
+		display: none !important;
+	}
 }
 
 .lc-header__phone--number {