Updated list of items
This commit is contained in:
parent
3ba0e0803f
commit
7e4e872bf8
5 changed files with 48 additions and 13 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue