Add provided step background images
This commit is contained in:
parent
d5d029cd2f
commit
6711719908
15 changed files with 24 additions and 16 deletions
BIN
frontend/src/assets/img/stepBackgrounds/step1.jpg
Normal file
BIN
frontend/src/assets/img/stepBackgrounds/step1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 924 KiB |
BIN
frontend/src/assets/img/stepBackgrounds/step2.jpg
Normal file
BIN
frontend/src/assets/img/stepBackgrounds/step2.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 558 KiB |
BIN
frontend/src/assets/img/stepBackgrounds/step3.jpg
Normal file
BIN
frontend/src/assets/img/stepBackgrounds/step3.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 318 KiB |
BIN
frontend/src/assets/img/stepBackgrounds/step4.jpg
Normal file
BIN
frontend/src/assets/img/stepBackgrounds/step4.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 182 KiB |
BIN
frontend/src/assets/img/stepBackgrounds/step5.jpg
Normal file
BIN
frontend/src/assets/img/stepBackgrounds/step5.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 512 KiB |
BIN
frontend/src/assets/img/stepBackgrounds/step6.jpg
Normal file
BIN
frontend/src/assets/img/stepBackgrounds/step6.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 275 KiB |
|
@ -1,6 +1,7 @@
|
||||||
.step-container {
|
.step-container {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-overlay {
|
.step-overlay {
|
||||||
|
|
|
@ -9,7 +9,7 @@ import LocationStep from './steps/location/LocationStep'
|
||||||
import SoilStep from './steps/soilvariant/SoilStep'
|
import SoilStep from './steps/soilvariant/SoilStep'
|
||||||
import HabitatStep from './steps/habitat/HabitatStep';
|
import HabitatStep from './steps/habitat/HabitatStep';
|
||||||
import ZoneStep from './steps/zone/ZoneStep';
|
import ZoneStep from './steps/zone/ZoneStep';
|
||||||
import SummaryStep from './steps/summary/ZoneStep';
|
import SummaryStep from './steps/summary/SummaryStep';
|
||||||
import ResultsStep from './steps/results/ResultsStep'
|
import ResultsStep from './steps/results/ResultsStep'
|
||||||
|
|
||||||
const steps = [
|
const steps = [
|
||||||
|
|
|
@ -1,23 +1,24 @@
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
import { Row, Col } from 'reactstrap'
|
import { Row, Col } from 'reactstrap'
|
||||||
import SampleBackground from '../../assets/img/sample-bg.jpg';
|
import SampleBackground from '../../assets/img/stepBackgrounds/step1.jpg';
|
||||||
|
|
||||||
export default function Step(props) {
|
export default function Step(props) {
|
||||||
const StepBackgroundImage = props.backgroundImage || SampleBackground
|
|
||||||
const stepBackground = {
|
const [stepBackgroundImage, setStepBackground] = useState(SampleBackground)
|
||||||
backgroundImage: `url(${StepBackgroundImage})`
|
|
||||||
};
|
useEffect(() => setStepBackground(props.backgroundImage || SampleBackground), [props.backgroundImage])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='step-container' style={stepBackground}>
|
<div className='step-container' style={{backgroundImage: `url(${stepBackgroundImage})`}}>
|
||||||
<div className='step-overlay'>
|
<div className='step-overlay'>
|
||||||
{props.contentComponent ? (
|
{props.contentComponent ? (
|
||||||
props.contentComponent
|
props.contentComponent
|
||||||
) : (
|
) : (
|
||||||
<Row style={{height: '100%'}}>
|
<Row style={{height: '100%'}}>
|
||||||
<Col lg={{ size: "3", offset: 1 }} md="5" sm="12" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
|
<Col lg={{ size: "4" }} md="5" sm="12" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', paddingRight: '50px', paddingLeft: '50px'}}>
|
||||||
{props.informationComponent}
|
{props.informationComponent}
|
||||||
</Col>
|
</Col>
|
||||||
<Col lg={{ size: "7", offset: 1}} md="7" sm="12" style={{display: 'flex', alignItems: 'center'}}>
|
<Col lg={{ size: "8" }} md="7" sm="12" style={{display: 'flex', alignItems: 'center'}}>
|
||||||
{props.selectionComponent}
|
{props.selectionComponent}
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import Step from '../Step';
|
||||||
import HabitatSelector from './HabitatSelector'
|
import HabitatSelector from './HabitatSelector'
|
||||||
import StepInformation from '../StepInformation';
|
import StepInformation from '../StepInformation';
|
||||||
import staticText from '../../../assets/data/staticText.json'
|
import staticText from '../../../assets/data/staticText.json'
|
||||||
|
import habitatBackgroundImage from '../../../assets/img/stepBackgrounds/step3.jpg';
|
||||||
|
|
||||||
export default function HabitatStep(props) {
|
export default function HabitatStep(props) {
|
||||||
const habitatInfoPanel = (
|
const habitatInfoPanel = (
|
||||||
|
@ -16,6 +17,6 @@ export default function HabitatStep(props) {
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Step informationComponent={habitatInfoPanel} selectionComponent={habitatSelectionPanel} />
|
<Step informationComponent={habitatInfoPanel} selectionComponent={habitatSelectionPanel} backgroundImage={habitatBackgroundImage} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import Step from '../Step';
|
||||||
import LocationSelectorMap from './Map'
|
import LocationSelectorMap from './Map'
|
||||||
import StepInformation from '../StepInformation';
|
import StepInformation from '../StepInformation';
|
||||||
import staticText from '../../../assets/data/staticText.json'
|
import staticText from '../../../assets/data/staticText.json'
|
||||||
|
import locationBackgroundImage from '../../../assets/img/stepBackgrounds/step1.jpg';
|
||||||
|
|
||||||
export default function LocationStep(props) {
|
export default function LocationStep(props) {
|
||||||
|
|
||||||
|
@ -17,6 +18,6 @@ export default function LocationStep(props) {
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
|
<Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} backgroundImage={locationBackgroundImage} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
import PlantRepository from '../../../repository/PlantRepository'
|
import PlantRepository from '../../../repository/PlantRepository'
|
||||||
import { Typography, Box } from '@mui/material';
|
import { Typography, Box } from '@mui/material';
|
||||||
|
import resultsBackgroundImage from '../../../assets/img/stepBackgrounds/step6.jpg';
|
||||||
|
|
||||||
|
|
||||||
export default function ResultsStep(props) {
|
export default function ResultsStep(props) {
|
||||||
|
@ -63,7 +64,7 @@ export default function ResultsStep(props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const stepContent = (
|
const stepContent = (
|
||||||
<div className="pt-4">
|
<div className="py-4">
|
||||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4">
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4">
|
||||||
<Typography variant='h5'>Plant List Results</Typography>
|
<Typography variant='h5'>Plant List Results</Typography>
|
||||||
<Stack spacing={2} direction="row" justifyContent="end">
|
<Stack spacing={2} direction="row" justifyContent="end">
|
||||||
|
@ -76,6 +77,6 @@ export default function ResultsStep(props) {
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Step contentComponent={stepContent} />
|
<Step contentComponent={stepContent} backgroundImage={resultsBackgroundImage} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import Step from '../Step';
|
||||||
import SoilSelector from './SoilSelector';
|
import SoilSelector from './SoilSelector';
|
||||||
import StepInformation from '../StepInformation';
|
import StepInformation from '../StepInformation';
|
||||||
import staticText from '../../../assets/data/staticText.json'
|
import staticText from '../../../assets/data/staticText.json'
|
||||||
|
import soilBackgroundImage from '../../../assets/img/stepBackgrounds/step2.jpg';
|
||||||
|
|
||||||
export default function SoilVariantStep(props) {
|
export default function SoilVariantStep(props) {
|
||||||
const SOIL_DESCRIPTION = (<p>
|
const SOIL_DESCRIPTION = (<p>
|
||||||
|
@ -24,6 +25,6 @@ export default function SoilVariantStep(props) {
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
|
<Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} backgroundImage={soilBackgroundImage} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import Step from '../Step';
|
||||||
import SummaryContent from './SummaryContent'
|
import SummaryContent from './SummaryContent'
|
||||||
import StepInformation from '../StepInformation';
|
import StepInformation from '../StepInformation';
|
||||||
import staticText from '../../../assets/data/staticText.json'
|
import staticText from '../../../assets/data/staticText.json'
|
||||||
|
import summaryBackgroundImage from '../../../assets/img/stepBackgrounds/step5.jpg';
|
||||||
|
|
||||||
export default function SummaryStep(props) {
|
export default function SummaryStep(props) {
|
||||||
const summaryInfoPanel = (
|
const summaryInfoPanel = (
|
||||||
|
@ -16,6 +17,6 @@ export default function SummaryStep(props) {
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Step informationComponent={summaryInfoPanel} selectionComponent={summaryContent} />
|
<Step informationComponent={summaryInfoPanel} selectionComponent={summaryContent} backgroundImage={summaryBackgroundImage} />
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -2,6 +2,7 @@ import Step from '../Step';
|
||||||
import ZoneSelector from './ZoneSelector'
|
import ZoneSelector from './ZoneSelector'
|
||||||
import StepInformation from '../StepInformation';
|
import StepInformation from '../StepInformation';
|
||||||
import staticText from '../../../assets/data/staticText.json'
|
import staticText from '../../../assets/data/staticText.json'
|
||||||
|
import zoneBackgroundImage from '../../../assets/img/stepBackgrounds/step4.jpg';
|
||||||
|
|
||||||
export default function ZoneStep(props) {
|
export default function ZoneStep(props) {
|
||||||
const zoneInfoPanel = (
|
const zoneInfoPanel = (
|
||||||
|
@ -16,6 +17,6 @@ export default function ZoneStep(props) {
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Step informationComponent={zoneInfoPanel} selectionComponent={zoneSelectionPanel} />
|
<Step informationComponent={zoneInfoPanel} selectionComponent={zoneSelectionPanel} backgroundImage={zoneBackgroundImage} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue