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;
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;
}
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();
};
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 (
<div className="aff-classiques-arrivees__bottom-clock" aria-hidden>
<span>{hh}</span>
<span>{mm}</span>
<span>{ss}</span>
<span className="aff-classiques-arrivees__bottom-clock-hm">{hh}</span>
<span className="aff-classiques-arrivees__bottom-clock-hm">{mm}</span>
<span className="aff-classiques-arrivees__bottom-clock-s">{ss}</span>
</div>
);
}
@@ -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(){
</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__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>
</li>
@@ -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++;
src/pages/afficheurs/classiques/ClassiquesDeparts.css
+71 -32
View File
@@ -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;
}
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();
};
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 (
<div className="aff-classiques-departs__bottom-clock" aria-hidden>
<span>{hh}</span>
<span>{mm}</span>
<span>{ss}</span>
<span className="aff-classiques-departs__bottom-clock-hm">{hh}</span>
<span className="aff-classiques-departs__bottom-clock-hm">{mm}</span>
<span className="aff-classiques-departs__bottom-clock-s">{ss}</span>
</div>
);
}
@@ -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(){
</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__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>
</li>
@@ -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++;