🛠️

- add show price preference(store in cookies)
This commit is contained in:
2026-06-12 17:36:57 +08:00
parent 3f386e5e38
commit 9e9788ea22
13 changed files with 320 additions and 18 deletions
+69
View File
@@ -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>