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

Signed-off-by: theocrsb <[email protected]>
OpenRailAssociation · Dec 5, 2024 · eec04ff · eec04ff
1 parent 50a599e
commit eec04ff
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 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>
@@ -76,7 +76,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 &&
@@ -112,7 +112,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
@@ -222,7 +222,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
@@ -1,6 +1,6 @@
 .stdcm-results {
   background-color: rgb(233, 239, 242);
-  padding: 29px 30px 32px 32px;
+  padding: 29px 32px 32px;
   position: relative;
 
   .simulation-navigator {
@@ -138,18 +138,17 @@
 
   .simulation-results {
     display: flex;
-    justify-content: space-between;
 
     .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 +171,9 @@
             padding-bottom: 5px;
             vertical-align: middle;
           }
+          .head-stop {
+            text-align: center;
+          }
           th:last-child {
             text-transform: none;
           }
@@ -190,20 +192,23 @@
             vertical-align: middle;
           }
           .index {
-            padding-left: 32px;
+            width: 64px;
+            text-align: end;
+            padding-right: 24px;
           }
-          .pr {
-            padding-right: 199px;
+          .name {
+            width: 232px;
           }
           .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 +221,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;
           }
@@ -323,19 +332,19 @@
     }
 
     .simulation-failure {
-      text-align: left;
-      letter-spacing: 0;
       display: flex;
       flex-direction: column;
+      flex-shrink: 0;
+      width: 836px;
       min-height: 168px;
-      width: 70%;
+      text-align: left;
+      letter-spacing: 0;
       color: var(--grey80);
 
       .title {
         color: rgba(33, 100, 130, 1);
         font-size: 1.5rem;
         font-weight: 600;
-        font-style: SemiBold;
         line-height: 32px;
         margin-bottom: 7px;
       }
@@ -351,11 +360,11 @@
     }
 
     .map-results {
+      flex-grow: 1;
       position: sticky;
       top: 0;
       width: 40%;
       height: 540px;
-      margin-right: 32px;
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, 1);
       box-shadow: