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

Updated file structure

Browse source
This commit is contained in:
dbroqua 2018-11-18 19:03:01 +01:00
parent 6f351f0231
commit e324446051
13 changed files with 197 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/App.css
View file

@ -1,32 +0,0 @@
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

9
src/App.test.js
View file

@ -1,9 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

12
src/App.js → src/components/App.js
View file

@ -1,13 +1,12 @@
import React, { Component } from 'react';
import Header from './components/Header';
import Header from './Header';
import {
BrowserRouter as Router, Route,
Switch,
} from 'react-router-dom';
import Map from './components/Map';
import Vegetables from './components/Vegetables';
import './App.css';
import Map from './Map';
import Home from './Home';
import Vegetables from './Vegetables';
class App extends Component {
constructor(props) {
@ -42,7 +41,8 @@ class App extends Component {
<Header></Header>
<Router>
<Switch>
<Route exact path="/" component={Map} />
<Route exact path="/" component={Home} />
<Route exact path="/carte" component={Map} />
<Route exact path="/vegetaux" component={Vegetables} />
<Route exact path="/vegetaux/:id-:slug" component={Vegetables} />
</Switch>

3
src/components/Header.js
View file

@ -27,6 +27,7 @@ import {
} from 'react-notifications';
import strToSlug from '../StrToSlug';
import '../css/Header.css'
export default class Header extends React.Component {
constructor(props) {
@ -71,7 +72,7 @@ export default class Header extends React.Component {
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/">Carte</NavLink>
<NavLink href="/carte">Carte</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>

35
src/components/Home.js Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import {
Container,
Row,
Col
} from 'reactstrap';
import '../css/Home.css';
export default class Home extends React.Component {
render() {
return (
<Container>
<Row>
<Col xs="12" className=" with-border with-background">
<img src="/logo.png" className="logo float-left" alt="RodiVert" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id arcu varius sem pulvinar porta eget at felis. Curabitur euismod libero erat, id sagittis nunc hendrerit vitae. Nulla facilisis lobortis quam sit amet pellentesque. Vestibulum eget justo ut enim pretium iaculis sit amet eu ex. Suspendisse potenti. Curabitur ac justo ligula. Proin molestie vestibulum metus, eget dignissim enim euismod in. Nam at neque nisi.
</p>
<p>
Pellentesque luctus dignissim orci a tempus. Nam eget sem consectetur, dignissim ante sed, laoreet mi. Ut efficitur at nibh quis efficitur. Ut accumsan ultricies felis id sodales. Fusce hendrerit mi neque, eget consequat nibh lobortis at. Nunc ligula elit, efficitur id mauris a, congue aliquet nibh. In congue enim metus, a mattis velit vehicula id. Nunc commodo magna sit amet vulputate condimentum. Integer vitae pretium dui. Vestibulum ut convallis velit. Pellentesque vehicula finibus viverra. Nam a elit sapien. Praesent laoreet est ac nisl dapibus, non porttitor est placerat. Aenean vitae tellus convallis, venenatis felis in, venenatis augue. Maecenas id finibus arcu, vitae dignissim tellus. Duis eget metus turpis.
</p>
<p>
Nulla sed mauris non mi efficitur suscipit. Praesent tincidunt metus in justo viverra, non condimentum lectus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque non tempus ligula, non fermentum velit. Nunc metus ipsum, luctus quis venenatis sed, efficitur ut eros. Nullam vitae risus at orci fringilla faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pharetra at mi hendrerit blandit. Praesent tempus at massa in finibus. Suspendisse id lacus auctor, pretium erat varius, scelerisque neque. Etiam tincidunt et est ac cursus. Sed nec neque fringilla, mollis enim sit amet, tristique massa. Aliquam erat volutpat. Suspendisse semper aliquam diam sit amet porttitor. Praesent eget elit vel tortor iaculis ornare ac congue lacus.
</p>
<p>
Suspendisse semper, orci non porttitor semper, elit ligula euismod turpis, sed facilisis ligula eros eget urna. Praesent facilisis nulla interdum mauris cursus cursus. In massa sapien, condimentum eget est eleifend, varius pellentesque velit. Nunc vitae eros sed ex mollis lacinia vitae vel augue. Proin sed metus velit. Aliquam eget justo ornare, dictum ipsum vitae, fermentum purus. Curabitur mollis arcu sed libero porta, et porta ante interdum. Integer non viverra purus.
</p>
</Col>
</Row>
</Container>
);
}
}

73
src/components/Map.js
View file

@ -21,6 +21,7 @@ import {
} from 'react-router-dom';
import strToSlug from '../StrToSlug'
import '../css/Map.css'
const MapDimensions = {
width: 734,
@ -135,8 +136,8 @@ export default class Map extends React.Component {
<Container>
<NotificationContainer />
<Row>
<Col xs="8">
<Row>
<Col xs="12" sm="8">
<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 }}>
@ -164,38 +165,46 @@ export default class Map extends React.Component {
</Col>
</Row>
</Col>
<Col xs="4">
<Col xs="12" sm="4">
<Row>
<Col className="with-border with-background" xs="12">
<ListGroup className='vegetables--types--group'>
{
this.state.types.map((type, key) =>
(
<ListGroupItem
key={key}
className={this.state.selectedType.id === type.id ? "selected" : "null"} onClick={(e) => this.selectType(type)}>
{type.name}
<Badge pill>{type.Vegetables.length}</Badge>
</ListGroupItem>
)
)
}
</ListGroup>
<Col xs="6" sm="12">
<div className="with-margin">
<div className=" with-border with-background">
<ListGroup className='vegetables--types--group'>
{
this.state.types.map((type, key) =>
(
<ListGroupItem
key={key}
className={this.state.selectedType.id === type.id ? "selected" : "null"} onClick={(e) => this.selectType(type)}>
{type.name}
<Badge pill>{type.Vegetables.length}</Badge>
</ListGroupItem>
)
)
}
</ListGroup>
</div>
</div>
</Col>
<Col className="with-border with-background" xs="12">
<ListGroup className='vegetables--types--group'>
{
this.state.selectedType &&
this.state.selectedType.Vegetables &&
this.state.selectedType.Vegetables.map((vegetable, key) =>
(
<ListGroupItem key={key} className={this.state.selectedVegetable.id === vegetable.id ? "selected" : "null"} onMouseOver={(e) => this.selectVegetable(vegetable)}>
{vegetable.name}
</ListGroupItem>
)
)
}
</ListGroup>
<Col xs="6" sm="12">
<div className="with-margin">
<div className=" with-border with-background">
<ListGroup className='vegetables--types--group'>
{
this.state.selectedType &&
this.state.selectedType.Vegetables &&
this.state.selectedType.Vegetables.map((vegetable, key) =>
(
<ListGroupItem key={key} className={this.state.selectedVegetable.id === vegetable.id ? "selected" : "null"} onMouseOver={(e) => this.selectVegetable(vegetable)}>
{vegetable.name}
</ListGroupItem>
)
)
}
</ListGroup>
</div>
</div>
</Col>
</Row>
</Col>

21
src/css/Header.css Normal file
View file

@ -0,0 +1,21 @@
.navbar-collapse {
flex-grow: unset !important;
}
.nav-item {
padding: 0 16px;
border-left: 1px solid #ccc;
}
.navbar.navbar-expand-md.navbar-light.bg-light {
box-shadow: 0 2px 2px #a7a7a7;
margin-bottom: 16px;
}
.nav-link .text {
padding-right: 32px;
}
.nav-link .badge {
position: absolute;
right: 24px;
}

3
src/css/Home.css Normal file
View file

@ -0,0 +1,3 @@
.logo {
margin: 0 16px 16px 0;
}

49
src/css/Map.css Normal file
View file

@ -0,0 +1,49 @@
.map {
width: 734px;
height: 530px;
background: url('/plan.jpg');
background-size: cover;
position: relative;
}
.mapMarker {
position: absolute;
left: 25%;
top: 33%;
}
.mapMarker svg {
color: #dc3545;
font-size: 2rem;
cursor: pointer;
}
.mapMarker.selected svg {
color: #007bff;
animation: bounce 0.7s ease 5;
}
@keyframes bounce{
from {margin-top: 0;}
50% {margin-top: 8px;}
to {margin-top: 0;}
}
.vegetables--types--group li {
cursor: pointer;
text-align: left;
}
.vegetables--types--group li:hover {
background: #fafafa;
opacity: 0.6;
}
.vegetables--types--group li.selected {
background: #f1f1f1;
font-weight: bold;
}
.vegetables--types--group .badge {
margin-left: 8px;
}

38
src/css/index.css Normal file
View file

@ -0,0 +1,38 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: url('/background/1.jpg') no-repeat fixed;
background-size: cover;
background-position: center center;
}
.with-border {
box-shadow: 4px 4px 6px #a7a7a7;
border-radius: 8px;
border: 1px solid #ccc;
/* margin: 16px; */
padding: 8px;
}
.with-margin {
margin: 8px;
}
@media (max-width: 575.98px) {
.with-margin {
margin: 8px 0;
}
}
.with-background {
background-color: rgba(248,249,250, 0.7) !important;
}
.container {
margin-top: 116px;
}

108
src/index.css
View file

@ -1,108 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: url('/background/1.jpg') no-repeat fixed;
background-size: cover;
background-position: center center;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.navbar-collapse {
flex-grow: unset !important;
}
.nav-item {
padding: 0 16px;
border-left: 1px solid #ccc;
}
.navbar.navbar-expand-md.navbar-light.bg-light {
/* background-color: rgba(248,249,250, 0.8) !important; */
box-shadow: 0 2px 2px #a7a7a7;
margin-bottom: 16px;
}
.with-border {
box-shadow: 4px 4px 6px #a7a7a7;
border-radius: 8px;
border: 1px solid #ccc;
margin: 16px;
padding: 8px;
}
.with-background {
/* background: #f8f9fa; */
background-color: rgba(248,249,250, 0.7) !important;
}
.container {
margin-top: 116px;
}
.nav-link .text {
padding-right: 32px;
}
.nav-link .badge {
position: absolute;
right: 24px;
}
.vegetables--types--group li {
cursor: pointer;
text-align: left;
}
.vegetables--types--group li:hover {
background: #fafafa;
opacity: 0.6;
}
.vegetables--types--group li.selected {
background: #f1f1f1;
font-weight: bold;
}
.vegetables--types--group .badge {
margin-left: 8px;
}
.map {
width: 734px;
height: 530px;
background: url('/plan.jpg');
background-size: cover;
position: relative;
}
.mapMarker {
position: absolute;
left: 25%;
top: 33%;
}
.mapMarker svg {
color: #dc3545;
font-size: 2rem;
cursor: pointer;
}
.mapMarker.selected svg {
color: #007bff;
animation: bounce 0.7s ease 5;
}
@keyframes bounce{
from {margin-top: 0;}
50% {margin-top: 8px;}
to {margin-top: 0;}
}

4
src/index.js
View file

@ -1,11 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import 'react-notifications/lib/notifications.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import './css/index.css';
ReactDOM.render(<App />, document.getElementById('root'));

7
src/logo.svg
View file

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.6 KiB