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() {
|
||||
const {
|
||||
double,
|
||||
simple,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className="with-margin">
|
||||
<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.Vegetables
|
||||
|
|
|
@ -93,7 +93,10 @@ export default class RouterMap extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs="6" sm="12">
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
<Col xs="12" sm="12">
|
||||
<Vegetables
|
||||
selectedType={this.state.selectedType}
|
||||
selectedVegetable={this.state.selectedVegetable}
|
||||
|
@ -101,8 +104,6 @@ export default class RouterMap extends React.Component {
|
|||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -62,7 +62,6 @@ export default class Search extends React.Component {
|
|||
<Container>
|
||||
<NotificationContainer />
|
||||
<Row>
|
||||
|
||||
<Col xs="12" sm="8">
|
||||
<MapItem
|
||||
selectedType={this.state.selectedType}
|
||||
|
@ -72,11 +71,12 @@ export default class Search extends React.Component {
|
|||
</Col>
|
||||
<Col xs="12" sm="4">
|
||||
<Row>
|
||||
<Col xs="6" sm="12">
|
||||
<Col xs="12">
|
||||
<Vegetables
|
||||
selectedType={this.state.selectedType}
|
||||
selectedVegetable={this.state.selectedVegetable}
|
||||
selectVegetable={this.selectVegetable}
|
||||
simple={true}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
@ -53,20 +53,21 @@ export default class RouterVegetables extends React.Component {
|
|||
<NotificationContainer />
|
||||
<Row>
|
||||
|
||||
<Col xs="12" sm="8">
|
||||
<Col xs="12" md="6">
|
||||
<MapItem
|
||||
selectedType={this.state.selectedType}
|
||||
selectedVegetable={this.state.selectedVegetable}
|
||||
selectVegetable={this.selectVegetable}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs="12" sm="4">
|
||||
<Col xs="12" md="6">
|
||||
<Row>
|
||||
<Col xs="6" sm="12">
|
||||
<Col xs="12">
|
||||
<VegetablesList
|
||||
selectedType={this.state.selectedType}
|
||||
selectedVegetable={this.state.selectedVegetable}
|
||||
selectVegetable={this.selectVegetable}
|
||||
double={true}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
@ -44,6 +44,34 @@ body {
|
|||
-webkit-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 {
|
||||
/* width:50%;
|
||||
float:left;
|
||||
|
|
Loading…
Reference in a new issue