From 3ba0e0803f50bef909faf85960b24aca6cc554bc Mon Sep 17 00:00:00 2001 From: dbroqua Date: Tue, 9 Apr 2019 19:39:31 +0200 Subject: [PATCH] Some change on vegetable page --- public/index.html | 9 +++- src/Components/App.js | 6 +-- src/Components/Map.js | 26 +++++++--- src/Routes/Search.js | 1 - src/Routes/Vegetable.js | 111 +++++++++++++++++++++++++--------------- src/css/index.css | 27 ++++++++++ 6 files changed, 125 insertions(+), 55 deletions(-) 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) => ( + + {picture.url} + + ))} + + + + + + ); + } + + 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) => ( - - {picture.url} - - ))} - - - - ) : (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