Pendant la sim, navigation possible de /regle à /simu

La règle explorée est mise en valeur (bleu)

source/components/Results.css

@@ -7,6 +7,7 @@
 	padding: .6em 0;
 	text-align: center;
 	width: 100%;
+	height: 10em;
 	position: fixed;
 	bottom: 0;
 	left: 0;
@@ -18,30 +19,53 @@
 }
 
 
-#results #results-titles {
-	color: white;
-	width: 18%;
+#results-actions,
+#results-titles {
 	display: inline-block;
 	float: left;
-	line-height: 1.2em;
+	width: 18%;
 	margin: 0;
-	margin-left: .5em;
 	padding: 0 1em;
+}
+
+#results-actions {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	height: 100%;
+}
+
+#toSimulation {
+	font-size: 190%;
+	color: white;
+	background: #4A89DC;
+	padding: .6em .6em;
+	text-decoration: none;
+	border-radius: .2em;
+	position: relative;
+}
+#toSimulation i {
+	margin-right: .6em;
+}
+
+#results-titles {
+	color: white;
+	line-height: 1.2em;
 	font-weight: 400;
 	font-size: 120%;
 	text-align: left;
 }
-#results #results-titles h2 {
+#results-titles h2 {
 	font-size: 250%;
 	margin: .4em 0;
 }
-#results #results-titles p {
+#results-titles p {
 	color: inherit;
 }
-#results #results-titles i {
+#results-titles i {
 	margin: 0 .3em;
 }
-#results #resultText {
+#resultText {
 	font-weight: 600;
 	font-size: 100%;
 }
@@ -56,7 +80,7 @@
 	width: 80%;
 	list-style: none;
 	padding-left: 0;
-	margin-bottom: 0;
+	margin: 0;
 }
 
 
@@ -64,24 +88,24 @@
 	#results {
 		padding: 0;
 	}
-	#results #results-titles {
+	#results-titles {
 		width: 100%;
 		text-align: center;
 	}
-	#results #results-titles p {
+	#results-titles p {
 		margin-right: 3em;
 	}
-	#results #results-titles h2 {
+	#results-titles h2 {
 		display: none;
 	}
-	#results #results-titles #resultText {
+	#results-titles #resultText {
 		font-size: 120%
 	}
 	#results h2 {
 		margin: 0.3em 1em 0 0;
 		display: inline-block;
 	}
-	#results #results-titles > p {
+	#results-titles > p {
 		display: inline-block;
 	}
 
@@ -91,7 +115,7 @@
 }
 
 #results li {
-	margin: .2em 1em 0;
+	margin: 1.4em 1em 0;
 	text-align: center;
 }
 
@@ -108,19 +132,26 @@
 	color: #333350;
 	min-width: 15em;
 }
-#results li:hover .rule-box {
+#results li:not(.pointedOut):hover .rule-box {
 	background: #ddd;
 }
 #results li.irrelevant .rule-box {
 	background: rgba(255, 255, 255, 0.35);
 }
-#results li .pointer {
-	font-size: 300%;
-	line-height: .6em;
-	visibility: hidden;
+
+#results li.pointedOut:not(.irrelevant) .rule-name {
+	color: #4A89DC;
 }
-#results li.pointedOut .pointer {
-	visibility: visible;
+#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;

source/components/Results.js

@@ -2,14 +2,17 @@ import React, { Component } from 'react'
 import classNames from 'classnames'
 import {Link} from 'react-router-dom'
 import {connect} from 'react-redux'
+import { withRouter } from 'react-router'
 import R from 'ramda'
 import './Results.css'
 import {capitalise0} from '../utils'
-import {computeRuleValue} from '../engine/traverse'
-import {encodeRuleName, getObjectives} from '../engine/rules'
+import {computeRuleValue} from 'Engine/traverse'
+import {encodeRuleName, getObjectives} from 'Engine/rules'
 
 let fmt = new Intl.NumberFormat('fr-FR').format
 let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
+
+@withRouter
 @connect(
 	state => ({
 		pointedOutObjectives: state.pointedOutObjectives,
@@ -19,22 +22,35 @@ let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
 )
 export default class Results extends Component {
 	render() {
-		let {analysedSituation, pointedOutObjectives, conversationStarted} = this.props,
-
+		let {
+			analysedSituation,
+			pointedOutObjectives,
+			conversationStarted,
+			location
+		} = this.props,
 			explanation = getObjectives(analysedSituation)
+
 		if (!explanation) return null
 
+		let onRulePage = R.contains('/regle/')(location.pathname)
 		return (
 			<section id="results" className={classNames({started: conversationStarted})}>
-				<div id="results-titles">
-					<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 &&
-						<p id="understandTip"><i className="fa fa-lightbulb-o" aria-hidden="true"></i><em>Cliquez pour comprendre chaque calcul</em></p>}
+				{onRulePage && conversationStarted ?
+					<div id ="results-actions">
+						<Link id="toSimulation" to={"/simu/" + encodeRuleName(analysedSituation.name)}>
+							<i className="fa fa-arrow-circle-left" aria-hidden="true"></i>Reprendre la simulation
+						</Link>
+					</div>
+				: <div id="results-titles">
+						<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 &&
+							<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(
 						({name, dottedName, type, 'non applicable si': nonApplicable, formule: {nodeValue: formuleValue}}) =>
@@ -46,7 +62,9 @@ export default class Results extends Component {
 								nonApplicableValue = nonApplicable ? nonApplicable.nodeValue : false,
 								irrelevant = nonApplicableValue === true || formuleValue == 0,
 								number = nonApplicableValue == false && formuleValue != null,
-								pointedOut = pointedOutObjectives.find(objective => objective == dottedName)
+								pointedOut =
+									pointedOutObjectives.find(objective => objective == dottedName)
+								|| R.contains(encodeRuleName(name))(location.pathname)
 
 								;<li key={name} className={classNames({unsatisfied, irrelevant, number, pointedOut})}>
 								<Link to={"/regle/" + encodeRuleName(name)} >