Add template Step component with configurable background image and content
This commit is contained in:
parent
aa95005fd2
commit
d7a97dfb1d
7 changed files with 87 additions and 46 deletions
|
@ -1,5 +1,8 @@
|
|||
.top-header {
|
||||
padding-bottom: 3.2vw;
|
||||
padding-left: 3vw;
|
||||
padding-right: 3vw;
|
||||
padding-top: 1.8vw;
|
||||
padding-bottom: 1.8vw;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
|
|
|
@ -1,13 +1,10 @@
|
|||
@import "./theme.scss";
|
||||
@import "./header.scss";
|
||||
|
||||
// Core styles here...
|
||||
.App {
|
||||
// Global styles here...
|
||||
html, body, #root, .App {
|
||||
height: 100%;
|
||||
font-family: $primary-font;
|
||||
color: $text-color-primary;
|
||||
background-color: $background-color-primary;
|
||||
padding-top: 3.2vw;
|
||||
padding-left: 3vw;
|
||||
padding-right: 3vw;
|
||||
padding-bottom: 3.2vw;
|
||||
}
|
||||
|
|
35
frontend/src/components/Step.js
Normal file
35
frontend/src/components/Step.js
Normal file
|
@ -0,0 +1,35 @@
|
|||
import SampleBackground from '../assets/img/sample-bg.jpg';
|
||||
|
||||
export default function Step(props) {
|
||||
const overlayStyle = {
|
||||
backgroundColor: "#3b3b3b74",
|
||||
paddingRight: '3vw',
|
||||
paddingLeft: '3vw'
|
||||
};
|
||||
|
||||
const StepBackgroundImage = props.backgroundImage || SampleBackground
|
||||
const stepStyle = {
|
||||
backgroundImage: `url(${StepBackgroundImage})`
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={stepStyle}>
|
||||
<div className='step-container mt-4 py-4' style={overlayStyle}>
|
||||
{props.contentComponent ? (
|
||||
<div>
|
||||
{props.contentComponent}
|
||||
</div>
|
||||
) : (
|
||||
<div className='d-flex justify-content-between'>
|
||||
<div>
|
||||
{props.informationComponent}
|
||||
</div>
|
||||
<div>
|
||||
{props.selectionComponent}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -37,7 +37,7 @@ export default function StepperWizard(props) {
|
|||
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Stepper activeStep={activeStep}>
|
||||
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw' }}>
|
||||
{steps.map((step, index) => {
|
||||
return (
|
||||
<Step key={step.label}>
|
||||
|
@ -49,7 +49,7 @@ export default function StepperWizard(props) {
|
|||
{activeStep === steps.length ? (
|
||||
<React.Fragment>
|
||||
<ResultsStep {...props} />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
|
||||
<Box sx={{ flex: '1 1 auto' }} />
|
||||
<Button onClick={handleReset}>Reset</Button>
|
||||
</Box>
|
||||
|
@ -57,7 +57,7 @@ export default function StepperWizard(props) {
|
|||
) : (
|
||||
<React.Fragment>
|
||||
<CurrentStep {...props} />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
|
||||
<Button
|
||||
color="inherit"
|
||||
disabled={activeStep === 0}
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
import React from 'react'
|
||||
import { Container } from 'reactstrap';
|
||||
import Step from '../Step';
|
||||
|
||||
export default function LocationStep() {
|
||||
const locationInfoPanel = (
|
||||
<h1>Location Information</h1>
|
||||
)
|
||||
|
||||
export default class Step1 extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="pt-4">
|
||||
<p>Please choose your location...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
const locationSelectionPanel = (
|
||||
<h1>Location Selection</h1>
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
|
||||
)
|
||||
}
|
|
@ -1,18 +1,20 @@
|
|||
import React from 'react'
|
||||
import { Container, ListGroup, ListGroupItem } from 'reactstrap';
|
||||
// import React from 'react'
|
||||
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>
|
||||
)
|
||||
|
||||
export default class Step3 extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Container className="p-2">
|
||||
<h5 className="pt-4">Plant List</h5>
|
||||
<ListGroup>
|
||||
{this.props.plants.map(function (plant, i) {
|
||||
return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
|
||||
})}
|
||||
</ListGroup>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Step contentComponent={stepContent} />
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
import React from 'react'
|
||||
import { Container } from 'reactstrap';
|
||||
import Step from '../Step';
|
||||
|
||||
export default function SoilVariantStep() {
|
||||
const soilVarientInfoPanel = (
|
||||
<h1>Soil Information</h1>
|
||||
)
|
||||
|
||||
export default class Step2 extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Container className="pt-4">
|
||||
<p >Sample step</p>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
const soilVarientSelectionPanel = (
|
||||
<h1>Soil Selection</h1>
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue