diff --git a/frontend/src/assets/styles/step.scss b/frontend/src/assets/styles/step.scss index aa01cc5..ccac308 100644 --- a/frontend/src/assets/styles/step.scss +++ b/frontend/src/assets/styles/step.scss @@ -1,10 +1,17 @@ .step-container { flex-grow: 1; + overflow: auto; } .step-overlay { background-color: #191919c2; - height: 100%; + min-height: 100%; padding-left: 3vw; padding-right: 3vw; + display: flex; + flex-direction: column; +} + +.step-overlay .row { + flex-grow: 1; } diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js index a0ec809..fff836c 100644 --- a/frontend/src/components/Stepper.js +++ b/frontend/src/components/Stepper.js @@ -11,15 +11,16 @@ import HabitatStep from './steps/habitat/HabitatStep'; import ZoneStep from './steps/zone/ZoneStep'; import ProjectSpecificsStep from './steps/specifics/ProjectSpecificsStep'; import SummaryStep from './steps/summary/ZoneStep'; -import ResultsStep from './steps/Results' +import ResultsStep from './steps/results/ResultsStep' const steps = [ - {'label': 'Select location', 'component': LocationStep }, - {'label': 'Choose soil', 'component': SoilStep }, - {'label': 'Choose habitat', 'component': HabitatStep }, - {'label': 'Select zone', 'component': ZoneStep }, - {'label': 'Project specifics', 'component': ProjectSpecificsStep }, - {'label': 'Summary', 'component': SummaryStep } + { 'label': 'Select location', 'component': LocationStep }, + { 'label': 'Choose soil', 'component': SoilStep }, + { 'label': 'Choose habitat', 'component': HabitatStep }, + { 'label': 'Select zone', 'component': ZoneStep }, + { 'label': 'Project specifics', 'component': ProjectSpecificsStep }, + { 'label': 'Summary', 'component': SummaryStep }, + { 'label': 'Results', 'component': ResultsStep } ]; export default function StepperWizard(props) { @@ -41,12 +42,12 @@ export default function StepperWizard(props) { 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 ( - - - {steps.map((step, index) => { + + + {steps.map((step) => { return ( {step.label} @@ -54,33 +55,22 @@ export default function StepperWizard(props) { ); })} - {activeStep === steps.length ? ( - - - - - - - - ) : ( - - - - - - - - - )} + + + + + + {activeStep === steps.length - 1 ? + : } + + ); } diff --git a/frontend/src/components/steps/Results.js b/frontend/src/components/steps/Results.js deleted file mode 100644 index cf65e9e..0000000 --- a/frontend/src/components/steps/Results.js +++ /dev/null @@ -1,19 +0,0 @@ -import Step from './Step'; -import { ListGroup, ListGroupItem } from 'reactstrap'; - -export default function Results(props) { - const stepContent = ( -
-
Plant List
- - {props.plants.map(function (plant, i) { - return {plant.name}; - })} - -
- ) - - return ( - - ) -} diff --git a/frontend/src/components/steps/results/ResultsStep.js b/frontend/src/components/steps/results/ResultsStep.js new file mode 100644 index 0000000..bb04ad2 --- /dev/null +++ b/frontend/src/components/steps/results/ResultsStep.js @@ -0,0 +1,21 @@ +import Step from '../Step'; +import { ListGroup, ListGroupItem } from 'reactstrap'; + +export default function ResultsStep(props) { + const stepContent = ( +
+
Plant List
+
+ + {props.plants.map(function (plant, i) { + return {plant.name}; + })} + +
+
+ ) + + return ( + + ) +}