diff --git a/source/components/Explanation.css b/source/components/Explanation.css
new file mode 100644
index 000000000..c02ccc520
--- /dev/null
+++ b/source/components/Explanation.css
@@ -0,0 +1,7 @@
+#explanation {
+ margin: 6em 0;
+}
+
+#explanation p {
+ text-align: center;
+}
diff --git a/source/components/Explanation.js b/source/components/Explanation.js
index 8b081ccc4..388f76451 100644
--- a/source/components/Explanation.js
+++ b/source/components/Explanation.js
@@ -3,6 +3,7 @@ import ResultsGrid from 'Components/ResultsGrid'
import { salaries } from 'Components/TargetSelection'
import { isEmpty, intersection, head } from 'ramda'
import Rule from 'Components/rule/Rule'
+import './Explanation.css'
export default class Explanation extends Component {
render() {
@@ -10,10 +11,13 @@ export default class Explanation extends Component {
if (!targetRules) return null
+ return {this.renderExplanation(targetRules)}
+ }
+ renderExplanation(targetRules) {
if (!isEmpty(intersection(targetRules, salaries))) return // Problem if targetRules is [salaire net, aides] the Explanation will not explain 'aides'. The user will have to click on Aides to understand it. Should we display a list of sections ?
if (targetRules.length > 1)
- return
L'explication de ces objectifs n'est pas encore disponible
+ return Cliquez sur les lignes de résultat ci-dessus pour les comprendre
return
}
diff --git a/source/components/ResultsGrid.css b/source/components/ResultsGrid.css
deleted file mode 100644
index e1b6045d1..000000000
--- a/source/components/ResultsGrid.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.resultsGrid {
- margin: 6em 0;
-}
diff --git a/source/components/ResultsGrid.js b/source/components/ResultsGrid.js
index 5cb0cde22..9f6181146 100644
--- a/source/components/ResultsGrid.js
+++ b/source/components/ResultsGrid.js
@@ -9,7 +9,6 @@ import { humanFigure } from "./rule/RuleValueVignette"
import { capitalise0 } from "../utils"
import { nameLeaf } from "Engine/rules"
-import "./ResultsGrid.css"
// Filtered variables and rules can't be filtered in a uniform way, for now
diff --git a/source/components/rule/Rule.css b/source/components/rule/Rule.css
index c016bb3eb..bec991f17 100644
--- a/source/components/rule/Rule.css
+++ b/source/components/rule/Rule.css
@@ -2,13 +2,8 @@
font-size: 110%;
height: 100%;
padding-bottom: 10%;
-}
-
-@media screen and (min-width:860px) {
- #rule {
- width: 860px;
- margin: 0 auto;
- }
+ max-width: 45em;
+ margin: 0 auto;
}
#rule-meta {