From 78969028de032a22c39efaa90e353573f43d5ee3 Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Tue, 30 May 2017 11:08:10 +0200
Subject: [PATCH] =?UTF-8?q?:art:=20Am=C3=A9lioration=20de=20la=20barre=20d?=
 =?UTF-8?q?es=20r=C3=A9sultats?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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é
---
 index.html                                    |   2 +-
 .../rémunération-travail/entités/ok/CDD.yaml  |   2 +-
 source/components/Results.css                 | 178 ++++++++++--------
 source/components/Results.js                  |  14 +-
 source/components/Simulateur.js               |   3 -
 5 files changed, 108 insertions(+), 91 deletions(-)

diff --git a/index.html b/index.html
index c4fd8a24c..b420b193a 100644
--- a/index.html
+++ b/index.html
@@ -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>
 
diff --git a/règles/rémunération-travail/entités/ok/CDD.yaml b/règles/rémunération-travail/entités/ok/CDD.yaml
index 749d3d7d9..335535c13 100644
--- a/règles/rémunération-travail/entités/ok/CDD.yaml
+++ b/règles/rémunération-travail/entités/ok/CDD.yaml
@@ -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
diff --git a/source/components/Results.css b/source/components/Results.css
index 927a24c3c..7c296dd3e 100644
--- a/source/components/Results.css
+++ b/source/components/Results.css
@@ -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%;
 }
diff --git a/source/components/Results.js b/source/components/Results.js
index 1d44b16f4..1ed9c3f60 100644
--- a/source/components/Results.js
+++ b/source/components/Results.js
@@ -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>
diff --git a/source/components/Simulateur.js b/source/components/Simulateur.js
index 809dec225..b9d57e7c4 100644
--- a/source/components/Simulateur.js
+++ b/source/components/Simulateur.js
@@ -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>