Fix UI issues: 3 columns, SubNav label, back button, sticky map, hover flyTo
All checks were successful
Build Docker Image / build (push) Successful in 4m14s

- Homepage roles section now shows 3 columns on medium screens
- SubNavigation catalog offers label changed to "Предложения"
- Removed back button from catalog/offers page
- ListMapLayout: sticky map with full height
- ListMapLayout: hover on card flies to location on map
This commit is contained in:
Ruslan Bakiev
2026-01-08 10:00:59 +07:00
parent 1a0305011f
commit e629025899
6 changed files with 21 additions and 13 deletions

View File

@@ -1,14 +1,14 @@
<template>
<div class="flex flex-col flex-1 min-h-0">
<!-- Desktop: side-by-side layout -->
<div class="hidden lg:flex flex-1 gap-4 min-h-0">
<div class="hidden lg:flex flex-1 gap-4 min-h-0 overflow-hidden">
<!-- Left side: List (scrollable) -->
<div class="w-2/5 overflow-y-auto pr-2">
<slot name="list" />
</div>
<!-- Right side: Map (sticky) -->
<div class="w-3/5 rounded-lg overflow-hidden">
<!-- Right side: Map (sticky, full height from SubNav to bottom) -->
<div class="w-3/5 h-full rounded-lg overflow-hidden sticky top-0 self-start">
<ClientOnly>
<CatalogMap
ref="mapRef"
@@ -75,6 +75,7 @@ interface MapItem {
const props = withDefaults(defineProps<{
items: MapItem[]
selectedItemId?: string
hoveredItemId?: string
mapId: string
pointColor?: string
}>(), {
@@ -136,6 +137,13 @@ watch(() => props.selectedItemId, (uuid) => {
}
})
// Watch hoveredItemId and fly to it on hover
watch(() => props.hoveredItemId, (uuid) => {
if (uuid) {
flyToItem(uuid)
}
})
// Expose methods for parent components
defineExpose({ flyTo, flyToItem })
</script>

View File

@@ -25,7 +25,7 @@ const { t } = useI18n()
const sectionItems = computed(() => ({
catalog: [
{ label: t('cabinetNav.offers'), path: '/catalog/offers' },
{ label: 'Предложения', path: '/catalog/offers' },
{ label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
{ label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
],