Updated list of items

This commit is contained in:
dbroqua 2019-04-09 20:00:47 +02:00
parent 3ba0e0803f
commit 7e4e872bf8
5 changed files with 48 additions and 13 deletions

View file

@ -37,10 +37,15 @@ export default class Map extends React.Component {
} }
render() { render() {
const {
double,
simple,
} = this.props;
return ( return (
<div className="with-margin"> <div className="with-margin">
<div className=" with-border with-background"> <div className=" with-border with-background">
<ListGroup className="vegetables--types--group"> <ListGroup className={`vegetables--types--group ${simple ? '' : double ? 'double' : 'triple'}`}>
{ {
this.state.selectedType this.state.selectedType
&& this.state.selectedType.Vegetables && this.state.selectedType.Vegetables

View file

@ -93,15 +93,16 @@ export default class RouterMap extends React.Component {
</div> </div>
</div> </div>
</Col> </Col>
<Col xs="6" sm="12">
<Vegetables
selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable}
/>
</Col>
</Row> </Row>
</Col> </Col>
<Col xs="12" sm="12">
<Vegetables
selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable}
/>
</Col>
</Row> </Row>
</Container> </Container>
); );

View file

@ -62,7 +62,6 @@ export default class Search extends React.Component {
<Container> <Container>
<NotificationContainer /> <NotificationContainer />
<Row> <Row>
<Col xs="12" sm="8"> <Col xs="12" sm="8">
<MapItem <MapItem
selectedType={this.state.selectedType} selectedType={this.state.selectedType}
@ -72,11 +71,12 @@ export default class Search extends React.Component {
</Col> </Col>
<Col xs="12" sm="4"> <Col xs="12" sm="4">
<Row> <Row>
<Col xs="6" sm="12"> <Col xs="12">
<Vegetables <Vegetables
selectedType={this.state.selectedType} selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable} selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable} selectVegetable={this.selectVegetable}
simple={true}
/> />
</Col> </Col>
</Row> </Row>

View file

@ -53,20 +53,21 @@ export default class RouterVegetables extends React.Component {
<NotificationContainer /> <NotificationContainer />
<Row> <Row>
<Col xs="12" sm="8"> <Col xs="12" md="6">
<MapItem <MapItem
selectedType={this.state.selectedType} selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable} selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable} selectVegetable={this.selectVegetable}
/> />
</Col> </Col>
<Col xs="12" sm="4"> <Col xs="12" md="6">
<Row> <Row>
<Col xs="6" sm="12"> <Col xs="12">
<VegetablesList <VegetablesList
selectedType={this.state.selectedType} selectedType={this.state.selectedType}
selectedVegetable={this.state.selectedVegetable} selectedVegetable={this.state.selectedVegetable}
selectVegetable={this.selectVegetable} selectVegetable={this.selectVegetable}
double={true}
/> />
</Col> </Col>
</Row> </Row>

View file

@ -44,6 +44,34 @@ body {
-webkit-columns: 2; -webkit-columns: 2;
-moz-columns: 2; -moz-columns: 2;
} }
@media (min-width: 540px) {
.triple {
display: inherit;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
}
@media (min-width: 720px) {
.triple {
display: inherit;
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
}
}
@media (min-width: 960px) {
.triple {
display: inherit;
columns: 4;
-webkit-columns: 4;
-moz-columns: 4;
}
}
.double li { .double li {
/* width:50%; /* width:50%;
float:left; float:left;