front: display all the trains of a conflict

OpenRailAssociation · Oct 5, 2023 · 1bd551d · 1bd551d
1 parent fce88db
commit 1bd551d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/front/src/modules/conflict/components/ConflictsList.tsx b/front/src/modules/conflict/components/ConflictsList.tsx
@@ -18,15 +18,18 @@ function ConflictCard({ conflict }: { conflict: Conflict }) {
     <div className="conflict-card">
       <BsLightningFill color="red" />
       <div className="conflict-trains">
-        <div className="card-text">{conflict.train_names[0]}</div>
-        <div className="card-text">{conflict.train_names[1]}</div>
+        {conflict.train_names.map((train_name, index) => (
+          <div className="card-text" key={`train-${index}-${train_name}`}>
+            {train_name}
+          </div>
+        ))}
       </div>
       <div className="conflict-type">
-        <p className="card-text">{t(`${conflict.conflict_type}`)}</p>
+        <p>{t(`${conflict.conflict_type}`)}</p>
       </div>
       <div className="conflict-times">
-        <div className="card-text start-time">{sec2time(conflict.start_time)}</div>
-        <div className="card-text end-time">{sec2time(conflict.end_time)}</div>
+        <div className="start-time">{sec2time(conflict.start_time)}</div>
+        <div className="end-time">{sec2time(conflict.end_time)}</div>
       </div>
     </div>
   );

diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -157,12 +157,10 @@
         border-color: transparent;
         background-color: transparent;
         color: var(--secondary);
-
           &.on {
             color: white;
             background-color: var(--secondary);
           }
-
       }
       .multiselect-delete {
         width: 2rem;
@@ -506,17 +504,22 @@
               background-color: rgba(var(--orange-rgb), 0.1);
             }
             .conflict-trains {
-              width: 18%;
               text-align: left;
               font-size: 0.9rem;
               font-weight: 600;
+              margin: 0 0.5rem;
+              width: 25%;
+              .card-text {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+              }
             }
             .conflict-type {
-              width: 67%;
               text-align: left;
+              flex-grow: 1;
             }
             .conflict-times {
-              width: 15%;
               text-align: right;
               font-size: 0.8rem;
               .start-time {