From d05403f641b5fe9fecc1594cf70123b34d365a9e Mon Sep 17 00:00:00 2001
From: Adrien Bourmault <neox@a-lec.org>
Date: Thu, 5 May 2022 15:21:31 +0200
Subject: [PATCH] Passage en flex

---
 index.php  | 10 +++++++++-
 styles.css | 42 +++++++++++++++++++++++++++---------------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/index.php b/index.php
index 154f00c..0691013 100644
--- a/index.php
+++ b/index.php
@@ -95,9 +95,17 @@
                     echo "<input class=\"renseignements\" type=\"text\" id=\"prenom\" name=\"prenom\" required/>";
                 echo "</div>";
                 echo "<div class=\"formline\">";
-                    echo "<label class=\"labels\" for=\"adresse\">Adresse postale</label>";
+                    echo "<label class=\"labels\" for=\"adresse\">Adresse</label>";
                     echo "<input class=\"renseignements\" type=\"text\" id=\"adresse\" name=\"adresse\" required/>";
                 echo "</div>";
+                echo "<div class=\"formline\">";
+                    echo "<label class=\"labels\" for=\"codepostal\">Code postal</label>";
+                    echo "<input class=\"renseignements\" type=\"number\" id=\"codepostal\" name=\"codepostal\" required/>";
+                echo "</div>";
+                echo "<div class=\"formline\">";
+                    echo "<label class=\"labels\" for=\"ville\">Ville</label>";
+                    echo "<input class=\"renseignements\" type=\"text\" id=\"ville\" name=\"ville\" required/>";
+                echo "</div>";
                 echo "<div class=\"formline\">";
                     echo "<label class=\"labels\" for=\"mail\">Courriel<b>actuel</b></label>";
                     echo "<input class=\"renseignements\" type=\"email\" id=\"mail\" name=\"mail\" required/>";
diff --git a/styles.css b/styles.css
index 6b13060..8325be7 100644
--- a/styles.css
+++ b/styles.css
@@ -610,8 +610,24 @@ h1,h2,h3,h4,h5,h6 {
 
 .formbox {
    display: flex;
-   flex-flow:  row wrap;
-   align-content: flex-start;
+   flex-direction:  column;
+   text-justify: none;
+}
+
+.formline {
+   display: flex;
+   flex-direction:  row;
+   flex-wrap: wrap;
+   padding: 10px;
+}
+
+.labels {
+   flex-basis: 50%;
+}
+
+.renseignements, .mode, .captcha_inputs, .mode_radio {
+   flex-basis: 50%;
+   padding: 5px;
 }
 
 .renseignements {
@@ -621,6 +637,14 @@ h1,h2,h3,h4,h5,h6 {
   color: black;
 }
 
+.captcha_inputs {
+   all: revert;
+   display: flex;
+   flex-direction: column;
+   flex-wrap: nowrap;
+   justify-content: center;
+}
+
 .renseignements:focus {
   border-bottom: 2px solid var(--a-lec_blue);
   border-radius: 3px;
@@ -634,6 +658,7 @@ h1,h2,h3,h4,h5,h6 {
   font-weight: bold;
   border: none;
   cursor: pointer;
+  padding: 5px;
 }
 
 .validation:focus {
@@ -644,13 +669,6 @@ h1,h2,h3,h4,h5,h6 {
   box-shadow: none;
 }
 
-.inputs img {
-   all: unset;
-   margin-top: 20px;
-   margin-left: 10px;
-   width: 30vh;
-}
-
 input[type=radio] {
   all: revert;
 }
@@ -675,12 +693,6 @@ input[type=checkbox] {
   .mode_radio span {
     display: block;
   }
-   
-   form {
-        margin-right: auto;
-        margin-left: auto;
-        width: 50%;
-   }
 }