UI: Glass effect everywhere, fix nav height, simplify quote form
All checks were successful
Build Docker Image / build (push) Successful in 3m9s

- Fixed nav height (h-20), logo and user menu aligned to top
- Quote form: removed colored circles, simple labels, search button inside pill
- Panels closer to nav (top-4 instead of top-20)
- Glass effect on all overlays (bg-base-100/70 backdrop-blur-md)
- Selection panel sticky headers with glass effect
This commit is contained in:
Ruslan Bakiev
2026-01-23 11:36:20 +07:00
parent f31ceacdee
commit 999658aee1
3 changed files with 47 additions and 64 deletions

View File

@@ -29,8 +29,8 @@
</div>
<!-- View toggle (top RIGHT overlay) - works in both modes -->
<div class="absolute top-20 right-4 z-20 hidden lg:block">
<div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg">
<div class="absolute top-4 right-4 z-20 hidden lg:block">
<div class="join bg-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
<button
class="btn btn-sm join-item gap-2"
:class="{ 'btn-active': mapViewMode === 'offers' }"
@@ -67,9 +67,9 @@
<!-- Left overlay panel (shown when showPanel is true) -->
<div
v-if="showPanel"
class="absolute top-20 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
>
<div class="bg-base-300/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-y-auto">
<div class="bg-base-100/70 backdrop-blur-md rounded-xl shadow-lg border border-base-300/50 p-4 h-full overflow-y-auto">
<slot name="panel" />
</div>
</div>
@@ -78,7 +78,7 @@
<div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
<!-- Mobile view toggle -->
<div class="flex justify-end px-4 mb-2">
<div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg">
<div class="join bg-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
<button
class="btn btn-xs join-item gap-1"
:class="{ 'btn-active': mapViewMode === 'offers' }"
@@ -112,7 +112,7 @@
<!-- Mobile panel (collapsible) - only when showPanel is true -->
<div
v-if="showPanel"
class="bg-base-300/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
class="bg-base-100/70 backdrop-blur-md rounded-t-xl shadow-lg border border-base-300/50 transition-all duration-300"
:class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
>
<!-- Drag handle -->