front: reduce font size of min/100km in timesstops output table

Signed-off-by: Alice Khoudli <[email protected]>
OpenRailAssociation · Nov 28, 2024 · b323bd2 · b323bd2
1 parent 186f26c
commit b323bd2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx b/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx
@@ -5,6 +5,8 @@ import { keyColumn, type Column, checkboxColumn, createTextColumn } from 'react-
 import type { CellComponent } from 'react-datasheet-grid/dist/types';
 import { useTranslation } from 'react-i18next';
 
+import { NO_BREAK_SPACE } from 'utils/strings';
+
 import { marginRegExValidation } from '../consts';
 import { disabledTextColumn } from '../helpers/utils';
 import ReadOnlyTime from '../ReadOnlyTime';
@@ -167,15 +169,35 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
             alignRight: true,
           })
         ),
+        ...(isOutputTable && {
+          component: ({ rowData }) => {
+            if (!rowData.theoreticalMargin) return null;
+            const [digits, unit] = rowData.theoreticalMargin.split(NO_BREAK_SPACE);
+            return (
+              <span className="dsg-input dsg-input-align-right self-center text-nowrap">
+                {digits}
+                {NO_BREAK_SPACE}
+                {unit === 'min/100km' ? (
+                  <span className="small-unit-container">
+                    <span>min/</span>
+                    <br />
+                    <span>100km</span>
+                  </span>
+                ) : (
+                  unit
+                )}
+              </span>
+            );
+          },
+        }),
         cellClassName: ({ rowData }) =>
           cx({
             invalidCell: !isOutputTable && !rowData.isMarginValid,
             repeatedValue: rowData.isTheoreticalMarginBoundary === false, // the class should be added on false but not undefined
           }),
         title: t('theoreticalMargin'),
         headerClassName: 'padded-header',
-        minWidth: 100,
-        maxWidth: 130,
+        ...fixedWidth(isOutputTable ? 75 : 110),
         disabled: ({ rowIndex }) => isOutputTable || rowIndex === allWaypoints.length - 1,
       },
       ...extraOutputColumns,

diff --git a/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss b/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss
@@ -11,6 +11,10 @@
   --dsg-header-text-color: var(--grey50);
   --dsg-header-active-text-color: var(--black100);
 
+  .invalidCell {
+    color: red !important;
+  }
+
   .padded-header > * {
     padding-inline: 8px 16px;
   }
@@ -19,8 +23,16 @@
     color: var(--grey50);
   }
 
-  .invalidCell {
-    color: red !important;
+  .self-center {
+    align-self: center;
+  }
+
+  .small-unit-container {
+    display: inline-block;
+    font-size: 0.5rem;
+    line-height: 8px;
+    text-align: left;
+    vertical-align: -10%;
   }
 
   .repeatedValue {