From 641ac314e53c98690d851755aca65a590bf0737a Mon Sep 17 00:00:00 2001
From: kdeterme <karl.determe@gmail.com>
Date: Sun, 13 Sep 2026 15:35:02 +0200
Subject: [PATCH] feat: add sign pole map marker styling and conditional
 rendering for mobile assets

---
 .../mobile/assets/assets_index_mobile.html    | 119 ++++++++++++++++--
 1 file changed, 110 insertions(+), 9 deletions(-)

diff --git a/loko/mobile/templates/mobile/assets/assets_index_mobile.html b/loko/mobile/templates/mobile/assets/assets_index_mobile.html
index 36afb5a..66c5f29 100644
--- a/loko/mobile/templates/mobile/assets/assets_index_mobile.html
+++ b/loko/mobile/templates/mobile/assets/assets_index_mobile.html
@@ -313,6 +313,85 @@
             filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
         }
 
+        /* Marqueur spécifique poteau de signalisation (symbole desktop : socle circulaire + tige verticale) */
+        .asset-map-marker-pole {
+            width: 24px;
+            height: 24px;
+            position: relative;
+            cursor: pointer;
+            background: transparent !important;
+            border: none !important;
+            box-shadow: none !important;
+            padding: 0 !important;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 5;
+            transition: none !important;
+        }
+        .asset-map-marker-pole::before {
+            content: '';
+            position: absolute;
+            top: -6px;
+            bottom: -6px;
+            left: -6px;
+            right: -6px;
+            cursor: pointer;
+        }
+        .asset-map-marker-pole .pole-base {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: #888888;
+            border: 1.5px solid #333333;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+            box-sizing: border-box;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 2;
+            transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+        }
+        .asset-map-marker-pole .pole-stem {
+            position: absolute;
+            bottom: 50%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 3.5px;
+            background-color: #555555;
+            border-left: 0.5px solid #222222;
+            border-right: 0.5px solid #222222;
+            border-top: 0.5px solid #222222;
+            box-sizing: border-box;
+            z-index: 1;
+            pointer-events: none;
+            transition: background-color 0.15s ease, box-shadow 0.15s ease;
+        }
+        .asset-map-marker-pole:hover .pole-base,
+        .asset-map-marker-pole:active .pole-base {
+            transform: translate(-50%, -50%) scale(1.3);
+            background-color: #ca8a04;
+            border-color: #854d0e;
+            box-shadow: 0 0 8px rgba(202, 138, 4, 0.6);
+        }
+        .asset-map-marker-pole.selected {
+            z-index: 50 !important;
+        }
+        .asset-map-marker-pole.selected .pole-base {
+            background-color: #fde047 !important;
+            border-color: #ca8a04 !important;
+            border-width: 2px !important;
+            transform: translate(-50%, -50%) scale(1.4);
+            box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.45), 0 0 12px #eab308 !important;
+        }
+        .asset-map-marker-pole.selected .pole-stem {
+            background-color: #eab308 !important;
+            border-color: #ca8a04 !important;
+            box-shadow: 0 0 8px rgba(234, 179, 8, 0.7) !important;
+        }
+
         /* Badge compteur pour assets multiples au même endroit */
         .marker-count-badge {
             position: absolute;
@@ -335,6 +414,10 @@
             pointer-events: none;
             z-index: 20;
         }
+        .asset-map-marker-pole .marker-count-badge {
+            top: -8px;
+            right: -8px;
+        }
 
         /* Marqueur ponctuel sélectionné */
         .asset-map-marker.selected {
@@ -1452,12 +1535,22 @@
                             ? AssetSymbology.renderIconHtml(symbology)
                             : `<i class="bi ${symbology.iconClass || 'bi-signpost-split'}"></i>`;
 
+                        const isSignPole = baseAsset.model_key === 'signpole' || baseAsset.model_key.includes('pole') || (baseAsset.thematic === 'sign' && baseAsset.model_key.includes('pole'));
+
                         const el = document.createElement('div');
-                        el.className = 'asset-map-marker';
-                        el.style.borderColor = color;
-                        el.style.color = color;
-                        el.style.zIndex = '5';
-                        el.innerHTML = iconHtml;
+                        if (isSignPole) {
+                            el.className = 'asset-map-marker-pole';
+                            const highestPanelIndex = Math.max(0, signPanels.length - 1);
+                            const stemHeight = 36 + (highestPanelIndex * 34);
+                            el.innerHTML = `<div class="pole-stem" style="height: ${stemHeight}px;"></div><div class="pole-base"></div>`;
+                            el.style.zIndex = '2';
+                        } else {
+                            el.className = 'asset-map-marker';
+                            el.style.borderColor = color;
+                            el.style.color = color;
+                            el.style.zIndex = '5';
+                            el.innerHTML = iconHtml;
+                        }
 
                         if (otherAssets.length > 1) {
                             const badge = document.createElement('span');
@@ -1582,11 +1675,19 @@
                         ? AssetSymbology.renderIconHtml(symbology)
                         : `<i class="bi ${symbology.iconClass || 'bi-pin-map'}"></i>`;
 
+                    const isSignPole = primaryAsset.model_key === 'signpole' || (primaryAsset.thematic === 'sign' && primaryAsset.model_key.includes('pole'));
+
                     const el = document.createElement('div');
-                    el.className = 'asset-map-marker';
-                    el.style.borderColor = color;
-                    el.style.color = color;
-                    el.innerHTML = iconHtml;
+                    if (isSignPole) {
+                        el.className = 'asset-map-marker-pole';
+                        el.innerHTML = '<div class="pole-stem" style="height: 28px;"></div><div class="pole-base"></div>';
+                        el.style.zIndex = '5';
+                    } else {
+                        el.className = 'asset-map-marker';
+                        el.style.borderColor = color;
+                        el.style.color = color;
+                        el.innerHTML = iconHtml;
+                    }
 
                     if (group.length > 1) {
                         const badge = document.createElement('span');