Redesign de la barre de résultats
mama
parent
146bf9adfb
commit
4aace4d68d
|
|
@ -94,8 +94,6 @@
|
|||
simulateur:
|
||||
titre: Simulateur CDD
|
||||
sous-titre: Découvrir le surcoût employeur du CDD par rapport au CDI
|
||||
résultats: Le coût du travail faisant ressortir les cotisations spécifiques au CDD.
|
||||
indice: Par mois
|
||||
introduction:
|
||||
notes:
|
||||
- icône: fa-handshake-o
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
|
||||
#results {
|
||||
position: fixed;
|
||||
bottom: 3%;
|
||||
bottom: 2.5%;
|
||||
left: 0;
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
|
||||
padding: .1em;
|
||||
background: #4A89DC;
|
||||
font-size: 80%;
|
||||
color: white;
|
||||
padding: .6em 0;
|
||||
text-align: center;
|
||||
height: 12em;
|
||||
|
||||
font-size: 110%;
|
||||
box-shadow: 1px -7px 20px 2px #ccc;
|
||||
|
||||
opacity: 0;
|
||||
|
|
@ -28,8 +25,7 @@
|
|||
}
|
||||
|
||||
|
||||
#results-actions,
|
||||
#results-titles {
|
||||
#results-actions {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 18%;
|
||||
|
|
@ -57,82 +53,32 @@
|
|||
margin-right: .6em;
|
||||
}
|
||||
|
||||
#results-titles {
|
||||
color: white;
|
||||
line-height: 1.2em;
|
||||
font-weight: 400;
|
||||
font-size: 120%;
|
||||
text-align: left;
|
||||
}
|
||||
#results-titles h2 {
|
||||
font-size: 250%;
|
||||
margin: .4em 0;
|
||||
}
|
||||
#results-titles p {
|
||||
color: inherit;
|
||||
}
|
||||
#results-titles i {
|
||||
margin: 0 .3em;
|
||||
}
|
||||
#resultText {
|
||||
#results h2 {
|
||||
margin: 0 .6em;
|
||||
font-weight: 600;
|
||||
font-size: 100%;
|
||||
color: white;
|
||||
text-align: left;
|
||||
font-size: 115%
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#results h2 i {
|
||||
margin-right: .6em;
|
||||
}
|
||||
#results ul {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
height: 70%;
|
||||
width: 98%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
#results .rule-type {
|
||||
display: none;
|
||||
}
|
||||
#results {
|
||||
padding: 0;
|
||||
}
|
||||
#results-titles {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
#results-titles p {
|
||||
margin: 0;
|
||||
margin-right: 3em;
|
||||
}
|
||||
#results-titles h2 {
|
||||
font-size: 150%;
|
||||
display: none;
|
||||
}
|
||||
#results-titles #resultText {
|
||||
font-size: 120%
|
||||
}
|
||||
#results h2 {
|
||||
margin: 0.3em 1em 0 0;
|
||||
display: inline-block;
|
||||
}
|
||||
#results-titles > p {
|
||||
display: inline-block;
|
||||
}
|
||||
#results-titles #understandTip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#results ul {
|
||||
width: 100%;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,7 @@ export default class Results extends Component {
|
|||
|
||||
if (!explanation) return null
|
||||
|
||||
let onRulePage = R.contains('/regle/')(location.pathname),
|
||||
hint = analysedSituation.root.simulateur && analysedSituation.root.simulateur.indice
|
||||
|
||||
let onRulePage = R.contains('/regle/')(location.pathname)
|
||||
return (
|
||||
<section id="results" className={classNames({show: showResults})}>
|
||||
{onRulePage && conversationStarted ?
|
||||
|
|
@ -46,11 +44,7 @@ export default class Results extends Component {
|
|||
</Link>
|
||||
</div>
|
||||
: <div id="results-titles">
|
||||
<h2>{hint || "Vos résultats"}: <i className="fa fa-hand-o-right" aria-hidden="true"></i></h2>
|
||||
{do {let text = R.path(['simulateur', 'résultats'])(analysedSituation.root)
|
||||
text &&
|
||||
<p id="resultText">{text}</p>
|
||||
}}
|
||||
<h2><i className="fa fa-calculator" aria-hidden="true"></i>Vos résultats</h2>
|
||||
</div>
|
||||
}
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
|
||||
.RuleValueVignette {
|
||||
margin: 0 1em 0;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
margin: 0 1em 0 30%;
|
||||
}
|
||||
|
||||
.RuleValueVignette li a {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import classNames from 'classnames'
|
|||
import {capitalise0} from '../../utils'
|
||||
let fmt = new Intl.NumberFormat('fr-FR').format
|
||||
export let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
|
||||
import './RuleValueVignette.css'
|
||||
import './RuleValueVignette2.css'
|
||||
|
||||
export default ({
|
||||
name,
|
||||
|
|
@ -29,10 +29,10 @@ export default ({
|
|||
{type}
|
||||
</div>
|
||||
<div className="rule-box">
|
||||
<div className="rule-name">
|
||||
{titre || capitalise0(name)}
|
||||
</div>
|
||||
<p>
|
||||
<span className="rule-name">
|
||||
{titre || capitalise0(name)} :
|
||||
</span>
|
||||
<span>{' '}
|
||||
{conversationStarted &&
|
||||
(irrelevant
|
||||
? "Vous n'êtes pas concerné"
|
||||
|
|
@ -41,9 +41,9 @@ export default ({
|
|||
: <div><span className="figure">
|
||||
{humanFigure(2)(ruleValue) + "€"}
|
||||
</span>
|
||||
<p><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Pourquoi ?</em></p>
|
||||
{/*<p><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Pourquoi ?</em></p> */}
|
||||
</div>)}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
.RuleValueVignette {
|
||||
margin: 0 1em 0 2em;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.RuleValueVignette li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.RuleValueVignette .rule-type {
|
||||
color: white;
|
||||
border: none;
|
||||
line-height: 2em;
|
||||
font-weight: 600;
|
||||
margin: .6em 0 .1em;
|
||||
}
|
||||
.RuleValueVignette .rule-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.RuleValueVignette .rule-box > span {
|
||||
display: inline-block;
|
||||
}
|
||||
Loading…
Reference in New Issue