Html légal pour afficher les objectifs au choi

source/components/Home.css

@@ -15,86 +15,3 @@
 	width: 100px;
 	margin: 1em;
 }
-
-#home #selection {
-	margin: 6em auto;
-	font-size: 120%;
-	width: 95%;
-	max-width: 860px;
-	text-align: center;
-}
-
-#home #selection h2 {
-	margin: 2em;
-}
-#home #selection ul {
-	text-align: left;
-	margin: 2em auto;
-	width: 80%;
-}
-
-
-#home select option:checked::after {
-	content: '✓';
-	margin-left: 1em;
-	font-size: 150%;
-}
-
-#home select {
-	width: 60%;
-}
-
-
-
-
-
-
-
-
-
-#home #conversionSymbol {
-	font-size: 250%;
-	margin: .6em;
-}
-
-
-#home select {
-	height: 15em;
-}
-
-#home .optionTitle {
-	font-weight: bold;
-	font-size: 120%;
-}
-
-#home option {
-	margin-bottom: .6em;
-}
-
-
-
-
-
-
-
-
-
-
-
-#home button {
-	color: white;
-	display: block;
-	text-align: center;
-	background: #4A89DC;
-	padding: .3em 1em;
-	font-size: 200%;
-	margin: 2em auto;
-	width: 8em;
-	border: none;
-	box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1);
-	opacity: 0.95
-}
-#home button:hover {
-	box-shadow: none;
-	opacity: 1;
-}

source/components/TargetSelection.css

@@ -0,0 +1,66 @@
+
+#targetSelection {
+	margin: 6em auto;
+	font-size: 110%;
+	max-width: 860px;
+}
+
+#targetSelection h2 {
+	margin: 2em;
+}
+#targetSelection ul {
+	text-align: left;
+	margin: 2em auto;
+	width: 80%;
+}
+
+#targetSelection label {
+	display: block;
+	margin-bottom: 1em;
+	display: flex;
+	vertical-align: middle;
+}
+
+
+#targetSelection div {
+	display: inline-block;
+	margin-left: 1em;
+	line-height: .6em;
+}
+
+#targetSelection .optionTitle {
+	font-size: 120%;
+}
+
+#targetSelection input:checked + div {
+	font-weight: bold;
+	color: #333350;
+}
+
+/* TODO styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */
+
+
+
+
+
+
+
+
+
+#targetSelection button {
+	color: white;
+	display: block;
+	text-align: center;
+	background: #4A89DC;
+	padding: .3em 1em;
+	font-size: 200%;
+	margin: 2em auto;
+	width: 8em;
+	border: none;
+	box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1);
+	opacity: 0.95
+}
+#targetSelection button:hover {
+	box-shadow: none;
+	opacity: 1;
+}

source/components/TargetSelection.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { rules } from 'Engine/rules'
 import { propEq, reject } from 'ramda'
 import { Link } from 'react-router-dom'
+import './TargetSelection.css'
 
 export default class TargetSelection extends Component {
 	state = {
@@ -11,7 +12,7 @@ export default class TargetSelection extends Component {
 		let { targets } = this.state
 
 		return (
-			<section id="selection">
+			<section id="targetSelection">
 				<h2>Qu'allons-nous calculer ?</h2>
 				{this.renderOutputList()}
 				{targets.length !== 0 && (
@@ -27,24 +28,25 @@ export default class TargetSelection extends Component {
 		let salaires = rules.filter(propEq('type', 'salaire')),
 			{ targets } = this.state
 		return (
-			<select
-				multiple
-				value={targets}
-				onMouseDown={e => e.target.value != '' &&
-					this.setState({
-						targets: targets.find(t => t === e.target.value)
-							? reject(t => t === e.target.value, targets)
-							: [...targets, e.target.value]
-					})
-				}
-			>
+			<div>
 				{salaires.map(s => (
-					<option key={s.name} value={s.name}>
-						<div className="optionTitle">{s.title || s.name}</div>
-						<span>{s['résumé']}</span>
-					</option>
+					<label key={s.name}>
+						<input
+							type="checkbox"
+							checked={targets.includes(s.name)}
+							onChange={() => this.setState({
+								targets: targets.find(t => t === s.name)
+									? reject(t => t === s.name, targets)
+									: [...targets, s.name]
+							})}
+						/>
+						<div>
+							<span className="optionTitle">{s.title || s.name}</span>
+							<p>{s['résumé']}</p>
+						</div>
+					</label>
 				))}
-			</select>
+			</div>
 		)
 	}
 }