From 678c679419dc9691e58202b709b46792a649c0f8 Mon Sep 17 00:00:00 2001 From: mama Date: Mon, 11 Dec 2017 15:42:03 +0100 Subject: [PATCH] Ajout des pages de l'accueil --- source/components/Contact.js | 2 +- source/components/Home.css | 21 ---- source/components/Home.js | 35 ------ source/components/Route404.js | 2 +- source/components/TargetSelection.css | 2 +- source/components/pages/About.js | 78 ++++++++++++ source/components/pages/Contribution.js | 26 ++++ source/components/pages/Header.js | 37 ++++++ source/components/pages/Home.css | 7 ++ source/components/pages/Home.js | 26 ++++ source/components/pages/Integration.css | 117 ++++++++++++++++++ source/components/pages/Integration.js | 100 +++++++++++++++ source/components/{ => pages}/Menu.css | 0 source/components/pages/Pages.css | 24 ++++ source/components/{ => pages}/RulesList.css | 0 source/components/{ => pages}/RulesList.js | 7 +- source/containers/Layout.css | 16 +++ source/containers/Layout.js | 77 ++++++------ .../aides-creations.png | Bin .../images/{homeEmbauche => accueil}/apec.png | Bin .../images/{homeEmbauche => accueil}/api.svg | 0 .../{homeEmbauche => accueil}/calculator.svg | 0 .../{homeEmbauche => accueil}/carto.png | Bin .../images/{homeEmbauche => accueil}/cci.png | Bin .../{homeEmbauche => accueil}/checklist.svg | 0 .../images/{homeEmbauche => accueil}/code.svg | 0 .../logo-SGMAP-fond-blanc.svg | 0 .../logo-SGMAP-fond-noir.svg | 0 .../logo-openfisca.svg | 0 .../logo_startup_etat.svg | 0 .../{homeEmbauche => accueil}/min-tra.jpg | Bin .../{homeEmbauche => accueil}/pole-emploi.jpg | Bin .../{homeEmbauche => accueil}/pole-emploi.png | Bin .../question_mark.svg | 0 .../{homeEmbauche => accueil}/roues.svg | 0 .../simulateur-2017-raw.gif | Bin .../simulateur-2017.gif | Bin .../simulateur-2017.png | Bin .../simulateur-statique.gif | Bin .../{homeEmbauche => accueil}/simulateur.gif | Bin .../{homeEmbauche => accueil}/simulateur.png | Bin .../{homeEmbauche => accueil}/tests.svg | 0 .../{homeEmbauche => accueil}/widget.svg | 0 source/webpack.config.js | 3 +- 44 files changed, 482 insertions(+), 98 deletions(-) delete mode 100644 source/components/Home.css delete mode 100644 source/components/Home.js create mode 100644 source/components/pages/About.js create mode 100644 source/components/pages/Contribution.js create mode 100644 source/components/pages/Header.js create mode 100644 source/components/pages/Home.css create mode 100644 source/components/pages/Home.js create mode 100644 source/components/pages/Integration.css create mode 100644 source/components/pages/Integration.js rename source/components/{ => pages}/Menu.css (100%) create mode 100644 source/components/pages/Pages.css rename source/components/{ => pages}/RulesList.css (100%) rename source/components/{ => pages}/RulesList.js (76%) rename source/images/{homeEmbauche => accueil}/aides-creations.png (100%) rename source/images/{homeEmbauche => accueil}/apec.png (100%) rename source/images/{homeEmbauche => accueil}/api.svg (100%) rename source/images/{homeEmbauche => accueil}/calculator.svg (100%) rename source/images/{homeEmbauche => accueil}/carto.png (100%) rename source/images/{homeEmbauche => accueil}/cci.png (100%) rename source/images/{homeEmbauche => accueil}/checklist.svg (100%) rename source/images/{homeEmbauche => accueil}/code.svg (100%) rename source/images/{homeEmbauche => accueil}/logo-SGMAP-fond-blanc.svg (100%) rename source/images/{homeEmbauche => accueil}/logo-SGMAP-fond-noir.svg (100%) rename source/images/{homeEmbauche => accueil}/logo-openfisca.svg (100%) rename source/images/{homeEmbauche => accueil}/logo_startup_etat.svg (100%) rename source/images/{homeEmbauche => accueil}/min-tra.jpg (100%) rename source/images/{homeEmbauche => accueil}/pole-emploi.jpg (100%) rename source/images/{homeEmbauche => accueil}/pole-emploi.png (100%) rename source/images/{homeEmbauche => accueil}/question_mark.svg (100%) rename source/images/{homeEmbauche => accueil}/roues.svg (100%) rename source/images/{homeEmbauche => accueil}/simulateur-2017-raw.gif (100%) rename source/images/{homeEmbauche => accueil}/simulateur-2017.gif (100%) rename source/images/{homeEmbauche => accueil}/simulateur-2017.png (100%) rename source/images/{homeEmbauche => accueil}/simulateur-statique.gif (100%) rename source/images/{homeEmbauche => accueil}/simulateur.gif (100%) rename source/images/{homeEmbauche => accueil}/simulateur.png (100%) rename source/images/{homeEmbauche => accueil}/tests.svg (100%) rename source/images/{homeEmbauche => accueil}/widget.svg (100%) diff --git a/source/components/Contact.js b/source/components/Contact.js index b33a251cf..4585c4575 100644 --- a/source/components/Contact.js +++ b/source/components/Contact.js @@ -6,5 +6,5 @@ export default () => Pour nous écrire : contact@embauche.beta.gouv.fr

{/* TODO: credits for the image to add: https://thenounproject.com/search/?q=post+card&i=715677 */} - + diff --git a/source/components/Home.css b/source/components/Home.css deleted file mode 100644 index dcf14e52e..000000000 --- a/source/components/Home.css +++ /dev/null @@ -1,21 +0,0 @@ -#home { -} - -#home #header h1 { - margin-top: 3em; - text-align: center; - font-size: 300% -} - -#home #marianne { - position: absolute; - left: 2em; - top: 2em; - width: 8em; -} - -#home > #content { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/source/components/Home.js b/source/components/Home.js deleted file mode 100644 index 7155169eb..000000000 --- a/source/components/Home.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react' -import './Home.css' -import ReactPiwik from 'Components/Tracker' //TODO réintégrer Piwik -import TargetSelection from './TargetSelection' -import { slide as Menu } from 'react-burger-menu' -import './Menu.css' - -export default class Home extends Component { - - render() { - - return ( -
- - -
- -
-
- ) - } - -} diff --git a/source/components/Route404.js b/source/components/Route404.js index f27c97107..77abb01ff 100644 --- a/source/components/Route404.js +++ b/source/components/Route404.js @@ -16,7 +16,7 @@ export default () => ( Revenir en lieu sûr diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css index a3e3be5c6..5f14f93f0 100644 --- a/source/components/TargetSelection.css +++ b/source/components/TargetSelection.css @@ -23,7 +23,6 @@ #targetSelection div { margin-left: 1em; - line-height: 0.6em; } #targetSelection .optionTitle { @@ -31,6 +30,7 @@ } #targetSelection label p { color: #555; + margin: 0; } #targetSelection input:checked + label .optionTitle { font-weight: 600; diff --git a/source/components/pages/About.js b/source/components/pages/About.js new file mode 100644 index 000000000..0d62d5b85 --- /dev/null +++ b/source/components/pages/About.js @@ -0,0 +1,78 @@ +import React, { Component } from 'react' +import './Pages.css' +import Header from './Header' +export default class About extends Component { + render() { + return ( +
+
+

À propos

+

+ + L'incubateur des services numériques de l'État a lancé + {' '} + en 2014 le développement d’une ressource ouverte de calcul + des prélèvements sociaux sur les revenus d'activité en France. +

+

+ Ce premier service, un{' '} + module simulation des sommes en jeu lors d'une embauche, peut + être intégré facilement et gratuitement par toute + organisation sur son site Web. +

+

+ Ce travail est contributif : venez définir avec nous la feuille de + route du service (implémentation des conventions collectives, ajout + des statuts autres que le travail salarié, ...). +

+ + + Ou contactez-nous directement + + {/*

Notre prochaine rencontre OpenLab aura lieu le mercredi 18 janvier 2017 à 10h, au 86 allée de Bercy, 75012, salle 381-R

*/} +
+ ) + } +} + +let MailChimp = () => ( +
+
+
+ +
+ +
+
+ +
+
+
+
+) diff --git a/source/components/pages/Contribution.js b/source/components/pages/Contribution.js new file mode 100644 index 000000000..83b572043 --- /dev/null +++ b/source/components/pages/Contribution.js @@ -0,0 +1,26 @@ +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 + +// parler du fait qu'on ne contribue pas simplement à une calculette + +export default class Contribution extends Component { + render() { + return ( +
+
+

