Vos obligations devient 'Vos résultats' + ajout d'une explication

La barre de résultats est mieux expliquée, plus fine
Mise en évidence de la possibilité du clic au survol

règles/rémunération-travail/entités/ok/CDD.yaml

@@ -67,6 +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
     introduction:
       notes:
         - icône: fa-handshake-o

source/components/Results.css

@@ -4,7 +4,7 @@
 	background: #333350;
 	font-size: 80%;
 	color: white;
-	padding-top: 2em;
+	padding: .6em 0;
 	text-align: center;
 	width: 100%;
 	position: fixed;
@@ -26,17 +26,26 @@
 	line-height: 1.2em;
 	margin: 0;
 	margin-left: .5em;
-	padding: .5em;
+	padding: 0 1em;
 	font-weight: 400;
 	font-size: 120%;
+	text-align: left;
+}
+#results #results-titles h2 {
+	font-size: 250%;
+	margin: .4em 0;
+}
+#results #results-titles p {
+	color: inherit;
+}
+#results #results-titles i {
+	margin: 0 .3em;
+}
+#results #resultText {
+	font-weight: 600;
+	font-size: 100%;
 }
 
-#results #results-titles h2 {
-	font-size: 210%;
-}
-#results #results-titles div {
-	font-style: italic;
-}
 
 
 #results ul {
@@ -47,6 +56,7 @@
 	width: 80%;
 	list-style: none;
 	padding-left: 0;
+	margin-bottom: 0;
 }
 
 
@@ -55,14 +65,23 @@
 		padding: 0;
 	}
 	#results #results-titles {
-		display: block;
 		width: 100%;
+		text-align: center;
+	}
+	#results #results-titles p {
+		margin-right: 3em;
+	}
+	#results #results-titles h2 {
+		display: none;
+	}
+	#results #results-titles #resultText {
+		font-size: 120%
 	}
 	#results h2 {
 		margin: 0.3em 1em 0 0;
 		display: inline-block;
 	}
-	#results #results-titles > div {
+	#results #results-titles > p {
 		display: inline-block;
 	}
 
@@ -72,12 +91,14 @@
 }
 
 #results li {
-	margin: .2em 1em;
+	margin: .2em 1em 0;
 	text-align: center;
 }
+
 #results li a {
 	text-decoration: none;
 }
+
 #results .rule-box {
 	padding: 0 1em;
 	color: #333350;
@@ -87,6 +108,9 @@
 	color: #333350;
 	min-width: 15em;
 }
+#results li:hover .rule-box {
+	background: #ddd;
+}
 #results li.irrelevant .rule-box {
 	background: rgba(255, 255, 255, 0.5);
 }
@@ -132,7 +156,3 @@
 #results li p .figure {
 	font-size: 200%;
 }
-
-#results .understand:hover i {
-	opacity: 1
-}

source/components/Results.js

@@ -22,15 +22,18 @@ export default class Results extends Component {
 		let {analysedSituation, pointedOutObjectives, conversationStarted} = this.props,
 
 			explanation = getObjectives(analysedSituation)
-
 		if (!explanation) return null
 
 		return (
 			<section id="results" className={classNames({started: conversationStarted})}>
 				<div id="results-titles">
-					<h2>Vos obligations</h2>
+					<h2>Vos résultats <i className="fa fa-hand-o-right" aria-hidden="true"></i></h2>
+					{do {let text = R.path(['simulateur', 'résultats'])(analysedSituation)
+						text &&
+							<p id="resultText">{text}</p>
+						}}
 					{conversationStarted &&
-						<div>Cliquez pour comprendre chaque calcul &nbsp;<i className="fa fa-hand-o-right" aria-hidden="true"></i></div>}
+						<p id="understandTip"><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Cliquez pour comprendre chaque calcul</em></p>}
 				</div>
 				<ul>
 					{explanation.map(
@@ -46,7 +49,7 @@ export default class Results extends Component {
 								pointedOut = pointedOutObjectives.find(objective => objective == dottedName)
 
 								;<li key={name} className={classNames({unsatisfied, irrelevant, number, pointedOut})}>
-								<Link to={"/regle/" + encodeRuleName(name)} className="understand">
+								<Link to={"/regle/" + encodeRuleName(name)} >
 									<div className="rule-box">
 										<div className="rule-type">
 											{type}
@@ -65,7 +68,7 @@ export default class Results extends Component {
 										</p>
 									</div>
 								</Link>
-								<div className="pointer">•</div>
+								{/* <div className="pointer">•</div> */}
 							</li>
 						}
 					)}