Some change on vegetable page
This commit is contained in:
dbroqua
parent
23d81786ed
commit
3ba0e0803f
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@ export default class Search extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log('this.state.query:', this.state.query);
|
||||
return (
|
||||
<Container>
|
||||
<NotificationContainer />
|
||||
|
|
|
|||
|
|
@ -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 >
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user