Contribuer

+

+ Tout le développement se fait de façon transparente et contributive + sur{' '} + + GitHub + +

+
+ ) + } +} diff --git a/source/components/pages/Header.js b/source/components/pages/Header.js new file mode 100644 index 000000000..80e354250 --- /dev/null +++ b/source/components/pages/Header.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react' +import { slide as Menu } from 'react-burger-menu' +import 'Components/pages/Menu.css' +import { Link } from 'react-router-dom' + +export default class Header extends Component { + render() { + return ( + + ) + } +} diff --git a/source/components/pages/Home.css b/source/components/pages/Home.css new file mode 100644 index 000000000..8add3eabe --- /dev/null +++ b/source/components/pages/Home.css @@ -0,0 +1,7 @@ + + +#home > #content { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/source/components/pages/Home.js b/source/components/pages/Home.js new file mode 100644 index 000000000..7b69859cd --- /dev/null +++ b/source/components/pages/Home.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react' +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 { + + render() { + + return ( +
+
+

Simulateurs d'embauche

+

LE SLOGAN ICI

+ +
+ +
+
+ ) + } + +} diff --git a/source/components/pages/Integration.css b/source/components/pages/Integration.css new file mode 100644 index 000000000..ae5655f47 --- /dev/null +++ b/source/components/pages/Integration.css @@ -0,0 +1,117 @@ + + + + + + + + +#integration p { + margin-top: 3em; + vertical-align: top; + position: relative; +} +#integration code { + position: relative; + display: inline-block; + font-size: 80%; + max-width: 40em; + padding: 1em; + background: #f8f8f8; + margin: auto; + margin-bottom: 1em; + + box-shadow: 0 1px 1px rgba(0,0,0,0.05), -1px 1px 1px rgba(0,0,0,0.02); +} + +#integration code em { + font-weight: 300; + color: black; +} + +#integration code:before { + content: ""; + position: absolute; + top: 0; + right: 0; + border-width: 0 16px 16px 0; + border-style: solid; + border-color: #e8e8e8 white; +} + +#scriptColor { + color: #4A89DC +} + + +section#integrations a { + text-decoration: none; +} + + + +#integrationList { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; +} + +#integrations article { + vertical-align: top; + width: 15em; + padding: 0 2%; + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + text-align: center; + margin-bottom: 2em; +} + +#integrations article img { + width: 8em; + height: 8em; + border-radius: 8em; + border: 3px solid #3C4963; +} + +#integrations .question-mark { + display: inline-block; + font-size: 6.5em; + border: 1px solid white; + border-radius: 10em; + width: 1.2em; + height: 1.2em; + line-height: 1.2em +} + +#integrations { + padding-bottom: 0; + border-bottom: none; +} + +#contribution .block-wrap { + margin-top: 3em; + width: 100%; +} + + +#contribution article { + padding: 0 5% 2em; + margin-bottom: 0; + font-size: 90%; +} + +#contribution article h2 { + font-weight: 600; + color: #3C4963; +} + +#contribution article p { + display: inline; +} + +#contribution article img { + width: 8em; + border-radius: 0; +} diff --git a/source/components/pages/Integration.js b/source/components/pages/Integration.js new file mode 100644 index 000000000..3c3635f9d --- /dev/null +++ b/source/components/pages/Integration.js @@ -0,0 +1,100 @@ +import React, { Component } from 'react' +import './Integration.css' +import './Pages.css' +import Header from './Header' + +export default class MyComponent extends Component { + render() { + return ( +
+
+
+

