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

feat: add sign pole map marker styling and conditional rendering for mobile assets

Browse source
This commit is contained in:
kdeterme 2026-09-13 15:35:02 +02:00
parent e2be198802
commit 641ac314e5
1 changed files with 110 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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