La couleur est définie dynamiquement
Pour que les intégrateurs puissent la choisir.pull/132/head
mama
parent
5ef2b8f6c3
commit
deb54c86c1
|
|
@ -24,7 +24,7 @@
|
|||
<p>Ce simulateur calcule vos cotisations sociales pour vous permettre de jongler entre les différents types de salaire en France.</p>
|
||||
</section>
|
||||
<section id="module">
|
||||
<script id="script-simulateur-embauche" src="dist/simulateur.js" data-couleur="#333"></script><!-- Exemples de couleur : #1F4382 - #3570B8 - #4A89DC - #4A9DED-->
|
||||
<script id="script-simulateur-embauche" src="dist/simulateur.js" data-couleur="#333"></script><!-- Exemples de couleur : #1F4382 - #3570B8 - #2975D1 - #4A9DED-->
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
18
maison2.svg
18
maison2.svg
|
|
@ -210,7 +210,7 @@
|
|||
id="textPath36434"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:68.75px;font-family:'Liberation Serif';-inkscape-font-specification:'Liberation Serif';fill:#e2e1e1;fill-opacity:1"> </></textPath></text>
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 515.43034,677.59561 70.66391,0.1802 0.50508,-100.80386 -70.66391,-0.39159 z"
|
||||
id="path4200-3-6"
|
||||
inkscape:connector-curvature="0"
|
||||
|
|
@ -533,13 +533,13 @@
|
|||
y="694.61884"
|
||||
style="font-size:12.5px;line-height:1.25;fill:#ffffff;fill-opacity:1;stroke:#fff1f1;stroke-width:0.60000002;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">></tspan></text>
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 514.12097,766.87796 -74.75128,-0.18746 v 101.69365 l 74.24621,0.0141"
|
||||
id="path4251-6"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 513.86844,867.89321 70.66393,0.1802 0.50508,-100.80386 -70.66393,-0.39159 z"
|
||||
id="path4200-3-6-3"
|
||||
inkscape:connector-curvature="0"
|
||||
|
|
@ -766,13 +766,13 @@
|
|||
y="884.68475"
|
||||
style="font-size:12.50000095px;line-height:1.25;fill:#ffffff;fill-opacity:1;stroke:#fff1f1;stroke-width:0.60000002;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">></tspan></text>
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="M 302.81757,767.39586 228.06629,752.2084 v 101.69365 l 74.24621,15.0141"
|
||||
id="path4251-6-1"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 302.56504,868.41111 70.66394,-14.8198 0.50507,-100.80386 -70.66393,14.60841 z"
|
||||
id="path4200-3-6-3-9"
|
||||
inkscape:connector-curvature="0"
|
||||
|
|
@ -878,13 +878,13 @@
|
|||
id="rect20-0-7" />
|
||||
</g>
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 519.10403,386.49434 -74.75128,-0.65729 v 101.69366 l 74.24621,0.58209"
|
||||
id="path4251-6-1-7"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 518.8515,487.55868 70.66395,-28.55549 0.50506,-100.90203 -70.66393,28.34408 z"
|
||||
id="path4200-3-6-3-9-8"
|
||||
inkscape:connector-curvature="0"
|
||||
|
|
@ -1119,13 +1119,13 @@
|
|||
sodipodi:role="line">></tspan></text>
|
||||
</g>
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 693.0194,175.15981 -74.75128,-0.65729 v 101.69367 l 74.24621,0.58208"
|
||||
id="path4251-6-1-7-9"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 692.76687,276.22415 70.66396,-28.55549 0.50505,-100.90203 -70.66393,28.34408 z"
|
||||
id="path4200-3-6-3-9-8-4"
|
||||
inkscape:connector-curvature="0"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 824 KiB After Width: | Height: | Size: 824 KiB |
24
package.json
24
package.json
|
|
@ -94,21 +94,13 @@
|
|||
},
|
||||
"scripts": {
|
||||
"start": "node source/server.js",
|
||||
"compile":
|
||||
"NODE_ENV='production' webpack --config source/webpack.config.js",
|
||||
"surge":
|
||||
"npm run compile && surge --domain scientific-wish.surge.sh -p ./ && rm -rf dist/",
|
||||
"test":
|
||||
"mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js \"test/**/*.test.js\"",
|
||||
"test-watch":
|
||||
"mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js \"test/**/*.test.js\" --watch",
|
||||
"test-meca":
|
||||
"mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js test/mecanisms.test.js --watch",
|
||||
"test-rules":
|
||||
"mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js test/real-rules.test.js --watch",
|
||||
"heroku-postbuild":
|
||||
"npm install --dev && webpack --config source/webpack.config.js --progress",
|
||||
"test-inversions":
|
||||
"mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js \"test/inversion.test.js\" --watch"
|
||||
"compile": "NODE_ENV='production' webpack --config source/webpack.config.js",
|
||||
"surge": "npm run compile && surge --domain scientific-wish.surge.sh -p ./ && rm -rf dist/",
|
||||
"test": "mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js \"test/**/*.test.js\"",
|
||||
"test-watch": "mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js \"test/**/*.test.js\" --watch",
|
||||
"test-meca": "mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js test/mecanisms.test.js --watch",
|
||||
"test-rules": "mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js test/real-rules.test.js --watch",
|
||||
"heroku-postbuild": "npm install --dev && webpack --config source/webpack.config.js --progress",
|
||||
"test-inversions": "mocha-webpack --webpack-config source/webpack.test.config.js --require source-map-support/register --require test/helpers/browser.js \"test/inversion.test.js\" --watch"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
}
|
||||
|
||||
#sim #help i.fa-times-circle {
|
||||
color: #4a89dc;
|
||||
font-size: 120%;
|
||||
position: absolute;
|
||||
top: 0.6em;
|
||||
|
|
|
|||
|
|
@ -7,10 +7,12 @@ import { EXPLAIN_VARIABLE } from '../actions'
|
|||
|
||||
import References from './rule/References'
|
||||
import './Aide.css'
|
||||
import { capitalise0 } from '../utils'
|
||||
|
||||
@connect(
|
||||
state => ({ explained: state.explainedVariable }),
|
||||
state => ({
|
||||
explained: state.explainedVariable,
|
||||
themeColours: state.themeColours
|
||||
}),
|
||||
dispatch => ({
|
||||
stopExplaining: () => dispatch({ type: EXPLAIN_VARIABLE })
|
||||
})
|
||||
|
|
@ -20,7 +22,7 @@ export default class Aide extends Component {
|
|||
return marked(`### ${term} \n\n${explanation}`)
|
||||
}
|
||||
render() {
|
||||
let { explained, stopExplaining } = this.props
|
||||
let { explained, stopExplaining, themeColours } = this.props
|
||||
|
||||
if (!explained) return <section id="helpWrapper" />
|
||||
|
||||
|
|
@ -33,7 +35,11 @@ export default class Aide extends Component {
|
|||
return (
|
||||
<div id="helpWrapper" className="active">
|
||||
<section id="help">
|
||||
<i className="fa fa-times-circle" onClick={stopExplaining} />
|
||||
<i
|
||||
className="fa fa-times-circle"
|
||||
onClick={stopExplaining}
|
||||
style={{ color: themeColours.colour }}
|
||||
/>
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: this.renderExplanationMarkdown(text, rule.title)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
.blueButton {
|
||||
color: white;
|
||||
display: block;
|
||||
padding: 0.3em 1em;
|
||||
font-size: 200%;
|
||||
width: 8em;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0.95;
|
||||
border-radius: 0.2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.blueButton:hover {
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react'
|
||||
import './BlueButton.css'
|
||||
import { connect } from 'react-redux'
|
||||
|
||||
export default connect(state => ({
|
||||
themeColours: state.themeColours
|
||||
}))(({ themeColours, children }) => (
|
||||
<button className="blueButton" style={{ background: themeColours.colour }}>
|
||||
{children}
|
||||
</button>
|
||||
))
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
#sim .tip {
|
||||
font-style: italic;
|
||||
margin-bottom: 1em;
|
||||
|
|
@ -10,7 +9,8 @@
|
|||
#sim .tip progress {
|
||||
margin-left: 1em;
|
||||
background: white;
|
||||
border: 1px solid #2975D1;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
|
|
@ -18,5 +18,4 @@ progress::-webkit-progress-bar {
|
|||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: #2975D1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ import './ProgressTip.css'
|
|||
@connect(state => ({
|
||||
done: state.done,
|
||||
foldedSteps: state.foldedSteps,
|
||||
nextSteps: state.nextSteps
|
||||
nextSteps: state.nextSteps,
|
||||
textColourOnWhite: state.themeColours.textColourOnWhite
|
||||
}))
|
||||
export default class ProgressTip extends Component {
|
||||
state = {
|
||||
|
|
@ -20,7 +21,7 @@ export default class ProgressTip extends Component {
|
|||
})
|
||||
}
|
||||
render() {
|
||||
let { done, nextSteps, foldedSteps } = this.props,
|
||||
let { done, nextSteps, foldedSteps, textColourOnWhite } = this.props,
|
||||
nbQuestions = nextSteps.length
|
||||
if (!done) return null
|
||||
return (
|
||||
|
|
@ -34,9 +35,10 @@ export default class ProgressTip extends Component {
|
|||
{nbQuestions === 1
|
||||
? 'Une dernière question !'
|
||||
: `Il reste moins de ${nbQuestions} questions`}
|
||||
<progress
|
||||
value={foldedSteps.length}
|
||||
max={foldedSteps.length + nbQuestions}
|
||||
<ProgressBar
|
||||
foldedSteps={foldedSteps}
|
||||
nbQuestions={nbQuestions}
|
||||
colour={textColourOnWhite}
|
||||
/>
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -44,3 +46,13 @@ export default class ProgressTip extends Component {
|
|||
)
|
||||
}
|
||||
}
|
||||
|
||||
let ProgressBar = ({ foldedSteps, nbQuestions, colour }) => (
|
||||
<progress
|
||||
value={foldedSteps.length}
|
||||
max={foldedSteps.length + nbQuestions}
|
||||
style={{
|
||||
borderColor: colour
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
#resultsZone {
|
||||
min-height: 49%;
|
||||
display: flex;
|
||||
|
|
@ -18,16 +17,15 @@
|
|||
|
||||
#results {
|
||||
width: 100%;
|
||||
padding: .4em 1.4em;
|
||||
padding: 0.4em 1.4em;
|
||||
}
|
||||
#resultsContent {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: .3em 0 1em;
|
||||
padding: 0.3em 0 1em;
|
||||
min-height: 4em;
|
||||
width: 100%;
|
||||
max-width: 45em;
|
||||
background: #2975D1;
|
||||
color: white;
|
||||
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
|
|
@ -54,10 +52,8 @@
|
|||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#results li {
|
||||
margin: 0 1.2em;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -15,37 +15,32 @@ import ProgressTip from 'Components/ProgressTip'
|
|||
conversationStarted: !isEmpty(state.form),
|
||||
conversationFirstAnswer: path(['form', 'conversation', 'values'])(state),
|
||||
situationGate: state.situationGate,
|
||||
done: state.done
|
||||
done: state.done,
|
||||
themeColours: state.themeColours
|
||||
}))
|
||||
export default class Results extends Component {
|
||||
render() {
|
||||
let {
|
||||
analysis,
|
||||
targetName,
|
||||
conversationStarted,
|
||||
conversationFirstAnswer,
|
||||
location,
|
||||
done
|
||||
} = this.props
|
||||
let { analysis, conversationStarted, done, themeColours } = this.props
|
||||
|
||||
if (!analysis) return null
|
||||
|
||||
let { targets } = analysis
|
||||
|
||||
let onRulePage = contains('/regle/')(location.pathname)
|
||||
let textStyle = { color: themeColours.textColour }
|
||||
|
||||
return (
|
||||
<div id="resultsZone">
|
||||
<section id="results">
|
||||
<ProgressTip />
|
||||
<div id="resultsContent">
|
||||
<Link className="edit" to="/">
|
||||
<i className="fa fa-pencil-square-o" aria-hidden="true" />
|
||||
<div id="resultsContent" style={{ background: themeColours.colour }}>
|
||||
<Link className="edit" to="/" style={textStyle}>
|
||||
<i className="fa fa-pencil" aria-hidden="true" />
|
||||
{' '}
|
||||
<span>Changer d'objectif</span>
|
||||
</Link>
|
||||
<ul>
|
||||
{targets.map(rule => (
|
||||
<li key={rule.nom}>
|
||||
<li key={rule.nom} style={textStyle}>
|
||||
<RuleValueVignette
|
||||
{...rule}
|
||||
conversationStarted={conversationStarted}
|
||||
|
|
@ -56,7 +51,10 @@ export default class Results extends Component {
|
|||
</div>
|
||||
<h3
|
||||
className="scrollIndication down"
|
||||
style={{ opacity: done ? 1 : 0 }}
|
||||
style={{
|
||||
opacity: done ? 1 : 0,
|
||||
color: themeColours.textColourOnWhite
|
||||
}}
|
||||
>
|
||||
<i className="fa fa-long-arrow-down" aria-hidden="true" />{' '}
|
||||
Comprendre mes résultats
|
||||
|
|
|
|||
|
|
@ -3,45 +3,41 @@
|
|||
margin-top: 8em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.satisfaction-smiley {
|
||||
color: #4A89DC;
|
||||
font-size: 90%;
|
||||
font-weight: bold;
|
||||
border-radius: 6em;
|
||||
width: 2em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border: 2px solid #4A89DC;
|
||||
margin: 0 .6em;
|
||||
padding: .3em 0;
|
||||
transform: rotate(90deg)
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
margin: 0 0.6em;
|
||||
padding: 0.3em 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
#satisfaction textarea {
|
||||
border: 1px solid rgb(74, 137, 220, .5);
|
||||
border-radius: .3em;
|
||||
border: 1px solid rgb(74, 137, 220, 0.5);
|
||||
border-radius: 0.3em;
|
||||
width: 65%;
|
||||
height: 5em;
|
||||
padding: .6em;
|
||||
padding: 0.6em;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
#satisfaction input {
|
||||
border: 1px solid rgb(74, 137, 220, .5);
|
||||
border-radius: .3em;
|
||||
border: 1px solid rgb(74, 137, 220, 0.5);
|
||||
border-radius: 0.3em;
|
||||
width: 65%;
|
||||
padding: .6em;
|
||||
margin-bottom: .3em;
|
||||
padding: 0.6em;
|
||||
margin-bottom: 0.3em;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
#sendMessage {
|
||||
font-size: 100%;
|
||||
border: none;
|
||||
color: rgb(74, 137, 220);
|
||||
|
||||
transition: color 1s;
|
||||
}
|
||||
|
|
@ -50,11 +46,10 @@
|
|||
cursor: default;
|
||||
}
|
||||
#sendMessage i {
|
||||
margin-right: .6em;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
#messageSent {
|
||||
color: rgb(74, 137, 220);
|
||||
font-size: 160%
|
||||
font-size: 160%;
|
||||
}
|
||||
|
||||
#satisfaction p {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import HoverDecorator from './HoverDecorator'
|
|||
import 'whatwg-fetch'
|
||||
import { connect } from 'react-redux'
|
||||
import './Satisfaction.css'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import ReactPiwik from './Tracker'
|
||||
|
||||
@connect(state => ({
|
||||
sessionId: state.sessionId
|
||||
sessionId: state.sessionId,
|
||||
textColourOnWhite: state.themeColours.textColourOnWhite
|
||||
}))
|
||||
export default class Satisfaction extends Component {
|
||||
state = {
|
||||
|
|
@ -64,8 +64,18 @@ export default class Satisfaction extends Component {
|
|||
<div id="satisfaction">
|
||||
<p>Vous êtes satisfait du simulateur ?</p>
|
||||
<p>
|
||||
<Smiley text=":)" hoverColor="#16a085" clicked={onSmileyClick} />
|
||||
<Smiley text=":|" hoverColor="#f39c12" clicked={onSmileyClick} />
|
||||
<Smiley
|
||||
text=":)"
|
||||
hoverColor="#16a085"
|
||||
themeColour={this.props.textColourOnWhite}
|
||||
clicked={onSmileyClick}
|
||||
/>
|
||||
<Smiley
|
||||
text=":|"
|
||||
hoverColor="#f39c12"
|
||||
themeColour={this.props.textColourOnWhite}
|
||||
clicked={onSmileyClick}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -96,11 +106,17 @@ export default class Satisfaction extends Component {
|
|||
{!messageSent && feedback}
|
||||
<button
|
||||
id="sendMessage"
|
||||
style={{ color: this.props.textColourOnWhite }}
|
||||
disabled={!validMessage || messageSent}
|
||||
onClick={() => this.sendSatisfaction()}
|
||||
>
|
||||
{messageSent ? (
|
||||
<i id="messageSent" className="fa fa-check" aria-hidden="true" />
|
||||
<i
|
||||
id="messageSent"
|
||||
className="fa fa-check"
|
||||
aria-hidden="true"
|
||||
style={{ color: this.props.textColourOnWhite }}
|
||||
/>
|
||||
) : (
|
||||
<span>
|
||||
<i className="fa fa-paper-plane" aria-hidden="true" />
|
||||
|
|
@ -143,7 +159,10 @@ export class Smiley extends Component {
|
|||
color: 'white',
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
: {}
|
||||
: {
|
||||
color: this.props.themeColour,
|
||||
borderColor: this.props.themeColour
|
||||
}
|
||||
}
|
||||
>
|
||||
{this.props.text}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,12 @@
|
|||
margin: 0 auto;
|
||||
|
||||
color: #333350;
|
||||
transition: background-color .5s;
|
||||
transition: background-color 0.5s;
|
||||
height: 100%;
|
||||
max-width: 45em;
|
||||
font-size: 130%;
|
||||
|
||||
height: 92%;
|
||||
|
||||
}
|
||||
|
||||
#sim p {
|
||||
|
|
@ -22,9 +21,8 @@
|
|||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
#simSubtitle {
|
||||
margin-top: -.5em;
|
||||
margin-top: -0.5em;
|
||||
font-size: 120%;
|
||||
font-weight: 300;
|
||||
margin-bottom: 2.5em;
|
||||
|
|
@ -39,15 +37,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#sim .intro i {
|
||||
opacity: .9;
|
||||
font-size: 250%;
|
||||
margin-right: .6em;
|
||||
}
|
||||
#sim .intro span {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#sim .action {
|
||||
margin-top: 5%;
|
||||
|
|
@ -57,36 +46,17 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#sim .intro button {
|
||||
color: white;
|
||||
display: block;
|
||||
text-align: center;
|
||||
background: #4A89DC;
|
||||
padding: .3em 1em;
|
||||
font-size: 140%;
|
||||
margin: 2em auto;
|
||||
width: 8em;
|
||||
border: none;
|
||||
box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0.95
|
||||
}
|
||||
#sim .intro button:hover {
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scrollIndication {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 1.4em auto;
|
||||
transition: 1s opacity;
|
||||
color: #4A89DC;
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
.scrollIndication i {
|
||||
margin: 0 .3em;
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
.scrollIndication:hover i {
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -35,12 +35,8 @@
|
|||
font-size: 120%;
|
||||
}
|
||||
#targetSelection label p {
|
||||
color: #555;
|
||||
margin: 0;
|
||||
}
|
||||
#targetSelection input:checked + label .optionTitle {
|
||||
font-weight: 600;
|
||||
color: #2975d1;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#targetSelection input {
|
||||
|
|
@ -58,24 +54,6 @@
|
|||
max-width: 0.75em;
|
||||
}
|
||||
|
||||
#targetSelection input + label > i.fa.fa-square-o {
|
||||
color: #555;
|
||||
display: inline;
|
||||
}
|
||||
#targetSelection input + label > i.fa.fa-check-square-o {
|
||||
display: none;
|
||||
}
|
||||
#targetSelection input:checked + label > i.fa.fa-square-o {
|
||||
display: none;
|
||||
}
|
||||
#targetSelection input:checked + label > i.fa.fa-check-square-o {
|
||||
color: #2975d1;
|
||||
display: inline;
|
||||
}
|
||||
#targetSelection label:hover > i.fa {
|
||||
color: #2975d1;
|
||||
}
|
||||
|
||||
#targetSelection #action {
|
||||
text-align: center;
|
||||
margin: 1em auto;
|
||||
|
|
@ -83,7 +61,6 @@
|
|||
|
||||
#targetSelection #action p {
|
||||
font-size: 80%;
|
||||
color: #4a89dc;
|
||||
}
|
||||
|
||||
/* TODO styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { rules, findRuleByName } from 'Engine/rules'
|
|||
import { reject, curry, pipe, equals, filter, contains, length } from 'ramda'
|
||||
import { Link } from 'react-router-dom'
|
||||
import './TargetSelection.css'
|
||||
|
||||
import BlueButton from './BlueButton'
|
||||
export let salaries = ['salaire net', 'salaire de base', 'salaire total']
|
||||
|
||||
export default class TargetSelection extends Component {
|
||||
|
|
@ -21,9 +21,11 @@ export default class TargetSelection extends Component {
|
|||
id="action"
|
||||
style={{ visibility: !targets.length ? 'hidden' : 'visible' }}
|
||||
>
|
||||
<p>Vous pouvez faire plusieurs choix</p>
|
||||
<p style={{ color: this.props.themeColours.textColourOnWhite }}>
|
||||
Vous pouvez faire plusieurs choix
|
||||
</p>
|
||||
<Link to={'/simu/' + targets.join('+')}>
|
||||
<button className="blueButton">Valider</button>
|
||||
<BlueButton>Valider</BlueButton>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -35,6 +37,7 @@ export default class TargetSelection extends Component {
|
|||
curry(findRuleByName)(rules)
|
||||
),
|
||||
{ targets } = this.state,
|
||||
textColourOnWhite = this.props.themeColours.textColourOnWhite,
|
||||
// You can't select 3 salaries, as one must be an input in the next step
|
||||
optionDisabled = name =>
|
||||
contains('salaire', name) &&
|
||||
|
|
@ -43,7 +46,8 @@ export default class TargetSelection extends Component {
|
|||
filter(contains('salaire')),
|
||||
length,
|
||||
equals(2)
|
||||
)(targets)
|
||||
)(targets),
|
||||
optionIsChecked = s => targets.includes(s.name)
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -54,7 +58,7 @@ export default class TargetSelection extends Component {
|
|||
id={s.name}
|
||||
type="checkbox"
|
||||
disabled={optionDisabled(s.name)}
|
||||
checked={targets.includes(s.name)}
|
||||
checked={optionIsChecked(s)}
|
||||
onChange={() =>
|
||||
this.setState({
|
||||
targets: targets.find(t => t === s.name)
|
||||
|
|
@ -63,12 +67,40 @@ export default class TargetSelection extends Component {
|
|||
})
|
||||
}
|
||||
/>
|
||||
<label htmlFor={s.name} key={s.name}>
|
||||
<i className="fa fa-square-o fa-2x" />
|
||||
<i className="fa fa-check-square-o fa-2x" />
|
||||
<label
|
||||
htmlFor={s.name}
|
||||
key={s.name}
|
||||
style={
|
||||
optionIsChecked(s)
|
||||
? {
|
||||
fontWeight: 600,
|
||||
color: textColourOnWhite
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
{optionIsChecked(s) ? (
|
||||
<i
|
||||
className="fa fa-check-square-o fa-2x"
|
||||
style={{ color: textColourOnWhite }}
|
||||
/>
|
||||
) : (
|
||||
<i
|
||||
className="fa fa-square-o fa-2x"
|
||||
style={{ color: '#555' }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<span className="optionTitle">{s.title || s.name}</span>
|
||||
<p>{s['résumé']}</p>
|
||||
<p
|
||||
style={
|
||||
optionIsChecked(s)
|
||||
? { color: textColourOnWhite }
|
||||
: { color: '#555' }
|
||||
}
|
||||
>
|
||||
{s['résumé']}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,10 @@ export default class Conversation extends Component {
|
|||
<Element name="myScrollToElement" id="myScrollToElement">
|
||||
<h3
|
||||
className="scrollIndication up"
|
||||
style={{ opacity: foldedSteps.length != 0 ? 1 : 0 }}
|
||||
style={{
|
||||
opacity: foldedSteps.length != 0 ? 1 : 0,
|
||||
color: textColourOnWhite
|
||||
}}
|
||||
>
|
||||
<i className="fa fa-long-arrow-up" aria-hidden="true" /> Modifier
|
||||
mes réponses
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
cursor: pointer;
|
||||
vertical-align: baseline;
|
||||
font-size: 95%;
|
||||
color: #2975D1;
|
||||
}
|
||||
|
||||
.explicable .icon:hover {
|
||||
|
|
@ -31,8 +30,3 @@
|
|||
opacity: .3
|
||||
}
|
||||
*/
|
||||
.explicable.explained .icon {
|
||||
opacity: 1;
|
||||
background: #4a89dc;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react'
|
||||
import classNames from 'classnames'
|
||||
import './Explicable.css'
|
||||
import HoverDecorator from '../HoverDecorator'
|
||||
import { connect } from 'react-redux'
|
||||
import { EXPLAIN_VARIABLE } from '../../actions'
|
||||
import { rules, findRuleByDottedName } from 'Engine/rules'
|
||||
|
|
@ -9,14 +8,17 @@ import { rules, findRuleByDottedName } from 'Engine/rules'
|
|||
import ReactPiwik from '../Tracker'
|
||||
|
||||
@connect(
|
||||
state => ({ explained: state.explainedVariable }),
|
||||
state => ({
|
||||
explained: state.explainedVariable,
|
||||
textColourOnWhite: state.themeColours.textColourOnWhite
|
||||
}),
|
||||
dispatch => ({
|
||||
explain: variableName => dispatch({ type: EXPLAIN_VARIABLE, variableName })
|
||||
})
|
||||
)
|
||||
export default class Explicable extends React.Component {
|
||||
render() {
|
||||
let { dottedName, explain, explained } = this.props
|
||||
let { dottedName, explain, explained, textColourOnWhite } = this.props
|
||||
|
||||
// Rien à expliquer ici, ce n'est pas une règle
|
||||
if (dottedName == null) return this.props.children
|
||||
|
|
@ -40,6 +42,15 @@ export default class Explicable extends React.Component {
|
|||
ReactPiwik.push(['trackEvent', 'help', dottedName])
|
||||
explain(dottedName)
|
||||
}}
|
||||
style={
|
||||
dottedName === explained
|
||||
? {
|
||||
opacity: 1,
|
||||
background: textColourOnWhite,
|
||||
color: 'white'
|
||||
}
|
||||
: { color: textColourOnWhite }
|
||||
}
|
||||
>
|
||||
<i className="fa fa-book" aria-hidden="true" />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ export var FormDecorator = formType => RenderField =>
|
|||
onClick={() => stepAction('unfold', dottedName)}
|
||||
style={{ color: themeColours.textColourOnWhite }}
|
||||
>
|
||||
<i className="fa fa-pencil-square-o" aria-hidden="true" />
|
||||
<i className="fa fa-pencil" aria-hidden="true" />
|
||||
{' '}
|
||||
<span>Modifier</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default class Input extends Component {
|
|||
style={
|
||||
!active
|
||||
? { border: '2px dashed #ddd' }
|
||||
: { border: '1px solid #2975D1' }
|
||||
: { border: `1px solid ${themeColours.textColourOnWhite}` }
|
||||
}
|
||||
onKeyDown={({ key }) =>
|
||||
key == 'Enter' && (submitDisabled ? input.onBlur() : submit())
|
||||
|
|
@ -119,7 +119,7 @@ export default class Input extends Component {
|
|||
}
|
||||
onMouseOver={() => this.setState({ hoverSuggestion: value })}
|
||||
onMouseOut={() => this.setState({ hoverSuggestion: null })}
|
||||
style={{ color: themeColours.colour }}
|
||||
style={{ color: themeColours.textColourOnWhite }}
|
||||
>
|
||||
<a href="#" title="cliquer pour valider">
|
||||
{text}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
#myScrollToElement {
|
||||
min-height: 55%;
|
||||
padding: 1em;
|
||||
|
|
@ -10,7 +8,6 @@
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
|
||||
#foldedSteps {
|
||||
padding: 1em;
|
||||
margin-bottom: 6em;
|
||||
|
|
@ -18,22 +15,15 @@
|
|||
|
||||
#foldedSteps .header button {
|
||||
font-size: 80%;
|
||||
color: #2975D1;
|
||||
border: none;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#foldedSteps .header button i {
|
||||
margin-right: .3em;
|
||||
vertical-align: top
|
||||
margin-right: 0.3em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -53,7 +43,7 @@
|
|||
|
||||
.form-group.explicit > .group-content {
|
||||
margin-left: 1em;
|
||||
padding: .8em 0 0 1.3em;
|
||||
padding: 0.8em 0 0 1.3em;
|
||||
}
|
||||
|
||||
.form-group.folded .group-content {
|
||||
|
|
@ -61,7 +51,7 @@
|
|||
}
|
||||
|
||||
.form-group .header {
|
||||
margin: 4em 0 .6em 0;
|
||||
margin: 4em 0 0.6em 0;
|
||||
}
|
||||
|
||||
.group-items {
|
||||
|
|
@ -78,7 +68,7 @@
|
|||
|
||||
.group-animated-enter.group-animated-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms ease-in;
|
||||
transition: opacity 300ms ease-in;
|
||||
}
|
||||
|
||||
.group-animated-leave {
|
||||
|
|
@ -90,7 +80,7 @@
|
|||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: opacity 200ms ease, transform 200ms ease-out;
|
||||
transition: opacity 200ms ease, transform 200ms ease-out;
|
||||
}
|
||||
|
||||
/* END Group items animation */
|
||||
|
|
@ -107,12 +97,12 @@
|
|||
.group-title h1 {
|
||||
font-size: 100%;
|
||||
font-weight: 400;
|
||||
padding: .5em .8em;
|
||||
padding: 0.5em 0.8em;
|
||||
margin: 0;
|
||||
border-radius: 1em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.step-question {
|
||||
|
|
@ -132,7 +122,7 @@
|
|||
display: inline-block;
|
||||
font-size: 110%;
|
||||
font-weight: 600;
|
||||
padding: .6em 1em;
|
||||
padding: 0.6em 1em;
|
||||
margin: 0;
|
||||
border-radius: 1.4em;
|
||||
position: relative;
|
||||
|
|
@ -146,7 +136,7 @@
|
|||
}
|
||||
|
||||
.step-subquestion {
|
||||
margin: .3em;
|
||||
margin: 0.3em;
|
||||
font-style: italic;
|
||||
font-size: 80%;
|
||||
margin-left: 1em;
|
||||
|
|
@ -161,7 +151,7 @@
|
|||
.help-button {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-top: .5em;
|
||||
margin-top: 0.5em;
|
||||
line-height: 1.1em;
|
||||
border-radius: 1em;
|
||||
font-size: 90%;
|
||||
|
|
@ -172,8 +162,8 @@
|
|||
cursor: pointer;
|
||||
color: #aaa;
|
||||
text-transform: uppercase;
|
||||
font-size: 60%;
|
||||
padding: .25em .6em;
|
||||
font-size: 60%;
|
||||
padding: 0.25em 0.6em;
|
||||
}
|
||||
.help-button:hover {
|
||||
color: #333;
|
||||
|
|
@ -181,7 +171,7 @@
|
|||
}
|
||||
|
||||
.step fieldset {
|
||||
margin: .8em 0;
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
.step fieldset ul {
|
||||
|
|
@ -195,13 +185,13 @@
|
|||
|
||||
.step.question .variant > ul {
|
||||
border-left: 1px dashed #ccc;
|
||||
margin-top: .6em;
|
||||
padding-left: .6em;
|
||||
padding-top: .6em;
|
||||
margin-top: 0.6em;
|
||||
padding-left: 0.6em;
|
||||
padding-top: 0.6em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
.step.question .variant > div {
|
||||
padding-left: .6em;
|
||||
padding-left: 0.6em;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -209,14 +199,14 @@
|
|||
.step.question fieldset > div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.step.question fieldset span {
|
||||
white-space: nowrap
|
||||
white-space: nowrap;
|
||||
}
|
||||
.step.question .variantLeaf {
|
||||
margin-bottom: .6em;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
.step.question .variant .variantLeaf {
|
||||
display: inline-block;
|
||||
|
|
@ -225,72 +215,70 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
.step label.radio,
|
||||
/* A resume of what's been answered */
|
||||
.resume {
|
||||
/* A resume of what's been answered */ .resume {
|
||||
text-align: center;
|
||||
margin-left: 1em;
|
||||
margin-top: 2em;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
padding: 0 .8em;
|
||||
padding: 0 0.8em;
|
||||
line-height: 1.8em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.step label.radio {
|
||||
text-align: center;
|
||||
margin-left: 1em;
|
||||
margin-top: 1em;
|
||||
cursor: pointer;
|
||||
padding: .25em .85em;
|
||||
line-height: 1.8em;
|
||||
border-radius: 1em;
|
||||
margin-left: 1em;
|
||||
margin-top: 1em;
|
||||
cursor: pointer;
|
||||
padding: 0.25em 0.85em;
|
||||
line-height: 1.8em;
|
||||
border-radius: 1em;
|
||||
font-weight: 600;
|
||||
font-size: 105%;
|
||||
}
|
||||
|
||||
|
||||
.resume {
|
||||
transition: 1s display;
|
||||
}
|
||||
|
||||
.answer-ignored {
|
||||
font-size: 80%;
|
||||
opacity: .8;
|
||||
margin-left: .4em;
|
||||
opacity: 0.8;
|
||||
margin-left: 0.4em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.step input[type=radio] {
|
||||
display : none;
|
||||
.step input[type='radio'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step input[type=text] {
|
||||
.step input[type='text'] {
|
||||
border-bottom: 1px solid;
|
||||
display: inline-block;
|
||||
line-height: 1.6em;
|
||||
height: 1.6em; /* IE 11 needs this */
|
||||
font-size: 100%;
|
||||
padding: 0;
|
||||
padding-right: .4em;
|
||||
padding-right: 0.4em;
|
||||
width: 8em;
|
||||
text-align: right;
|
||||
padding-left: .2em;
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
|
||||
/* Remove IE's clear button the appears before our suffix */
|
||||
.step input::-ms-clear {
|
||||
width : 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.step input::placeholder {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.step input.suffixed {
|
||||
padding: 0.1em 1em 0;
|
||||
border-radius: .2em;
|
||||
border-radius: 0.2em;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
|
|
@ -301,13 +289,13 @@
|
|||
.step label.suffix {
|
||||
font-size: 110%;
|
||||
vertical-align: baseline;
|
||||
transition: color .1s;
|
||||
margin: 0 1.5em .1em 0.6em;
|
||||
transition: color 0.1s;
|
||||
margin: 0 1.5em 0.1em 0.6em;
|
||||
}
|
||||
|
||||
.step input[type=text]:focus,
|
||||
.step input[type=number]:focus {
|
||||
border-color: #D0D4D8;
|
||||
.step input[type='text']:focus,
|
||||
.step input[type='number']:focus {
|
||||
border-color: #d0d4d8;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -320,7 +308,7 @@
|
|||
}
|
||||
|
||||
.inputPrefix select {
|
||||
font-size: 120%
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.step .inputSuggestions {
|
||||
|
|
@ -331,7 +319,7 @@
|
|||
color: #222;
|
||||
}
|
||||
.step .inputSuggestions ul {
|
||||
padding-left: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
|
|
@ -339,7 +327,7 @@
|
|||
.step .inputSuggestions li {
|
||||
}
|
||||
.step .inputSuggestions a {
|
||||
padding: .1em .9em;
|
||||
padding: 0.1em 0.9em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.step .inputSuggestions a:hover {
|
||||
|
|
@ -382,20 +370,20 @@
|
|||
}
|
||||
|
||||
.step .send {
|
||||
padding: 0 .1em 0 .5em;
|
||||
padding: 0 0.1em 0 0.5em;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border: 1px solid;
|
||||
border-radius: .2em;
|
||||
border-radius: 0.2em;
|
||||
line-height: 0em;
|
||||
}
|
||||
|
||||
.step .send:disabled {
|
||||
opacity: 0.2
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.step .send .icon {
|
||||
margin-left: .3em;
|
||||
margin-left: 0.3em;
|
||||
font-size: 135%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -410,12 +398,11 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
|
||||
.step-input-error {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -1.5em;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
color: #c0392b;
|
||||
font-weight: 600;
|
||||
|
|
@ -428,23 +415,22 @@
|
|||
|
||||
#share-link {
|
||||
color: white;
|
||||
padding: .3em .3em;
|
||||
padding: 0.3em 0.3em;
|
||||
display: inline-block;
|
||||
margin-top: .3em;
|
||||
border-radius: .25em;
|
||||
margin-top: 0.3em;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
#share-icon {
|
||||
font-size: 200%;
|
||||
vertical-align: middle;
|
||||
line-height: 0em;
|
||||
margin-left: .3em;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
.select-answer.commune .Select {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
.info-zone {
|
||||
font-size: 65%;
|
||||
text-align: center;
|
||||
|
|
@ -458,7 +444,7 @@
|
|||
}
|
||||
|
||||
.input-tip p {
|
||||
margin: .1em;
|
||||
margin: 0.1em;
|
||||
}
|
||||
|
||||
#show-advanced {
|
||||
|
|
@ -500,36 +486,32 @@ for the appearing element to appear without stacking up below the first one */
|
|||
}
|
||||
|
||||
.user-next-action-animation-leave {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.user-next-action-animation-leave.user-next-action-animation-leave-active {
|
||||
opacity: 0;
|
||||
transition: opacity 700ms ease;
|
||||
opacity: 0;
|
||||
transition: opacity 700ms ease;
|
||||
}
|
||||
|
||||
|
||||
.foldedQuestion {
|
||||
.foldedQuestion {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
.foldedQuestion .edit {
|
||||
vertical-align: middle;
|
||||
margin-left: .5em;
|
||||
margin-left: 0.5em;
|
||||
border: none;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.foldedQuestion .borderWrapper {
|
||||
padding: .1em 0;
|
||||
padding: 0.1em 0;
|
||||
display: inline-block;
|
||||
width: calc(100% - 6em);
|
||||
border-bottom: 1px solid #eee
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.keyIcon {
|
||||
position: absolute;
|
||||
font-size: 80%;
|
||||
|
|
@ -537,14 +519,13 @@ for the appearing element to appear without stacking up below the first one */
|
|||
font-weight: bold;
|
||||
background: #ddd;
|
||||
color: white;
|
||||
margin-left: .6em;
|
||||
padding: .5em .4em;
|
||||
border-radius: .2em;
|
||||
transition: .2s opacity;
|
||||
margin-left: 0.6em;
|
||||
padding: 0.5em 0.4em;
|
||||
border-radius: 0.2em;
|
||||
transition: 0.2s opacity;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:860px) {
|
||||
@media screen and (max-width: 860px) {
|
||||
.keyIcon {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import React, { Component } from 'react'
|
|||
import './Pages.css'
|
||||
import './About.css'
|
||||
import { Link } from 'react-router-dom'
|
||||
import BlueButton from '../BlueButton'
|
||||
|
||||
export default class About extends Component {
|
||||
render() {
|
||||
return (
|
||||
|
|
@ -64,13 +66,14 @@ let MailChimp = () => (
|
|||
/>
|
||||
</div>
|
||||
<div className="clear">
|
||||
<input
|
||||
type="submit"
|
||||
value="M'inscrire"
|
||||
name="subscribe"
|
||||
id="mc-embedded-subscribe"
|
||||
className="blueButton"
|
||||
/>
|
||||
<BlueButton>
|
||||
<input
|
||||
type="submit"
|
||||
value="M'inscrire"
|
||||
name="subscribe"
|
||||
id="mc-embedded-subscribe"
|
||||
/>
|
||||
</BlueButton>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
transition-delay: 0.2s;
|
||||
}
|
||||
#updateMessage i {
|
||||
color: #2975d1;
|
||||
margin-right: 1em;
|
||||
transition: 0.8s opacity;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@ import React, { Component } from 'react'
|
|||
import './Pages.css'
|
||||
import './Home.css'
|
||||
import TargetSelection from '../TargetSelection'
|
||||
import { connect } from 'react-redux'
|
||||
|
||||
@connect(state => ({
|
||||
themeColours: state.themeColours
|
||||
}))
|
||||
export default class Home extends Component {
|
||||
state = {
|
||||
updateMessage: false
|
||||
|
|
@ -18,7 +22,10 @@ export default class Home extends Component {
|
|||
<i
|
||||
className="fa fa-newspaper-o"
|
||||
aria-hidden="true"
|
||||
style={opacityStyle}
|
||||
style={{
|
||||
...opacityStyle,
|
||||
color: this.props.themeColours.textColourOnWhite
|
||||
}}
|
||||
/>
|
||||
<p style={opacityStyle}>
|
||||
Cette nouvelle version du site vous permet de simuler un CDD ou CDI,
|
||||
|
|
@ -26,7 +33,7 @@ export default class Home extends Component {
|
|||
</p>
|
||||
</div>
|
||||
<div id="content">
|
||||
<TargetSelection />
|
||||
<TargetSelection themeColours={this.props.themeColours} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
vertical-align: top;
|
||||
}
|
||||
#integration i {
|
||||
margin-right: .6em;
|
||||
color: #3C4963;
|
||||
margin-right: 0.6em;
|
||||
color: #3c4963;
|
||||
}
|
||||
#integration code {
|
||||
display: inline-block;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
#scriptColor {
|
||||
color: #4a89dc;
|
||||
color: #2975d1;
|
||||
}
|
||||
|
||||
section#integrations a {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default class MyComponent extends Component {
|
|||
id
|
||||
</em>="script-simulateur-embauche" <em>
|
||||
data-couleur
|
||||
</em>="<span id="scriptColor">#4A89DC</span>" <em>src</em>="https://embauche.beta.gouv.fr/modules/v2/dist/simulateur.js">
|
||||
</em>="<span id="scriptColor">#2975D1</span>" <em>src</em>="https://embauche.beta.gouv.fr/modules/v2/dist/simulateur.js">
|
||||
<span>{'<'}</span>
|
||||
<span>/</span>
|
||||
<em>script</em>
|
||||
|
|
|
|||
|
|
@ -10,3 +10,12 @@
|
|||
#mc_embed_signup .blueButton {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#mc_embed_signup .blueButton input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,26 +2,24 @@
|
|||
}
|
||||
|
||||
#injectSituation {
|
||||
background: rgb(74, 137, 220);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
padding: .3em .6em;
|
||||
margin-bottom: .6em;
|
||||
padding: 0.3em 0.6em;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
#injectSituation.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
#examples ul {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
#examples .example {
|
||||
font-weight: 500;
|
||||
margin: .6em;
|
||||
margin: 0.6em;
|
||||
cursor: pointer;
|
||||
}
|
||||
#examples .example.selected .name {
|
||||
|
|
@ -29,7 +27,7 @@
|
|||
}
|
||||
|
||||
#examples i {
|
||||
margin-right: .6em;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
#examples .example i {
|
||||
|
|
@ -52,5 +50,5 @@
|
|||
}
|
||||
|
||||
#examples .example.ok i {
|
||||
color: #2ecc71
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,12 +39,20 @@ export let runExamples = (examples, rule, parsedRules) =>
|
|||
|
||||
@connect(state => ({
|
||||
situationGate: state.situationGate,
|
||||
parsedRules: state.parsedRules
|
||||
parsedRules: state.parsedRules,
|
||||
colour: state.themeColours.colour
|
||||
}))
|
||||
export default class Examples extends Component {
|
||||
render() {
|
||||
let focusedExample = path(['focusedExample', 'nom'])(this.props),
|
||||
{ inject, situationExists, showValues, rule, parsedRules } = this.props,
|
||||
{
|
||||
inject,
|
||||
situationExists,
|
||||
showValues,
|
||||
rule,
|
||||
parsedRules,
|
||||
colour
|
||||
} = this.props,
|
||||
{ exemples = [] } = rule,
|
||||
examples = runExamples(exemples, rule, parsedRules)
|
||||
|
||||
|
|
@ -99,7 +107,11 @@ export default class Examples extends Component {
|
|||
{situationExists &&
|
||||
focusedExample && (
|
||||
<div>
|
||||
<button id="injectSituation" onClick={() => inject()}>
|
||||
<button
|
||||
id="injectSituation"
|
||||
onClick={() => inject()}
|
||||
style={{ background: colour }}
|
||||
>
|
||||
Revenir à votre situation
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,22 +38,3 @@ h1 {
|
|||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.blueButton {
|
||||
color: white;
|
||||
display: block;
|
||||
background: #4a89dc;
|
||||
padding: 0.3em 1em;
|
||||
font-size: 200%;
|
||||
width: 8em;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0.95;
|
||||
border-radius: 0.2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.blueButton:hover {
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { Component } from 'react'
|
||||
import './Layout.css'
|
||||
import './reset.css'
|
||||
import './ribbon.css'
|
||||
|
||||
import { Link, Route, Router, Switch, Redirect } from 'react-router-dom'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
#ribbon {
|
||||
}
|
||||
#ribbon a {
|
||||
display: block;
|
||||
background: #333350;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: arial, sans-serif;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 5px 40px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.6rem;
|
||||
position: relative;
|
||||
transition: 0.5s;
|
||||
box-shadow: -1px 1px 16px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#ribbon a:hover {
|
||||
background: #4a89dc;
|
||||
color: #fff;
|
||||
}
|
||||
@media screen and (min-width: 800px) {
|
||||
#ribbon {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
z-index: 9999;
|
||||
}
|
||||
#ribbon a {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6rem;
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: -60px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/* mécanisme somme */
|
||||
.somme table {
|
||||
width: 100%;
|
||||
|
|
@ -14,14 +13,13 @@
|
|||
text-align: right;
|
||||
}
|
||||
.somme tr:hover {
|
||||
background: rgba(51, 51, 80, 0.02)
|
||||
background: rgba(51, 51, 80, 0.02);
|
||||
}
|
||||
.somme tr:nth-child(2n) {
|
||||
|
||||
}
|
||||
.somme tr .element {
|
||||
text-align: left;
|
||||
padding: .1em .6em;
|
||||
padding: 0.1em 0.6em;
|
||||
}
|
||||
.somme .element .unfoldIndication {
|
||||
font-size: 60%;
|
||||
|
|
@ -39,7 +37,7 @@
|
|||
.somme .operator {
|
||||
text-align: center;
|
||||
width: 1em;
|
||||
padding: 0 .4em;
|
||||
padding: 0 0.4em;
|
||||
font-weight: 600;
|
||||
font-size: 120%;
|
||||
color: black;
|
||||
|
|
@ -55,7 +53,7 @@
|
|||
}
|
||||
|
||||
.somme .nested {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.somme .nested tr:first-child {
|
||||
|
|
@ -64,12 +62,10 @@
|
|||
.somme .noNest {
|
||||
border-bottom: none;
|
||||
}
|
||||
.somme > table {
|
||||
.somme > table {
|
||||
border-bottom: 1px solid rgba(51, 51, 80, 0.15);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Specific to ResultsGrid.css. Somme.js and ResultsGrid.js should be merged */
|
||||
|
||||
.resultsGrid table {
|
||||
|
|
@ -90,7 +86,7 @@
|
|||
padding-left: 1.2em;
|
||||
}
|
||||
.resultsGrid .detailsRow .name:hover {
|
||||
color: #2975D1;
|
||||
color: #111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -112,11 +108,11 @@
|
|||
font-weight: 600;
|
||||
font-size: 95%;
|
||||
padding: 0 0.6em;
|
||||
margin-left: .3em;
|
||||
border-radius: .2em;
|
||||
white-space: nowrap
|
||||
margin-left: 0.3em;
|
||||
border-radius: 0.2em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detailsRow {
|
||||
background: rgba(51, 51, 80, 0.02)
|
||||
background: rgba(51, 51, 80, 0.02);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@ let script = document.getElementById('script-simulateur-embauche'),
|
|||
document.write(`
|
||||
<iframe id="simulateurEmbauche" src="${
|
||||
src.split('dist')[0]
|
||||
}iframe.html?couleur=${couleur}" style="border: none; width: 60em; display: block; margin: 0 auto; height: 45em" scrolling="no"></iframe>
|
||||
}iframe.html?couleur=${couleur}" style="border: none; width: 60em; display: block; margin: 0 auto; height: 45em"></iframe>
|
||||
`)
|
||||
|
|
|
|||
|
|
@ -47,10 +47,10 @@
|
|||
width="45"
|
||||
height="6.8"
|
||||
id="rect4"
|
||||
style="fill:#4a89dc;fill-opacity:1" /><rect
|
||||
style="fill:#2975D1;fill-opacity:1" /><rect
|
||||
x="27.5"
|
||||
y="35.8"
|
||||
width="36"
|
||||
height="6.8"
|
||||
id="rect6"
|
||||
style="fill:#4a89dc;fill-opacity:1" /></svg>
|
||||
style="fill:#2975D1;fill-opacity:1" /></svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
|
@ -206,7 +206,7 @@
|
|||
id="textPath36434"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:68.75px;font-family:'Liberation Serif';-inkscape-font-specification:'Liberation Serif';fill:#e2e1e1;fill-opacity:1"> </></textPath></text>
|
||||
<path
|
||||
style="fill:#4a89dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
style="fill:#2975D1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 515.43034,677.59561 70.66391,0.1802 0.50508,-100.80386 -70.66391,-0.39159 z"
|
||||
id="path4200-3-6"
|
||||
inkscape:connector-curvature="0"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 780 KiB After Width: | Height: | Size: 780 KiB |
Loading…
Reference in New Issue