Intégrez le module Web

+

Intégrez le module en ajoutant une ligne à votre page Web :

+ + {'<'} + + script
+ id + ="script-simulateur-embauche" + data-couleur + ="#4A89DC" src="https://embauche.beta.gouv.fr/modules/v2/dist/simulateur.js"> + {'<'} + / + script + > + +

+ Vous pouvez choisir la couleur principale du module pour le + fondre dans le thème visuel de votre page : changez simplement la + valeur de data-couleur ci-dessus. Pour la choisir, utilisez + notre{' '} + + outil interactif + . +

+
+ +
+ ) + } +} diff --git a/source/components/Menu.css b/source/components/pages/Menu.css similarity index 100% rename from source/components/Menu.css rename to source/components/pages/Menu.css diff --git a/source/components/pages/Pages.css b/source/components/pages/Pages.css new file mode 100644 index 000000000..ca1a13d2a --- /dev/null +++ b/source/components/pages/Pages.css @@ -0,0 +1,24 @@ + +.page { + max-width: 45em; + margin: 3em; +} + + +.page p { +} + +.page h1 { + margin: 4em 0 1em; + color: #3C4963; + font-size: 280%; +} + +.page em { + font-weight: 600; + font-style: normal; +} + +.page a { + color: #3C4963 +} diff --git a/source/components/RulesList.css b/source/components/pages/RulesList.css similarity index 100% rename from source/components/RulesList.css rename to source/components/pages/RulesList.css diff --git a/source/components/RulesList.js b/source/components/pages/RulesList.js similarity index 76% rename from source/components/RulesList.js rename to source/components/pages/RulesList.js index e25ca3157..8caf98b4a 100644 --- a/source/components/RulesList.js +++ b/source/components/pages/RulesList.js @@ -2,12 +2,15 @@ import React, { Component } from "react" import { rules, encodeRuleName, nameLeaf } from "Engine/rules.js" import { Link } from "react-router-dom" import './RulesList.css' -import {capitalise0} from '../utils' +import './Pages.css' +import {capitalise0} from '../../utils' +import Header from './Header' export default class RulesList extends Component { render() { return ( -
+
+

Notre base de règles

    {rules.map(rule => ( diff --git a/source/containers/Layout.css b/source/containers/Layout.css index 6d5830862..ab59e9b2f 100644 --- a/source/containers/Layout.css +++ b/source/containers/Layout.css @@ -11,6 +11,22 @@ body { #js, #js>div { height: 100% } + + +#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; } diff --git a/source/containers/Layout.js b/source/containers/Layout.js index d8a773fcd..3672bca15 100644 --- a/source/containers/Layout.js +++ b/source/containers/Layout.js @@ -1,45 +1,50 @@ -import React, { Component } from "react" -import "./Layout.css" -import "./reset.css" -import "./ribbon.css" +import React, { Component } from 'react' +import './Layout.css' +import './reset.css' +import './ribbon.css' -import { Link, Route, Router, Switch, Redirect } from "react-router-dom" +import { Link, Route, Router, Switch, Redirect } from 'react-router-dom' -import Home from "Components/Home" -import RulePage from "Components/RulePage" -import Route404 from "Components/Route404" -import Contact from "Components/Contact" -import Simulateur from "Components/Simulateur" -import RulesList from "Components/RulesList" - -import ReactPiwik from "Components/Tracker" -import createHistory from "history/createBrowserHistory" +import Home from 'Components/pages/Home' +import RulePage from 'Components/RulePage' +import Route404 from 'Components/Route404' +import Contact from 'Components/Contact' +import Simulateur from 'Components/Simulateur' +import RulesList from 'Components/pages/RulesList' +import Contribution from 'Components/pages/Contribution' +import Integration from 'Components/pages/Integration' +import About from 'Components/pages/About' +import ReactPiwik from 'Components/Tracker' +import createHistory from 'history/createBrowserHistory' const piwik = new ReactPiwik({ - url: "stats.data.gouv.fr", - siteId: 39, - trackErrors: true + url: 'stats.data.gouv.fr', + siteId: 39, + trackErrors: true }) export default class Layout extends Component { - history = createHistory() - render() { - // track the initial pageview - ReactPiwik.push(["trackPageView"]) + history = createHistory() + render() { + // track the initial pageview + ReactPiwik.push(['trackPageView']) - return ( - - - - - - - - - - - - - ) - } + return ( + + + + + + + + + + + + + + + + ) + } } diff --git a/source/images/homeEmbauche/aides-creations.png b/source/images/accueil/aides-creations.png similarity index 100% rename from source/images/homeEmbauche/aides-creations.png rename to source/images/accueil/aides-creations.png diff --git a/source/images/homeEmbauche/apec.png b/source/images/accueil/apec.png similarity index 100% rename from source/images/homeEmbauche/apec.png rename to source/images/accueil/apec.png diff --git a/source/images/homeEmbauche/api.svg b/source/images/accueil/api.svg similarity index 100% rename from source/images/homeEmbauche/api.svg rename to source/images/accueil/api.svg diff --git a/source/images/homeEmbauche/calculator.svg b/source/images/accueil/calculator.svg similarity index 100% rename from source/images/homeEmbauche/calculator.svg rename to source/images/accueil/calculator.svg diff --git a/source/images/homeEmbauche/carto.png b/source/images/accueil/carto.png similarity index 100% rename from source/images/homeEmbauche/carto.png rename to source/images/accueil/carto.png diff --git a/source/images/homeEmbauche/cci.png b/source/images/accueil/cci.png similarity index 100% rename from source/images/homeEmbauche/cci.png rename to source/images/accueil/cci.png diff --git a/source/images/homeEmbauche/checklist.svg b/source/images/accueil/checklist.svg similarity index 100% rename from source/images/homeEmbauche/checklist.svg rename to source/images/accueil/checklist.svg diff --git a/source/images/homeEmbauche/code.svg b/source/images/accueil/code.svg similarity index 100% rename from source/images/homeEmbauche/code.svg rename to source/images/accueil/code.svg diff --git a/source/images/homeEmbauche/logo-SGMAP-fond-blanc.svg b/source/images/accueil/logo-SGMAP-fond-blanc.svg similarity index 100% rename from source/images/homeEmbauche/logo-SGMAP-fond-blanc.svg rename to source/images/accueil/logo-SGMAP-fond-blanc.svg diff --git a/source/images/homeEmbauche/logo-SGMAP-fond-noir.svg b/source/images/accueil/logo-SGMAP-fond-noir.svg similarity index 100% rename from source/images/homeEmbauche/logo-SGMAP-fond-noir.svg rename to source/images/accueil/logo-SGMAP-fond-noir.svg diff --git a/source/images/homeEmbauche/logo-openfisca.svg b/source/images/accueil/logo-openfisca.svg similarity index 100% rename from source/images/homeEmbauche/logo-openfisca.svg rename to source/images/accueil/logo-openfisca.svg diff --git a/source/images/homeEmbauche/logo_startup_etat.svg b/source/images/accueil/logo_startup_etat.svg similarity index 100% rename from source/images/homeEmbauche/logo_startup_etat.svg rename to source/images/accueil/logo_startup_etat.svg diff --git a/source/images/homeEmbauche/min-tra.jpg b/source/images/accueil/min-tra.jpg similarity index 100% rename from source/images/homeEmbauche/min-tra.jpg rename to source/images/accueil/min-tra.jpg diff --git a/source/images/homeEmbauche/pole-emploi.jpg b/source/images/accueil/pole-emploi.jpg similarity index 100% rename from source/images/homeEmbauche/pole-emploi.jpg rename to source/images/accueil/pole-emploi.jpg diff --git a/source/images/homeEmbauche/pole-emploi.png b/source/images/accueil/pole-emploi.png similarity index 100% rename from source/images/homeEmbauche/pole-emploi.png rename to source/images/accueil/pole-emploi.png diff --git a/source/images/homeEmbauche/question_mark.svg b/source/images/accueil/question_mark.svg similarity index 100% rename from source/images/homeEmbauche/question_mark.svg rename to source/images/accueil/question_mark.svg diff --git a/source/images/homeEmbauche/roues.svg b/source/images/accueil/roues.svg similarity index 100% rename from source/images/homeEmbauche/roues.svg rename to source/images/accueil/roues.svg diff --git a/source/images/homeEmbauche/simulateur-2017-raw.gif b/source/images/accueil/simulateur-2017-raw.gif similarity index 100% rename from source/images/homeEmbauche/simulateur-2017-raw.gif rename to source/images/accueil/simulateur-2017-raw.gif diff --git a/source/images/homeEmbauche/simulateur-2017.gif b/source/images/accueil/simulateur-2017.gif similarity index 100% rename from source/images/homeEmbauche/simulateur-2017.gif rename to source/images/accueil/simulateur-2017.gif diff --git a/source/images/homeEmbauche/simulateur-2017.png b/source/images/accueil/simulateur-2017.png similarity index 100% rename from source/images/homeEmbauche/simulateur-2017.png rename to source/images/accueil/simulateur-2017.png diff --git a/source/images/homeEmbauche/simulateur-statique.gif b/source/images/accueil/simulateur-statique.gif similarity index 100% rename from source/images/homeEmbauche/simulateur-statique.gif rename to source/images/accueil/simulateur-statique.gif diff --git a/source/images/homeEmbauche/simulateur.gif b/source/images/accueil/simulateur.gif similarity index 100% rename from source/images/homeEmbauche/simulateur.gif rename to source/images/accueil/simulateur.gif diff --git a/source/images/homeEmbauche/simulateur.png b/source/images/accueil/simulateur.png similarity index 100% rename from source/images/homeEmbauche/simulateur.png rename to source/images/accueil/simulateur.png diff --git a/source/images/homeEmbauche/tests.svg b/source/images/accueil/tests.svg similarity index 100% rename from source/images/homeEmbauche/tests.svg rename to source/images/accueil/tests.svg diff --git a/source/images/homeEmbauche/widget.svg b/source/images/accueil/widget.svg similarity index 100% rename from source/images/homeEmbauche/widget.svg rename to source/images/accueil/widget.svg diff --git a/source/webpack.config.js b/source/webpack.config.js index 8406c2d3f..e88cccd3a 100644 --- a/source/webpack.config.js +++ b/source/webpack.config.js @@ -25,7 +25,8 @@ module.exports = { alias: { Engine: path.resolve('source/engine/'), Règles: path.resolve('règles/'), - Components: path.resolve('source/components/') + Components: path.resolve('source/components/'), + Images: path.resolve('source/images/') } }, module: {