diff --git a/loko/mobile/templates/mobile/assets/assets_index_mobile.html b/loko/mobile/templates/mobile/assets/assets_index_mobile.html index 66c5f29..cae50c5 100644 --- a/loko/mobile/templates/mobile/assets/assets_index_mobile.html +++ b/loko/mobile/templates/mobile/assets/assets_index_mobile.html @@ -312,6 +312,25 @@ transform: scale(1.2); filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6)); } + .asset-map-marker-sign i { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 4px; + background: #ffffff; + border: 2px solid #0022ff; + color: #0022ff; + font-size: 1rem; + box-shadow: 0 1px 4px rgba(0,0,0,0.35); + pointer-events: none; + transition: transform 0.15s ease; + } + .asset-map-marker-sign:hover i, .asset-map-marker-sign:active i { + transform: scale(1.2); + box-shadow: 0 2px 8px rgba(0,0,0,0.5); + } /* Marqueur spécifique poteau de signalisation (symbole desktop : socle circulaire + tige verticale) */ .asset-map-marker-pole { @@ -448,6 +467,12 @@ transform: scale(1.25); filter: drop-shadow(0 0 5px #eab308) drop-shadow(0 0 10px #fde047) drop-shadow(0 3px 6px rgba(0,0,0,0.5)) !important; } + .asset-map-marker-sign.selected i { + border-color: #ca8a04; + color: #854d0e; + transform: scale(1.2); + box-shadow: 0 0 10px rgba(234, 179, 8, 0.85); + } .asset-map-marker-sign.selected::after { content: ''; position: absolute; @@ -1490,7 +1515,7 @@ const dLon = Math.abs(other.lon - asset.lon); const dLat = Math.abs(other.lat - asset.lat); - const isSameLocation = samePole || (dLon < 0.00003 && dLat < 0.00003); + const isSameLocation = samePole || (dLon < 0.00005 && dLat < 0.00005); if (isSameLocation) { group.push(other); @@ -1593,7 +1618,9 @@ activeMarkers.push(marker); } - // 2. Calcul de l'offset vertical pour chaque panneau sur le poteau (identique à la version desktop) + // 2. Calcul des offsets verticaux pour chaque panneau sur le poteau + // vertical_order = 1 est le panneau principal placé au SOMMET du mât. + // Les panneaux secondaires / panonceaux (vertical_order > 1) se succèdent vers le bas le long du mât. signPanels.sort((a, b) => { const orderA = a.vertical_order != null ? Number(a.vertical_order) : (a.panel_vertical_order != null ? Number(a.panel_vertical_order) : 1); const orderB = b.vertical_order != null ? Number(b.vertical_order) : (b.panel_vertical_order != null ? Number(b.panel_vertical_order) : 1); @@ -1601,29 +1628,21 @@ }); const hasBaseSupport = otherAssets.length > 0; - const MIN_PANEL_BASE_UP_OFFSET_PX = 36; - const DEFAULT_PANEL_HEIGHT_PX = 32; - const PANEL_STACK_GAP_PX = 2; + const N = signPanels.length; + const highestPanelIndex = Math.max(0, N - 1); + // Le sommet de la tige du poteau (topOffset) + // Si support à la base : le panneau le plus bas a son centre à -36px (garde de ~20px au-dessus du socle) + // et chaque panneau au-dessus ajoute 34px. + // Le panneau au sommet (index 0, vertical_order = 1) est à topOffset. + // Chaque panneau suivant (index i) est positionné sous le précédent : topOffset + (i * 34). + const topOffset = hasBaseSupport ? -(36 + (highestPanelIndex * 34)) : -(highestPanelIndex * 34); - let cumulativeOffset = -MIN_PANEL_BASE_UP_OFFSET_PX; - let previousHeight = DEFAULT_PANEL_HEIGHT_PX; + // Coordonnées de référence partagées pour l'alignement parfait sur la tige + const refLon = hasBaseSupport ? otherAssets[0].lon : (signPanels[0].lon); + const refLat = hasBaseSupport ? otherAssets[0].lat : (signPanels[0].lat); signPanels.forEach((panel, index) => { - const renderHeight = DEFAULT_PANEL_HEIGHT_PX; - - if (index === 0) { - if (hasBaseSupport) { - cumulativeOffset = -MIN_PANEL_BASE_UP_OFFSET_PX - Math.max(0, (renderHeight - DEFAULT_PANEL_HEIGHT_PX) / 2); - } else if (signPanels.length > 1) { - cumulativeOffset = 0 - Math.max(0, (renderHeight - DEFAULT_PANEL_HEIGHT_PX) / 2); - } else { - cumulativeOffset = 0; - } - } else { - cumulativeOffset -= (previousHeight + renderHeight) / 2 + PANEL_STACK_GAP_PX; - } - - previousHeight = renderHeight; + const panelOffset = topOffset + (index * 34); const symbology = (typeof AssetSymbology !== 'undefined') ? AssetSymbology.getAssetSymbology(panel) @@ -1635,7 +1654,7 @@ const el = document.createElement('div'); el.className = 'asset-map-marker-sign'; el.innerHTML = iconHtml; - el.style.zIndex = String(10 + index); + el.style.zIndex = String(10 + (N - index)); el.addEventListener('click', (e) => { e.stopPropagation(); @@ -1645,10 +1664,12 @@ openBottomSheet(panel, false, group); }); - const marker = new maplibregl.Marker({ element: el, offset: [0, cumulativeOffset] }) - .setLngLat([panel.lon, panel.lat]) + const marker = new maplibregl.Marker({ element: el, offset: [0, panelOffset] }) + .setLngLat([refLon, refLat]) .addTo(map); + marker.setOffset([0, panelOffset]); + marker._asset = panel; marker._group = group; marker._element = el;