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

Simplify filter bar: 7 equal-width items in clean grid

Browse Source 
- 7 columns at 1200px+ (all items on one row)
- 4 columns at 768-1200px
- 2 columns at 0-768px
- Each item (Type, Location, Beds, Min, Max, Search, Reset) is equal width
- Removed complex nested structures

🤖 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:55:28 -06:00
parent 775c57a678
commit 8bea4b611d
3 changed files with 48 additions and 87 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
+39 -41
View File
@@ -28,8 +28,7 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
<div class="property-filters" id="property-filters" data-ajax-url="<?php echo esc_url(admin_url('admin-ajax.php')); ?>"> <div class="property-filters" id="property-filters" data-ajax-url="<?php echo esc_url(admin_url('admin-ajax.php')); ?>">
<form class="filters-form" method="get" action="<?php echo esc_url(get_post_type_archive_link('property')); ?>"> <form class="filters-form" method="get" action="<?php echo esc_url(get_post_type_archive_link('property')); ?>">
<div class="filters-row"> <div class="filters-row">
<!-- Property Type --> <div class="filter-item">
<div class="filter-group filter-group-type">
<label for="filter-type" class="filter-label">Type</label> <label for="filter-type" class="filter-label">Type</label>
<select name="property_type" id="filter-type" class="filter-select"> <select name="property_type" id="filter-type" class="filter-select">
<option value="">All Types</option> <option value="">All Types</option>
@@ -41,8 +40,7 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
</select> </select>
</div> </div>
<!-- Location --> <div class="filter-item">
<div class="filter-group filter-group-location">
<label for="filter-location" class="filter-label">Location</label> <label for="filter-location" class="filter-label">Location</label>
<select name="property_location" id="filter-location" class="filter-select"> <select name="property_location" id="filter-location" class="filter-select">
<option value="">All</option> <option value="">All</option>
@@ -54,8 +52,7 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
</select> </select>
</div> </div>
<!-- Bedrooms --> <div class="filter-item">
<div class="filter-group filter-group-beds">
<label for="filter-beds" class="filter-label">Beds</label> <label for="filter-beds" class="filter-label">Beds</label>
<select name="beds" id="filter-beds" class="filter-select"> <select name="beds" id="filter-beds" class="filter-select">
<option value="">Any</option> <option value="">Any</option>
@@ -67,44 +64,45 @@ $property_locations = get_terms(array('taxonomy' => 'property_location', 'hide_e
</select> </select>
</div> </div>
<!-- Price Range --> <div class="filter-item">
<div class="filter-group filter-group-price"> <label for="filter-min-price" class="filter-label">Min Price</label>
<label class="filter-label">Price Range</label> <select name="min_price" id="filter-min-price" class="filter-select">
<div class="price-inputs"> <option value="">No Min</option>
<select name="min_price" id="filter-min-price" class="filter-select"> <option value="50000" <?php selected($current_min_price, 50000); ?>>$50k</option>
<option value="">Min</option> <option value="100000" <?php selected($current_min_price, 100000); ?>>$100k</option>
<option value="50000" <?php selected($current_min_price, 50000); ?>>$50k</option> <option value="150000" <?php selected($current_min_price, 150000); ?>>$150k</option>
<option value="100000" <?php selected($current_min_price, 100000); ?>>$100k</option> <option value="200000" <?php selected($current_min_price, 200000); ?>>$200k</option>
<option value="150000" <?php selected($current_min_price, 150000); ?>>$150k</option> <option value="250000" <?php selected($current_min_price, 250000); ?>>$250k</option>
<option value="200000" <?php selected($current_min_price, 200000); ?>>$200k</option> <option value="300000" <?php selected($current_min_price, 300000); ?>>$300k</option>
<option value="250000" <?php selected($current_min_price, 250000); ?>>$250k</option> <option value="400000" <?php selected($current_min_price, 400000); ?>>$400k</option>
<option value="300000" <?php selected($current_min_price, 300000); ?>>$300k</option> <option value="500000" <?php selected($current_min_price, 500000); ?>>$500k</option>
<option value="400000" <?php selected($current_min_price, 400000); ?>>$400k</option> </select>
<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</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>
<!-- Actions --> <div class="filter-item">
<div class="filter-group filter-group-actions"> <label for="filter-max-price" class="filter-label">Max Price</label>
<select name="max_price" id="filter-max-price" class="filter-select">
<option value="">No 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 class="filter-item filter-item-button">
<label class="filter-label">&nbsp;</label> <label class="filter-label">&nbsp;</label>
<div class="filters-buttons"> <button type="submit" class="btn btn-primary">Search</button>
<button type="submit" class="btn btn-primary filters-submit">Search</button> </div>
<a href="<?php echo esc_url(get_post_type_archive_link('property')); ?>" class="btn btn-secondary filters-reset">Reset</a>
</div> <div class="filter-item filter-item-button">
<label class="filter-label">&nbsp;</label>
<a href="<?php echo esc_url(get_post_type_archive_link('property')); ?>" class="btn btn-secondary">Reset</a>
</div> </div>
</div> </div>
</form> </form>
wp-content/themes/homeproz/template-parts/property/property-filters.scss
+8 -45
View File
@@ -179,47 +179,33 @@
} }
.filters-form { .filters-form {
display: flex; display: block;
flex-direction: column;
gap: 1rem;
} }
.filters-row { .filters-row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
gap: 0.75rem; gap: 0.75rem;
@media (min-width: 768px) { @media (min-width: 768px) {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
} }
@media (min-width: 1024px) { @media (min-width: 1200px) {
// Type, Location, Beds, Price(wide), Actions grid-template-columns: repeat(7, 1fr);
grid-template-columns: 1fr 1fr 1fr minmax(220px, 1.5fr) auto;
gap: 0.75rem;
} }
} }
// Filter Groups .filter-item {
.filter-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.375rem; gap: 0.375rem;
} }
.filter-group-actions { .filter-item-button {
@media (min-width: 1200px) {
min-width: 160px;
}
}
.filters-buttons {
display: flex;
gap: 0.5rem;
.btn { .btn {
width: 100%;
padding: 0.625rem 1rem; padding: 0.625rem 1rem;
font-size: 0.875rem;
} }
} }
@@ -251,29 +237,6 @@
} }
} }
// Price Input Group
.filter-group-price {
@media (min-width: 1024px) {
grid-column: span 1;
}
}
.price-inputs {
display: flex;
align-items: center;
gap: 0.5rem;
.filter-select {
flex: 1;
min-width: 0;
}
}
.price-separator {
color: var(--color-text-muted);
flex-shrink: 0;
}
// Loading State // Loading State
.property-filters.is-loading { .property-filters.is-loading {