From cb6979926d282129cee11c56b352e46a97c58f14 Mon Sep 17 00:00:00 2001
From: newick <erick@entre-quote.com>
Date: Fri, 6 Sep 2019 11:44:52 +0200
Subject: [PATCH] added flex-line

---
 .../form-container.component.html             | 84 +++++--------------
 src/assets/scss/molecules/_flex-line.scss     | 11 +++
 src/styles.scss                               |  1 +
 3 files changed, 35 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/scss/molecules/_flex-line.scss

diff --git a/src/app/form-container/form-container.component.html b/src/app/form-container/form-container.component.html
index 543ef980..c90e354b 100644
--- a/src/app/form-container/form-container.component.html
+++ b/src/app/form-container/form-container.component.html
@@ -4,82 +4,44 @@
 	<h1 i18n>
 		Pour commencer
 	</h1>
-	<span
-		  class="pre-selector"
-		  i18n
-	>
-	  Je veux créer un sondage
-	  </span>
-	<select
-		  id="selector"
-		  name="selector"
-		  autofocus="autofocus"
-		  [(ngModel)]="config.pollType"
-	>
-		<option value="dates">
-			spécial dates
-		</option>
-		<option value="classic">
-			classique
-		</option>
-	</select>
-	<span class="post-selector">
-  </span>
 
-	<div>
+	<div class="flex-line">
+		<span class="pre-selector" i18n>
+			Je veux créer un sondage
+		</span>
+		<select id="selector" name="selector" autofocus="autofocus" [(ngModel)]="config.pollType">
+			<option value="dates">
+				spécial dates
+			</option>
+			<option value="classic">
+				classique
+			</option>
+		</select>
+	</div>
 
-		<label
-			  for="poll_title"
-			  class="title-label"
-			  i18n
-		>
+	<div class="flex-line">
+		<label for="poll_title" class="title-label" i18n>
 			Dont le titre sera
 		</label>
-		<input
-			  type="text"
-			  id="poll_title"
-			  name="poll_title"
-			  [(ngModel)]="config.title"
-		>
+		<input type="text" id="poll_title" name="poll_title" [(ngModel)]="config.title">
 
 	</div>
 
 	<div>
-
-		<label
-			  for="poll_description"
-			  class="title-label"
-			  i18n
-		>
+		<label for="poll_description" class="title-label" i18n>
 			et la description serait
 		</label>
-		<textarea
-			  id="poll_description"
-			  name="poll_description"
-			  [(ngModel)]="config.description"
-			  cols="50"
-			  lines="5"
-				
-		></textarea>
+		<textarea id="poll_description" name="poll_description" [(ngModel)]="config.description" cols="50"
+			lines="5"></textarea>
 
 	</div>
-	<div>
+	<div class="flex-line">
 		<label for="my_name">
 			Je peux aussi préciser mon nom si je le souhaite :
 		</label>
-		<input
-			  type="text"
-			  name="my_name"
-			  id="my_name"
-			  [(ngModel)]="config.myName"
-		>
+		<input type="text" name="my_name" id="my_name" [(ngModel)]="config.myName">
 	</div>
-	<a
-		  [routerLink]="'/step/answers'"
-		  class="btn btn-block"
-		  i18n
-	>
+	<a [routerLink]="'/step/answers'" class="btn btn-block" i18n>
 		Continuer
 	</a>
-	<hr>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/assets/scss/molecules/_flex-line.scss b/src/assets/scss/molecules/_flex-line.scss
new file mode 100644
index 00000000..296d6b1b
--- /dev/null
+++ b/src/assets/scss/molecules/_flex-line.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+.flex-line {
+    display: flex;
+    align-items: center;
+
+    & > input,
+    & > select {
+        flex-grow: 1;
+    }
+}
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 28ab950a..8008fc10 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -15,3 +15,4 @@
 
 @import "assets/scss/molecules/logo";
 @import "assets/scss/molecules/debug";
+@import "assets/scss/molecules/flex-line";