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