front: match the width and spacing of the results table to the mockup

Signed-off-by: theocrsb <[email protected]>
OpenRailAssociation · Dec 2, 2024 · d10b2e3 · d10b2e3
1 parent c98d385
commit d10b2e3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/front/src/applications/stdcm/components/StdcmResults/StdcmResultsTable.tsx b/front/src/applications/stdcm/components/StdcmResults/StdcmResultsTable.tsx
@@ -39,9 +39,9 @@ const StcdmResultsTable = ({
             <th aria-label="line-count" />
             <th>{t('operationalPoint')}</th>
             <th>{t('code')}</th>
-            <th>{t('endStop')}</th>
-            <th>{t('passageStop')}</th>
-            <th>{t('startStop')}</th>
+            <th className="head-stop">{t('endStop')}</th>
+            <th className="head-stop">{t('passageStop')}</th>
+            <th className="head-stop">{t('startStop')}</th>
             <th className="weight">{t('weight')}</th>
             <th>{t('refEngine')}</th>
           </tr>
@@ -73,7 +73,7 @@ const StcdmResultsTable = ({
                   >
                     {index + 1}
                   </td>
-                  <td style={{ color: 'rgb(49, 46, 43)' }}>
+                  <td className="name" style={{ color: 'rgb(49, 46, 43)' }}>
                     {isNotExtremity &&
                     !isRequestedPathStep &&
                     step.name === prevStep.name &&
@@ -109,7 +109,7 @@ const StcdmResultsTable = ({
                   <td className="weight" style={{ color: !isFirstStep ? '#797671' : '#312E2B' }}>
                     {isNotExtremity ? '=' : `${Math.floor(mass)}t`}
                   </td>
-                  <td style={{ color: !isFirstStep ? '#797671' : '#312E2B' }}>
+                  <td className="ref" style={{ color: !isFirstStep ? '#797671' : '#312E2B' }}>
                     {isNotExtremity ? '=' : stdcmData.rollingStock.metadata?.reference}
                   </td>
                 </tr>

diff --git a/front/src/styles/scss/applications/stdcm/_home.scss b/front/src/styles/scss/applications/stdcm/_home.scss
@@ -210,7 +210,7 @@
       box-shadow:
         0 0 0 2px rgba(255, 255, 255, 0.75) inset,
         0 0 0 1px rgba(0, 0, 0, 0.25) inset;
-      margin-left: 48px;
+      margin-left: 32px;
       width: 100%;
       min-width: 450px;
       height: calc(100vh - 64px);

diff --git a/front/src/styles/scss/applications/stdcm/_results.scss b/front/src/styles/scss/applications/stdcm/_results.scss
@@ -143,13 +143,13 @@
     .results-and-sheet {
       display: flex;
       flex-direction: column;
-      width: 70%;
 
       .table-container::-webkit-scrollbar {
         display: none; /* Safari and Chrome */
       }
 
       .table-container {
+        width: 804px;
         margin-right: 32px;
 
         .table-results {
@@ -172,6 +172,9 @@
             padding-bottom: 5px;
             vertical-align: middle;
           }
+          .head-stop {
+            text-align: center;
+          }
           th:last-child {
             text-transform: none;
           }
@@ -190,20 +193,23 @@
             vertical-align: middle;
           }
           .index {
-            padding-left: 32px;
+            width: 64px;
+            text-align: end;
+            padding-right: 24px;
           }
-          .pr {
-            padding-right: 199px;
+          .name {
+            width: 232;
           }
           .ch {
-            padding-right: 36px;
+            width: 56px;
           }
           .stop {
             font-size: 0.875rem;
             font-weight: 600;
             color: rgb(0, 0, 0);
             line-height: 20px;
-            width: 75px;
+            width: 72px;
+            text-align: center;
           }
           .stop-with-duration {
             font-size: 0.875rem;
@@ -216,13 +222,17 @@
             text-align: center;
           }
           .weight {
-            padding-left: 33px;
-            color: '#797671';
+            width: 128px;
+            padding-left: 40px;
 
             &.lastStep {
               color: '#797671';
             }
           }
+          .ref {
+            width: 108px;
+          }
+
           .semi-bold-output {
             font-weight: 600;
           }