♑🛠️
- add show price preference(store in cookies)
This commit is contained in:
@@ -16,6 +16,38 @@
|
||||
<a href="/properties?type=rent" class="text-gray-200 hover:text-white transition">Rent</a>
|
||||
<a href="/properties/new" class="text-gray-200 hover:text-white transition">Sell</a>
|
||||
|
||||
<!-- Price Preference Toggle -->
|
||||
<div class="relative" id="pricePrefWrapper">
|
||||
<button type="button" onclick="togglePricePref()"
|
||||
class="flex items-center gap-1.5 text-gray-200 hover:text-white transition text-sm">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span id="pricePrefLabel">{{ {"total": "Total", "sqft": "/Sqft", "both": "Both"}[price_pref] }}</span>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="pricePrefDropdown"
|
||||
class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl z-50 py-1 border border-gray-200">
|
||||
<button onclick="setPricePref('total')"
|
||||
class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
|
||||
{% if price_pref == 'total' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
|
||||
Total Price
|
||||
</button>
|
||||
<button onclick="setPricePref('sqft')"
|
||||
class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
|
||||
{% if price_pref == 'sqft' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
|
||||
Price per Sq Ft
|
||||
</button>
|
||||
<button onclick="setPricePref('both')"
|
||||
class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
|
||||
{% if price_pref == 'both' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
|
||||
Both
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if user %}
|
||||
<a href="/dashboard" class="text-gray-200 hover:text-white transition">Dashboard</a>
|
||||
<div class="flex items-center space-x-3 ml-2">
|
||||
@@ -52,6 +84,27 @@
|
||||
<a href="/properties" class="text-gray-200 hover:text-white py-2">Buy</a>
|
||||
<a href="/properties?type=rent" class="text-gray-200 hover:text-white py-2">Rent</a>
|
||||
<a href="/properties/new" class="text-gray-200 hover:text-white py-2">Sell</a>
|
||||
<!-- Mobile Price Preference -->
|
||||
<div class="border-t border-white/20 pt-2 mt-1">
|
||||
<span class="text-xs text-gray-400 uppercase tracking-wide">Price Display</span>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<button onclick="setPricePref('total')"
|
||||
class="px-3 py-1 text-xs rounded-full transition
|
||||
{% if price_pref == 'total' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
|
||||
Total
|
||||
</button>
|
||||
<button onclick="setPricePref('sqft')"
|
||||
class="px-3 py-1 text-xs rounded-full transition
|
||||
{% if price_pref == 'sqft' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
|
||||
/Sqft
|
||||
</button>
|
||||
<button onclick="setPricePref('both')"
|
||||
class="px-3 py-1 text-xs rounded-full transition
|
||||
{% if price_pref == 'both' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
|
||||
Both
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% if user %}
|
||||
<a href="/dashboard" class="text-gray-200 hover:text-white py-2">Dashboard</a>
|
||||
<a href="/auth/logout" class="text-warm hover:text-warm-dark py-2 font-medium">Logout ({{ user.username }})</a>
|
||||
@@ -68,4 +121,20 @@
|
||||
document.getElementById('mobile-menu-btn')?.addEventListener('click', () => {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden');
|
||||
});
|
||||
|
||||
function togglePricePref() {
|
||||
document.getElementById('pricePrefDropdown').classList.toggle('hidden');
|
||||
}
|
||||
|
||||
function setPricePref(pref) {
|
||||
document.cookie = 'price_pref=' + pref + ';path=/;max-age=31536000;samesite=lax';
|
||||
location.reload();
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
var wrapper = document.getElementById('pricePrefWrapper');
|
||||
if (wrapper && !wrapper.contains(e.target)) {
|
||||
document.getElementById('pricePrefDropdown').classList.add('hidden');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% macro property_card(prop) %}
|
||||
{% macro property_card(prop, price_pref="total") %}
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
|
||||
<a href="/properties/{{ prop.id }}" class="block">
|
||||
<div class="relative h-52 bg-gray-200">
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
<div class="p-5">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-2xl font-bold text-primary">${{ "{:,}".format(prop.price) }}</span>
|
||||
<span class="text-2xl font-bold text-primary">{{ prop.price|price_fmt(price_pref, prop.area_sqft) }}</span>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-1 truncate">
|
||||
|
||||
Reference in New Issue
Block a user