front: fix items alignement in stdcm card

Signed-off-by: Clara Ni <[email protected]>
OpenRailAssociation · Oct 10, 2024 · 860fe91 · 860fe91
1 parent 214ceb1
commit 860fe91
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 87 deletions.
diff --git a/front/src/applications/stdcmV2/components/StdcmCard.tsx b/front/src/applications/stdcmV2/components/StdcmCard.tsx
@@ -6,9 +6,17 @@ export type StdcmCardProps = {
   disabled?: boolean;
   title?: React.ReactNode;
   children: React.ReactNode;
+  className?: string;
 };
 
-const StdcmCard = ({ name, hasTip = false, disabled = false, title, children }: StdcmCardProps) => (
+const StdcmCard = ({
+  name,
+  hasTip = false,
+  disabled = false,
+  title,
+  children,
+  className = '',
+}: StdcmCardProps) => (
   <div className={cx('stdcm-v2-card', { 'has-tip': hasTip, disabled })}>
     {name && (
       <div
@@ -23,7 +31,7 @@ const StdcmCard = ({ name, hasTip = false, disabled = false, title, children }:
         {title}
       </div>
     )}
-    <div className="stdcm-v2-card__body">{children}</div>
+    <div className={cx('stdcm-v2-card__body', `${className}`)}>{children}</div>
   </div>
 );
 

diff --git a/front/src/applications/stdcmV2/components/StdcmConsist.tsx b/front/src/applications/stdcmV2/components/StdcmConsist.tsx
@@ -110,7 +110,7 @@ const StdcmConsist = ({ setCurrentSimulationInputs, disabled = false }: StdcmCon
       disabled={disabled}
     >
       <div className="stdcm-v2-consist">
-        <div className="suggestions">
+        <div className="traction-engine">
           <ComboBox
             id="tractionEngine"
             label={t('consist.tractionEngine')}
@@ -124,15 +124,26 @@ const StdcmConsist = ({ setCurrentSimulationInputs, disabled = false }: StdcmCon
             onSelectSuggestion={onSelectSuggestion}
           />
         </div>
-        <div className="stdcm-v2-consist__properties d-flex justify-content-between">
-          <Input id="tonnage" label={t('consist.tonnage')} trailingContent="t" />
-          <Input id="length" label={t('consist.length')} trailingContent="m" />
+        <div className="stdcm-v2-consist__properties">
+          <Input
+            id="tonnage"
+            label={t('consist.tonnage')}
+            trailingContent="t"
+            inputFieldWrapperClassname="weight"
+          />
+          <Input
+            id="length"
+            label={t('consist.length')}
+            trailingContent="m"
+            inputFieldWrapperClassname="length"
+          />
         </div>
         <SpeedLimitByTagSelector
           disabled={disabled}
           selectedSpeedLimitByTag={speedLimitByTag}
           speedLimitsByTags={speedLimitsByTags}
           dispatchUpdateSpeedLimitByTag={dispatchUpdateSpeedLimitByTag}
+          className="speed-limit-by-tag-selector"
         />
       </div>
     </StdcmCard>

diff --git a/front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx b/front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx
@@ -14,9 +14,9 @@ const StdcmDefaultCard = ({
   onClick,
   disabled = false,
 }: StdcmCardProps) => (
-  <StdcmCard hasTip={hasTip} disabled={disabled}>
+  <StdcmCard hasTip={hasTip} disabled={disabled} className="add-via">
     <button type="button" onClick={onClick}>
-      <span className="stdcm-v2-default-card-icon ml-n1">{Icon}</span>
+      <span className="stdcm-v2-default-card-icon">{Icon}</span>
       <span className="stdcm-v2-default-card-button">{text}</span>
     </button>
   </StdcmCard>

diff --git a/front/src/applications/stdcmV2/components/StdcmDestination.tsx b/front/src/applications/stdcmV2/components/StdcmDestination.tsx
@@ -101,6 +101,7 @@ const StdcmDestination = ({
       name={t('trainPath.destination')}
       title={<img src={DestinationIcon} alt="destination" className="stdcm-destination-icon" />}
       disabled={disabled}
+      className="extremity"
     >
       <div className="stdcm-v2-destination">
         <StdcmOperationalPoint

diff --git a/front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx b/front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx
@@ -100,8 +100,8 @@ const StdcmOpSchedule = ({
   );
 
   return (
-    <div className="d-flex flex-column">
-      <div className="col-12 pr-1">
+    <>
+      <div className="arrival-type-select">
         <Select
           id={`select-${opId}`}
           value={opScheduleTimeType}
@@ -116,7 +116,7 @@ const StdcmOpSchedule = ({
         />
       </div>
       {opScheduleTimeType === 'preciseTime' && (
-        <div className="d-flex pl-2 pr-1">
+        <div className="d-flex">
           {/* TODO: Remove empty onChange events once we fix the warning on ui-core side */}
           <DatePicker
             inputProps={{
@@ -166,7 +166,7 @@ const StdcmOpSchedule = ({
           </div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

diff --git a/front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx b/front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx
@@ -126,8 +126,8 @@ const StdcmOperationalPoint = ({
   }, [point]);
 
   return (
-    <div className="flex">
-      <div className="suggestions col-9">
+    <div className="location-line">
+      <div className="col-9 ci-input">
         <ComboBox
           id={`${opPointId}-ci`}
           label={t('trainPath.ci')}
@@ -140,7 +140,7 @@ const StdcmOperationalPoint = ({
           onSelectSuggestion={onSelectSuggestion}
         />
       </div>
-      <div className="suggestions stdcm-v2-ch-selector w-100 px-1 pb-2 col-3">
+      <div className="col-3 p-0">
         <Select
           label={t('trainPath.ch')}
           id={`${opPointId}-ch`}

diff --git a/front/src/applications/stdcmV2/components/StdcmOrigin.tsx b/front/src/applications/stdcmV2/components/StdcmOrigin.tsx
@@ -90,29 +90,28 @@ const StdcmOrigin = ({
     <StdcmCard
       name={t('trainPath.origin')}
       title={<img src={OriginIcon} alt="origin" className="stdcm-origin-icon" />}
+      className="extremity"
       disabled={disabled}
       hasTip
     >
-      <div className="stdcm-v2-origin__parameters">
-        <StdcmOperationalPoint
-          updatePoint={updateOriginPoint}
-          point={origin}
-          opPointId={origin?.id || 'origin'}
+      <StdcmOperationalPoint
+        updatePoint={updateOriginPoint}
+        point={origin}
+        opPointId={origin?.id || 'origin'}
+        disabled={disabled}
+      />
+      {origin && (
+        <StdcmOpSchedule
+          onArrivalChange={onOriginArrivalChange}
+          onArrivalTypeChange={onOriginArrivalTypeChange}
+          onArrivalToleranceChange={onOriginToleranceChange}
+          opTimingData={originArrival}
+          opToleranceValues={originToleranceValues}
+          opScheduleTimeType={origin?.arrivalType || ArrivalTimeTypes.PRECISE_TIME}
           disabled={disabled}
+          opId="origin-arrival"
         />
-        {origin && (
-          <StdcmOpSchedule
-            onArrivalChange={onOriginArrivalChange}
-            onArrivalTypeChange={onOriginArrivalTypeChange}
-            onArrivalToleranceChange={onOriginToleranceChange}
-            opTimingData={originArrival}
-            opToleranceValues={originToleranceValues}
-            opScheduleTimeType={origin?.arrivalType || ArrivalTimeTypes.PRECISE_TIME}
-            disabled={disabled}
-            opId="origin-arrival"
-          />
-        )}
-      </div>
+      )}
     </StdcmCard>
   );
 };

diff --git a/front/src/applications/stdcmV2/components/StdcmStopType.tsx b/front/src/applications/stdcmV2/components/StdcmStopType.tsx
@@ -12,7 +12,7 @@ const StdcmStopType = ({ stopTypes, updatePathStepStopType }: StdcmStopTypeProps
   const { t } = useTranslation('stdcm');
 
   return (
-    <div className="stdcm-v2-via-stop-for selector">
+    <div className="stop-type-selector">
       <Select
         label={t('trainPath.type')}
         id="type"

diff --git a/front/src/applications/stdcmV2/components/StdcmVias.tsx b/front/src/applications/stdcmV2/components/StdcmVias.tsx
@@ -138,15 +138,14 @@ const StdcmVias = ({ disabled = false, setCurrentSimulationInputs }: StdcmConfig
                 }
                 hasTip
                 disabled={disabled}
+                className="via"
               >
-                <div className="stdcm-v2-vias">
-                  <StdcmOperationalPoint
-                    updatePoint={(e) => updatePathStepsList(e, pathStepIndex)}
-                    point={pathStep}
-                    opPointId={pathStep.id}
-                    disabled={disabled}
-                  />
-                </div>
+                <StdcmOperationalPoint
+                  updatePoint={(e) => updatePathStepsList(e, pathStepIndex)}
+                  point={pathStep}
+                  opPointId={pathStep.id}
+                  disabled={disabled}
+                />
                 {'uic' in pathStep && pathStep.uic !== -1 && (
                   <>
                     <StdcmStopType

diff --git a/front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx b/front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx
@@ -13,6 +13,7 @@ type SpeedLimitByTagSelectorProps = {
   selectedSpeedLimitByTag?: string;
   speedLimitsByTags: string[];
   dispatchUpdateSpeedLimitByTag: (newTag: string | null) => void;
+  className?: string;
 };
 
 export default function SpeedLimitByTagSelector({
@@ -21,6 +22,7 @@ export default function SpeedLimitByTagSelector({
   selectedSpeedLimitByTag: speedLimitByTag,
   speedLimitsByTags,
   dispatchUpdateSpeedLimitByTag,
+  className = '',
 }: SpeedLimitByTagSelectorProps) {
   const { t } = useTranslation(['operationalStudies/manageTrainSchedule']);
 
@@ -34,9 +36,12 @@ export default function SpeedLimitByTagSelector({
   return (
     <div className="osrd-config-item mb-3">
       <div
-        className={cx('osrd-config-item-container', {
-          'd-flex align-items-center gap-10': condensed,
-        })}
+        className={
+          (cx('osrd-config-item-container', {
+            'd-flex align-items-center gap-10': condensed,
+          }),
+          className)
+        }
       >
         <Select
           disabled={disabled}

diff --git a/front/src/styles/scss/applications/stdcmV2/_card.scss b/front/src/styles/scss/applications/stdcmV2/_card.scss
@@ -61,39 +61,101 @@
   }
 
   .stdcm-v2-card__body {
-    padding: 0.688rem 1rem 0.8125rem 1.5rem;
-    // TODO: remove this style after ui-core component is implemented
-    .suggestions * label,
-    .stdcm-v2-via-stop-for * label {
+    padding: .875rem 1.5rem 1rem .5rem;
+
+    .location-line {
+      padding-left: 1rem;
+      display: flex;
+
+      .ci-input {
+        padding: 0 .625rem 0 0 ;
+      }
+    }
+
+    // Fix osrd-ui styles
+    label {
       margin-bottom: 0;
     }
 
     .feed-back {
-      padding-right: 0.3rem;
-      padding-left: 0;
+      padding: 0;
+    }
+
+    .date-picker {
+      .feed-back {
+        padding-right: .625rem;
+        padding-left: 1rem;
+      }
+    }
+
+    .time-picker {
+      .feed-back {
+        padding-right: .625rem;
+        width: 7.5rem;
+      }
+    }
+
+    .tolerance-picker {
+      .feed-back {
+        width: 7.5rem;
+      }
+    }
+
+    .combo-box {
+      .suggestions-list {
+        width: 99%;
+        left: 0;
+      }
+
+      .feed-back {
+        padding-bottom: 1rem;
+      }
     }
 
-    .selector {
-      padding-inline: 0.188rem 0.25rem;
+    // cards styles
+    &.extremity {
+      padding-bottom: 1rem;
+
+      .arrival-type-select {
+        padding-top: 1.125rem;
+        padding-left: 1rem;
+        padding-bottom: .875rem;
+      }
     }
 
-    .stop-time {
-      padding-left: 0.125rem;
-      padding: 0.375rem 0.3rem 0.625rem 0rem;
-      padding-left: 0rem;
-      padding-right: 0rem;
+    &.via {
+      padding-right: .5rem;
+      padding-bottom: 1rem;
+
+      .location-line {
+        padding-right: 1rem;
+      }
+
+      .stop-type-selector {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+
+      .stop-time {
+        .feed-back {
+          padding-top: .625rem;
+          padding-right: 1rem;
+          padding-left: 1rem;
+          padding-bottom: .375rem;
+        }
+      }
     }
 
-    .suggestions-list {
-      width: 99%;
-      left: 0;
+    &.add-via {
+      padding-left: .75rem;
     }
 
     .stdcm-v2-default-card-button {
       color: rgba(24, 68, 239, 1);
       line-height: 24px;
       margin-left: 0.75rem;
     }
+
     button:focus {
       outline: none;
     }
@@ -124,9 +186,3 @@
     }
   }
 }
-
-.stdcm-v2-card:last-of-type {
-  .stdcm-v2-card__body {
-    padding-bottom: 0.75rem;
-  }
-}