Single property: Fixed contact sidebar, full-width content area
This commit is contained in:
Hanson.xyz Dev
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -62,140 +62,138 @@ while (have_posts()) :
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<!-- Fixed Sidebar -->
|
||||||
|
<aside class="single-property-sidebar">
|
||||||
|
<?php get_template_part('template-parts/property/property-agent', null, array('agent' => $listing_agent, 'property_id' => $property_id)); ?>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="single-property-layout">
|
<!-- Main Content (full width) -->
|
||||||
<!-- Main Content -->
|
<div class="single-property-content">
|
||||||
<div class="single-property-content">
|
<!-- Gallery -->
|
||||||
<!-- Gallery -->
|
<?php get_template_part('template-parts/property/property-gallery', null, array('gallery' => $gallery, 'property_id' => $property_id)); ?>
|
||||||
<?php get_template_part('template-parts/property/property-gallery', null, array('gallery' => $gallery, 'property_id' => $property_id)); ?>
|
|
||||||
|
|
||||||
<!-- Property Header -->
|
<!-- Property Header -->
|
||||||
<header class="property-header">
|
<header class="property-header">
|
||||||
<div class="property-header-top">
|
<div class="property-header-top">
|
||||||
<?php if ($status) : ?>
|
<?php if ($status) : ?>
|
||||||
<span class="badge <?php echo esc_attr($status_class); ?>"><?php echo esc_html($status); ?></span>
|
<span class="badge <?php echo esc_attr($status_class); ?>"><?php echo esc_html($status); ?></span>
|
||||||
<?php endif; ?>
|
|
||||||
<?php if ($type) : ?>
|
|
||||||
<span class="property-type"><?php echo esc_html($type); ?></span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="property-title"><?php echo esc_html(homeproz_format_price($price)); ?></h1>
|
|
||||||
|
|
||||||
<p class="property-address">
|
|
||||||
<svg width="20" height="20" 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"/>
|
|
||||||
<circle cx="12" cy="10" r="3"/>
|
|
||||||
</svg>
|
|
||||||
<?php echo esc_html($full_address); ?>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<?php if ($mls_number) : ?>
|
|
||||||
<p class="property-mls">MLS# <?php echo esc_html($mls_number); ?></p>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</header>
|
<?php if ($type) : ?>
|
||||||
|
<span class="property-type"><?php echo esc_html($type); ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Property Specs -->
|
<h1 class="property-title"><?php echo esc_html(homeproz_format_price($price)); ?></h1>
|
||||||
<?php if ($bedrooms || $bathrooms || $square_feet || $lot_size || $year_built || $garage) : ?>
|
|
||||||
<section class="property-specs-section">
|
<p class="property-address">
|
||||||
<h2 class="section-title">Property Details</h2>
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||||
<ul class="property-specs-grid">
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||||
<?php if ($bedrooms) : ?>
|
<circle cx="12" cy="10" r="3"/>
|
||||||
<li class="spec-item">
|
</svg>
|
||||||
<span class="spec-label">Bedrooms</span>
|
<?php echo esc_html($full_address); ?>
|
||||||
<span class="spec-value"><?php echo esc_html($bedrooms); ?></span>
|
</p>
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
<?php if ($mls_number) : ?>
|
||||||
<?php if ($bathrooms) : ?>
|
<p class="property-mls">MLS# <?php echo esc_html($mls_number); ?></p>
|
||||||
<li class="spec-item">
|
|
||||||
<span class="spec-label">Bathrooms</span>
|
|
||||||
<span class="spec-value"><?php echo esc_html($bathrooms); ?></span>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php if ($square_feet) : ?>
|
|
||||||
<li class="spec-item">
|
|
||||||
<span class="spec-label">Square Feet</span>
|
|
||||||
<span class="spec-value"><?php echo esc_html(number_format($square_feet)); ?></span>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php if ($lot_size) : ?>
|
|
||||||
<li class="spec-item">
|
|
||||||
<span class="spec-label">Lot Size</span>
|
|
||||||
<span class="spec-value"><?php echo esc_html($lot_size); ?></span>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php if ($year_built) : ?>
|
|
||||||
<li class="spec-item">
|
|
||||||
<span class="spec-label">Year Built</span>
|
|
||||||
<span class="spec-value"><?php echo esc_html($year_built); ?></span>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php if ($garage) : ?>
|
|
||||||
<li class="spec-item">
|
|
||||||
<span class="spec-label">Garage</span>
|
|
||||||
<span class="spec-value"><?php echo esc_html($garage); ?> Car</span>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
</header>
|
||||||
|
|
||||||
<!-- Description -->
|
<!-- Property Specs -->
|
||||||
<section class="property-description">
|
<?php if ($bedrooms || $bathrooms || $square_feet || $lot_size || $year_built || $garage) : ?>
|
||||||
<h2 class="section-title">Description</h2>
|
<section class="property-specs-section">
|
||||||
<?php if ($short_description) : ?>
|
<h2 class="section-title">Property Details</h2>
|
||||||
<p class="property-short-desc"><?php echo esc_html($short_description); ?></p>
|
<ul class="property-specs-grid">
|
||||||
<?php endif; ?>
|
<?php if ($bedrooms) : ?>
|
||||||
<div class="property-full-desc">
|
<li class="spec-item">
|
||||||
<?php the_content(); ?>
|
<span class="spec-label">Bedrooms</span>
|
||||||
</div>
|
<span class="spec-value"><?php echo esc_html($bedrooms); ?></span>
|
||||||
|
</li>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ($bathrooms) : ?>
|
||||||
|
<li class="spec-item">
|
||||||
|
<span class="spec-label">Bathrooms</span>
|
||||||
|
<span class="spec-value"><?php echo esc_html($bathrooms); ?></span>
|
||||||
|
</li>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ($square_feet) : ?>
|
||||||
|
<li class="spec-item">
|
||||||
|
<span class="spec-label">Square Feet</span>
|
||||||
|
<span class="spec-value"><?php echo esc_html(number_format($square_feet)); ?></span>
|
||||||
|
</li>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ($lot_size) : ?>
|
||||||
|
<li class="spec-item">
|
||||||
|
<span class="spec-label">Lot Size</span>
|
||||||
|
<span class="spec-value"><?php echo esc_html($lot_size); ?></span>
|
||||||
|
</li>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ($year_built) : ?>
|
||||||
|
<li class="spec-item">
|
||||||
|
<span class="spec-label">Year Built</span>
|
||||||
|
<span class="spec-value"><?php echo esc_html($year_built); ?></span>
|
||||||
|
</li>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ($garage) : ?>
|
||||||
|
<li class="spec-item">
|
||||||
|
<span class="spec-label">Garage</span>
|
||||||
|
<span class="spec-value"><?php echo esc_html($garage); ?> Car</span>
|
||||||
|
</li>
|
||||||
|
<?php endif; ?>
|
||||||
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- Features -->
|
<!-- Description -->
|
||||||
<?php if ($property_features && is_array($property_features)) : ?>
|
<section class="property-description">
|
||||||
<section class="property-features">
|
<h2 class="section-title">Description</h2>
|
||||||
<h2 class="section-title">Features & Amenities</h2>
|
<?php if ($short_description) : ?>
|
||||||
<ul class="features-list">
|
<p class="property-short-desc"><?php echo esc_html($short_description); ?></p>
|
||||||
<?php
|
|
||||||
$feature_labels = array(
|
|
||||||
'central_air' => 'Central Air',
|
|
||||||
'central_heat' => 'Central Heat',
|
|
||||||
'fireplace' => 'Fireplace',
|
|
||||||
'hardwood_floors' => 'Hardwood Floors',
|
|
||||||
'updated_kitchen' => 'Updated Kitchen',
|
|
||||||
'updated_bathrooms' => 'Updated Bathrooms',
|
|
||||||
'basement' => 'Basement',
|
|
||||||
'finished_basement' => 'Finished Basement',
|
|
||||||
'deck_patio' => 'Deck/Patio',
|
|
||||||
'pool' => 'Pool',
|
|
||||||
'fenced_yard' => 'Fenced Yard',
|
|
||||||
'sprinkler_system' => 'Sprinkler System',
|
|
||||||
'smart_home' => 'Smart Home Features',
|
|
||||||
'solar_panels' => 'Solar Panels',
|
|
||||||
'new_roof' => 'New Roof',
|
|
||||||
'new_windows' => 'New Windows',
|
|
||||||
'waterfront' => 'Waterfront',
|
|
||||||
'lake_access' => 'Lake Access',
|
|
||||||
);
|
|
||||||
foreach ($property_features as $feature) :
|
|
||||||
$label = isset($feature_labels[$feature]) ? $feature_labels[$feature] : ucwords(str_replace('_', ' ', $feature));
|
|
||||||
?>
|
|
||||||
<li class="feature-item">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
|
|
||||||
<polyline points="20 6 9 17 4 12"/>
|
|
||||||
</svg>
|
|
||||||
<?php echo esc_html($label); ?>
|
|
||||||
</li>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
<div class="property-full-desc">
|
||||||
|
<?php the_content(); ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Features -->
|
||||||
<aside class="single-property-sidebar">
|
<?php if ($property_features && is_array($property_features)) : ?>
|
||||||
<?php get_template_part('template-parts/property/property-agent', null, array('agent' => $listing_agent, 'property_id' => $property_id)); ?>
|
<section class="property-features">
|
||||||
</aside>
|
<h2 class="section-title">Features & Amenities</h2>
|
||||||
|
<ul class="features-list">
|
||||||
|
<?php
|
||||||
|
$feature_labels = array(
|
||||||
|
'central_air' => 'Central Air',
|
||||||
|
'central_heat' => 'Central Heat',
|
||||||
|
'fireplace' => 'Fireplace',
|
||||||
|
'hardwood_floors' => 'Hardwood Floors',
|
||||||
|
'updated_kitchen' => 'Updated Kitchen',
|
||||||
|
'updated_bathrooms' => 'Updated Bathrooms',
|
||||||
|
'basement' => 'Basement',
|
||||||
|
'finished_basement' => 'Finished Basement',
|
||||||
|
'deck_patio' => 'Deck/Patio',
|
||||||
|
'pool' => 'Pool',
|
||||||
|
'fenced_yard' => 'Fenced Yard',
|
||||||
|
'sprinkler_system' => 'Sprinkler System',
|
||||||
|
'smart_home' => 'Smart Home Features',
|
||||||
|
'solar_panels' => 'Solar Panels',
|
||||||
|
'new_roof' => 'New Roof',
|
||||||
|
'new_windows' => 'New Windows',
|
||||||
|
'waterfront' => 'Waterfront',
|
||||||
|
'lake_access' => 'Lake Access',
|
||||||
|
);
|
||||||
|
foreach ($property_features as $feature) :
|
||||||
|
$label = isset($feature_labels[$feature]) ? $feature_labels[$feature] : ucwords(str_replace('_', ' ', $feature));
|
||||||
|
?>
|
||||||
|
<li class="feature-item">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
|
||||||
|
<polyline points="20 6 9 17 4 12"/>
|
||||||
|
</svg>
|
||||||
|
<?php echo esc_html($label); ?>
|
||||||
|
</li>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -51,16 +51,8 @@
|
|||||||
padding-bottom: 4rem;
|
padding-bottom: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.single-property-layout {
|
.single-property-content {
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
grid-template-columns: 1fr 350px;
|
|
||||||
gap: 3rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Property Header
|
// Property Header
|
||||||
@@ -208,12 +200,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sidebar
|
// Fixed Sidebar
|
||||||
.single-property-sidebar {
|
.single-property-sidebar {
|
||||||
|
display: none;
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
position: sticky;
|
display: block;
|
||||||
top: 100px;
|
position: fixed;
|
||||||
align-self: start;
|
top: 120px;
|
||||||
|
right: 2rem;
|
||||||
|
width: 320px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
right: calc((100vw - 1200px) / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user