diff --git a/public/index.html b/public/index.html
index d6f7969..aeca1ff 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
-
+
@@ -10,11 +10,16 @@
RodiVert
-
+
+
\ No newline at end of file
diff --git a/src/Components/App.js b/src/Components/App.js
index 86ab46a..614d2c8 100644
--- a/src/Components/App.js
+++ b/src/Components/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
import Header from './Header';
import {
BrowserRouter as Router, Route,
@@ -29,7 +29,7 @@ class App extends Component {
render() {
return (
-
+
@@ -60,7 +60,7 @@ class App extends Component {
/>
-
+
);
}
}
diff --git a/src/Components/Map.js b/src/Components/Map.js
index 2643808..8cbcb56 100644
--- a/src/Components/Map.js
+++ b/src/Components/Map.js
@@ -39,11 +39,19 @@ export default class Map extends React.Component {
}
componentWillReceiveProps(newProps) {
- this.setState(prevState => ({
- ...prevState,
- selectedType: newProps.selectedType,
- selectedVegetable: newProps.selectedVegetable,
- }));
+ const {
+ selectedType,
+ selectedVegetable,
+ } = this.state;
+
+ if (newProps.selectedType !== selectedType || newProps.selectedVegetable !== selectedVegetable) {
+ this.setState(prevState => ({
+ ...prevState,
+ selectedType: newProps.selectedType,
+ selectedVegetable: newProps.selectedVegetable,
+ }), this.setMap);
+
+ }
}
componentDidMount() {
@@ -60,9 +68,11 @@ export default class Map extends React.Component {
let MapWidth = MapDimensions.width;
let MapHeight = MapDimensions.height;
- if (width < MapDimensions.width) {
- MapWidth = width;
- MapHeight = Math.round(MapDimensions.height * MapWidth / MapDimensions.width);
+ MapWidth = width;
+ MapHeight = Math.round(MapDimensions.height * MapWidth / MapDimensions.width);
+
+ if (this.props.setHeight) {
+ this.props.setHeight(MapHeight)
}
this.setState({
diff --git a/src/Routes/Search.js b/src/Routes/Search.js
index 5888d6d..494a951 100644
--- a/src/Routes/Search.js
+++ b/src/Routes/Search.js
@@ -58,7 +58,6 @@ export default class Search extends React.Component {
}
render() {
- console.log('this.state.query:', this.state.query);
return (
diff --git a/src/Routes/Vegetable.js b/src/Routes/Vegetable.js
index 6b6b894..9755723 100644
--- a/src/Routes/Vegetable.js
+++ b/src/Routes/Vegetable.js
@@ -38,7 +38,8 @@ export default class RouterVegetable extends React.Component {
name: null
}
},
- activeIndex: 0
+ activeIndex: 0,
+ carouselHeight: 0
};
this.getItem = this.getItem.bind(this);
@@ -47,6 +48,7 @@ export default class RouterVegetable extends React.Component {
this.goToIndex = this.goToIndex.bind(this);
this.onExiting = this.onExiting.bind(this);
this.onExited = this.onExited.bind(this);
+ this.setHeight = this.setHeight.bind(this);
this.getItem();
this.props.changeBackground('vegetables')
@@ -96,9 +98,69 @@ export default class RouterVegetable extends React.Component {
});
}
- render() {
- const { activeIndex } = this.state;
+ renderCarousel() {
+ const {
+ activeIndex,
+ item,
+ carouselHeight,
+ } = this.state;
+ if (!item || !item.Pictures || item.Pictures.length === 0) {
+ return (null);
+ }
+
+ return (
+
+
+
+
+ {this.state.item &&
+ this.state.item.Pictures &&
+ this.state.item.Pictures.map((picture) => (
+
+ 
+
+ ))}
+
+
+
+
+
+ );
+ }
+
+ setHeight(height) {
+ this.setState({
+ carouselHeight: height
+ })
+ }
+
+ renderMap() {
+ const {
+ item,
+ } = this.state;
+
+ const sm = (!item || !item.Pictures || item.Pictures.length === 0) ? 12 : 6;
+
+ return (
+ { }}
+ setHeight={this.setHeight}
+ />
+ );
+ }
+
+ render() {
return (
@@ -114,13 +176,11 @@ export default class RouterVegetable extends React.Component {
-
- { }}
- />
-
+
+
+
+ {this.renderMap()}
+ {this.renderCarousel()}
@@ -144,38 +204,7 @@ export default class RouterVegetable extends React.Component {
-
-
-
- {this.state.item &&
- this.state.item.Pictures ?
- (
-
-
- {this.state.item &&
- this.state.item.Pictures &&
- this.state.item.Pictures.map((picture) => (
-
-
-
- ))}
-
-
-
- ) : (null)
- }
-
-
-
);
diff --git a/src/css/index.css b/src/css/index.css
index c0a839a..a7ec8d9 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -57,4 +57,31 @@ body {
.center {
display: flex;
justify-content: center;
+}
+
+.footer .container {
+ /* width: auto; */
+ /* max-width: 680px; */
+ padding: 0 15px;
+ margin: 0 auto;
+}
+
+.footer {
+ z-index: 200;
+ background-color: rgba(248,249,250, 0.7) !important;
+ padding: 4px 0 !important;
+ box-shadow: 4px -4px 6px #a7a7a7;
+ font-size: 14px;
+
+/* border-radius: 8px; */
+
+border: 1px solid #ccc;
+}
+
+.carousel-item {
+ text-align: center;
+}
+
+.carousel-item img {
+ max-width: 100%;
}
\ No newline at end of file