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

Redesign property filters layout: single row, better proportions

Browse Source 
- All filters now on one row at 1200px+
- Beds field narrower (70px) for single-digit values
- Price range wider with compact $Xk format
- Sort, Search, Reset moved inline after price range
- Shorter labels: Type, Status, Beds, Sort
- Responsive: 2-col mobile, 4-col tablet, full row desktop

🤖 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-11-30 19:43:44 -06:00
parent cefcd0f98d
commit 1dd874091c
3 changed files with 233 additions and 77 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/template-parts/property/property-filters.php
+40 -36
View File
@@ -29,8 +29,8 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
<form class="filters-form" method="get" action="<?php echo esc_url(get_post_type_archive_link('property')); ?>">
<div class="filters-row">
<!-- Property Type -->
<div class="filter-group">
<label for="filter-type" class="filter-label">Property Type</label>
<div class="filter-group filter-group-type">
<label for="filter-type" class="filter-label">Type</label>
<select name="property_type" id="filter-type" class="filter-select">
<option value="">All Types</option>
<?php foreach ($property_types as $type) : ?>
@@ -42,10 +42,10 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
</div>
<!-- Property Status -->
<div class="filter-group">
<div class="filter-group filter-group-status">
<label for="filter-status" class="filter-label">Status</label>
<select name="property_status" id="filter-status" class="filter-select">
<option value="">All Statuses</option>
<option value="">All</option>
<?php foreach ($property_statuses as $status) : ?>
<option value="<?php echo esc_attr($status->slug); ?>" <?php selected($current_status, $status->slug); ?>>
<?php echo esc_html($status->name); ?>
@@ -55,10 +55,10 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
</div>
<!-- Location -->
<div class="filter-group">
<div class="filter-group filter-group-location">
<label for="filter-location" class="filter-label">Location</label>
<select name="property_location" id="filter-location" class="filter-select">
<option value="">All Locations</option>
<option value="">All</option>
<?php foreach ($property_locations as $location) : ?>
<option value="<?php echo esc_attr($location->slug); ?>" <?php selected($current_location, $location->slug); ?>>
<?php echo esc_html($location->name); ?>
@@ -68,8 +68,8 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
</div>
<!-- Bedrooms -->
<div class="filter-group">
<label for="filter-beds" class="filter-label">Bedrooms</label>
<div class="filter-group filter-group-beds">
<label for="filter-beds" class="filter-label">Beds</label>
<select name="beds" id="filter-beds" class="filter-select">
<option value="">Any</option>
<option value="1" <?php selected($current_beds, 1); ?>>1+</option>
@@ -85,47 +85,51 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
<label class="filter-label">Price Range</label>
<div class="price-inputs">
<select name="min_price" id="filter-min-price" class="filter-select">
<option value="">Min Price</option>
<option value="50000" <?php selected($current_min_price, 50000); ?>>$50,000</option>
<option value="100000" <?php selected($current_min_price, 100000); ?>>$100,000</option>
<option value="150000" <?php selected($current_min_price, 150000); ?>>$150,000</option>
<option value="200000" <?php selected($current_min_price, 200000); ?>>$200,000</option>
<option value="250000" <?php selected($current_min_price, 250000); ?>>$250,000</option>
<option value="300000" <?php selected($current_min_price, 300000); ?>>$300,000</option>
<option value="400000" <?php selected($current_min_price, 400000); ?>>$400,000</option>
<option value="500000" <?php selected($current_min_price, 500000); ?>>$500,000</option>
<option value="">Min</option>
<option value="50000" <?php selected($current_min_price, 50000); ?>>$50k</option>
<option value="100000" <?php selected($current_min_price, 100000); ?>>$100k</option>
<option value="150000" <?php selected($current_min_price, 150000); ?>>$150k</option>
<option value="200000" <?php selected($current_min_price, 200000); ?>>$200k</option>
<option value="250000" <?php selected($current_min_price, 250000); ?>>$250k</option>
<option value="300000" <?php selected($current_min_price, 300000); ?>>$300k</option>
<option value="400000" <?php selected($current_min_price, 400000); ?>>$400k</option>
<option value="500000" <?php selected($current_min_price, 500000); ?>>$500k</option>
</select>
<span class="price-separator">-</span>
<select name="max_price" id="filter-max-price" class="filter-select">
<option value="">Max Price</option>
<option value="100000" <?php selected($current_max_price, 100000); ?>>$100,000</option>
<option value="150000" <?php selected($current_max_price, 150000); ?>>$150,000</option>
<option value="200000" <?php selected($current_max_price, 200000); ?>>$200,000</option>
<option value="250000" <?php selected($current_max_price, 250000); ?>>$250,000</option>
<option value="300000" <?php selected($current_max_price, 300000); ?>>$300,000</option>
<option value="400000" <?php selected($current_max_price, 400000); ?>>$400,000</option>
<option value="500000" <?php selected($current_max_price, 500000); ?>>$500,000</option>
<option value="750000" <?php selected($current_max_price, 750000); ?>>$750,000</option>
<option value="1000000" <?php selected($current_max_price, 1000000); ?>>$1,000,000+</option>
<option value="">Max</option>
<option value="100000" <?php selected($current_max_price, 100000); ?>>$100k</option>
<option value="150000" <?php selected($current_max_price, 150000); ?>>$150k</option>
<option value="200000" <?php selected($current_max_price, 200000); ?>>$200k</option>
<option value="250000" <?php selected($current_max_price, 250000); ?>>$250k</option>
<option value="300000" <?php selected($current_max_price, 300000); ?>>$300k</option>
<option value="400000" <?php selected($current_max_price, 400000); ?>>$400k</option>
<option value="500000" <?php selected($current_max_price, 500000); ?>>$500k</option>
<option value="750000" <?php selected($current_max_price, 750000); ?>>$750k</option>
<option value="1000000" <?php selected($current_max_price, 1000000); ?>>$1M+</option>
</select>
</div>
</div>
</div>
<div class="filters-actions">
<!-- Sort -->
<div class="filter-group filter-group-sort">
<label for="filter-sort" class="filter-label">Sort By</label>
<label for="filter-sort" class="filter-label">Sort</label>
<select name="sort" id="filter-sort" class="filter-select">
<option value="newest" <?php selected($current_sort, 'newest'); ?>>Newest First</option>
<option value="oldest" <?php selected($current_sort, 'oldest'); ?>>Oldest First</option>
<option value="price_low" <?php selected($current_sort, 'price_low'); ?>>Price: Low to High</option>
<option value="price_high" <?php selected($current_sort, 'price_high'); ?>>Price: High to Low</option>
<option value="newest" <?php selected($current_sort, 'newest'); ?>>Newest</option>
<option value="oldest" <?php selected($current_sort, 'oldest'); ?>>Oldest</option>
<option value="price_low" <?php selected($current_sort, 'price_low'); ?>>Price: Low</option>
<option value="price_high" <?php selected($current_sort, 'price_high'); ?>>Price: High</option>
</select>
</div>
<button type="submit" class="btn btn-primary filters-submit">Search</button>
<a href="<?php echo esc_url(get_post_type_archive_link('property')); ?>" class="btn btn-secondary filters-reset">Reset</a>
<!-- Actions -->
<div class="filter-group filter-group-actions">
<label class="filter-label">&nbsp;</label>
<div class="filters-buttons">
<button type="submit" class="btn btn-primary filters-submit">Search</button>
<a href="<?php echo esc_url(get_post_type_archive_link('property')); ?>" class="btn btn-secondary filters-reset">Reset</a>
</div>
</div>
</div>
</form>
</div>
wp-content/themes/homeproz/template-parts/property/property-filters.scss
+192 -40
View File
@@ -23,6 +23,161 @@
max-width: 600px;
}
// View Toggle (Grid/Map)
.view-toggle {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.view-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
text-decoration: none;
transition: all 0.15s ease;
&:hover {
color: var(--color-text);
border-color: var(--color-accent);
}
&.active {
color: var(--color-text);
background-color: var(--color-accent);
border-color: var(--color-accent);
}
svg {
flex-shrink: 0;
}
}
// Map + List Layout
.property-map-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
@media (min-width: 1024px) {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
.property-map-container {
position: relative;
@media (min-width: 1024px) {
position: sticky;
top: 100px;
height: calc(100vh - 150px);
}
}
.property-map {
width: 100%;
height: 400px;
background-color: var(--color-bg-card);
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid var(--color-border);
@media (min-width: 1024px) {
height: 100%;
}
}
.property-list-container {
.property-grid {
grid-template-columns: 1fr;
@media (min-width: 640px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
grid-template-columns: 1fr;
}
@media (min-width: 1200px) {
grid-template-columns: repeat(2, 1fr);
}
}
}
// Custom Map Marker
.property-marker {
background: transparent;
.marker-pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: var(--color-accent);
position: absolute;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
&::after {
content: '';
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: var(--color-bg-dark);
position: absolute;
border-radius: 50%;
}
}
}
// Map Popup
.map-popup {
font-family: var(--font-body);
padding: 0.25rem;
strong {
font-size: 1rem;
color: var(--color-accent);
}
span {
font-size: 0.875rem;
color: #666;
}
a {
display: inline-block;
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-accent);
font-weight: 500;
&:hover {
text-decoration: underline;
}
}
}
// Leaflet overrides for dark theme
.leaflet-popup-content-wrapper {
border-radius: 0.5rem;
}
.leaflet-popup-tip-container {
margin-top: -1px;
}
// Filters Container
.property-filters {
background-color: var(--color-bg-card);
@@ -34,21 +189,22 @@
.filters-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: 1rem;
}
.filters-row {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
@media (min-width: 640px) {
grid-template-columns: repeat(2, 1fr);
@media (min-width: 768px) {
grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr) 2fr;
gap: 1.25rem;
@media (min-width: 1200px) {
// Type, Status, Location, Beds(narrow), Price(wide), Sort, Actions
grid-template-columns: 1fr 1fr 1fr 70px minmax(200px, 1.5fr) 100px auto;
gap: 0.75rem;
}
}
@@ -56,7 +212,35 @@
.filter-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.filter-group-beds {
@media (min-width: 1200px) {
max-width: 70px;
}
}
.filter-group-sort {
@media (min-width: 1200px) {
max-width: 100px;
}
}
.filter-group-actions {
@media (min-width: 1200px) {
min-width: 160px;
}
}
.filters-buttons {
display: flex;
gap: 0.5rem;
.btn {
padding: 0.625rem 1rem;
font-size: 0.875rem;
}
}
.filter-label {
@@ -110,38 +294,6 @@
flex-shrink: 0;
}
// Filters Actions
.filters-actions {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border);
@media (min-width: 768px) {
flex-wrap: nowrap;
}
}
.filter-group-sort {
flex: 1;
min-width: 150px;
@media (min-width: 768px) {
flex: 0 0 auto;
width: 180px;
}
}
.filters-submit,
.filters-reset {
flex-shrink: 0;
@media (max-width: 639px) {
flex: 1;
}
}
// Loading State
.property-filters.is-loading {