betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

🎨 Changement du menu mobile; redesign de l'en-tête

pull/138/head
mama 2017-12-19 17:09:17 +01:00
parent 347ed037f3
commit 59a374a626
13 changed files with 175 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
source/components/TargetSelection.css
View File

@ -1,18 +1,24 @@
#targetSelection {
margin: 0 auto;
font-size: 90%;
height: 40em;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
font-size: 100%;
max-width: 860px;
}
#targetSelection > div {
width: 100%;
}
#targetSelection h2 {
margin: 2em;
}
#targetSelection ul {
text-align: left;
margin: 2em auto;
width: 80%;
#targetSelection #targets {
width: 30em;
margin: 0 auto;
}
#targetSelection label {
display: block;
margin-bottom: 1em;
@ -67,7 +73,7 @@
#targetSelection #action {
text-align: center;
margin: 2em auto;
margin: 1em auto;
}
#targetSelection #action p {

79
source/components/TargetSelection.js
View File

@ -4,11 +4,7 @@ import { reject, curry } from 'ramda'
import { Link } from 'react-router-dom'
import './TargetSelection.css'
export let salaries = [
'salaire net',
'salaire de base',
'salaire total'
]
export let salaries = ['salaire net', 'salaire de base', 'salaire total']
export default class TargetSelection extends Component {
state = {
@ -19,49 +15,54 @@ export default class TargetSelection extends Component {
return (
<section id="targetSelection">
<h2>Que voulez-vous calculer ?</h2>
<h1>Que voulez-vous calculer ?</h1>
{this.renderOutputList()}
{targets.length !== 0 && (
<div id="action">
<p>Vous pouvez faire plusieurs choix</p>
<Link to={'/simu/' + targets.join('+')}>
<button>Valider</button>
</Link>
</div>
)}
<div
id="action"
style={{ visibility: !targets.length ? 'hidden' : 'visible' }}
>
<p>Vous pouvez faire plusieurs choix</p>
<Link to={'/simu/' + targets.join('+')}>
<button>Valider</button>
</Link>
</div>
</section>
)
}
renderOutputList() {
let popularTargets = [...salaries, 'aides employeur différées'].map(curry(findRuleByName)(rules)),
let popularTargets = [...salaries, 'aides employeur différées'].map(
curry(findRuleByName)(rules)
),
{ targets } = this.state
return (
<div>
{popularTargets.map(s => (
<span key={s.name}>
<input
id={s.name}
type="checkbox"
checked={targets.includes(s.name)}
onChange={() =>
this.setState({
targets: targets.find(t => t === s.name)
? reject(t => t === s.name, targets)
: [...targets, s.name]
})
}
/>
<label htmlFor={s.name} key={s.name}>
<i className="fa fa-square-o fa-2x" />
<i className="fa fa-check-square-o fa-2x" />
<div>
<span className="optionTitle">{s.title || s.name}</span>
<p>{s['résumé']}</p>
</div>
</label>
</span>
))}
<div id="targets">
{popularTargets.map(s => (
<div key={s.name}>
<input
id={s.name}
type="checkbox"
checked={targets.includes(s.name)}
onChange={() =>
this.setState({
targets: targets.find(t => t === s.name)
? reject(t => t === s.name, targets)
: [...targets, s.name]
})
}
/>
<label htmlFor={s.name} key={s.name}>
<i className="fa fa-square-o fa-2x" />
<i className="fa fa-check-square-o fa-2x" />
<div>
<span className="optionTitle">{s.title || s.name}</span>
<p>{s['résumé']}</p>
</div>
</label>
</div>
))}
</div>
</div>
)
}

2
source/components/pages/About.js
View File

@ -1,13 +1,11 @@
import React, { Component } from 'react'
import './Pages.css'
import './About.css'
import Header from './Header'
import { Link } from 'react-router-dom'
export default class About extends Component {
render() {
return (
<section className="page" id="about">
<Header />
<h1>À propos</h1>
<p>
<a href="https://beta.gouv.fr" target="_blank">

2
source/components/pages/Contribution.js
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react'
import './Pages.css'
import Header from './Header'
// TODO reprendre les icônes de embauche.gouv.fr version novembre 2017
// pour expliquer la contribution au projet
@ -11,7 +10,6 @@ export default class Contribution extends Component {
render() {
return (
<section className="page" id="contribution">
<Header />
<h1>Contribuer</h1>
<p>
Tout le développement se fait de façon transparente et contributive

127
source/components/pages/Header.css
View File

@ -1,82 +1,65 @@
@media screen and (max-width:860px) {
nav:not(.bm-item-list) > a {
display: none;
}
nav > a {
display: block;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
border-bottom: 1px solid #ebebeb;
}
@media screen and (min-width:860px) {
nav > div {
display: none;
}
#header h1 {
font-size: calc(1vw + 150%);
font-weight: 600;
}
#header #marianne {
width: calc(3vw + 5em);
}
#menuButton {
font-size: 300%;
color: #3c4963;
margin: 0 0.4em;
}
nav {
font-size: 150%;
}
nav > a {
color: #3c4963;
}
@media screen and (max-width: 860px) {
nav {
display: none;
}
nav.visible {
display: block;
position: absolute;
right: 1em;
top: 4.5em;
font-size: 90%;
width: 100%;
background: white;
left: 0;
top: 4.8em;
bottom: 0;
}
nav > a {
display: inline;
margin: .6em;
nav.visible #links {
margin: 6em 1em;
}
nav > a > i {
margin: 0 .3em;
font-size: 120% !important;
nav.visible a {
font-size: 200%;
color: #3c4963;
display: block;
margin: 1.2em;
}
}
@media screen and (min-width: 860px) {
#menuButton {
display: none;
}
nav {
margin-right: 2em;
}
/* Position and sizing of burger button */
.bm-burger-button {
position: fixed;
width: 4em;
height: 3em;
right: 2em;
top: 3em;
}
/* Color/shape of burger icon bars */
.bm-burger-bars {
background: #373a47;
}
/* Position and sizing of clickable cross button */
.bm-cross-button {
height: 24px;
width: 24px;
display: none;
}
/* Color/shape of close button cross */
.bm-cross {
background: #bdc3c7;
}
/* General sidebar styles */
.bm-menu {
background: white;
padding: 3em 0.6em;
font-size: 200%;
}
/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
fill: #373a47;
}
/* Wrapper for item list */
.bm-item-list {
padding: 0.8em;
height: auto !important;
}
.bm-item-list a {
margin-bottom: 0.6em;
}
/* Styling of overlay */
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
nav a {
margin: 0.8em;
font-size: 85%;
}
}

71
source/components/pages/Header.js
View File

@ -1,10 +1,20 @@
import React, { Component } from 'react'
import { slide as Menu } from 'react-burger-menu'
import 'Components/pages/Header.css'
import { Link } from 'react-router-dom'
export default class Header extends Component {
state = {
mobileNavVisible: false
}
togglemobileNavVisible = () =>
this.setState({ mobileNavVisible: !this.state.mobileNavVisible })
render() {
let displayHeader = !['/simu/', '/regle/'].find(
t => window.location.href.toString().includes(t)
)
if (!displayHeader) return null
return (
<div id="header">
<Link className="menu-item" to="/">
@ -14,32 +24,45 @@ export default class Header extends Component {
alt="Un service de l'État français"
/>
</Link>
<nav>
<Menu right>
<Links />
</Menu>
{/* Et maintenant le menu pour grand écran, activé en CSS */}
<Links />
<Link to="/">
<h1>Simulateur d'embauche</h1>
</Link>
<div id="menuButton">
{this.state.mobileNavVisible ? (
<i
className="fa fa-times"
aria-hidden="true"
onClick={this.togglemobileNavVisible}
/>
) : (
<i
className="fa fa-bars"
aria-hidden="true"
onClick={this.togglemobileNavVisible}
/>
)}
</div>
<nav className={this.state.mobileNavVisible ? 'visible' : ''}>
<Links toggle={this.togglemobileNavVisible} />
</nav>
</div>
)
}
}
let Links = () => <>
<Link className="menu-item" to="/">
<i className="fa fa-home" aria-hidden="true"></i>
</Link>
<Link className="menu-item" to="/intégrer">
<em>Intégrer le module</em>
</Link>
<Link className="menu-item" to="/contribuer">
Contribuer
</Link>
<Link className="menu-item" to="/regles">
Toutes nos règles
</Link>
<Link className="menu-item" to="/à-propos">
À propos
</Link>
</>
let Links = ({toggle}) => (
<div id="links" onClick={toggle}>
<Link className="menu-item" to="/intégrer">
<em>Intégrer le module</em>
</Link>
<Link className="menu-item" to="/contribuer">
Contribuer
</Link>
<Link className="menu-item" to="/regles">
Toutes nos règles
</Link>
<Link className="menu-item" to="/à-propos">
À propos
</Link>
</div>
)

5
source/components/pages/Home.js
View File

@ -3,7 +3,6 @@ import './Pages.css'
import './Home.css'
import ReactPiwik from 'Components/Tracker' //TODO réintégrer Piwik
import TargetSelection from '../TargetSelection'
import Header from './Header'
export default class Home extends Component {
@ -12,10 +11,6 @@ export default class Home extends Component {
return (
<div id="home" className="page">
<Header/>
<h1>Simulateurs d'embauche</h1>
<p>LE SLOGAN ICI</p>
<div id="content">
<TargetSelection />
</div>

2
source/components/pages/Integration.css
View File

@ -1,10 +1,8 @@
#integration p {
margin-top: 3em;
vertical-align: top;
position: relative;
}
#integration code {
position: relative;
display: inline-block;
font-size: 80%;
width: 90%;

2
source/components/pages/Integration.js
View File

@ -1,13 +1,11 @@
import React, { Component } from 'react'
import './Integration.css'
import './Pages.css'
import Header from './Header'
export default class MyComponent extends Component {
render() {
return (
<section className="page" id="integration">
<Header />
<div>
<h1>Intégrez le module Web</h1>
<p>Intégrez le module en ajoutant une ligne à votre page Web :</p>

4
source/components/pages/Pages.css
View File

@ -1,7 +1,7 @@
.page {
max-width: 45em;
margin: 2em auto;
margin: 1em auto;
padding: 0 2em;
font-size: 130%;
}
@ -11,7 +11,7 @@
}
.page h1 {
margin: 5em 0 1em;
margin: 1em 0 1em;
color: #3C4963;
font-size: 220%;
}

2
source/components/pages/RulesList.js
View File

@ -4,13 +4,11 @@ import { Link } from "react-router-dom"
import './RulesList.css'
import './Pages.css'
import {capitalise0} from '../../utils'
import Header from './Header'
export default class RulesList extends Component {
render() {
return (
<div id="RulesList" className="page">
<Header />
<h1>Les règles aujourd'hui implémentées</h1>
<ul>
{rules.map(rule => (

15
source/containers/Layout.css
View File

@ -13,20 +13,6 @@ body {
}
#header h1 {
margin-top: 3em;
text-align: center;
font-size: 300%
}
#header #marianne {
position: absolute;
left: 2em;
top: 2em;
width: 8em;
}
#content {
margin-top: 1.5em;
}
@ -38,7 +24,6 @@ a {
h1 {
margin: 0 .1em;
font-size: 250%;
font-weight: 400;
}

30
source/containers/Layout.js
View File

@ -16,6 +16,7 @@ import Integration from 'Components/pages/Integration'
import About from 'Components/pages/About'
import ReactPiwik from 'Components/Tracker'
import createHistory from 'history/createBrowserHistory'
import Header from 'Components/pages/Header'
const piwik = new ReactPiwik({
url: 'stats.data.gouv.fr',
@ -31,19 +32,22 @@ export default class Layout extends Component {
return (
<Router history={piwik.connectToHistory(this.history)}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={Contact} />
<Route path="/regle/:name" component={RulePage} />
<Route path="/regles" component={RulesList} />
<Route path="/simu/:targets" component={Simulateur} />
<Route path="/à-propos" component={About} />
<Route path="/intégrer" component={Integration} />
<Route path="/contribuer" component={Contribution} />
<Redirect from="/simu/" to="/" />
<Redirect from="/simu/:name/intro" to="/simu/:name" />
<Route component={Route404} />
</Switch>
<>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={Contact} />
<Route path="/regle/:name" component={RulePage} />
<Route path="/regles" component={RulesList} />
<Route path="/simu/:targets" component={Simulateur} />
<Route path="/à-propos" component={About} />
<Route path="/intégrer" component={Integration} />
<Route path="/contribuer" component={Contribution} />
<Redirect from="/simu/" to="/" />
<Redirect from="/simu/:name/intro" to="/simu/:name" />
<Route component={Route404} />
</Switch>
</>
</Router>
)
}