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 {
|
.top-header {
|
||||||
padding-bottom: 3.2vw;
|
padding-left: 3vw;
|
||||||
|
padding-right: 3vw;
|
||||||
|
padding-top: 1.8vw;
|
||||||
|
padding-bottom: 1.8vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-logo {
|
.header-logo {
|
||||||
|
|
|
@ -1,13 +1,10 @@
|
||||||
@import "./theme.scss";
|
@import "./theme.scss";
|
||||||
@import "./header.scss";
|
@import "./header.scss";
|
||||||
|
|
||||||
// Core styles here...
|
// Global styles here...
|
||||||
.App {
|
html, body, #root, .App {
|
||||||
|
height: 100%;
|
||||||
font-family: $primary-font;
|
font-family: $primary-font;
|
||||||
color: $text-color-primary;
|
color: $text-color-primary;
|
||||||
background-color: $background-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 (
|
return (
|
||||||
<Box sx={{ width: '100%' }}>
|
<Box sx={{ width: '100%' }}>
|
||||||
<Stepper activeStep={activeStep}>
|
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw' }}>
|
||||||
{steps.map((step, index) => {
|
{steps.map((step, index) => {
|
||||||
return (
|
return (
|
||||||
<Step key={step.label}>
|
<Step key={step.label}>
|
||||||
|
@ -49,7 +49,7 @@ export default function StepperWizard(props) {
|
||||||
{activeStep === steps.length ? (
|
{activeStep === steps.length ? (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<ResultsStep {...props} />
|
<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' }} />
|
<Box sx={{ flex: '1 1 auto' }} />
|
||||||
<Button onClick={handleReset}>Reset</Button>
|
<Button onClick={handleReset}>Reset</Button>
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -57,7 +57,7 @@ export default function StepperWizard(props) {
|
||||||
) : (
|
) : (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<CurrentStep {...props} />
|
<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
|
<Button
|
||||||
color="inherit"
|
color="inherit"
|
||||||
disabled={activeStep === 0}
|
disabled={activeStep === 0}
|
||||||
|
|
|
@ -1,13 +1,15 @@
|
||||||
import React from 'react'
|
import Step from '../Step';
|
||||||
import { Container } from 'reactstrap';
|
|
||||||
|
|
||||||
|
export default function LocationStep() {
|
||||||
|
const locationInfoPanel = (
|
||||||
|
<h1>Location Information</h1>
|
||||||
|
)
|
||||||
|
|
||||||
export default class Step1 extends React.Component {
|
const locationSelectionPanel = (
|
||||||
render() {
|
<h1>Location Selection</h1>
|
||||||
return (
|
)
|
||||||
<div className="pt-4">
|
|
||||||
<p>Please choose your location...</p>
|
return (
|
||||||
</div>
|
<Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
|
||||||
)
|
)
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -1,18 +1,20 @@
|
||||||
import React from 'react'
|
// import React from 'react'
|
||||||
import { Container, ListGroup, ListGroupItem } from 'reactstrap';
|
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 {
|
return (
|
||||||
render() {
|
<Step contentComponent={stepContent} />
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,15 @@
|
||||||
import React from 'react'
|
import Step from '../Step';
|
||||||
import { Container } from 'reactstrap';
|
|
||||||
|
|
||||||
|
export default function SoilVariantStep() {
|
||||||
|
const soilVarientInfoPanel = (
|
||||||
|
<h1>Soil Information</h1>
|
||||||
|
)
|
||||||
|
|
||||||
export default class Step2 extends React.Component {
|
const soilVarientSelectionPanel = (
|
||||||
render() {
|
<h1>Soil Selection</h1>
|
||||||
return (
|
)
|
||||||
<Container className="pt-4">
|
|
||||||
<p >Sample step</p>
|
return (
|
||||||
</Container>
|
<Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
|
||||||
)
|
)
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue