[cdd] ajout d'une icône de fin
Mael Thomas
parent
b8359f02e7
commit
4aef5db8cb
49
finsvg.svg
49
finsvg.svg
|
|
@ -15,7 +15,10 @@
|
|||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="finsvg.svg">
|
||||
sodipodi:docname="finsvg.svg"
|
||||
inkscape:export-filename="/home/mama/dev/sgmap/actifs/syso/source/images/fin.png"
|
||||
inkscape:export-xdpi="39.68"
|
||||
inkscape:export-ydpi="39.68">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
|
|
@ -26,15 +29,15 @@
|
|||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.7"
|
||||
inkscape:cx="295.97165"
|
||||
inkscape:cy="571.35343"
|
||||
inkscape:cx="65.97165"
|
||||
inkscape:cy="568.49629"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1021"
|
||||
inkscape:window-height="1048"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
|
|
@ -44,7 +47,7 @@
|
|||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
|
|
@ -53,35 +56,47 @@
|
|||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:0;fill-rule:nonzero;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
style="opacity:1;fill:#333350;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4136"
|
||||
width="557.06598"
|
||||
height="344.28571"
|
||||
x="90"
|
||||
y="308.07648" />
|
||||
y="308.07648"
|
||||
inkscape:export-filename="/home/mama/dev/sgmap/actifs/syso/source/images/fin.png"
|
||||
inkscape:export-xdpi="39.68"
|
||||
inkscape:export-ydpi="39.68" />
|
||||
<path
|
||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:8.3871851;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 155.20364,307.27204 352.90158,145.51919 578.15741,304.87571"
|
||||
id="path4140"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
sodipodi:nodetypes="ccc"
|
||||
inkscape:export-filename="/home/mama/dev/sgmap/actifs/syso/source/images/fin.png"
|
||||
inkscape:export-xdpi="39.68"
|
||||
inkscape:export-ydpi="39.68" />
|
||||
<circle
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:8.3871851;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="path4148"
|
||||
cx="352.90158"
|
||||
cy="145.51918"
|
||||
r="23.963387" />
|
||||
r="23.963387"
|
||||
inkscape:export-filename="/home/mama/dev/sgmap/actifs/syso/source/images/fin.png"
|
||||
inkscape:export-xdpi="39.68"
|
||||
inkscape:export-ydpi="39.68" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="162.85715"
|
||||
y="569.50507"
|
||||
style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:0.94117647;fill-rule:nonzero;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="202.85715"
|
||||
y="555.21936"
|
||||
id="text4150"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:linespacing="125%"
|
||||
inkscape:export-filename="/home/mama/dev/sgmap/actifs/syso/source/images/fin.png"
|
||||
inkscape:export-xdpi="39.68"
|
||||
inkscape:export-ydpi="39.68"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan4152"
|
||||
x="162.85715"
|
||||
y="569.50507"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:250px;font-family:msbm10;-inkscape-font-specification:msbm10">FIN</tspan></text>
|
||||
x="202.85715"
|
||||
y="555.21936"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:200px;font-family:msbm10;-inkscape-font-specification:msbm10;fill:#ffffff;fill-opacity:0.94117647;fill-rule:nonzero">FIN</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 4.1 KiB |
|
|
@ -26,29 +26,22 @@ p {
|
|||
max-width: 90%;
|
||||
}
|
||||
|
||||
|
||||
#fin {
|
||||
margin: 6em auto;
|
||||
width: 20em;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
#questions-answers {
|
||||
min-width: 60%;
|
||||
transition: width 1s;
|
||||
}
|
||||
|
||||
|
||||
.dependency-of {
|
||||
}
|
||||
.dependency-of ul {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.dependency-of li {
|
||||
font-size: 80%;
|
||||
background: #333350;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: .1em .6em;
|
||||
margin: 0 .6em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#sim #results {
|
||||
padding: .1em;
|
||||
|
|
@ -63,98 +56,3 @@ p {
|
|||
height: 12em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#results #results-titles {
|
||||
color: white;
|
||||
width: 18%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
line-height: 1.2em;
|
||||
margin: 0;
|
||||
margin-left: .5em;
|
||||
padding: .5em;
|
||||
font-weight: 400;
|
||||
font-size: 120%;
|
||||
}
|
||||
#results #results-titles h2 {
|
||||
font-size: 210%;
|
||||
}
|
||||
#results #results-titles div {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
#results ul {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#results li {
|
||||
margin: .2em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
#results li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#results .rule-box {
|
||||
padding: 0 1em;
|
||||
color: #333350;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
color: #333350;
|
||||
}
|
||||
#results li.irrelevant .rule-box {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
#results li .pointer {
|
||||
font-size: 300%;
|
||||
line-height: .6em;
|
||||
visibility: hidden;
|
||||
}
|
||||
#results li.pointedOut .pointer {
|
||||
visibility: visible;
|
||||
}
|
||||
#results li.number .rule-box {
|
||||
border: 5px solid #4A89DC;
|
||||
}
|
||||
|
||||
#results .rule-type {
|
||||
background: #333350;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 75%;
|
||||
line-height: 2em;
|
||||
font-weight: 800;
|
||||
margin: .6em 0 .1em;
|
||||
}
|
||||
|
||||
#results .rule-name {
|
||||
font-size: 150%;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#results li p {
|
||||
margin: 0;
|
||||
padding: 1em 0;
|
||||
font-size: 120%;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#results li.unsatisfied p {
|
||||
font-style: italic;
|
||||
}
|
||||
#results li.irrelevant p {
|
||||
font-weight: 600;
|
||||
}
|
||||
#results li p .figure {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
#results .understand:hover i {
|
||||
opacity: 1
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,51 +12,77 @@ let situationSelector = formValueSelector('conversation')
|
|||
|
||||
@reduxForm({form: 'conversation', destroyOnUnmount: false})
|
||||
@connect(
|
||||
state => ({
|
||||
situation: variableName => situationSelector(state, variableName),
|
||||
foldedSteps: state.foldedSteps,
|
||||
unfoldedSteps: state.unfoldedSteps,
|
||||
themeColours: state.themeColours,
|
||||
analysedSituation: state.analysedSituation,
|
||||
}),
|
||||
dispatch => ({
|
||||
startConversation: () => dispatch({type: START_CONVERSATION}),
|
||||
}),
|
||||
state => ({
|
||||
situation: variableName => situationSelector(state, variableName),
|
||||
foldedSteps: state.foldedSteps,
|
||||
unfoldedSteps: state.unfoldedSteps,
|
||||
themeColours: state.themeColours,
|
||||
analysedSituation: state.analysedSituation,
|
||||
}),
|
||||
dispatch => ({
|
||||
startConversation: () => dispatch({type: START_CONVERSATION}),
|
||||
}),
|
||||
)
|
||||
export default class CDD extends Component {
|
||||
componentDidMount() {
|
||||
// C'est ici que la génération du formulaire, et donc la traversée des variables commence
|
||||
// C'est ici que la génération du formulaire, et donc la traversée des variables commence
|
||||
this.props.startConversation()
|
||||
}
|
||||
render() {
|
||||
let {foldedSteps, unfoldedSteps, situation} = this.props
|
||||
|
||||
let conversation = foldedSteps.map(step => <step.component
|
||||
key={step.name}
|
||||
{...step}
|
||||
step={step}
|
||||
answer={situation(step.name)} />
|
||||
).concat(unfoldedSteps.map(step => <step.component
|
||||
key={step.name}
|
||||
{...step}
|
||||
step={step}
|
||||
unfolded={true}
|
||||
answer={situation(step.name)} />
|
||||
))
|
||||
|
||||
let conversation = foldedSteps
|
||||
.map(step => (
|
||||
<step.component
|
||||
key={step.name}
|
||||
{...step}
|
||||
step={step}
|
||||
answer={situation(step.name)}
|
||||
/>
|
||||
))
|
||||
.concat(
|
||||
unfoldedSteps.map(step => (
|
||||
<step.component
|
||||
key={step.name}
|
||||
{...step}
|
||||
step={step}
|
||||
unfolded={true}
|
||||
answer={situation(step.name)}
|
||||
/>
|
||||
)),
|
||||
)
|
||||
|
||||
return (
|
||||
<div id="sim">
|
||||
<PageTypeIcon type="simulation" />
|
||||
<h1>Simulateur CDD</h1>
|
||||
<div id="conversation">
|
||||
<section id="questions-answers">
|
||||
{conversation}
|
||||
</section>
|
||||
<Aide />
|
||||
</div>
|
||||
<Results {...this.props} />
|
||||
</div>
|
||||
<div id="sim">
|
||||
<PageTypeIcon type="simulation" />
|
||||
<h1>Simulateur CDD</h1>
|
||||
<div id="conversation">
|
||||
<section id="questions-answers">
|
||||
{conversation}
|
||||
{unfoldedSteps.length == 0 &&
|
||||
<div id="fin">
|
||||
<img src={require('../images/fin.png')} />
|
||||
<p>
|
||||
Nous n'avons plus de questions : votre simulation est terminée.
|
||||
</p><p>
|
||||
Une remarque ?
|
||||
<a mailto="contact@embauche.beta.gouv.fr">
|
||||
Écrivez-nous
|
||||
</a>
|
||||
{' '}
|
||||
<i
|
||||
style={{cursor: 'pointer'}}
|
||||
className="fa fa-envelope-o"
|
||||
/>
|
||||
{' '}
|
||||
!
|
||||
</p>
|
||||
</div>}
|
||||
</section>
|
||||
<Aide />
|
||||
</div>
|
||||
<Results {...this.props} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
|
||||
#results #results-titles {
|
||||
color: white;
|
||||
width: 18%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
line-height: 1.2em;
|
||||
margin: 0;
|
||||
margin-left: .5em;
|
||||
padding: .5em;
|
||||
font-weight: 400;
|
||||
font-size: 120%;
|
||||
}
|
||||
#results #results-titles h2 {
|
||||
font-size: 210%;
|
||||
}
|
||||
#results #results-titles div {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
#results ul {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#results li {
|
||||
margin: .2em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
#results li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#results .rule-box {
|
||||
padding: 0 1em;
|
||||
color: #333350;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
color: #333350;
|
||||
}
|
||||
#results li.irrelevant .rule-box {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
#results li .pointer {
|
||||
font-size: 300%;
|
||||
line-height: .6em;
|
||||
visibility: hidden;
|
||||
}
|
||||
#results li.pointedOut .pointer {
|
||||
visibility: visible;
|
||||
}
|
||||
#results li.number .rule-box {
|
||||
border: 5px solid #4A89DC;
|
||||
}
|
||||
|
||||
#results .rule-type {
|
||||
background: #333350;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 75%;
|
||||
line-height: 2em;
|
||||
font-weight: 800;
|
||||
margin: .6em 0 .1em;
|
||||
}
|
||||
|
||||
#results .rule-name {
|
||||
font-size: 150%;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#results li p {
|
||||
margin: 0;
|
||||
padding: 1em 0;
|
||||
font-size: 120%;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#results li.unsatisfied p {
|
||||
font-style: italic;
|
||||
}
|
||||
#results li.irrelevant p {
|
||||
font-weight: 600;
|
||||
}
|
||||
#results li p .figure {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
#results .understand:hover i {
|
||||
opacity: 1
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import classNames from 'classnames'
|
|||
import {Link} from 'react-router'
|
||||
import {connect} from 'react-redux'
|
||||
import R from 'ramda'
|
||||
import './Results.css'
|
||||
|
||||
let fmt = new Intl.NumberFormat('fr-FR').format
|
||||
let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
|
||||
|
|
|
|||
|
|
@ -599,7 +599,7 @@ let treatRuleRoot = (situationGate, rule) => R.pipe(
|
|||
- do they need variables that are not present in the user situation ?
|
||||
- if not, do they have a computed value or are they non applicable ?
|
||||
*/
|
||||
export let analyseSituation = situationGate => console.log('analyseSituation' + Math.random()) ||
|
||||
export let analyseSituation = situationGate =>
|
||||
|
||||
//TODO l'objectif devrait être spécifié par la page qui lance un simulateur
|
||||
treatRuleRoot(
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Loading…
Reference in New Issue