front: add ellipsis in case of long rolling stock name in MangeTrainS…

…chedule Signed-off-by: Clara Ni <[email protected]>
OpenRailAssociation · Feb 20, 2025 · 676b770 · 676b770
1 parent face6db
commit 676b770
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 9 deletions.
diff --git a/front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx b/front/src/applications/operationalStudies/views/ManageTrainSchedule.tsx
@@ -94,15 +94,15 @@ const ManageTrainSchedule = () => {
     id: 'rollingstock',
     title: rollingStock ? (
       <div className="managetrainschedule-tab">
-        <span className="rolling-stock">
+        <span className="rolling-stock-img">
           <RollingStock2Img rollingStock={rollingStock} />
         </span>
-        <span className="ml-2">{rollingStock.name}</span>
+        <span className="rolling-stock-name">{rollingStock.name}</span>
       </div>
     ) : (
       <div className="managetrainschedule-tab">
         <img src={rollingStockPic} alt="rolling stock" />
-        <span className="ml-2">{t('tabs.rollingStock')}</span>
+        <span className="rolling-stock-name">{t('tabs.rollingStock')}</span>
       </div>
     ),
     withWarning: rollingStockId === undefined,

diff --git a/front/src/modules/rollingStock/styles/_rollingStockCard.scss b/front/src/modules/rollingStock/styles/_rollingStockCard.scss
@@ -120,6 +120,7 @@
           font-weight: bold;
           overflow: hidden;
           text-overflow: ellipsis;
+          white-space: nowrap;
         }
         .rollingstock-info-unit {
           &.UM2 {
@@ -138,6 +139,7 @@
           font-size: 0.7rem;
           overflow: hidden;
           text-overflow: ellipsis;
+          white-space: nowrap;
         }
       }
       .rollingstock-info-middle {

diff --git a/front/src/modules/rollingStock/styles/_rollingStockSelector.scss b/front/src/modules/rollingStock/styles/_rollingStockSelector.scss
@@ -15,6 +15,9 @@
       .rollingstock-info-series {
         position: relative;
         font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       .rollingstock-info-unit {
         position: relative;
@@ -34,6 +37,9 @@
         text-transform: uppercase;
         vertical-align: text-bottom;
         font-size: 0.7rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }
@@ -82,6 +88,9 @@
       border-radius: 4px;
       padding: 0 8px;
       font-size: 0.8rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }

diff --git a/front/src/styles/scss/applications/operationalStudies/_managetrainschedule.scss b/front/src/styles/scss/applications/operationalStudies/_managetrainschedule.scss
@@ -3,19 +3,31 @@
     display: flex;
     align-items: center;
     width: 100%;
-    .rolling-stock {
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .rolling-stock-img {
       width: 48px;
-      overflow: hidden;
       padding-bottom: 4px;
+      overflow: hidden;
+      mask-image: linear-gradient(10deg, black 80%, rgba(0, 0, 0, 0));
+      -webkit-mask-image: linear-gradient(90deg, black 90%, rgba(0, 0, 0, 0),  );
+
       img {
         height: 16px;
         object-fit: cover;
         object-position: left;
-        transform: scaleX(-1);
-        mask-image: linear-gradient(90deg, black 80%, rgba(0, 0, 0, 0));
-        -webkit-mask-image: linear-gradient(90deg, black 80%, rgba(0, 0, 0, 0));
       }
     }
+
+    .rolling-stock-name {
+      margin-left: 8px;
+      width: calc(100% - 48px - 8px); // 48px for the rs image width, 8px for the left margin
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     img {
       height: 24px;
     }

diff --git a/front/src/styles/scss/common/components/_tabs.scss b/front/src/styles/scss/common/components/_tabs.scss
@@ -7,12 +7,14 @@
     width: 100%;
 
     .tabs.pills {
-      overflow: auto;
       justify-content: space-between;
       min-height: 37.6px;
 
       .tab {
         flex-grow: 1;
+        // 4 pills to display in ManageTrainSchedule, with 3 gaps of 16px
+        width: calc((100% - 3 * 16px) / 4 );
+        text-overflow: ellipsis;
       }
     }
   }