front: drop hardcoded scenario header height

The scenario header size is hardcoded to 8rem. Replace these rules with a flexbox-based layout.
OpenRailAssociation · Jul 10, 2024 · 45b2718 · 45b2718
1 parent f49e67c
commit 45b2718
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 101 deletions.
diff --git a/front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx b/front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx
@@ -158,110 +158,107 @@ const ScenarioV2 = () => {
       <main className="mastcontainer mastcontainer-no-mastnav">
         <div className="scenario">
           <div className="row scenario-container">
-            <div className={collapsedTimetable ? 'd-none' : 'col-hdp-3 col-xl-4 col-lg-5 col-md-6'}>
-              <div className="scenario-sidemenu">
-                {scenario && (
-                  <div className="scenario-details">
-                    <div className="scenario-details-name">
-                      <span
-                        className="flex-grow-1 scenario-name text-truncate"
-                        title={scenario.name}
-                      >
-                        {scenario.name}
-                      </span>
-                      <button
-                        data-testid="editScenario"
-                        className="scenario-details-modify-button"
-                        type="button"
-                        aria-label={t('editScenario')}
-                        onClick={() =>
-                          openModal(
-                            <AddAndEditScenarioModal editionMode scenario={scenario} />,
-                            'xl',
-                            'no-close-modal'
-                          )
-                        }
-                        title={t('editScenario')}
-                      >
-                        <Pencil />
-                      </button>
-                      <button
-                        type="button"
-                        className="scenario-details-modify-button"
-                        onClick={() => setTrainsWithDetails(!trainsWithDetails)}
-                        title={t('displayTrainsWithDetails')}
-                      >
-                        {trainsWithDetails ? <EyeClosed /> : <Eye />}
-                      </button>
-                      <button
-                        type="button"
-                        className="scenario-details-modify-button"
-                        aria-label={t('toggleTimetable')}
-                        onClick={() => setCollapsedTimetable(true)}
-                      >
-                        <ChevronLeft />
-                      </button>
-                    </div>
-                    <div className="row">
-                      <div className="col-md-6">
-                        <div className="scenario-details-infra-name">
-                          <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
-                          {infra && <InfraLoadingState infra={infra} />}
-                          <span className="scenario-infra-name">{scenario.infra_name}</span>
-                          <small className="ml-auto text-muted">ID {scenario.infra_id}</small>
-                        </div>
+            <div
+              className={`scenario-sidemenu ${collapsedTimetable ? 'd-none' : 'col-hdp-3 col-xl-4 col-lg-5 col-md-6'}`}
+            >
+              {scenario && (
+                <div className="scenario-details">
+                  <div className="scenario-details-name">
+                    <span className="flex-grow-1 scenario-name text-truncate" title={scenario.name}>
+                      {scenario.name}
+                    </span>
+                    <button
+                      data-testid="editScenario"
+                      className="scenario-details-modify-button"
+                      type="button"
+                      aria-label={t('editScenario')}
+                      onClick={() =>
+                        openModal(
+                          <AddAndEditScenarioModal editionMode scenario={scenario} />,
+                          'xl',
+                          'no-close-modal'
+                        )
+                      }
+                      title={t('editScenario')}
+                    >
+                      <Pencil />
+                    </button>
+                    <button
+                      type="button"
+                      className="scenario-details-modify-button"
+                      onClick={() => setTrainsWithDetails(!trainsWithDetails)}
+                      title={t('displayTrainsWithDetails')}
+                    >
+                      {trainsWithDetails ? <EyeClosed /> : <Eye />}
+                    </button>
+                    <button
+                      type="button"
+                      className="scenario-details-modify-button"
+                      aria-label={t('toggleTimetable')}
+                      onClick={() => setCollapsedTimetable(true)}
+                    >
+                      <ChevronLeft />
+                    </button>
+                  </div>
+                  <div className="row">
+                    <div className="col-md-6">
+                      <div className="scenario-details-infra-name">
+                        <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
+                        {infra && <InfraLoadingState infra={infra} />}
+                        <span className="scenario-infra-name">{scenario.infra_name}</span>
+                        <small className="ml-auto text-muted">ID {scenario.infra_id}</small>
                       </div>
-                      <div className="col-md-6">
-                        <div className="scenario-details-electrical-profile-set">
-                          <span className="mr-2">
-                            <GiElectric />
-                          </span>
-                          {timetable.electrical_profile_set_id
-                            ? timetable.electrical_profile_set_id
-                            : t('noElectricalProfileSet')}
-                        </div>
+                    </div>
+                    <div className="col-md-6">
+                      <div className="scenario-details-electrical-profile-set">
+                        <span className="mr-2">
+                          <GiElectric />
+                        </span>
+                        {timetable.electrical_profile_set_id
+                          ? timetable.electrical_profile_set_id
+                          : t('noElectricalProfileSet')}
                       </div>
                     </div>
-                    {infra &&
-                      infra.state === 'TRANSIENT_ERROR' &&
-                      (reloadCount <= 5 ? (
-                        <div className="scenario-details-infra-error mt-1">
-                          {t('errorMessages.unableToLoadInfra', { reloadCount })}
-                        </div>
-                      ) : (
-                        <div className="scenario-details-infra-error mt-1">
-                          {t('errorMessages.softErrorInfra')}
-                        </div>
-                      ))}
-                    {infra && infra.state === 'ERROR' && (
+                  </div>
+                  {infra &&
+                    infra.state === 'TRANSIENT_ERROR' &&
+                    (reloadCount <= 5 ? (
                       <div className="scenario-details-infra-error mt-1">
-                        {t('errorMessages.hardErrorInfra')}
+                        {t('errorMessages.unableToLoadInfra', { reloadCount })}
                       </div>
-                    )}
-                    <div className="scenario-details-description">{scenario.description}</div>
-                  </div>
-                )}
-                {displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none && infra && (
-                  <TimetableManageTrainScheduleV2
-                    displayTrainScheduleManagement={displayTrainScheduleManagement}
-                    setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
-                    setTrainResultsToFetch={setTrainResultsToFetch}
-                    infraState={infra.state}
-                  />
-                )}
-                {infra && (
-                  <TimetableV2
-                    setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
-                    trainsWithDetails={trainsWithDetails}
-                    infraState={infra.state}
-                    trainIds={timetable.train_ids}
-                    selectedTrainId={selectedTrainId}
-                    conflicts={conflicts}
-                    setTrainResultsToFetch={setTrainResultsToFetch}
-                    setSpaceTimeData={setTrainSpaceTimeData}
-                  />
-                )}
-              </div>
+                    ) : (
+                      <div className="scenario-details-infra-error mt-1">
+                        {t('errorMessages.softErrorInfra')}
+                      </div>
+                    ))}
+                  {infra && infra.state === 'ERROR' && (
+                    <div className="scenario-details-infra-error mt-1">
+                      {t('errorMessages.hardErrorInfra')}
+                    </div>
+                  )}
+                  <div className="scenario-details-description">{scenario.description}</div>
+                </div>
+              )}
+              {displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none && infra && (
+                <TimetableManageTrainScheduleV2
+                  displayTrainScheduleManagement={displayTrainScheduleManagement}
+                  setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
+                  setTrainResultsToFetch={setTrainResultsToFetch}
+                  infraState={infra.state}
+                />
+              )}
+              {infra && (
+                <TimetableV2
+                  setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
+                  trainsWithDetails={trainsWithDetails}
+                  infraState={infra.state}
+                  trainIds={timetable.train_ids}
+                  selectedTrainId={selectedTrainId}
+                  conflicts={conflicts}
+                  setTrainResultsToFetch={setTrainResultsToFetch}
+                  setSpaceTimeData={setTrainSpaceTimeData}
+                />
+              )}
             </div>
             <div className={collapsedTimetable ? 'col-12' : 'col-hdp-9 col-xl-8 col-lg-7 col-md-6'}>
               {(!isInfraLoaded || isUpdating) &&

diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -62,10 +62,11 @@
   .scenario-sidemenu {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
     .scenario-details {
       display: flex;
       flex-direction: column;
-      height: 8rem;
       .scenario-details-name {
         display: flex;
         align-items: center;
@@ -118,7 +119,7 @@
     .scenario-timetable {
       display: flex;
       flex-direction: column;
-      height: calc(var(--content-height) - 8rem);
+      flex-grow: 1;
       .scenario-timetable-addtrains-buttons {
         display: flex;
         align-items: center;