brianhansonxyz/homeproz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make contact page icons clickable links

Browse Source 
- Map icon links to Google Maps
- Phone icon links to tel: URL
- Email icon links to mailto: URL
- Added hover effect on icon buttons
- Also fixed CF7 br tags display issue

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
2025-12-01 01:11:27 -06:00
parent e68426bb3d
commit f6c750170b
3 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-content/themes/homeproz/dist/assets/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-content/themes/homeproz/page-contact.php
+6 -6
View File
@@ -124,12 +124,12 @@ if ($property_inquiry) {
<div class="contact-info-list"> <div class="contact-info-list">
<?php if ($address) : ?> <?php if ($address) : ?>
<div class="contact-info-item"> <div class="contact-info-item">
<div class="contact-info-icon"> <a href="https://www.google.com/maps/search/?api=1&query=<?php echo urlencode($address); ?>" class="contact-info-icon" target="_blank" rel="noopener" aria-label="View on map">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/> <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/> <circle cx="12" cy="10" r="3"/>
</svg> </svg>
</div> </a>
<div class="contact-info-content"> <div class="contact-info-content">
<h4 class="contact-info-label">Office Address</h4> <h4 class="contact-info-label">Office Address</h4>
<p class="contact-info-value"> <p class="contact-info-value">
@@ -141,11 +141,11 @@ if ($property_inquiry) {
<?php if ($phone) : ?> <?php if ($phone) : ?>
<div class="contact-info-item"> <div class="contact-info-item">
<div class="contact-info-icon"> <a href="tel:<?php echo esc_attr(preg_replace('/[^0-9]/', '', $phone)); ?>" class="contact-info-icon" aria-label="Call us">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg> </svg>
</div> </a>
<div class="contact-info-content"> <div class="contact-info-content">
<h4 class="contact-info-label">Phone</h4> <h4 class="contact-info-label">Phone</h4>
<p class="contact-info-value"> <p class="contact-info-value">
@@ -159,12 +159,12 @@ if ($property_inquiry) {
<?php if ($email) : ?> <?php if ($email) : ?>
<div class="contact-info-item"> <div class="contact-info-item">
<div class="contact-info-icon"> <a href="mailto:<?php echo esc_attr($email); ?>" class="contact-info-icon" aria-label="Email us">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/> <polyline points="22,6 12,13 2,6"/>
</svg> </svg>
</div> </a>
<div class="contact-info-content"> <div class="contact-info-content">
<h4 class="contact-info-label">Email</h4> <h4 class="contact-info-label">Email</h4>
<p class="contact-info-value"> <p class="contact-info-value">
wp-content/themes/homeproz/template-parts/content/content-contact.scss
+11 -7
View File
@@ -86,17 +86,15 @@
} }
label { label {
display: flex; display: block;
flex-direction: column;
gap: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
color: var(--color-text); color: var(--color-text);
margin-bottom: 0; margin-bottom: 0.5rem;
}
br { br {
display: none; display: none;
}
} }
input[type="text"], input[type="text"],
@@ -180,6 +178,12 @@
background-color: var(--color-bg-card); background-color: var(--color-bg-card);
border-radius: 0.5rem; border-radius: 0.5rem;
color: var(--color-accent); color: var(--color-accent);
text-decoration: none;
&:hover {
background-color: var(--color-accent);
color: white;
}
} }
.contact-info-content { .contact-info-content {