Skip to content

Commit 104b257

Browse files
claraniclarani
committed
front: fix items alignement in stdcm card
Signed-off-by: Clara Ni <[email protected]>
1 parent b38f9e2 commit 104b257

File tree

12 files changed

+192
-114
lines changed

12 files changed

+192
-114
lines changed

‎front/src/applications/stdcmV2/components/StdcmCard.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,17 @@ export type StdcmCardProps = {
66
disabled?: boolean;
77
title?: React.ReactNode;
88
children: React.ReactNode;
9+
className?: string;
910
};
1011

11-
const StdcmCard = ({ name, hasTip = false, disabled = false, title, children }: StdcmCardProps) => (
12+
const StdcmCard = ({
13+
name,
14+
hasTip = false,
15+
disabled = false,
16+
title,
17+
children,
18+
className = '',
19+
}: StdcmCardProps) => (
1220
<div className={cx('stdcm-v2-card', { 'has-tip': hasTip, disabled })}>
1321
{name && (
1422
<div
@@ -23,7 +31,7 @@ const StdcmCard = ({ name, hasTip = false, disabled = false, title, children }:
2331
{title}
2432
</div>
2533
)}
26-
<div className="stdcm-v2-card__body">{children}</div>
34+
<div className={cx('stdcm-v2-card__body', `${className}`)}>{children}</div>
2735
</div>
2836
);
2937

‎front/src/applications/stdcmV2/components/StdcmConsist.tsx

+33-23
Original file line numberDiff line numberDiff line change
@@ -108,33 +108,43 @@ const StdcmConsist = ({ setCurrentSimulationInputs, disabled = false }: StdcmCon
108108
name={t('consist.consist')}
109109
title={<ConsistCardTitle rollingStock={rollingStock} />}
110110
disabled={disabled}
111+
className="consist"
111112
>
112-
<div className="stdcm-v2-consist">
113-
<div className="suggestions">
114-
<ComboBox
115-
id="tractionEngine"
116-
label={t('consist.tractionEngine')}
117-
value={filters.text.toUpperCase()}
118-
onClick={onInputClick}
119-
onChange={onInputChange}
120-
autoComplete="off"
121-
disabled={disabled}
122-
suggestions={filteredRollingStockList}
123-
getSuggestionLabel={(suggestion: LightRollingStockWithLiveries) => getLabel(suggestion)}
124-
onSelectSuggestion={onSelectSuggestion}
125-
/>
126-
</div>
127-
<div className="stdcm-v2-consist__properties d-flex justify-content-between">
128-
<Input id="tonnage" label={t('consist.tonnage')} trailingContent="t" />
129-
<Input id="length" label={t('consist.length')} trailingContent="m" />
130-
</div>
131-
<SpeedLimitByTagSelector
113+
<div className="traction-engine">
114+
<ComboBox
115+
id="tractionEngine"
116+
label={t('consist.tractionEngine')}
117+
value={filters.text.toUpperCase()}
118+
onClick={onInputClick}
119+
onChange={onInputChange}
120+
autoComplete="off"
132121
disabled={disabled}
133-
selectedSpeedLimitByTag={speedLimitByTag}
134-
speedLimitsByTags={speedLimitsByTags}
135-
dispatchUpdateSpeedLimitByTag={dispatchUpdateSpeedLimitByTag}
122+
suggestions={filteredRollingStockList}
123+
getSuggestionLabel={(suggestion: LightRollingStockWithLiveries) => getLabel(suggestion)}
124+
onSelectSuggestion={onSelectSuggestion}
136125
/>
137126
</div>
127+
<div className="stdcm-v2-consist__properties">
128+
<Input
129+
id="tonnage"
130+
label={t('consist.tonnage')}
131+
trailingContent="t"
132+
inputFieldWrapperClassname="weight"
133+
/>
134+
<Input
135+
id="length"
136+
label={t('consist.length')}
137+
trailingContent="m"
138+
inputFieldWrapperClassname="length"
139+
/>
140+
</div>
141+
<SpeedLimitByTagSelector
142+
disabled={disabled}
143+
selectedSpeedLimitByTag={speedLimitByTag}
144+
speedLimitsByTags={speedLimitsByTags}
145+
dispatchUpdateSpeedLimitByTag={dispatchUpdateSpeedLimitByTag}
146+
className="speed-limit-by-tag-selector"
147+
/>
138148
</StdcmCard>
139149
);
140150
};

‎front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ const StdcmDefaultCard = ({
1414
onClick,
1515
disabled = false,
1616
}: StdcmCardProps) => (
17-
<StdcmCard hasTip={hasTip} disabled={disabled}>
17+
<StdcmCard hasTip={hasTip} disabled={disabled} className="add-via">
1818
<button type="button" onClick={onClick}>
19-
<span className="stdcm-v2-default-card-icon ml-n1">{Icon}</span>
19+
<span className="stdcm-v2-default-card-icon">{Icon}</span>
2020
<span className="stdcm-v2-default-card-button">{text}</span>
2121
</button>
2222
</StdcmCard>

‎front/src/applications/stdcmV2/components/StdcmDestination.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ const StdcmDestination = ({
101101
name={t('trainPath.destination')}
102102
title={<img src={DestinationIcon} alt="destination" className="stdcm-destination-icon" />}
103103
disabled={disabled}
104+
className="extremity"
104105
>
105106
<div className="stdcm-v2-destination">
106107
<StdcmOperationalPoint

‎front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ const StdcmOpSchedule = ({
100100
);
101101

102102
return (
103-
<div className="d-flex flex-column">
104-
<div className="col-12 pr-1">
103+
<>
104+
<div className="arrival-type-select">
105105
<Select
106106
id={`select-${opId}`}
107107
value={opScheduleTimeType}
@@ -116,7 +116,7 @@ const StdcmOpSchedule = ({
116116
/>
117117
</div>
118118
{opScheduleTimeType === 'preciseTime' && (
119-
<div className="d-flex pl-2 pr-1">
119+
<div className="schedule">
120120
{/* TODO: Remove empty onChange events once we fix the warning on ui-core side */}
121121
<DatePicker
122122
inputProps={{
@@ -166,7 +166,7 @@ const StdcmOpSchedule = ({
166166
</div>
167167
</div>
168168
)}
169-
</div>
169+
</>
170170
);
171171
};
172172

‎front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,8 @@ const StdcmOperationalPoint = ({
133133
}, [point]);
134134

135135
return (
136-
<div className="flex">
137-
<div className="suggestions col-9">
136+
<div className="location-line">
137+
<div className="col-9 ci-input">
138138
<ComboBox
139139
id={`${opPointId}-ci`}
140140
label={t('trainPath.ci')}
@@ -148,7 +148,7 @@ const StdcmOperationalPoint = ({
148148
disableDefaultFilter
149149
/>
150150
</div>
151-
<div className="suggestions stdcm-v2-ch-selector w-100 px-1 pb-2 col-3">
151+
<div className="col-3 p-0">
152152
<Select
153153
label={t('trainPath.ch')}
154154
id={`${opPointId}-ch`}

‎front/src/applications/stdcmV2/components/StdcmOrigin.tsx

+17-18
Original file line numberDiff line numberDiff line change
@@ -90,29 +90,28 @@ const StdcmOrigin = ({
9090
<StdcmCard
9191
name={t('trainPath.origin')}
9292
title={<img src={OriginIcon} alt="origin" className="stdcm-origin-icon" />}
93+
className="extremity"
9394
disabled={disabled}
9495
hasTip
9596
>
96-
<div className="stdcm-v2-origin__parameters">
97-
<StdcmOperationalPoint
98-
updatePoint={updateOriginPoint}
99-
point={origin}
100-
opPointId={origin?.id || 'origin'}
97+
<StdcmOperationalPoint
98+
updatePoint={updateOriginPoint}
99+
point={origin}
100+
opPointId={origin?.id || 'origin'}
101+
disabled={disabled}
102+
/>
103+
{origin && (
104+
<StdcmOpSchedule
105+
onArrivalChange={onOriginArrivalChange}
106+
onArrivalTypeChange={onOriginArrivalTypeChange}
107+
onArrivalToleranceChange={onOriginToleranceChange}
108+
opTimingData={originArrival}
109+
opToleranceValues={originToleranceValues}
110+
opScheduleTimeType={origin?.arrivalType || ArrivalTimeTypes.PRECISE_TIME}
101111
disabled={disabled}
112+
opId="origin-arrival"
102113
/>
103-
{origin && (
104-
<StdcmOpSchedule
105-
onArrivalChange={onOriginArrivalChange}
106-
onArrivalTypeChange={onOriginArrivalTypeChange}
107-
onArrivalToleranceChange={onOriginToleranceChange}
108-
opTimingData={originArrival}
109-
opToleranceValues={originToleranceValues}
110-
opScheduleTimeType={origin?.arrivalType || ArrivalTimeTypes.PRECISE_TIME}
111-
disabled={disabled}
112-
opId="origin-arrival"
113-
/>
114-
)}
115-
</div>
114+
)}
116115
</StdcmCard>
117116
);
118117
};

‎front/src/applications/stdcmV2/components/StdcmStopType.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const StdcmStopType = ({ stopTypes, updatePathStepStopType }: StdcmStopTypeProps
1212
const { t } = useTranslation('stdcm');
1313

1414
return (
15-
<div className="stdcm-v2-via-stop-for selector">
15+
<div className="stop-type-selector">
1616
<Select
1717
label={t('trainPath.type')}
1818
id="type"

‎front/src/applications/stdcmV2/components/StdcmVias.tsx

+7-8
Original file line numberDiff line numberDiff line change
@@ -140,15 +140,14 @@ const StdcmVias = ({ disabled = false, setCurrentSimulationInputs }: StdcmConfig
140140
}
141141
hasTip
142142
disabled={disabled}
143+
className="via"
143144
>
144-
<div className="stdcm-v2-vias">
145-
<StdcmOperationalPoint
146-
updatePoint={(e) => updatePathStepsList(e, pathStepIndex)}
147-
point={pathStep}
148-
opPointId={pathStep.id}
149-
disabled={disabled}
150-
/>
151-
</div>
145+
<StdcmOperationalPoint
146+
updatePoint={(e) => updatePathStepsList(e, pathStepIndex)}
147+
point={pathStep}
148+
opPointId={pathStep.id}
149+
disabled={disabled}
150+
/>
152151
{'uic' in pathStep && pathStep.uic !== -1 && (
153152
<>
154153
<StdcmStopType

‎front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ type SpeedLimitByTagSelectorProps = {
1313
selectedSpeedLimitByTag?: string;
1414
speedLimitsByTags: string[];
1515
dispatchUpdateSpeedLimitByTag: (newTag: string | null) => void;
16+
className?: string;
1617
};
1718

1819
export default function SpeedLimitByTagSelector({
@@ -21,6 +22,7 @@ export default function SpeedLimitByTagSelector({
2122
selectedSpeedLimitByTag: speedLimitByTag,
2223
speedLimitsByTags,
2324
dispatchUpdateSpeedLimitByTag,
25+
className = '',
2426
}: SpeedLimitByTagSelectorProps) {
2527
const { t } = useTranslation(['operationalStudies/manageTrainSchedule']);
2628

@@ -34,9 +36,12 @@ export default function SpeedLimitByTagSelector({
3436
return (
3537
<div className="osrd-config-item mb-3">
3638
<div
37-
className={cx('osrd-config-item-container', {
38-
'd-flex align-items-center gap-10': condensed,
39-
})}
39+
className={
40+
(cx('osrd-config-item-container', {
41+
'd-flex align-items-center gap-10': condensed,
42+
}),
43+
className)
44+
}
4045
>
4146
<Select
4247
disabled={disabled}

0 commit comments

Comments
 (0)