From 4aace4d68d2b3d062d50c49c655d9851f3083f3c Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Wed, 18 Oct 2017 18:32:13 +0200
Subject: [PATCH] =?UTF-8?q?Redesign=20de=20la=20barre=20de=20r=C3=A9sultat?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rémunération-travail/entités/ok/CDD.yaml  |  2 -
 source/components/Results.css                 | 88 ++++---------------
 source/components/Results.js                  | 10 +--
 source/components/rule/RuleValueVignette.css  |  4 +-
 source/components/rule/RuleValueVignette.js   | 14 +--
 source/components/rule/RuleValueVignette2.css | 25 ++++++
 6 files changed, 52 insertions(+), 91 deletions(-)
 create mode 100644 source/components/rule/RuleValueVignette2.css

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 95011a3fa..5f7cfad3d 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
@@ -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
diff --git a/source/components/Results.css b/source/components/Results.css
index d69056534..5b8031333 100644
--- a/source/components/Results.css
+++ b/source/components/Results.css
@@ -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%;
-	}
 
 
 }
diff --git a/source/components/Results.js b/source/components/Results.js
index 80d186787..3dc3fab43 100644
--- a/source/components/Results.js
+++ b/source/components/Results.js
@@ -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>
diff --git a/source/components/rule/RuleValueVignette.css b/source/components/rule/RuleValueVignette.css
index 86c6a2486..ac0fa568d 100644
--- a/source/components/rule/RuleValueVignette.css
+++ b/source/components/rule/RuleValueVignette.css
@@ -1,8 +1,6 @@
 
 .RuleValueVignette {
-	margin: 0 1em 0;
-	text-align: center;
-	width: 25%;
+	margin: 0 1em 0 30%;
 }
 
 .RuleValueVignette li a {
diff --git a/source/components/rule/RuleValueVignette.js b/source/components/rule/RuleValueVignette.js
index 91c7db0c0..43a3f1899 100644
--- a/source/components/rule/RuleValueVignette.js
+++ b/source/components/rule/RuleValueVignette.js
@@ -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>
diff --git a/source/components/rule/RuleValueVignette2.css b/source/components/rule/RuleValueVignette2.css
new file mode 100644
index 000000000..50fb0d760
--- /dev/null
+++ b/source/components/rule/RuleValueVignette2.css
@@ -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;
+}