front: fix width and height of a train schedule tile can be expanded

OpenRailAssociation · Jul 17, 2024 · 5bf48e4 · 5bf48e4
1 parent a3464b9
commit 5bf48e4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/front/src/modules/trainschedule/components/TimetableV2/TimetableTrainCardV2.tsx b/front/src/modules/trainschedule/components/TimetableV2/TimetableTrainCardV2.tsx
@@ -27,6 +27,7 @@ import { castErrorToFailure } from 'utils/error';
 import { sec2time } from 'utils/timeManipulation';
 
 import type { InvalidReason, TrainScheduleWithDetails } from './types';
+import { transformDateWithoutYear } from './utils';
 
 type TimetableTrainCardProps = {
   isSelectable: boolean;
@@ -121,7 +122,6 @@ const TimetableTrainCardV2 = ({
       const trainDetail = trainsResults[0];
       const formattedStartTimeMs = isoDateToMs(trainDetail.start_time);
       const newStartTimeString = formatToIsoDate(formattedStartTimeMs + 1000 * 60 * trainDelta);
-
       const newTrain: TrainScheduleBase = {
         ...omit(trainDetail, ['id', 'timetable_id']),
         start_time: newStartTimeString,
@@ -208,7 +208,9 @@ const TimetableTrainCardV2 = ({
                   {getInvalidIcon(train.invalidReason)}
                 </div>
               )}
-              {train.trainName}
+              <div className="train-name" title={train.trainName}>
+                {train.trainName}
+              </div>
               {train.rollingStock && (
                 <span className="img-container">
                   <RollingStock2Img rollingStock={train.rollingStock} />
@@ -226,8 +228,12 @@ const TimetableTrainCardV2 = ({
                 </div>
               )}
               <div>
-                <div className="scenario-timetable-train-departure">{train.startTime}</div>
-                <div className="scenario-timetable-train-arrival">{train.arrivalTime}</div>
+                <div className="scenario-timetable-train-departure">
+                  {transformDateWithoutYear(train.startTime)}
+                </div>
+                <div className="scenario-timetable-train-arrival" title={train.arrivalTime}>
+                  {transformDateWithoutYear(train.arrivalTime)}
+                </div>
               </div>
             </div>
           </div>

diff --git a/front/src/modules/trainschedule/components/TimetableV2/utils.ts b/front/src/modules/trainschedule/components/TimetableV2/utils.ts
@@ -31,3 +31,6 @@ export const extractTagCode = (tag?: string | null) => {
 
 export const timetableHasInvalidTrain = (trains: TrainScheduleWithDetails[]) =>
   trains.some((train) => train.invalidReason);
+
+export const transformDateWithoutYear = (dateTime: string): string =>
+  `${dateTime.split('/')[0]}/${dateTime.split('/')[1]} ${dateTime.split('/')[2].slice(5)} `;
diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -214,6 +214,7 @@
           display: flex;
 
           .scenario-timetable-train {
+            max-width: 100%;
             position: relative;
             display: flex;
             margin-bottom: 0.5rem;
@@ -261,6 +262,7 @@
               }
             }
             .scenario-timetable-train-container {
+              max-width: 100%;
               cursor: pointer;
               border: 1px solid var(--coolgray3);
               transition: border-color 0.2s;
@@ -278,6 +280,12 @@
                   align-items: center;
                   overflow: hidden;
                   padding-left: 0.25rem;
+                  .train-name {
+                    width: 8rem;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
                   .scenario-timetable-train-idx {
                     display: flex;
                     align-items: center;
@@ -320,6 +328,7 @@
                 .scenario-timetable-train-times {
                   display: flex;
                   justify-content: right;
+                  align-items: center;
                   min-width: 20%;
                   text-align: right;
                   line-height: 0.8rem;
@@ -334,7 +343,7 @@
                   }
                 }
                 .V2 {
-                  min-width: 40%;
+                  min-width: 45%;
                 }
                 .not-honored {
                   background-color: var(--warning);
@@ -417,12 +426,13 @@
 
             &:hover:not(.modified, .invalid) {
               .scenario-timetable-train-container {
+                max-width: 100%;
                 border-radius: 4px 0 0 4px;
                 border-color: var(--secondary);
                 .scenario-timetable-train-header {
                   background-color: var(--secondary);
                   color: var(--white);
-                  .V2 {
+                  .not-honored {
                     min-width: 55%;
                   }
                 }