Single property: Fixed contact sidebar, full-width content area
This commit is contained in:
Hanson.xyz Dev
+1
-1
File diff suppressed because one or more lines are too long
@@ -62,140 +62,138 @@ while (have_posts()) :
|
||||
</div>
|
||||
</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="single-property-layout">
|
||||
<!-- Main Content -->
|
||||
<div class="single-property-content">
|
||||
<!-- Gallery -->
|
||||
<?php get_template_part('template-parts/property/property-gallery', null, array('gallery' => $gallery, 'property_id' => $property_id)); ?>
|
||||
<!-- Main Content (full width) -->
|
||||
<div class="single-property-content">
|
||||
<!-- Gallery -->
|
||||
<?php get_template_part('template-parts/property/property-gallery', null, array('gallery' => $gallery, 'property_id' => $property_id)); ?>
|
||||
|
||||
<!-- Property Header -->
|
||||
<header class="property-header">
|
||||
<div class="property-header-top">
|
||||
<?php if ($status) : ?>
|
||||
<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>
|
||||
<!-- Property Header -->
|
||||
<header class="property-header">
|
||||
<div class="property-header-top">
|
||||
<?php if ($status) : ?>
|
||||
<span class="badge <?php echo esc_attr($status_class); ?>"><?php echo esc_html($status); ?></span>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
<?php if ($type) : ?>
|
||||
<span class="property-type"><?php echo esc_html($type); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Property Specs -->
|
||||
<?php if ($bedrooms || $bathrooms || $square_feet || $lot_size || $year_built || $garage) : ?>
|
||||
<section class="property-specs-section">
|
||||
<h2 class="section-title">Property Details</h2>
|
||||
<ul class="property-specs-grid">
|
||||
<?php if ($bedrooms) : ?>
|
||||
<li class="spec-item">
|
||||
<span class="spec-label">Bedrooms</span>
|
||||
<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>
|
||||
<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; ?>
|
||||
</header>
|
||||
|
||||
<!-- Description -->
|
||||
<section class="property-description">
|
||||
<h2 class="section-title">Description</h2>
|
||||
<?php if ($short_description) : ?>
|
||||
<p class="property-short-desc"><?php echo esc_html($short_description); ?></p>
|
||||
<?php endif; ?>
|
||||
<div class="property-full-desc">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
<!-- Property Specs -->
|
||||
<?php if ($bedrooms || $bathrooms || $square_feet || $lot_size || $year_built || $garage) : ?>
|
||||
<section class="property-specs-section">
|
||||
<h2 class="section-title">Property Details</h2>
|
||||
<ul class="property-specs-grid">
|
||||
<?php if ($bedrooms) : ?>
|
||||
<li class="spec-item">
|
||||
<span class="spec-label">Bedrooms</span>
|
||||
<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>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Features -->
|
||||
<?php if ($property_features && is_array($property_features)) : ?>
|
||||
<section class="property-features">
|
||||
<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>
|
||||
<!-- Description -->
|
||||
<section class="property-description">
|
||||
<h2 class="section-title">Description</h2>
|
||||
<?php if ($short_description) : ?>
|
||||
<p class="property-short-desc"><?php echo esc_html($short_description); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="property-full-desc">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Features -->
|
||||
<?php if ($property_features && is_array($property_features)) : ?>
|
||||
<section class="property-features">
|
||||
<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>
|
||||
</main>
|
||||
|
||||
@@ -51,16 +51,8 @@
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.single-property-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
.single-property-content {
|
||||
padding-top: 2rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 1fr 350px;
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Property Header
|
||||
@@ -208,12 +200,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
// Fixed Sidebar
|
||||
.single-property-sidebar {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
align-self: start;
|
||||
display: block;
|
||||
position: fixed;
|
||||
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