Skip to content

Commit

Permalink
front: stop hardcoding navbar height in scenario
Browse files Browse the repository at this point in the history 
Drop --navbar-height. Replace it with full-height containers, and
simplify the overall structure.

Fixes a blank margin below the conflict list on smaller screens.

Signed-off-by: Simon Ser <contact@emersion.fr>
  • Loading branch information
@emersion
emersion committed Dec 17, 2024
1 parent 6d39b6b commit e439a7a
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 104 deletions.
186 changes: 96 additions & 90 deletions front/src/applications/operationalStudies/components/Scenario/ScenarioContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,107 +101,113 @@ const ScenarioContent = ({
};

return (
<main className="mastcontainer mastcontainer-no-mastnav">
<div className="scenario">
<div className="row no-gutters scenario-container">
<div
data-testid="scenario-sidemenu"
className={collapsedTimetable ? 'd-none' : 'col-hdp-3 col-xl-4 col-lg-5 col-md-6'}
>
<div className="scenario-sidemenu">
<ScenarioDescription
scenario={scenario}
infra={infra}
infraReloadCount={reloadCount}
collapseTimetable={() => setCollapsedTimetable(true)}
/>

<MicroMacroSwitch isMacro={isMacro} setIsMacro={toggleMicroMacroButton} />

{infra && (
<>
{displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none && (
<TimetableManageTrainSchedule
displayTrainScheduleManagement={displayTrainScheduleManagement}
setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
upsertTrainSchedules={upsertTrainSchedules}
trainIdToEdit={trainIdToEdit}
setTrainIdToEdit={setTrainIdToEdit}
infraState={infra.state}
dtoImport={dtoImport}
/>
)}
<Timetable
<main className="mastcontainer mastcontainer-no-mastnav scenario">
<div className="row no-gutters scenario-container h-100">
<div
data-testid="scenario-sidemenu"
className={cx(
'h-100',
collapsedTimetable ? 'd-none' : 'col-hdp-3 col-xl-4 col-lg-5 col-md-6'
)}
>
<div className="scenario-sidemenu">
<ScenarioDescription
scenario={scenario}
infra={infra}
infraReloadCount={reloadCount}
collapseTimetable={() => setCollapsedTimetable(true)}
/>

<MicroMacroSwitch isMacro={isMacro} setIsMacro={toggleMicroMacroButton} />

{infra && (
<>
{displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.none && (
<TimetableManageTrainSchedule
displayTrainScheduleManagement={displayTrainScheduleManagement}
setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
infraState={infra.state}
selectedTrainId={selectedTrainId}
conflicts={conflicts}
upsertTrainSchedules={upsertTrainSchedules}
removeTrains={removeTrains}
setTrainIdToEdit={setTrainIdToEdit}
trainIdToEdit={trainIdToEdit}
trainSchedules={trainSchedules}
trainSchedulesWithDetails={trainScheduleSummaries}
setTrainIdToEdit={setTrainIdToEdit}
infraState={infra.state}
dtoImport={dtoImport}
/>
</>
)}
</div>
)}
<Timetable
setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
infraState={infra.state}
selectedTrainId={selectedTrainId}
conflicts={conflicts}
upsertTrainSchedules={upsertTrainSchedules}
removeTrains={removeTrains}
setTrainIdToEdit={setTrainIdToEdit}
trainIdToEdit={trainIdToEdit}
trainSchedules={trainSchedules}
trainSchedulesWithDetails={trainScheduleSummaries}
dtoImport={dtoImport}
/>
</>
)}
</div>
</div>

<div className={collapsedTimetable ? 'col-12' : 'col-hdp-9 col-xl-8 col-lg-7 col-md-6'}>
{collapsedTimetable && (
<button
data-testid="timetable-collapse-button"
className="timetable-collapse-button"
type="button"
aria-label={t('toggleTimetable')}
onClick={() => setCollapsedTimetable(false)}
>
<ChevronRight />
</button>
<div
className={cx(
'h-100',
collapsedTimetable ? 'col-12' : 'col-hdp-9 col-xl-8 col-lg-7 col-md-6'
)}
>
{collapsedTimetable && (
<button
data-testid="timetable-collapse-button"
className="timetable-collapse-button"
type="button"
aria-label={t('toggleTimetable')}
onClick={() => setCollapsedTimetable(false)}
>
<ChevronRight />
</button>
)}
{!isInfraLoaded &&
!isMacro &&
displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.add &&
displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.edit && (
<ScenarioLoaderMessage infraState={infra?.state} />
)}
{!isInfraLoaded &&
!isMacro &&
displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.add &&
displayTrainScheduleManagement !== MANAGE_TRAIN_SCHEDULE_TYPES.edit && (
<ScenarioLoaderMessage infraState={infra?.state} />
)}
{(displayTrainScheduleManagement === MANAGE_TRAIN_SCHEDULE_TYPES.add ||
displayTrainScheduleManagement === MANAGE_TRAIN_SCHEDULE_TYPES.edit) && (
<div className="scenario-managetrainschedule">
<ManageTrainScheduleContextProvider>
<ManageTrainSchedule trainIdToEdit={trainIdToEdit} />
</ManageTrainScheduleContextProvider>
{(displayTrainScheduleManagement === MANAGE_TRAIN_SCHEDULE_TYPES.add ||
displayTrainScheduleManagement === MANAGE_TRAIN_SCHEDULE_TYPES.edit) && (
<div className="scenario-managetrainschedule">
<ManageTrainScheduleContextProvider>
<ManageTrainSchedule trainIdToEdit={trainIdToEdit} />
</ManageTrainScheduleContextProvider>
</div>
)}
{displayTrainScheduleManagement === MANAGE_TRAIN_SCHEDULE_TYPES.import && (
<div className="scenario-managetrainschedule">
<ImportTrainSchedule
timetableId={scenario.timetable_id}
upsertTrainSchedules={upsertTrainSchedules}
/>
</div>
)}
<div className="scenario-results">
{isMacro ? (
<div className="h-100 p-1">
<NGE dto={ngeDto} onOperation={handleNGEOperation} />
</div>
)}
{displayTrainScheduleManagement === MANAGE_TRAIN_SCHEDULE_TYPES.import && (
<div className="scenario-managetrainschedule">
<ImportTrainSchedule
timetableId={scenario.timetable_id}
upsertTrainSchedules={upsertTrainSchedules}
) : (
isInfraLoaded &&
infra && (
<SimulationResults
scenarioData={{ name: scenario.name, infraName: scenario.infra_name }}
collapsedTimetable={collapsedTimetable}
projectionData={projectionData}
infraId={infra.id}
conflicts={conflicts}
selectedTrainSummary={selectedTrainSummary}
/>
</div>
)
)}
<div className="scenario-results">
{isMacro ? (
<div className={cx(collapsedTimetable ? 'macro-container' : 'h-100 p-1')}>
<NGE dto={ngeDto} onOperation={handleNGEOperation} />
</div>
) : (
isInfraLoaded &&
infra && (
<SimulationResults
scenarioData={{ name: scenario.name, infraName: scenario.infra_name }}
collapsedTimetable={collapsedTimetable}
projectionData={projectionData}
infraId={infra.id}
conflicts={conflicts}
selectedTrainSummary={selectedTrainSummary}
/>
)
)}
</div>
</div>
</div>
</div>
Expand Down
17 changes: 3 additions & 14 deletions front/src/styles/scss/applications/operationalStudies/_scenario.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
.scenario {
--navbar-height: 65px;
--content-height: calc(100vh - var(--navbar-height));
position: relative;
height: 100vh;
background-color: var(--ambiantB10);
font-family: 'IBM Plex Sans';
.scenario-container {
margin: 0;
position: relative;
}

@keyframes fadein {
from {
Expand Down Expand Up @@ -114,7 +108,7 @@
.scenario-sidemenu {
display: flex;
flex-direction: column;
height: var(--content-height);
height: 100%;
background-color: var(--black5);
padding: 14px 24px 0 24px;
box-shadow: inset -1px 0 var(--black5);
Expand Down Expand Up @@ -823,11 +817,6 @@
position: relative;
overflow: auto;
width: 100%;
height: var(--content-height);
}

.macro-container {
height: calc(var(--content-height) - 20px);
padding-right: 10px;
height: 100%;
}
}

0 comments on commit e439a7a

Please sign in to comment.