rodivert/front
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Some change on vegetable page

Browse source
This commit is contained in:
dbroqua 2019-04-09 19:39:31 +02:00
parent 23d81786ed
commit 3ba0e0803f
6 changed files with 125 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public/index.html
View file

@ -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>

6
src/Components/App.js
View file

@ -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>
);
}
}

26
src/Components/Map.js
View file

@ -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({

1
src/Routes/Search.js
View file

@ -58,7 +58,6 @@ export default class Search extends React.Component {
}
render() {
console.log('this.state.query:', this.state.query);
return (
<Container>
<NotificationContainer />

111
src/Routes/Vegetable.js
View file

@ -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 >
);

27
src/css/index.css
View file

@ -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%;
}