Some changes

This commit is contained in:
dbroqua 2018-12-02 18:23:42 +01:00
parent 04ef7f4498
commit 7231beb222
9 changed files with 568 additions and 767 deletions

1244
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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"
}
]
}

View file

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

View file

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

View file

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

View file

@ -9,6 +9,8 @@ import '../css/Home.css';
export default class RouterHome extends React.Component {
render() {
// this.props.changeBackground()
return (
<Container>
<Row>

View file

@ -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>&raquo; {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>

View file

@ -1,4 +1,7 @@
export default (string) => {
if (!string) {
return ''
}
let str = string;
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();

View file

@ -48,4 +48,13 @@ body {
/* width:50%;
float:left;
display:inline; */
}
.no-padding {
padding: 0;
}
.center {
display: flex;
justify-content: center;
}