lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Make step content scrollable overflow adjust results step

Browse source 
- Results step is now the last step but doesn't restrict the user from going back
This commit is contained in:
Dana Lambert 2021-11-02 11:11:55 +13:00
parent 039d8d14ec
commit 8638fd3041
4 changed files with 57 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/assets/styles/step.scss
View file

@ -1,10 +1,17 @@
.step-container { .step-container {
flex-grow: 1; flex-grow: 1;
overflow: auto;
} }
.step-overlay { .step-overlay {
background-color: #191919c2; background-color: #191919c2;
height: 100%; min-height: 100%;
padding-left: 3vw; padding-left: 3vw;
padding-right: 3vw; padding-right: 3vw;
display: flex;
flex-direction: column;
}
.step-overlay .row {
flex-grow: 1;
} }

66
frontend/src/components/Stepper.js
View file

@ -11,15 +11,16 @@ import HabitatStep from './steps/habitat/HabitatStep';
import ZoneStep from './steps/zone/ZoneStep'; import ZoneStep from './steps/zone/ZoneStep';
import ProjectSpecificsStep from './steps/specifics/ProjectSpecificsStep'; import ProjectSpecificsStep from './steps/specifics/ProjectSpecificsStep';
import SummaryStep from './steps/summary/ZoneStep'; import SummaryStep from './steps/summary/ZoneStep';
import ResultsStep from './steps/Results' import ResultsStep from './steps/results/ResultsStep'
const steps = [ const steps = [
{'label': 'Select location', 'component': LocationStep }, { 'label': 'Select location', 'component': LocationStep },
{'label': 'Choose soil', 'component': SoilStep }, { 'label': 'Choose soil', 'component': SoilStep },
{'label': 'Choose habitat', 'component': HabitatStep }, { 'label': 'Choose habitat', 'component': HabitatStep },
{'label': 'Select zone', 'component': ZoneStep }, { 'label': 'Select zone', 'component': ZoneStep },
{'label': 'Project specifics', 'component': ProjectSpecificsStep }, { 'label': 'Project specifics', 'component': ProjectSpecificsStep },
{'label': 'Summary', 'component': SummaryStep } { 'label': 'Summary', 'component': SummaryStep },
{ 'label': 'Results', 'component': ResultsStep }
]; ];
export default function StepperWizard(props) { export default function StepperWizard(props) {
@ -41,12 +42,12 @@ export default function StepperWizard(props) {
setNextDisabled(true); setNextDisabled(true);
}; };
let CurrentStep = activeStep >= steps.length ? steps[steps.length-1].component : steps[activeStep].component; let CurrentStep = activeStep >= steps.length ? steps[steps.length - 1].component : steps[activeStep].component;
return ( return (
<Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column"}}> <Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column", overflow: "hidden" }}>
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom:'2vw' }}> <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom: '2vw' }}>
{steps.map((step, index) => { {steps.map((step) => {
return ( return (
<Step key={step.label}> <Step key={step.label}>
<StepLabel>{step.label}</StepLabel> <StepLabel>{step.label}</StepLabel>
@ -54,33 +55,22 @@ export default function StepperWizard(props) {
); );
})} })}
</Stepper> </Stepper>
{activeStep === steps.length ? ( <React.Fragment>
<React.Fragment sx={{ flexGrow: 1 }}> <CurrentStep {...props} setNextDisabled={setNextDisabled} />
<ResultsStep {...props} /> <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}> <Button
<Box sx={{ flex: '1 1 auto' }} /> color="inherit"
<Button onClick={handleReset}>Reset</Button> disabled={activeStep === 0}
</Box> onClick={handleBack}
</React.Fragment> sx={{ mr: 1 }}
) : ( >
<React.Fragment> Back
<CurrentStep {...props} setNextDisabled={setNextDisabled} /> </Button>
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}> <Box sx={{ flex: '1 1 auto' }} />
<Button {activeStep === steps.length - 1 ?
color="inherit" <Button onClick={handleReset}>Reset</Button> : <Button onClick={handleNext} disabled={nextDisabled}>Next</Button>}
disabled={activeStep === 0} </Box>
onClick={handleBack} </React.Fragment>
sx={{ mr: 1 }}
>
Back
</Button>
<Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleNext} disabled={nextDisabled}>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</Box>
</React.Fragment>
)}
</Box> </Box>
); );
} }

19
frontend/src/components/steps/Results.js
View file

@ -1,19 +0,0 @@
import Step from './Step';
import { ListGroup, ListGroupItem } from 'reactstrap';
export default function Results(props) {
const stepContent = (
<div>
<h5 className="pt-4">Plant List</h5>
<ListGroup>
{props.plants.map(function (plant, i) {
return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
})}
</ListGroup>
</div>
)
return (
<Step contentComponent={stepContent} />
)
}

21
frontend/src/components/steps/results/ResultsStep.js Normal file
View file

@ -0,0 +1,21 @@
import Step from '../Step';
import { ListGroup, ListGroupItem } from 'reactstrap';
export default function ResultsStep(props) {
const stepContent = (
<div>
<h5 className="pt-4">Plant List</h5>
<div>
<ListGroup>
{props.plants.map(function (plant, i) {
return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
})}
</ListGroup>
</div>
</div>
)
return (
<Step contentComponent={stepContent} />
)
}