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> <!DOCTYPE html>
<html lang="en"> <html lang="fr" class="h-100">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -10,11 +10,16 @@
<title>RodiVert</title> <title>RodiVert</title>
</head> </head>
<body> <body class="d-flex flex-column h-100">
<noscript> <noscript>
You need to enable JavaScript to run this app. You need to enable JavaScript to run this app.
</noscript> </noscript>
<div id="root"></div> <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> </body>
</html> </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 Header from './Header';
import { import {
BrowserRouter as Router, Route, BrowserRouter as Router, Route,
@ -29,7 +29,7 @@ class App extends Component {
render() { render() {
return ( return (
<div className="App"> <Fragment>
<Header></Header> <Header></Header>
<Router> <Router>
<Switch> <Switch>
@ -60,7 +60,7 @@ class App extends Component {
/> />
</Switch> </Switch>
</Router> </Router>
</div> </Fragment>
); );
} }
} }

26
src/Components/Map.js
View file

@ -39,11 +39,19 @@ export default class Map extends React.Component {
} }
componentWillReceiveProps(newProps) { componentWillReceiveProps(newProps) {
this.setState(prevState => ({ const {
...prevState, selectedType,
selectedType: newProps.selectedType, selectedVegetable,
selectedVegetable: newProps.selectedVegetable, } = this.state;
}));
if (newProps.selectedType !== selectedType || newProps.selectedVegetable !== selectedVegetable) {
this.setState(prevState => ({
...prevState,
selectedType: newProps.selectedType,
selectedVegetable: newProps.selectedVegetable,
}), this.setMap);
}
} }
componentDidMount() { componentDidMount() {
@ -60,9 +68,11 @@ export default class Map extends React.Component {
let MapWidth = MapDimensions.width; let MapWidth = MapDimensions.width;
let MapHeight = MapDimensions.height; let MapHeight = MapDimensions.height;
if (width < MapDimensions.width) { MapWidth = width;
MapWidth = width; MapHeight = Math.round(MapDimensions.height * MapWidth / MapDimensions.width);
MapHeight = Math.round(MapDimensions.height * MapWidth / MapDimensions.width);
if (this.props.setHeight) {
this.props.setHeight(MapHeight)
} }
this.setState({ this.setState({

1
src/Routes/Search.js
View file

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

111
src/Routes/Vegetable.js
View file

@ -38,7 +38,8 @@ export default class RouterVegetable extends React.Component {
name: null name: null
} }
}, },
activeIndex: 0 activeIndex: 0,
carouselHeight: 0
}; };
this.getItem = this.getItem.bind(this); this.getItem = this.getItem.bind(this);
@ -47,6 +48,7 @@ export default class RouterVegetable extends React.Component {
this.goToIndex = this.goToIndex.bind(this); this.goToIndex = this.goToIndex.bind(this);
this.onExiting = this.onExiting.bind(this); this.onExiting = this.onExiting.bind(this);
this.onExited = this.onExited.bind(this); this.onExited = this.onExited.bind(this);
this.setHeight = this.setHeight.bind(this);
this.getItem(); this.getItem();
this.props.changeBackground('vegetables') this.props.changeBackground('vegetables')
@ -96,9 +98,69 @@ export default class RouterVegetable extends React.Component {
}); });
} }
render() { renderCarousel() {
const { activeIndex } = this.state; 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 ( return (
<Container> <Container>
<NotificationContainer /> <NotificationContainer />
@ -114,13 +176,11 @@ export default class RouterVegetable extends React.Component {
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col xs="12"> <div>
<MapItem
selectedType={this.state.selectedType} </div>
selectedVegetable={this.state.item} {this.renderMap()}
selectVegetable={() => { }} {this.renderCarousel()}
/>
</Col>
<Col xs="12"> <Col xs="12">
<Row className="with-margin"> <Row className="with-margin">
<Col className=" with-border with-background"> <Col className=" with-border with-background">
@ -144,38 +204,7 @@ export default class RouterVegetable extends React.Component {
</Col> </Col>
</Row> </Row>
</Col> </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> </Row>
</Container > </Container >
); );

27
src/css/index.css
View file

@ -57,4 +57,31 @@ body {
.center { .center {
display: flex; display: flex;
justify-content: center; 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%;
} }