Some change on vegetable page

2019-04-09 19:39:31 +02:00 · 2019-04-09 19:39:31 +02:00 · 3ba0e0803f
commit 3ba0e0803f
parent 23d81786ed
6 changed files with 125 additions and 55 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr" class="h-100">

 <head>
  <meta charset="utf-8">
@ -10,11 +10,16 @@
  <title>RodiVert</title>
 </head>

-<body>
+<body class="d-flex flex-column h-100">
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
+  <footer class="footer mt-auto py-3">
+    <div class="container">
+      <span class="text-muted">Une réalisation Sharlotte Ley, Julie Bonjour, Clément Verdollin et Alois Herbard.</span>
+    </div>
+  </footer>
 </body>

 </html>
--- 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 (
-      <div className="App">
+      <Fragment>
        <Header></Header>
        <Router>
          <Switch>
@ -60,7 +60,7 @@ class App extends Component {
            />
          </Switch>
        </Router>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/src/Components/Map.js
+++ b/src/Components/Map.js
@ -39,11 +39,19 @@ export default class Map extends React.Component {
  }

  componentWillReceiveProps(newProps) {
+    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);
+
+    if (this.props.setHeight) {
+      this.props.setHeight(MapHeight)
    }

    this.setState({
--- 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 (
      <Container>
        <NotificationContainer />
--- 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 (<Col xs="12" lg="6">
+      <Row className="with-margin">
+        <Col className="with-border with-background">
+          <Carousel
+            activeIndex={activeIndex}
+            next={this.next}
+            previous={this.previous}
+          >
+            <CarouselIndicators items={this.state.item.Pictures} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
+            {this.state.item &&
+              this.state.item.Pictures &&
+              this.state.item.Pictures.map((picture) => (
+                <CarouselItem
+                  onExiting={this.onExiting}
+                  onExited={this.onExited}
+                  key={picture.url}
+                >
+                  <img src={picture.url} alt={picture.url} style={{ maxHeight: `${carouselHeight}px` }} />
+                </CarouselItem>
+              ))}
+            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
+            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
+          </Carousel>
+        </Col>
+      </Row>
+    </Col>);
+  }
+
+  setHeight(height) {
+    this.setState({
+      carouselHeight: height
+    })
+  }
+
+  renderMap() {
+    const {
+      item,
+    } = this.state;
+
+    const sm = (!item || !item.Pictures || item.Pictures.length === 0) ? 12 : 6;
+
+    return (<Col xs="12" lg={sm}>
+      <MapItem
+        selectedType={this.state.selectedType}
+        selectedVegetable={this.state.item}
+        selectVegetable={() => { }}
+        setHeight={this.setHeight}
+      />
+    </Col>);
+  }
+
+  render() {
    return (
      <Container>
        <NotificationContainer />
@ -114,13 +176,11 @@ export default class RouterVegetable extends React.Component {
              </Col>
            </Row>
          </Col>
-          <Col xs="12">
-            <MapItem
-              selectedType={this.state.selectedType}
-              selectedVegetable={this.state.item}
-              selectVegetable={() => { }}
-            />
-          </Col>
+          <div>
+
+          </div>
+          {this.renderMap()}
+          {this.renderCarousel()}
          <Col xs="12">
            <Row className="with-margin">
              <Col className=" with-border with-background">
@ -144,38 +204,7 @@ export default class RouterVegetable extends React.Component {
              </Col>
            </Row>
          </Col>
-          <Col xs="12">
-            <Row className="with-margin">
-              <Col className="with-border with-background">
-                {this.state.item &&
-                  this.state.item.Pictures ?
-                  (
-                    <Carousel
-                      activeIndex={activeIndex}
-                      next={this.next}
-                      previous={this.previous}
-                    >
-                      <CarouselIndicators items={this.state.item.Pictures} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
-                      {this.state.item &&
-                        this.state.item.Pictures &&
-                        this.state.item.Pictures.map((picture) => (
-                          <CarouselItem
-                            onExiting={this.onExiting}
-                            onExited={this.onExited}
-                            key={picture.url}
-                          >
-                            <img src={picture.url} alt={picture.url} />
-                          </CarouselItem>
-                        ))}
-                      <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
-                      <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
-                    </Carousel>
-                  ) : (null)
-                }

-              </Col>
-            </Row>
-          </Col>
        </Row>
      </Container >
    );
--- a/src/css/index.css
+++ b/src/css/index.css
@ -58,3 +58,30 @@ body {
  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%;
+}