🎨 Amélioration de la barre des résultats
Ajout de la mention 'résultats calculés au mois' Les boîtes de résultat sont plus larges, leur titres mis en avant, moins d'espace vertical gachépull/13/head
mama
parent
d95fc2e24c
commit
78969028de
|
|
@ -6,7 +6,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="google-site-verification" content="C03WwnrJP0FLqf83ibMBA7_N-TLQcwsJaAhqKXppxaE" />
|
||||
<title>Simulateur d'embauche</title>
|
||||
<meta name="description" content="Estimer le prix d'une embauche en France" data-react-helmet="true"> <!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
|
||||
<meta name="description" content="Simulation du prix d'une embauche en France" data-react-helmet="true"> <!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
simulateur:
|
||||
titre: Simulateur CDD
|
||||
sous-titre: Découvrir le surcoût employeur du CDD par rapport au CDI
|
||||
résultats: Ces 4 éléments constituent le surcoût du CDD
|
||||
résultats: Les 4 éléments du surcoût CDD, calculés au mois.
|
||||
introduction:
|
||||
notes:
|
||||
- icône: fa-handshake-o
|
||||
|
|
|
|||
|
|
@ -89,6 +89,97 @@
|
|||
}
|
||||
|
||||
|
||||
#results li {
|
||||
margin: 0 1em 0;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
#results li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#results .rule-type {
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 85%;
|
||||
line-height: 2em;
|
||||
font-weight: 600;
|
||||
margin: .6em 0 .1em;
|
||||
}
|
||||
|
||||
#results .rule-box {
|
||||
padding: .6em 1em;
|
||||
color: #333350;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
color: #333350;
|
||||
height: 6em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#results .rule-name {
|
||||
font-size: 175%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#results li p {
|
||||
margin: 0;
|
||||
padding: 0 0;
|
||||
font-size: 120%;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#results li:not(.pointedOut):hover .rule-box {
|
||||
background: #ddd;
|
||||
}
|
||||
#results li.irrelevant .rule-box {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
#results li.pointedOut:not(.irrelevant) .rule-name {
|
||||
color: #4A89DC;
|
||||
}
|
||||
#results li.pointedOut .rule-type {
|
||||
color: #4A89DC;
|
||||
}
|
||||
|
||||
#results li.pointedOut .rule-box {
|
||||
border-bottom: .8em solid #4A89DC;
|
||||
}
|
||||
#results li.number p {
|
||||
color: #4A89DC;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#results li.irrelevant .rule-type {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
#results li.irrelevant .rule-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
|
||||
#results li.unsatisfied p {
|
||||
font-style: italic;
|
||||
}
|
||||
#results li.irrelevant p {
|
||||
font-weight: 600;
|
||||
}
|
||||
#results li p .figure {
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
#results .rule-type {
|
||||
display: none;
|
||||
|
|
@ -99,6 +190,7 @@
|
|||
#results-titles {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
#results-titles p {
|
||||
margin: 0;
|
||||
|
|
@ -118,6 +210,9 @@
|
|||
#results-titles > p {
|
||||
display: inline-block;
|
||||
}
|
||||
#results-titles #understandTip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#results ul {
|
||||
width: 100%;
|
||||
|
|
@ -126,86 +221,9 @@
|
|||
#results ul li .rule-box p {
|
||||
padding: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
#results li {
|
||||
margin: 1.4em 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
#results .rule-name {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
#results li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#results .rule-box {
|
||||
padding: 0 1em;
|
||||
color: #333350;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
color: #333350;
|
||||
min-width: 15em;
|
||||
}
|
||||
#results li:not(.pointedOut):hover .rule-box {
|
||||
background: #ddd;
|
||||
}
|
||||
#results li.irrelevant .rule-box {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
#results li.pointedOut:not(.irrelevant) .rule-name {
|
||||
color: #4A89DC;
|
||||
}
|
||||
#results li.pointedOut .rule-type {
|
||||
background: #4A89DC;
|
||||
}
|
||||
|
||||
#results li.pointedOut .rule-box {
|
||||
border-top: .8em solid #4A89DC;
|
||||
}
|
||||
#results li.pointedOut {
|
||||
/* Pour ne pas avoir de décalage dû au border-top */
|
||||
margin-top: .6em;
|
||||
}
|
||||
#results li.number p {
|
||||
color: #4A89DC;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#results .rule-type {
|
||||
background: #333350;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 75%;
|
||||
line-height: 2em;
|
||||
font-weight: 800;
|
||||
margin: .6em 0 .1em;
|
||||
}
|
||||
|
||||
#results li.irrelevant .rule-type {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
#results li.irrelevant .rule-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
#results .rule-name {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
#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: 250%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,9 +49,8 @@ export default class Results extends Component {
|
|||
{do {let text = R.path(['simulateur', 'résultats'])(analysedSituation)
|
||||
text &&
|
||||
<p id="resultText">{text}</p>
|
||||
}}
|
||||
{conversationStarted &&
|
||||
<p id="understandTip"><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Cliquez pour comprendre chaque calcul</em></p>}
|
||||
}}
|
||||
<p id="understandTip"><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Cliquez pour comprendre chaque calcul</em></p>
|
||||
</div>
|
||||
}
|
||||
<ul>
|
||||
|
|
@ -70,11 +69,14 @@ export default class Results extends Component {
|
|||
|| R.contains(encodeRuleName(name))(location.pathname)
|
||||
|
||||
;<li key={name} className={classNames({unsatisfied, irrelevant, number, pointedOut})}>
|
||||
|
||||
|
||||
<Link to={"/regle/" + encodeRuleName(name)} >
|
||||
<div className="rule-type">
|
||||
{type}
|
||||
</div>
|
||||
<div className="rule-box">
|
||||
<div className="rule-type">
|
||||
{type}
|
||||
</div>
|
||||
|
||||
<div className="rule-name">
|
||||
{capitalise0(name)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -99,9 +99,6 @@ export default class extends React.Component {
|
|||
</button>
|
||||
</div>
|
||||
<div className="remarks centered">
|
||||
<p>
|
||||
Pour simplifier, les résultats sont calculés par mois de contrat, et pour un temps complet.
|
||||
</p>
|
||||
<p>
|
||||
N'hésitez pas à nous écrire <Link to="/contact">
|
||||
<i className="fa fa-envelope-open-o" aria-hidden="true" style={{margin: '0 .3em'}}></i>
|
||||
|
|
|
|||
Loading…
Reference in New Issue