FERROVIA_SA/ferrovia-infogare
1
0 Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 2 Releases Wiki Activity

fix(classiques): pixel-perfect clock box from img 2, yellow bullet stops styling from img 1, and 1 train = 1 color stripe alternation

Browse Source
This commit is contained in:
mathis committed 2026-08-30 23:30:36 +02:00
1 parent 5e9d770449
commit 4adbe41970
4 files changed
+194 -92
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/afficheurs/classiques/ClassiquesArrivees.css
+71 -32
View File
@@ -97,7 +97,14 @@
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; 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 { .aff-classiques-arrivees__extended-top {
@@ -110,13 +117,7 @@
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px; padding-left: 20px;
padding-right: 8px; padding-right: 8px;
} background: transparent;
.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);
} }
.aff-classiques-arrivees__extended-bottom { .aff-classiques-arrivees__extended-bottom {
@@ -127,15 +128,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding-left: 200px; padding-left: 290px;
padding-right: 280px; padding-right: 240px;
} background: transparent;
.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);
} }
.aff-classiques-arrivees__sub-stops { .aff-classiques-arrivees__sub-stops {
@@ -148,13 +143,43 @@
z-index: 2; 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); color: var(--white);
font-size: 52px; font-size: 58px;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
font-family: "Achemine", sans-serif; font-family: "Achemine", sans-serif;
white-space: nowrap; letter-spacing: -0.5px;
} }
/* Colonne 1 : Logo opérateur (blanc) */ /* Colonne 1 : Logo opérateur (blanc) */
@@ -330,11 +355,11 @@
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding-left: 24px; padding-left: 24px;
padding-right: 20px; padding-right: 8px;
background: #0d3613 !important; background: #0d3613 !important;
position: relative; position: relative;
z-index: 30; 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 { .aff-classiques-arrivees__info-bar {
@@ -343,12 +368,12 @@
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 30px; margin-right: 20px;
} }
.aff-classiques-arrivees__info-bar-text { .aff-classiques-arrivees__info-bar-text {
color: var(--white); color: var(--white);
font-size: 44px; font-size: 42px;
font-weight: 600; font-weight: 600;
font-family: "Achemine", sans-serif; font-family: "Achemine", sans-serif;
line-height: 1; line-height: 1;
@@ -359,15 +384,29 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 12px; gap: 8px;
border: 2.5px solid rgba(255, 255, 255, 0.7); border: 2.5px solid rgba(255, 255, 255, 0.85);
border-radius: 10px; border-radius: 6px;
padding: 6px 18px; padding: 4px 14px;
background: #09260d; background: rgba(9, 38, 13, 0.45);
font-family: "Achemine", sans-serif; 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-size: 52px;
font-weight: 700; font-weight: 700;
color: var(--white); line-height: 1;
letter-spacing: 2px; letter-spacing: 1px;
flex-shrink: 0; }
.aff-classiques-arrivees__bottom-clock-s {
font-size: 34px;
font-weight: 700;
line-height: 1;
margin-top: -6px;
letter-spacing: 0.5px;
} }
src/pages/afficheurs/classiques/ClassiquesArrivees.js
+26 -14
View File
@@ -72,11 +72,11 @@ const formatPlatform = (p) => {
return String(p).toUpperCase().replace(/VOIE|QUAI|\s+/gi, '').trim(); 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)) || []; const stops = (horaire && (horaire.stops || horaire.gares_desservies)) || [];
if (!Array.isArray(stops) || stops.length === 0) { if (!Array.isArray(stops) || stops.length === 0) {
const orig = formatStationName((horaire && (horaire.gare_depart_nom || horaire.gare_depart || horaire.origine)) || ''); 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(); const curNorm = normalizeFn ? normalizeFn(currentStationName || '') : String(currentStationName || '').toLowerCase().trim();
@@ -95,11 +95,10 @@ const formatStopsForArrivees = (horaire, currentStationName, normalizeFn) => {
const precedingStops = stops.slice(0, endIdx); const precedingStops = stops.slice(0, endIdx);
if (precedingStops.length === 0) { if (precedingStops.length === 0) {
const orig = formatStationName((horaire && (horaire.gare_depart_nom || horaire.gare_depart || horaire.origine)) || ''); 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 precedingStops.map(s => formatStationName(s.nom || s.gare_nom || s.name || s.stop_name || '')).filter(Boolean);
return stopNames.map(n => `• ${n}`).join(' ');
}; };
function BottomClock() { function BottomClock() {
@@ -115,9 +114,9 @@ function BottomClock() {
return ( return (
<div className="aff-classiques-arrivees__bottom-clock" aria-hidden> <div className="aff-classiques-arrivees__bottom-clock" aria-hidden>
<span>{hh}</span> <span className="aff-classiques-arrivees__bottom-clock-hm">{hh}</span>
<span>{mm}</span> <span className="aff-classiques-arrivees__bottom-clock-hm">{mm}</span>
<span>{ss}</span> <span className="aff-classiques-arrivees__bottom-clock-s">{ss}</span>
</div> </div>
); );
} }
@@ -1219,7 +1218,8 @@ export default function ClassiquesArrivees(){
const renderRow = (h, idx) => { const renderRow = (h, idx) => {
const isExtended = Boolean(h && h._isExtended); 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 (h && h._isEmpty) {
if (isExtended) { if (isExtended) {
@@ -1261,7 +1261,7 @@ export default function ClassiquesArrivees(){
const isDelayed = status && status.label && String(status.label).startsWith('retardé'); const isDelayed = status && status.label && String(status.label).startsWith('retardé');
const showPlatform = !isSuppressed && Boolean(cleanPlatform); const showPlatform = !isSuppressed && Boolean(cleanPlatform);
const stopsText = isExtended ? formatStopsForArrivees(horaire, gareDisplay || gareParam, normalizeName) : ''; const stopsList = isExtended ? getStopsListForArrivees(horaire, gareDisplay || gareParam, normalizeName) : [];
if (isExtended) { if (isExtended) {
return ( return (
@@ -1309,10 +1309,22 @@ export default function ClassiquesArrivees(){
</div> </div>
</div> </div>
{/* Ligne basse (108px) : gares de provenance défilantes */} {/* Ligne basse (108px) : gares de provenance défilantes avec puces jaunes */}
<div className="aff-classiques-arrivees__extended-bottom"> <div className="aff-classiques-arrivees__extended-bottom">
<div className="aff-classiques-arrivees__sub-stops"> <div className="aff-classiques-arrivees__sub-stops">
<MarqueeText text={stopsText} className="aff-classiques-arrivees__sub-stops-text" /> <MarqueeText
className="aff-classiques-arrivees__sub-stops-marquee"
text={
<span className="aff-classiques-arrivees__stops-chain">
{stopsList.map((stopName, sIdx) => (
<span key={sIdx} className="aff-classiques-arrivees__stop-item">
<span className="aff-classiques-arrivees__stop-bullet">•</span>
<span className="aff-classiques-arrivees__stop-name">{stopName}</span>
</span>
))}
</span>
}
/>
</div> </div>
</div> </div>
</li> </li>
@@ -1385,7 +1397,7 @@ export default function ClassiquesArrivees(){
displayRows.push({ displayRows.push({
...train, ...train,
_isExtended: true, _isExtended: true,
_slotIndex: usedSlots _trainIndex: trainIdx
}); });
usedSlots += 2; usedSlots += 2;
trainIdx++; trainIdx++;
@@ -1396,7 +1408,7 @@ export default function ClassiquesArrivees(){
displayRows.push({ displayRows.push({
...train, ...train,
_isExtended: false, _isExtended: false,
_slotIndex: usedSlots _trainIndex: trainIdx
}); });
usedSlots += 1; usedSlots += 1;
trainIdx++; trainIdx++;
src/pages/afficheurs/classiques/ClassiquesDeparts.css
+71 -32
View File
@@ -97,7 +97,14 @@
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; 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 { .aff-classiques-departs__extended-top {
@@ -110,13 +117,7 @@
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px; padding-left: 20px;
padding-right: 8px; padding-right: 8px;
} background: transparent;
.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);
} }
.aff-classiques-departs__extended-bottom { .aff-classiques-departs__extended-bottom {
@@ -127,15 +128,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding-left: 200px; padding-left: 290px;
padding-right: 280px; padding-right: 240px;
} background: transparent;
.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);
} }
.aff-classiques-departs__sub-stops { .aff-classiques-departs__sub-stops {
@@ -148,13 +143,43 @@
z-index: 2; 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); color: var(--white);
font-size: 52px; font-size: 58px;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
font-family: "Achemine", sans-serif; font-family: "Achemine", sans-serif;
white-space: nowrap; letter-spacing: -0.5px;
} }
/* Colonne 1 : Logo opérateur (blanc) */ /* Colonne 1 : Logo opérateur (blanc) */
@@ -330,11 +355,11 @@
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding-left: 24px; padding-left: 24px;
padding-right: 20px; padding-right: 8px;
background: #001e40 !important; background: #001e40 !important;
position: relative; position: relative;
z-index: 30; 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 { .aff-classiques-departs__info-bar {
@@ -343,12 +368,12 @@
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 30px; margin-right: 20px;
} }
.aff-classiques-departs__info-bar-text { .aff-classiques-departs__info-bar-text {
color: var(--white); color: var(--white);
font-size: 44px; font-size: 42px;
font-weight: 600; font-weight: 600;
font-family: "Achemine", sans-serif; font-family: "Achemine", sans-serif;
line-height: 1; line-height: 1;
@@ -359,15 +384,29 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 12px; gap: 8px;
border: 2.5px solid rgba(255, 255, 255, 0.7); border: 2.5px solid rgba(255, 255, 255, 0.85);
border-radius: 10px; border-radius: 6px;
padding: 6px 18px; padding: 4px 14px;
background: #00142e; background: rgba(0, 16, 40, 0.45);
font-family: "Achemine", sans-serif; 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-size: 52px;
font-weight: 700; font-weight: 700;
color: var(--white); line-height: 1;
letter-spacing: 2px; letter-spacing: 1px;
flex-shrink: 0; }
.aff-classiques-departs__bottom-clock-s {
font-size: 34px;
font-weight: 700;
line-height: 1;
margin-top: -6px;
letter-spacing: 0.5px;
} }
src/pages/afficheurs/classiques/ClassiquesDeparts.js
+26 -14
View File
@@ -72,11 +72,11 @@ const formatPlatform = (p) => {
return String(p).toUpperCase().replace(/VOIE|QUAI|\s+/gi, '').trim(); 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)) || []; const stops = (horaire && (horaire.stops || horaire.gares_desservies)) || [];
if (!Array.isArray(stops) || stops.length === 0) { if (!Array.isArray(stops) || stops.length === 0) {
const dest = formatStationName((horaire && (horaire.gare_arrivee_nom || horaire.gare_arrivee || horaire.destination)) || ''); 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(); const curNorm = normalizeFn ? normalizeFn(currentStationName || '') : String(currentStationName || '').toLowerCase().trim();
@@ -95,11 +95,10 @@ const formatStopsForDeparts = (horaire, currentStationName, normalizeFn) => {
const remainingStops = stops.slice(startIdx); const remainingStops = stops.slice(startIdx);
if (remainingStops.length === 0) { if (remainingStops.length === 0) {
const dest = formatStationName((horaire && (horaire.gare_arrivee_nom || horaire.gare_arrivee || horaire.destination)) || ''); 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 remainingStops.map(s => formatStationName(s.nom || s.gare_nom || s.name || s.stop_name || '')).filter(Boolean);
return stopNames.map(n => `• ${n}`).join(' ');
}; };
function BottomClock() { function BottomClock() {
@@ -115,9 +114,9 @@ function BottomClock() {
return ( return (
<div className="aff-classiques-departs__bottom-clock" aria-hidden> <div className="aff-classiques-departs__bottom-clock" aria-hidden>
<span>{hh}</span> <span className="aff-classiques-departs__bottom-clock-hm">{hh}</span>
<span>{mm}</span> <span className="aff-classiques-departs__bottom-clock-hm">{mm}</span>
<span>{ss}</span> <span className="aff-classiques-departs__bottom-clock-s">{ss}</span>
</div> </div>
); );
} }
@@ -1216,7 +1215,8 @@ export default function ClassiquesDeparts(){
const renderRow = (h, idx) => { const renderRow = (h, idx) => {
const isExtended = Boolean(h && h._isExtended); 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 (h && h._isEmpty) {
if (isExtended) { if (isExtended) {
@@ -1258,7 +1258,7 @@ export default function ClassiquesDeparts(){
const isDelayed = status && status.label && String(status.label).startsWith('retardé'); const isDelayed = status && status.label && String(status.label).startsWith('retardé');
const showPlatform = !isSuppressed && Boolean(cleanPlatform); const showPlatform = !isSuppressed && Boolean(cleanPlatform);
const stopsText = isExtended ? formatStopsForDeparts(horaire, gareDisplay || gareParam, normalizeName) : ''; const stopsList = isExtended ? getStopsListForDeparts(horaire, gareDisplay || gareParam, normalizeName) : [];
if (isExtended) { if (isExtended) {
return ( return (
@@ -1306,10 +1306,22 @@ export default function ClassiquesDeparts(){
</div> </div>
</div> </div>
{/* Ligne basse (108px) : gares desservies défilantes */} {/* Ligne basse (108px) : gares desservies défilantes avec puces jaunes */}
<div className="aff-classiques-departs__extended-bottom"> <div className="aff-classiques-departs__extended-bottom">
<div className="aff-classiques-departs__sub-stops"> <div className="aff-classiques-departs__sub-stops">
<MarqueeText text={stopsText} className="aff-classiques-departs__sub-stops-text" /> <MarqueeText
className="aff-classiques-departs__sub-stops-marquee"
text={
<span className="aff-classiques-departs__stops-chain">
{stopsList.map((stopName, sIdx) => (
<span key={sIdx} className="aff-classiques-departs__stop-item">
<span className="aff-classiques-departs__stop-bullet">•</span>
<span className="aff-classiques-departs__stop-name">{stopName}</span>
</span>
))}
</span>
}
/>
</div> </div>
</div> </div>
</li> </li>
@@ -1382,7 +1394,7 @@ export default function ClassiquesDeparts(){
displayRows.push({ displayRows.push({
...train, ...train,
_isExtended: true, _isExtended: true,
_slotIndex: usedSlots _trainIndex: trainIdx
}); });
usedSlots += 2; usedSlots += 2;
trainIdx++; trainIdx++;
@@ -1393,7 +1405,7 @@ export default function ClassiquesDeparts(){
displayRows.push({ displayRows.push({
...train, ...train,
_isExtended: false, _isExtended: false,
_slotIndex: usedSlots _trainIndex: trainIdx
}); });
usedSlots += 1; usedSlots += 1;
trainIdx++; trainIdx++;