From 297fdaebd192eadd15732ffcbc792eb4b3e22121 Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Thu, 26 Apr 2018 16:45:56 +0200
Subject: [PATCH] =?UTF-8?q?:art:=20d=C3=A9place=20les=20r=C3=A9ponses=20su?=
 =?UTF-8?q?r=20le=20cot=C3=A9=20droit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

les réponses sont ainsi toutes située du même coté,
et juste à coté du bouton valider
---
 source/components/conversation/Explicable.css |  1 +
 source/components/conversation/Explicable.js  | 16 ++++++++-----
 source/components/conversation/Question.css   |  5 ++++
 source/components/conversation/Question.js    | 10 ++++++--
 .../components/conversation/conversation.css  | 23 +++++++++----------
 5 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 source/components/conversation/Question.css

diff --git a/source/components/conversation/Explicable.css b/source/components/conversation/Explicable.css
index 95ead2a8b..2ffde92a4 100644
--- a/source/components/conversation/Explicable.css
+++ b/source/components/conversation/Explicable.css
@@ -1,5 +1,6 @@
 .explicable {
 	display: flex;
+	justify-content: flex-end;
 	align-items: center;
 }
 
diff --git a/source/components/conversation/Explicable.js b/source/components/conversation/Explicable.js
index a82370f31..61559fd28 100644
--- a/source/components/conversation/Explicable.js
+++ b/source/components/conversation/Explicable.js
@@ -19,7 +19,13 @@ import ReactPiwik from '../Tracker'
 )
 export default class Explicable extends React.Component {
 	render() {
-		let { flatRules, dottedName, explain, explained, textColourOnWhite } = this.props
+		let {
+			flatRules,
+			dottedName,
+			explain,
+			explained,
+			textColourOnWhite
+		} = this.props
 
 		// Rien à expliquer ici, ce n'est pas une règle
 		if (dottedName == null) return this.props.children
@@ -34,8 +40,7 @@ export default class Explicable extends React.Component {
 			<span
 				className={classNames('explicable', {
 					explained: dottedName === explained
-				})}
-			>
+				})}>
 				{this.props.children}
 				<span
 					className="icon"
@@ -51,10 +56,9 @@ export default class Explicable extends React.Component {
 									opacity: 1,
 									background: textColourOnWhite,
 									color: 'white'
-								}
+							  }
 							: { color: textColourOnWhite }
-					}
-				>
+					}>
 					<i className="fa fa-book" aria-hidden="true" />
 				</span>
 			</span>
diff --git a/source/components/conversation/Question.css b/source/components/conversation/Question.css
new file mode 100644
index 000000000..e4fc34dcb
--- /dev/null
+++ b/source/components/conversation/Question.css
@@ -0,0 +1,5 @@
+.binaryQuestionList {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
diff --git a/source/components/conversation/Question.js b/source/components/conversation/Question.js
index f0d5c4175..cd8acaf5a 100644
--- a/source/components/conversation/Question.js
+++ b/source/components/conversation/Question.js
@@ -6,6 +6,7 @@ import HoverDecorator from '../HoverDecorator'
 import Explicable from './Explicable'
 import { is } from 'ramda'
 import SendButton from './SendButton'
+import './Question.css'
 /* Ceci est une saisie de type "radio" : l'utilisateur choisit une réponse dans une liste, ou une liste de listes.
 	Les données @choices sont un arbre de type:
 	- nom: motif CDD # La racine, unique, qui formera la Question. Ses enfants sont les choix possibles
@@ -28,7 +29,12 @@ import SendButton from './SendButton'
 @translate()
 export default class Question extends Component {
 	render() {
-		let { choices, submit, themeColours, meta: { pristine } } = this.props
+		let {
+			choices,
+			submit,
+			themeColours,
+			meta: { pristine }
+		} = this.props
 		let choiceElements = is(Array)(choices)
 			? this.renderBinaryQuestion()
 			: this.renderChildren(choices)
@@ -56,7 +62,7 @@ export default class Question extends Component {
 		} = this.props
 
 		return (
-			<ul>
+			<ul className="binaryQuestionList">
 				{choices.map(({ value, label }) => (
 					<RadioLabel
 						key={value}
diff --git a/source/components/conversation/conversation.css b/source/components/conversation/conversation.css
index 7d7530f2d..a2c80964c 100644
--- a/source/components/conversation/conversation.css
+++ b/source/components/conversation/conversation.css
@@ -1,13 +1,14 @@
 .scrollIndication {
-    margin: .6em;
-	text-align: center
+	margin: 0.6em;
+	text-align: center;
 }
 
 .scrollIndication.down {
-		margin-bottom: 1em;}
+	margin-bottom: 1em;
+}
 
 #foldedSteps {
-	padding: 1em 0 ;
+	padding: 1em 0;
 	margin-bottom: 1em;
 }
 
@@ -21,18 +22,17 @@
 	vertical-align: top;
 }
 
-#foldedSteps button  {
-  
+#foldedSteps button {
 	border: none;
 	font-weight: 500;
 }
 
 #myScrollToElement {
-    padding-top: .3em
+	padding-top: 0.3em;
 }
 
 #currentQuestion {
-    margin-bottom: 4em;
+	margin-bottom: 4em;
 }
 
 .step {
@@ -52,7 +52,7 @@
 }
 
 .unfoldedHeader {
-	margin-bottom: 2em;
+	margin-bottom: 1em;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -155,7 +155,7 @@
 }
 .step.question .variantLeaf.aucun label {
 	font-weight: 800;
-    text-decoration: underline;
+	text-decoration: underline;
 }
 
 .step.question .sendWrapper {
@@ -202,7 +202,7 @@
 
 .step input[type='text'] {
 	border-bottom: 1px solid;
-	border-radius: .3em;
+	border-radius: 0.3em;
 	display: inline-block;
 	line-height: 1.6em;
 	height: 1.6em; /* IE 11 needs this */
@@ -405,7 +405,6 @@ for the appearing element to appear without stacking up below the first one */
 	margin: auto;
 }
 
-
 .foldedQuestion {
 	margin-left: 1.2em;
 }