Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: improve sign panel marker styling, vertical stacking, and alignment logic on mobile map

Browse source
This commit is contained in:
kdeterme 2026-09-13 19:02:59 +02:00
parent 641ac314e5
commit 534488814a
1 changed files with 46 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
loko/mobile/templates/mobile/assets/assets_index_mobile.html
View file

@ -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;