Some changes
This commit is contained in:
parent
04ef7f4498
commit
7231beb222
9 changed files with 568 additions and 767 deletions
1244
package-lock.json
generated
1244
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -27,12 +27,5 @@
|
|||
"not dead",
|
||||
"not ie <= 11",
|
||||
"not op_mini all"
|
||||
],
|
||||
"devDependencies": {
|
||||
"eslint": "^5.9.0",
|
||||
"eslint-config-airbnb": "^17.1.0",
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.1.2",
|
||||
"eslint-plugin-react": "^7.11.1"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -17,23 +17,13 @@ class App extends Component {
|
|||
background: 1
|
||||
}
|
||||
|
||||
this.changeBackground.bind = this.changeBackground();
|
||||
this.changeBackground = this.changeBackground.bind(this);
|
||||
}
|
||||
|
||||
changeBackground = () => {
|
||||
setInterval(() => {
|
||||
let currentBackground = this.state.background;
|
||||
document.body.style.background = `url('/background/${currentBackground}.jpg') no-repeat fixed`;
|
||||
document.body.style.backgroundSize = 'cover';
|
||||
document.body.style.backgroundPosition = 'center center';
|
||||
|
||||
if (currentBackground === 4) {
|
||||
currentBackground = 0
|
||||
}
|
||||
this.setState({
|
||||
background: currentBackground + 1
|
||||
})
|
||||
}, 10000);
|
||||
changeBackground(background) {
|
||||
document.body.style.background = `url('/background/${background}.jpg') no-repeat fixed`;
|
||||
document.body.style.backgroundSize = 'cover';
|
||||
document.body.style.backgroundPosition = 'center center';
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -42,10 +32,26 @@ class App extends Component {
|
|||
<Header></Header>
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route exact path="/carte" component={Map} />
|
||||
<Route exact path="/vegetaux/:typeId-:typeSlug" component={Vegetables} />
|
||||
<Route exact path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug" component={Vegetable} />
|
||||
<Route
|
||||
exact
|
||||
path="/"
|
||||
render={(props) => <Home {...props} changeBackground={this.changeBackground} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/carte"
|
||||
render={(props) => <Map {...props} changeBackground={this.changeBackground} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/vegetaux/:typeId-:typeSlug"
|
||||
render={(props) => <Vegetables {...props} changeBackground={this.changeBackground} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug"
|
||||
render={(props) => <Vegetable {...props} changeBackground={this.changeBackground} />}
|
||||
/>
|
||||
</Switch>
|
||||
</Router>
|
||||
</div>
|
||||
|
|
|
@ -81,7 +81,7 @@ export default class Header extends React.Component {
|
|||
<DropdownMenu right>
|
||||
{
|
||||
this.state.types.map((type, key) => (
|
||||
<DropdownItem key={key}>
|
||||
<DropdownItem as="div" key={key}>
|
||||
|
||||
<NavLink href={`/vegetaux/${type.id}-${strToSlug(type.name)}`}>
|
||||
<span className="text">{type.name}</span>
|
||||
|
|
|
@ -88,7 +88,7 @@ export default class Map extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Row className="with-margin">
|
||||
<Row className="with-margin ">
|
||||
<Col className="with-border with-background">
|
||||
<div id="MapContainer">
|
||||
<div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
|
||||
|
|
|
@ -9,6 +9,8 @@ import '../css/Home.css';
|
|||
|
||||
export default class RouterHome extends React.Component {
|
||||
render() {
|
||||
// this.props.changeBackground()
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Row>
|
||||
|
|
|
@ -9,7 +9,8 @@ import {
|
|||
CarouselItem,
|
||||
CarouselControl,
|
||||
CarouselIndicators,
|
||||
CarouselCaption
|
||||
Breadcrumb,
|
||||
BreadcrumbItem
|
||||
} from 'reactstrap';
|
||||
import {
|
||||
NotificationContainer,
|
||||
|
@ -17,6 +18,7 @@ import {
|
|||
} from 'react-notifications';
|
||||
import Api from '../Components/Api';
|
||||
import MapItem from '../Components/Map';
|
||||
import strToSlug from '../StrToSlug';
|
||||
|
||||
export default class RouterVegetable extends React.Component {
|
||||
constructor(props) {
|
||||
|
@ -29,7 +31,13 @@ export default class RouterVegetable extends React.Component {
|
|||
name: '',
|
||||
Vegetables: []
|
||||
},
|
||||
item: {},
|
||||
item: {
|
||||
name: null,
|
||||
Type: {
|
||||
id: null,
|
||||
name: null
|
||||
}
|
||||
},
|
||||
activeIndex: 0
|
||||
};
|
||||
|
||||
|
@ -96,8 +104,12 @@ export default class RouterVegetable extends React.Component {
|
|||
<Row>
|
||||
<Col xs="12">
|
||||
<Row className="with-margin">
|
||||
<Col className=" with-border with-background">
|
||||
<h1>» {this.state.item.name}</h1>
|
||||
<Col className="no-padding">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem><a href={`/vegetaux/${this.state.item.Type.id}-${strToSlug(this.state.item.Type.name)}`}>{this.state.item.Type.name}</a></BreadcrumbItem>
|
||||
<BreadcrumbItem active>{this.state.item.name}</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
export default (string) => {
|
||||
if (!string) {
|
||||
return ''
|
||||
}
|
||||
let str = string;
|
||||
str = str.replace(/^\s+|\s+$/g, ''); // trim
|
||||
str = str.toLowerCase();
|
||||
|
|
|
@ -48,4 +48,13 @@ body {
|
|||
/* width:50%;
|
||||
float:left;
|
||||
display:inline; */
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
Loading…
Reference in a new issue