diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css index 9970ead96..4b375a285 100644 --- a/source/components/TargetSelection.css +++ b/source/components/TargetSelection.css @@ -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 { diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js index f00f20f1f..cd6f265e5 100644 --- a/source/components/TargetSelection.js +++ b/source/components/TargetSelection.js @@ -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 (
-

Que voulez-vous calculer ?

+

Que voulez-vous calculer ?

{this.renderOutputList()} - {targets.length !== 0 && ( -
-

Vous pouvez faire plusieurs choix

- - - -
- )} +
+

Vous pouvez faire plusieurs choix

+ + + +
) } 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 (
- {popularTargets.map(s => ( - - - this.setState({ - targets: targets.find(t => t === s.name) - ? reject(t => t === s.name, targets) - : [...targets, s.name] - }) - } - /> - - - ))} +
+ {popularTargets.map(s => ( +
+ + this.setState({ + targets: targets.find(t => t === s.name) + ? reject(t => t === s.name, targets) + : [...targets, s.name] + }) + } + /> + +
+ ))} +
) } diff --git a/source/components/pages/About.js b/source/components/pages/About.js index dc0635dfc..95db7da71 100644 --- a/source/components/pages/About.js +++ b/source/components/pages/About.js @@ -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 (
-

À propos

diff --git a/source/components/pages/Contribution.js b/source/components/pages/Contribution.js index cb90163f2..3d40af8d0 100644 --- a/source/components/pages/Contribution.js +++ b/source/components/pages/Contribution.js @@ -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 (

-

Contribuer

Tout le développement se fait de façon transparente et contributive diff --git a/source/components/pages/Header.css b/source/components/pages/Header.css index 7231ca171..64c747d53 100644 --- a/source/components/pages/Header.css +++ b/source/components/pages/Header.css @@ -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%; + } } diff --git a/source/components/pages/Header.js b/source/components/pages/Header.js index a7491c939..ca39464ad 100644 --- a/source/components/pages/Header.js +++ b/source/components/pages/Header.js @@ -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 (