perco/HouseHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

focus etape

Browse Source
This commit is contained in:
FeFeClochette
2026-04-02 11:32:42 +02:00
parent ebfa0c99f3
commit b425ec78aa
2 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/holidays/holidays.js
+27 -7
View File
@@ -221,26 +221,46 @@ function initDetailMap() {
latlngs.push(pos); latlngs.push(pos);
bounds.extend(pos); bounds.extend(pos);
// Couleur selon le paiement // Couleur de base (Bleu PachaFamily)
const color = pt.paid == 1 ? "#10b981" : "#f59e0b"; const color = "#2563eb";
// On place un petit cercle pour chaque point // On place un petit cercle pour chaque point
const marker = L.circleMarker(pos, { const marker = L.circleMarker(pos, {
color: color, color: color,
radius: 7, radius: 8,
fillOpacity: 1, fillOpacity: 1,
fillColor: "white", fillColor: "white",
weight: 3, weight: 3,
}).addTo(detailMap); }).addTo(detailMap);
// Numérotation et Popup // Correction : Numérotation et Popup avec les bonnes variables
marker.bindPopup(` marker.bindPopup(`
<div style="text-align:center;"> <div style="text-align:center;">
<div style="font-size:0.7rem; color:#64748b; margin-bottom:2px;">Étape ${index + 1}</div> <div style="font-size:0.75rem; color:#64748b; margin-bottom:2px; font-weight:bold;">Étape ${index + 1}</div>
<strong>${pt.title}</strong><br> <strong style="font-size:1rem; color:#0f172a;">${pt.location_name}</strong><br>
<span style="font-weight:bold; color:${color};">${parseFloat(pt.amount).toFixed(2)} €</span> <span style="font-weight:bold; color:${color};">${parseFloat(pt.total_amount).toFixed(2)} €</span>
</div> </div>
`); `);
// NOUVEAU : Focus et scroll sur la liste au clic sur la carte !
marker.on("click", function () {
const card = document.getElementById("step-card-" + pt.sort_order);
if (card) {
// Fait défiler la liste doucement jusqu'à l'élément
card.scrollIntoView({ behavior: "smooth", block: "center" });
// Effet visuel "Flash" pour repérer la carte
card.style.transition = "box-shadow 0.3s, transform 0.3s";
card.style.boxShadow = "0 0 0 3px #3b82f6";
card.style.transform = "scale(1.02)";
// Retire l'effet après 1.5 seconde
setTimeout(() => {
card.style.boxShadow = "";
card.style.transform = "";
}, 1500);
}
});
}); });
// On dessine le trait en pointillés pour relier le roadtrip ! // On dessine le trait en pointillés pour relier le roadtrip !
modules/holidays/views/detail.php
+1 -2
View File
@@ -129,9 +129,8 @@ $pctSaved = $cost > 0 ? min(100 - $pctPaid, ($saved / $cost) * 100) : 0;
<p style="color:var(--text-muted); font-style:italic; text-align:center; margin-top:40px;">Aucune étape planifiée.</p> <p style="color:var(--text-muted); font-style:italic; text-align:center; margin-top:40px;">Aucune étape planifiée.</p>
<?php else: ?> <?php else: ?>
<?php foreach ($steps as $step): ?> <?php foreach ($steps as $step): ?>
<div class="hol-checkpoint hol-checkpoint-draggable" draggable="true" data-location="<?= htmlspecialchars($step['location_name']) ?>"> <div id="step-card-<?= $step['sort_order'] ?>" class="hol-checkpoint hol-checkpoint-draggable" draggable="true" data-location="<?= htmlspecialchars($step['location_name']) ?>">
<div class="hol-cp-header"> <div class="hol-cp-header">
<div class="hol-cp-info-group"> <div class="hol-cp-info-group">
<span style="color:#94a3b8; font-size:1.1rem; cursor:grab; user-select:none;">☰</span> <span style="color:#94a3b8; font-size:1.1rem; cursor:grab; user-select:none;">☰</span>
<div class="hol-cp-title" onclick="panMapTo(<?= $step['lat'] ?>, <?= $step['lng'] ?>)" title="<?= htmlspecialchars($step['location_name']) ?>"> <div class="hol-cp-title" onclick="panMapTo(<?= $step['lat'] ?>, <?= $step['lng'] ?>)" title="<?= htmlspecialchars($step['location_name']) ?>">