From 4adbe41970fabe3654cb4c357cc2f4595796b34c Mon Sep 17 00:00:00 2001 From: mathis Date: Sun, 30 Aug 2026 23:30:36 +0200 Subject: [PATCH] fix(classiques): pixel-perfect clock box from img 2, yellow bullet stops styling from img 1, and 1 train = 1 color stripe alternation --- .../classiques/ClassiquesArrivees.css | 103 ++++++++++++------ .../classiques/ClassiquesArrivees.js | 40 ++++--- .../classiques/ClassiquesDeparts.css | 103 ++++++++++++------ .../classiques/ClassiquesDeparts.js | 40 ++++--- 4 files changed, 194 insertions(+), 92 deletions(-) diff --git a/src/pages/afficheurs/classiques/ClassiquesArrivees.css b/src/pages/afficheurs/classiques/ClassiquesArrivees.css index 6a01000..e9f23f9 100644 --- a/src/pages/afficheurs/classiques/ClassiquesArrivees.css +++ b/src/pages/afficheurs/classiques/ClassiquesArrivees.css @@ -97,7 +97,14 @@ padding: 0; display: flex; flex-direction: column; - background: transparent !important; +} + +.aff-classiques-arrivees__row--extended.aff-classiques-arrivees__row--odd { + background: var(--green-odd) !important; +} + +.aff-classiques-arrivees__row--extended.aff-classiques-arrivees__row--even { + background: var(--green-even) !important; } .aff-classiques-arrivees__extended-top { @@ -110,13 +117,7 @@ box-sizing: border-box; padding-left: 20px; padding-right: 8px; -} - -.aff-classiques-arrivees__row--odd .aff-classiques-arrivees__extended-top { - background: var(--green-odd); -} -.aff-classiques-arrivees__row--even .aff-classiques-arrivees__extended-top { - background: var(--green-even); + background: transparent; } .aff-classiques-arrivees__extended-bottom { @@ -127,15 +128,9 @@ display: flex; align-items: center; box-sizing: border-box; - padding-left: 200px; - padding-right: 280px; -} - -.aff-classiques-arrivees__row--odd .aff-classiques-arrivees__extended-bottom { - background: var(--green-even); -} -.aff-classiques-arrivees__row--even .aff-classiques-arrivees__extended-bottom { - background: var(--green-odd); + padding-left: 290px; + padding-right: 240px; + background: transparent; } .aff-classiques-arrivees__sub-stops { @@ -148,13 +143,43 @@ z-index: 2; } -.aff-classiques-arrivees__sub-stops-text { +.aff-classiques-arrivees__sub-stops-marquee { + width: 100%; + overflow: hidden; +} + +.aff-classiques-arrivees__stops-chain { + display: inline-flex; + align-items: center; + white-space: nowrap; +} + +.aff-classiques-arrivees__stop-item { + display: inline-flex; + align-items: center; + white-space: nowrap; +} + +.aff-classiques-arrivees__stop-bullet { + color: var(--yellow); + font-size: 50px; + margin-right: 14px; + margin-left: 18px; + line-height: 1; + vertical-align: middle; +} + +.aff-classiques-arrivees__stop-item:first-child .aff-classiques-arrivees__stop-bullet { + margin-left: 0; +} + +.aff-classiques-arrivees__stop-name { color: var(--white); - font-size: 52px; + font-size: 58px; font-weight: 600; line-height: 1; font-family: "Achemine", sans-serif; - white-space: nowrap; + letter-spacing: -0.5px; } /* Colonne 1 : Logo opérateur (blanc) */ @@ -330,11 +355,11 @@ align-items: center; box-sizing: border-box; padding-left: 24px; - padding-right: 20px; + padding-right: 8px; background: #0d3613 !important; position: relative; z-index: 30; - border-top: 2px solid rgba(255, 255, 255, 0.25); + border-top: 1.5px solid rgba(255, 255, 255, 0.2); } .aff-classiques-arrivees__info-bar { @@ -343,12 +368,12 @@ overflow: hidden; display: flex; align-items: center; - margin-right: 30px; + margin-right: 20px; } .aff-classiques-arrivees__info-bar-text { color: var(--white); - font-size: 44px; + font-size: 42px; font-weight: 600; font-family: "Achemine", sans-serif; line-height: 1; @@ -359,15 +384,29 @@ display: flex; align-items: center; justify-content: center; - gap: 12px; - border: 2.5px solid rgba(255, 255, 255, 0.7); - border-radius: 10px; - padding: 6px 18px; - background: #09260d; + gap: 8px; + border: 2.5px solid rgba(255, 255, 255, 0.85); + border-radius: 6px; + padding: 4px 14px; + background: rgba(9, 38, 13, 0.45); font-family: "Achemine", sans-serif; + color: var(--white); + flex-shrink: 0; + margin-right: 12px; + box-sizing: border-box; +} + +.aff-classiques-arrivees__bottom-clock-hm { font-size: 52px; font-weight: 700; - color: var(--white); - letter-spacing: 2px; - flex-shrink: 0; + line-height: 1; + letter-spacing: 1px; +} + +.aff-classiques-arrivees__bottom-clock-s { + font-size: 34px; + font-weight: 700; + line-height: 1; + margin-top: -6px; + letter-spacing: 0.5px; } \ No newline at end of file diff --git a/src/pages/afficheurs/classiques/ClassiquesArrivees.js b/src/pages/afficheurs/classiques/ClassiquesArrivees.js index 82f40b0..f26a0ba 100644 --- a/src/pages/afficheurs/classiques/ClassiquesArrivees.js +++ b/src/pages/afficheurs/classiques/ClassiquesArrivees.js @@ -72,11 +72,11 @@ const formatPlatform = (p) => { return String(p).toUpperCase().replace(/VOIE|QUAI|\s+/gi, '').trim(); }; -const formatStopsForArrivees = (horaire, currentStationName, normalizeFn) => { +const getStopsListForArrivees = (horaire, currentStationName, normalizeFn) => { const stops = (horaire && (horaire.stops || horaire.gares_desservies)) || []; if (!Array.isArray(stops) || stops.length === 0) { const orig = formatStationName((horaire && (horaire.gare_depart_nom || horaire.gare_depart || horaire.origine)) || ''); - return orig ? `• ${orig}` : ''; + return orig ? [orig] : []; } const curNorm = normalizeFn ? normalizeFn(currentStationName || '') : String(currentStationName || '').toLowerCase().trim(); @@ -95,11 +95,10 @@ const formatStopsForArrivees = (horaire, currentStationName, normalizeFn) => { const precedingStops = stops.slice(0, endIdx); if (precedingStops.length === 0) { const orig = formatStationName((horaire && (horaire.gare_depart_nom || horaire.gare_depart || horaire.origine)) || ''); - return orig ? `• ${orig}` : ''; + return orig ? [orig] : []; } - const stopNames = precedingStops.map(s => formatStationName(s.nom || s.gare_nom || s.name || s.stop_name || '')).filter(Boolean); - return stopNames.map(n => `• ${n}`).join(' '); + return precedingStops.map(s => formatStationName(s.nom || s.gare_nom || s.name || s.stop_name || '')).filter(Boolean); }; function BottomClock() { @@ -115,9 +114,9 @@ function BottomClock() { return (
- {hh} - {mm} - {ss} + {hh} + {mm} + {ss}
); } @@ -1219,7 +1218,8 @@ export default function ClassiquesArrivees(){ const renderRow = (h, idx) => { const isExtended = Boolean(h && h._isExtended); - const isOdd = ((h && typeof h._slotIndex === 'number' ? h._slotIndex : idx) % 2 === 0); + const trainIndex = (h && typeof h._trainIndex === 'number') ? h._trainIndex : idx; + const isOdd = (trainIndex % 2 === 0); if (h && h._isEmpty) { if (isExtended) { @@ -1261,7 +1261,7 @@ export default function ClassiquesArrivees(){ const isDelayed = status && status.label && String(status.label).startsWith('retardé'); const showPlatform = !isSuppressed && Boolean(cleanPlatform); - const stopsText = isExtended ? formatStopsForArrivees(horaire, gareDisplay || gareParam, normalizeName) : ''; + const stopsList = isExtended ? getStopsListForArrivees(horaire, gareDisplay || gareParam, normalizeName) : []; if (isExtended) { return ( @@ -1309,10 +1309,22 @@ export default function ClassiquesArrivees(){ - {/* Ligne basse (108px) : gares de provenance défilantes */} + {/* Ligne basse (108px) : gares de provenance défilantes avec puces jaunes */}
- + + {stopsList.map((stopName, sIdx) => ( + + • + {stopName} + + ))} + + } + />
@@ -1385,7 +1397,7 @@ export default function ClassiquesArrivees(){ displayRows.push({ ...train, _isExtended: true, - _slotIndex: usedSlots + _trainIndex: trainIdx }); usedSlots += 2; trainIdx++; @@ -1396,7 +1408,7 @@ export default function ClassiquesArrivees(){ displayRows.push({ ...train, _isExtended: false, - _slotIndex: usedSlots + _trainIndex: trainIdx }); usedSlots += 1; trainIdx++; diff --git a/src/pages/afficheurs/classiques/ClassiquesDeparts.css b/src/pages/afficheurs/classiques/ClassiquesDeparts.css index fa73a86..edc7ec2 100644 --- a/src/pages/afficheurs/classiques/ClassiquesDeparts.css +++ b/src/pages/afficheurs/classiques/ClassiquesDeparts.css @@ -97,7 +97,14 @@ padding: 0; display: flex; flex-direction: column; - background: transparent !important; +} + +.aff-classiques-departs__row--extended.aff-classiques-departs__row--odd { + background: var(--blue-odd) !important; +} + +.aff-classiques-departs__row--extended.aff-classiques-departs__row--even { + background: var(--blue-even) !important; } .aff-classiques-departs__extended-top { @@ -110,13 +117,7 @@ box-sizing: border-box; padding-left: 20px; padding-right: 8px; -} - -.aff-classiques-departs__row--odd .aff-classiques-departs__extended-top { - background: var(--blue-odd); -} -.aff-classiques-departs__row--even .aff-classiques-departs__extended-top { - background: var(--blue-even); + background: transparent; } .aff-classiques-departs__extended-bottom { @@ -127,15 +128,9 @@ display: flex; align-items: center; box-sizing: border-box; - padding-left: 200px; - padding-right: 280px; -} - -.aff-classiques-departs__row--odd .aff-classiques-departs__extended-bottom { - background: var(--blue-even); -} -.aff-classiques-departs__row--even .aff-classiques-departs__extended-bottom { - background: var(--blue-odd); + padding-left: 290px; + padding-right: 240px; + background: transparent; } .aff-classiques-departs__sub-stops { @@ -148,13 +143,43 @@ z-index: 2; } -.aff-classiques-departs__sub-stops-text { +.aff-classiques-departs__sub-stops-marquee { + width: 100%; + overflow: hidden; +} + +.aff-classiques-departs__stops-chain { + display: inline-flex; + align-items: center; + white-space: nowrap; +} + +.aff-classiques-departs__stop-item { + display: inline-flex; + align-items: center; + white-space: nowrap; +} + +.aff-classiques-departs__stop-bullet { + color: var(--yellow); + font-size: 50px; + margin-right: 14px; + margin-left: 18px; + line-height: 1; + vertical-align: middle; +} + +.aff-classiques-departs__stop-item:first-child .aff-classiques-departs__stop-bullet { + margin-left: 0; +} + +.aff-classiques-departs__stop-name { color: var(--white); - font-size: 52px; + font-size: 58px; font-weight: 600; line-height: 1; font-family: "Achemine", sans-serif; - white-space: nowrap; + letter-spacing: -0.5px; } /* Colonne 1 : Logo opérateur (blanc) */ @@ -330,11 +355,11 @@ align-items: center; box-sizing: border-box; padding-left: 24px; - padding-right: 20px; + padding-right: 8px; background: #001e40 !important; position: relative; z-index: 30; - border-top: 2px solid rgba(255, 255, 255, 0.25); + border-top: 1.5px solid rgba(255, 255, 255, 0.2); } .aff-classiques-departs__info-bar { @@ -343,12 +368,12 @@ overflow: hidden; display: flex; align-items: center; - margin-right: 30px; + margin-right: 20px; } .aff-classiques-departs__info-bar-text { color: var(--white); - font-size: 44px; + font-size: 42px; font-weight: 600; font-family: "Achemine", sans-serif; line-height: 1; @@ -359,15 +384,29 @@ display: flex; align-items: center; justify-content: center; - gap: 12px; - border: 2.5px solid rgba(255, 255, 255, 0.7); - border-radius: 10px; - padding: 6px 18px; - background: #00142e; + gap: 8px; + border: 2.5px solid rgba(255, 255, 255, 0.85); + border-radius: 6px; + padding: 4px 14px; + background: rgba(0, 16, 40, 0.45); font-family: "Achemine", sans-serif; + color: var(--white); + flex-shrink: 0; + margin-right: 12px; + box-sizing: border-box; +} + +.aff-classiques-departs__bottom-clock-hm { font-size: 52px; font-weight: 700; - color: var(--white); - letter-spacing: 2px; - flex-shrink: 0; + line-height: 1; + letter-spacing: 1px; +} + +.aff-classiques-departs__bottom-clock-s { + font-size: 34px; + font-weight: 700; + line-height: 1; + margin-top: -6px; + letter-spacing: 0.5px; } \ No newline at end of file diff --git a/src/pages/afficheurs/classiques/ClassiquesDeparts.js b/src/pages/afficheurs/classiques/ClassiquesDeparts.js index 0e6a20a..16f331d 100644 --- a/src/pages/afficheurs/classiques/ClassiquesDeparts.js +++ b/src/pages/afficheurs/classiques/ClassiquesDeparts.js @@ -72,11 +72,11 @@ const formatPlatform = (p) => { return String(p).toUpperCase().replace(/VOIE|QUAI|\s+/gi, '').trim(); }; -const formatStopsForDeparts = (horaire, currentStationName, normalizeFn) => { +const getStopsListForDeparts = (horaire, currentStationName, normalizeFn) => { const stops = (horaire && (horaire.stops || horaire.gares_desservies)) || []; if (!Array.isArray(stops) || stops.length === 0) { const dest = formatStationName((horaire && (horaire.gare_arrivee_nom || horaire.gare_arrivee || horaire.destination)) || ''); - return dest ? `• ${dest}` : ''; + return dest ? [dest] : []; } const curNorm = normalizeFn ? normalizeFn(currentStationName || '') : String(currentStationName || '').toLowerCase().trim(); @@ -95,11 +95,10 @@ const formatStopsForDeparts = (horaire, currentStationName, normalizeFn) => { const remainingStops = stops.slice(startIdx); if (remainingStops.length === 0) { const dest = formatStationName((horaire && (horaire.gare_arrivee_nom || horaire.gare_arrivee || horaire.destination)) || ''); - return dest ? `• ${dest}` : ''; + return dest ? [dest] : []; } - const stopNames = remainingStops.map(s => formatStationName(s.nom || s.gare_nom || s.name || s.stop_name || '')).filter(Boolean); - return stopNames.map(n => `• ${n}`).join(' '); + return remainingStops.map(s => formatStationName(s.nom || s.gare_nom || s.name || s.stop_name || '')).filter(Boolean); }; function BottomClock() { @@ -115,9 +114,9 @@ function BottomClock() { return (
- {hh} - {mm} - {ss} + {hh} + {mm} + {ss}
); } @@ -1216,7 +1215,8 @@ export default function ClassiquesDeparts(){ const renderRow = (h, idx) => { const isExtended = Boolean(h && h._isExtended); - const isOdd = ((h && typeof h._slotIndex === 'number' ? h._slotIndex : idx) % 2 === 0); + const trainIndex = (h && typeof h._trainIndex === 'number') ? h._trainIndex : idx; + const isOdd = (trainIndex % 2 === 0); if (h && h._isEmpty) { if (isExtended) { @@ -1258,7 +1258,7 @@ export default function ClassiquesDeparts(){ const isDelayed = status && status.label && String(status.label).startsWith('retardé'); const showPlatform = !isSuppressed && Boolean(cleanPlatform); - const stopsText = isExtended ? formatStopsForDeparts(horaire, gareDisplay || gareParam, normalizeName) : ''; + const stopsList = isExtended ? getStopsListForDeparts(horaire, gareDisplay || gareParam, normalizeName) : []; if (isExtended) { return ( @@ -1306,10 +1306,22 @@ export default function ClassiquesDeparts(){ - {/* Ligne basse (108px) : gares desservies défilantes */} + {/* Ligne basse (108px) : gares desservies défilantes avec puces jaunes */}
- + + {stopsList.map((stopName, sIdx) => ( + + • + {stopName} + + ))} + + } + />
@@ -1382,7 +1394,7 @@ export default function ClassiquesDeparts(){ displayRows.push({ ...train, _isExtended: true, - _slotIndex: usedSlots + _trainIndex: trainIdx }); usedSlots += 2; trainIdx++; @@ -1393,7 +1405,7 @@ export default function ClassiquesDeparts(){ displayRows.push({ ...train, _isExtended: false, - _slotIndex: usedSlots + _trainIndex: trainIdx }); usedSlots += 1; trainIdx++;