UI fixes: header height, map color, panel scroll
All checks were successful
Build Docker Image / build (push) Successful in 3m10s
All checks were successful
Build Docker Image / build (push) Successful in 3m10s
- MainNavigation: fixed min-height to prevent jumping on mode switch - CatalogMap: default pointColor changed from green to orange (#f97316) - CatalogPage: panel scroll on entire container, not inner - SelectionPanel: sticky header and search, removed inner scroll
This commit is contained in:
@@ -51,7 +51,7 @@ const props = withDefaults(defineProps<{
|
||||
initialCenter?: [number, number]
|
||||
initialZoom?: number
|
||||
}>(), {
|
||||
pointColor: '#10b981',
|
||||
pointColor: '#f97316',
|
||||
initialCenter: () => [37.64, 55.76],
|
||||
initialZoom: 2,
|
||||
useServerClustering: false,
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full gap-3">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between flex-shrink-0">
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Header (sticky at top) -->
|
||||
<div class="flex items-center justify-between sticky top-0 bg-base-300/95 -mx-4 px-4 py-2 -mt-4 z-10">
|
||||
<h3 class="font-semibold text-lg">{{ title }}</h3>
|
||||
<button class="btn btn-ghost btn-sm btn-circle" @click="emit('close')">
|
||||
<Icon name="lucide:x" size="18" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<div class="flex-shrink-0">
|
||||
<!-- Search input (sticky below header) -->
|
||||
<div class="sticky top-10 bg-base-300/95 -mx-4 px-4 pb-2 z-10">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
|
||||
<!-- List -->
|
||||
<div class="flex-1 overflow-y-auto -mx-1 px-1">
|
||||
<div class="-mx-1 px-1">
|
||||
<div v-if="loading" class="flex items-center justify-center py-8">
|
||||
<span class="loading loading-spinner loading-md" />
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Center: Search input (transforms based on mode) -->
|
||||
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2">
|
||||
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 min-h-[72px] justify-center">
|
||||
<!-- Quote mode: Segmented input like Airbnb -->
|
||||
<template v-if="catalogMode === 'quote'">
|
||||
<div class="flex items-center gap-3 w-full">
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
v-if="showPanel"
|
||||
class="absolute top-20 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-hidden flex flex-col">
|
||||
<div class="bg-base-300/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-y-auto">
|
||||
<slot name="panel" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user