diff --git a/source/components/Results.css b/source/components/Results.css index d60d847e1..49d9bd658 100644 --- a/source/components/Results.css +++ b/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; diff --git a/source/components/Results.js b/source/components/Results.js index a1f95f2f2..3212686d3 100644 --- a/source/components/Results.js +++ b/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 (
-
-

Vos résultats

- {do {let text = R.path(['simulateur', 'résultats'])(analysedSituation) - text && -

{text}

- }} - {conversationStarted && -

Cliquez pour comprendre chaque calcul

} + {onRulePage && conversationStarted ? +
+ + Reprendre la simulation + +
+ :
+

Vos résultats

+ {do {let text = R.path(['simulateur', 'résultats'])(analysedSituation) + text && +

{text}

+ }} + {conversationStarted && +

Cliquez pour comprendre chaque calcul

}
+ }