particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds a Stack layout to have the wizard footer visible

Browse source 
TLDR; before this update the user always has to scroll to get to
the footer actions in the wizard.

There's a weird nested page section thing happening which results
in the wizard body+footer being 100% of the height of the main content
area, but when you add the wizard header as a separate section above
the 100% height wizard body+footer, the header pushes the wizard
contents down so that the bottom portion of the wizard (equal to the
height of the header, and roughly the height of the footer) is always out
of view. This means that the user always has to scroll to get to the
footer.
This commit is contained in:
Jenn Giardino 2020-12-15 20:16:51 -05:00 • committed by Sanne Raymaekers
parent b40f623f65
commit 5463af8cd6
1 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/SmartComponents/CreateImageWizard/CreateImageWizard.js
View file

@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import { actions } from '../redux';
import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components';
import { Wizard } from '@patternfly/react-core';
import { Wizard, Stack, StackItem } from '@patternfly/react-core';
import WizardStepImageOutput from '../../PresentationalComponents/CreateImageWizard/WizardStepImageOutput';
import WizardStepUploadAWS from '../../PresentationalComponents/CreateImageWizard/WizardStepUploadAWS';
@ -238,18 +238,22 @@ class CreateImageWizard extends Component {
];
return (
<>
<PageHeader>
<PageHeaderTitle title='Create a new image' />
</PageHeader>
<Wizard
onNext={ this.onStep }
onGoToStep={ this.onStep }
isInPage
steps={ steps }
onClose={ this.onClose }
onSave={ this.onSave } />
</>
<Stack className="pf-u-h-100">
<StackItem>
<PageHeader>
<PageHeaderTitle title='Create a new image' />
</PageHeader>
</StackItem>
<StackItem isFilled>
<Wizard
onNext={ this.onStep }
onGoToStep={ this.onStep }
isInPage
steps={ steps }
onClose={ this.onClose }
onSave={ this.onSave } />
</StackItem>
</Stack>
);
}
}