Johan Girod
GitHub
commit
97ec7b1b3c
47
index.html
47
index.html
|
|
@ -81,10 +81,10 @@
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
html[data-useragent*='MSIE'] #lds-ellipsis,
|
||||
html[data-useragent*='Safari'][data-useragent*='Version/8'] #lds-ellipsis,
|
||||
html[data-useragent*='Safari'][data-useragent*='Version/7'] #lds-ellipsis,
|
||||
html[data-useragent*='Trident'] #lds-ellipsis {
|
||||
html[data-useragent*='MSIE'] #loading,
|
||||
html[data-useragent*='Safari'][data-useragent*='Version/8'] #loading,
|
||||
html[data-useragent*='Safari'][data-useragent*='Version/7'] #loading,
|
||||
html[data-useragent*='Trident'] #loading {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -98,22 +98,22 @@
|
|||
/* Prevent FOUC effect */
|
||||
#js {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
/* CSS Loader */
|
||||
|
||||
#lds-ellipsis {
|
||||
display: block;
|
||||
position: relative;
|
||||
#loading {
|
||||
animation: appear 0.6s;
|
||||
transform: translateY(40vh);
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: auto;
|
||||
transform: translateY(35vh);
|
||||
width: 100%;
|
||||
}
|
||||
#lds-ellipsis {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
animation: appear 1.5s;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
#lds-ellipsis div {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
80% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
|
|
@ -187,11 +187,18 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="lds-ellipsis">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div id="loading">
|
||||
<img
|
||||
src="images/logo.svg"
|
||||
alt="Un service de l'État français"
|
||||
style="width: 300px; margin: auto; margin-bottom: 0.6rem; display:block"
|
||||
/>
|
||||
<div id="lds-ellipsis">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- USER AGENT DATA ATTRIBUTE -->
|
||||
|
|
|
|||
|
|
@ -66,10 +66,10 @@ export default class Provider extends PureComponent {
|
|||
css.type = 'text/css'
|
||||
css.innerHTML = `
|
||||
#js {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0px) !important;
|
||||
animation: appear 0.5s;
|
||||
opacity: 1;
|
||||
}
|
||||
#lds-ellipsis {
|
||||
#loading {
|
||||
display: none !important;
|
||||
}`
|
||||
document.body.appendChild(css)
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export let SalaireNetSection = ({ getRule }) => {
|
|||
{/* Avantages en nature */}
|
||||
<Line negative rule={avantagesEnNature} />
|
||||
{/* Salaire net */}
|
||||
<Line negative rule={getRule('contrat salarié . salaire . net')} />
|
||||
<Line rule={getRule('contrat salarié . salaire . net')} />
|
||||
</>
|
||||
) : null}
|
||||
<Line negative rule={getRule('impôt . neutre')} />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
import {
|
||||
goToQuestion,
|
||||
resetSimulation,
|
||||
validateStepWithValue
|
||||
} from 'Actions/actions'
|
||||
import { goToQuestion, validateStepWithValue } from 'Actions/actions'
|
||||
import { T } from 'Components'
|
||||
import QuickLinks from 'Components/QuickLinks'
|
||||
import { getInputComponent } from 'Engine/generateQuestions'
|
||||
import { findRuleByDottedName } from 'Engine/rules'
|
||||
import { compose } from 'ramda'
|
||||
import React from 'react'
|
||||
import emoji from 'react-easy-emoji'
|
||||
|
|
@ -19,7 +16,6 @@ import {
|
|||
import * as Animate from 'Ui/animate'
|
||||
import Aide from './Aide'
|
||||
import './conversation.css'
|
||||
import { findRuleByDottedName } from 'Engine/rules'
|
||||
|
||||
export default compose(
|
||||
reduxForm({
|
||||
|
|
@ -33,7 +29,7 @@ export default compose(
|
|||
previousAnswers: state.conversationSteps.foldedSteps,
|
||||
nextSteps: nextStepsSelector(state)
|
||||
}),
|
||||
{ resetSimulation, validateStepWithValue, goToQuestion }
|
||||
{ validateStepWithValue, goToQuestion }
|
||||
)
|
||||
)(function Conversation({
|
||||
nextSteps,
|
||||
|
|
@ -41,7 +37,6 @@ export default compose(
|
|||
currentQuestion,
|
||||
customEndMessages,
|
||||
flatRules,
|
||||
resetSimulation,
|
||||
goToQuestion,
|
||||
validateStepWithValue
|
||||
}) {
|
||||
|
|
@ -101,9 +96,6 @@ export default compose(
|
|||
</T>
|
||||
)}
|
||||
</p>
|
||||
<button className="ui__ small simple button " onClick={resetSimulation}>
|
||||
<T>Recommencer</T>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default connect(state => ({
|
|||
<button
|
||||
className="ui__ small simple button "
|
||||
onClick={() => setShowAnswerModal(true)}>
|
||||
<T>Voir mes réponses</T>
|
||||
<T>Modifier mes réponses</T>
|
||||
</button>
|
||||
)}
|
||||
{showAnswerModal && <Answers onClose={() => setShowAnswerModal(false)} />}
|
||||
|
|
|
|||
|
|
@ -26,18 +26,19 @@ export default compose(withTranslation())(
|
|||
return (
|
||||
<span
|
||||
css={`
|
||||
margin-left: 1rem;
|
||||
.keyIcon {
|
||||
opacity: 0;
|
||||
}
|
||||
${!disabled &&
|
||||
`
|
||||
@media (hover) {
|
||||
|
||||
|
||||
:hover .keyIcon {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}`}
|
||||
`}
|
||||
className="sendWrapper">
|
||||
|
|
@ -46,7 +47,7 @@ export default compose(withTranslation())(
|
|||
disabled={disabled}
|
||||
onClick={() => this.getAction()('accept')}>
|
||||
<span className="text">
|
||||
<Trans>valider</Trans> ✓
|
||||
<Trans>Suivant →</Trans>
|
||||
</span>
|
||||
</button>
|
||||
<span className="keyIcon">
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
import { compose } from 'ramda';
|
||||
import React, { Component } from 'react';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import { FormDecorator } from './FormDecorator';
|
||||
|
||||
export default compose(
|
||||
FormDecorator('text-area'),
|
||||
withTranslation()
|
||||
)(
|
||||
class Input extends Component {
|
||||
render() {
|
||||
let {
|
||||
name,
|
||||
input,
|
||||
submit,
|
||||
attributes,
|
||||
meta: { touched, error },
|
||||
themeColours
|
||||
} = this.props,
|
||||
inputError = touched && error,
|
||||
sendButtonDisabled = !input.value || inputError
|
||||
|
||||
return (
|
||||
<span>
|
||||
<span className="answer">
|
||||
<textarea
|
||||
{...attributes}
|
||||
{...input}
|
||||
id={'step-' + name}
|
||||
onKeyDown={
|
||||
({ key, ctrlKey }) =>
|
||||
key == 'Enter' &&
|
||||
ctrlKey &&
|
||||
input.value &&
|
||||
(!error ? submit() : input.onBlur()) // blur will trigger the error
|
||||
}
|
||||
/>
|
||||
<button
|
||||
className="ui__ button plain"
|
||||
style={{
|
||||
visibility: sendButtonDisabled ? 'hidden' : 'visible',
|
||||
color: themeColours.textColour,
|
||||
background: themeColours.colour
|
||||
}}
|
||||
onClick={() => (!error ? submit() : null)}>
|
||||
<span className="text">
|
||||
<Trans>valider</Trans>
|
||||
</span>
|
||||
<span className="icon">✓</span>
|
||||
</button>
|
||||
</span>
|
||||
{inputError && <span className="step-input-error">{error}</span>}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
|
@ -98,12 +98,20 @@
|
|||
|
||||
.step fieldset {
|
||||
margin: 0.8em 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.step fieldset ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.step fieldset > ul:not(.binaryQuestionList) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.step.question .variant {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
@ -325,6 +333,9 @@
|
|||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
.select-answer.commune {
|
||||
flex: 1;
|
||||
}
|
||||
.select-answer.commune .Select {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,16 @@
|
|||
var(--colour) 100%
|
||||
);
|
||||
}
|
||||
.ui__.card.plain h1,
|
||||
.ui__.card.plain h2,
|
||||
.ui__.card.plain h3,
|
||||
.ui__.card.plain h4,
|
||||
.ui__.card.plain h5,
|
||||
.ui__.card.plain h6 {
|
||||
color: white;
|
||||
color: var(--textColour);
|
||||
}
|
||||
|
||||
.ui__.card.disabled img {
|
||||
filter: saturate(0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ previousSimulationBanner:
|
|||
Première estimation: First estimate
|
||||
Commencer la simulation: Start simulation
|
||||
selectMany: You may pick more than one
|
||||
Valider: Accept
|
||||
valider: accept
|
||||
Suivant: Next
|
||||
votre réponse: answer here
|
||||
reset: Start over
|
||||
resetAll: Discard answers
|
||||
|
|
@ -127,7 +126,7 @@ quicklinks:
|
|||
Autres questions: Other questions
|
||||
Mes réponses: My answers
|
||||
Prochaines questions: Next questions
|
||||
Voir mes réponses: See my answers
|
||||
Modifier mes réponses: Change my answers
|
||||
simulation-end:
|
||||
title: No more questions left!
|
||||
text: You have reached the most accurate estimate.
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate(-100%);
|
||||
/* let the browser know we plan to animate
|
||||
each view in and out */
|
||||
will-change: transform;
|
||||
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
|
||||
transform: translate(-100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar__container.opened {
|
||||
transform: translateX(0);
|
||||
transform: translate(0%);
|
||||
}
|
||||
|
||||
.sidebar__container + * {
|
||||
will-change: transform;
|
||||
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { withRouter } from 'react-router'
|
|||
import backSvg from './back.svg'
|
||||
import mobileMenuSvg from './mobile-menu.svg'
|
||||
import './SideBar.css'
|
||||
import type { Tracker } from 'Components/utils/withTracker'
|
||||
import type Tracker from '../../../../Tracker'
|
||||
import type { Location } from 'react-router-dom'
|
||||
|
||||
type OwnProps = {|
|
||||
|
|
@ -79,10 +79,10 @@ class SideBar extends React.Component<Props, State> {
|
|||
render() {
|
||||
return (
|
||||
<div
|
||||
className={classnames(
|
||||
'sidebar__container',
|
||||
this.state.opened && 'opened'
|
||||
)}
|
||||
css="transform: translate(-100%)" // prevent FOUC effect
|
||||
className={classnames('sidebar__container', {
|
||||
opened: this.state.opened
|
||||
})}
|
||||
ref={ref => (this.ref = ref)}>
|
||||
<div className="sidebar">{this.props.children}</div>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const prerenderConfig = () => ({
|
|||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
#lds-ellipsis {
|
||||
#loading {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue