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

---
 index.php  | 62 +++++++++++++++++++++++++++++++++++++-----------------
 styles.css | 16 ++------------
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/index.php b/index.php
index 6b5e664..154f00c 100644
--- a/index.php
+++ b/index.php
@@ -84,17 +84,28 @@
 
         echo "<form action=\"" . htmlspecialchars($_SERVER['PHP_SELF']) . "\" method=\"post\">";
             echo "<div class=\"formbox\">";
-                echo "<input type=\"hidden\" id=\"captcha_value\" name=\"captcha_value\" value=\"" . $captcha_value . "\">";
-                echo "<label class=\"labels\" for=\"nom\">Nom</label>";
-                echo "<input class=\"renseignements\" type=\"text\" id=\"nom\" name=\"nom\" required>";
-                echo "<label class=\"labels\" for=\"prenom\">Prénom(s)</label>";
-                echo "<input class=\"renseignements\" type=\"text\" id=\"prenom\" name=\"prenom\" required/>";
-                echo "<label class=\"labels\" for=\"adresse\">Adresse postale</label>";
-                echo "<input class=\"renseignements\" type=\"text\" id=\"adresse\" name=\"adresse\" required/>";
-                echo "<label class=\"labels\" for=\"mail\">Courriel<b>actuel</b></label>";
-                echo "<input class=\"renseignements\" type=\"email\" id=\"mail\" name=\"mail\" required/>";
-                echo "<label class=\"labels\" for=\"mailconfirm\">Courriel<b>actuel</b>(confirmation)</label>";
-                echo "<input class=\"renseignements\" type=\"email\" id=\"mailconfirm\" name=\"mailconfirm\" required/>";
+                    echo "<input type=\"hidden\" id=\"captcha_value\" name=\"captcha_value\" value=\"" . $captcha_value . "\">";
+                echo "</div>";
+                echo "<div class=\"formline\">";
+                    echo "<label class=\"labels\" for=\"nom\">Nom</label>";
+                    echo "<input class=\"renseignements\" type=\"text\" id=\"nom\" name=\"nom\" required>";
+                echo "</div>";
+                echo "<div class=\"formline\">";
+                    echo "<label class=\"labels\" for=\"prenom\">Prénom(s)</label>";
+                    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 "<input class=\"renseignements\" type=\"text\" id=\"adresse\" name=\"adresse\" 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/>";
+                echo "</div>";
+                echo "<div class=\"formline\">";
+                    echo "<label class=\"labels\" for=\"mailconfirm\">Courriel<b>actuel</b>(confirmation)</label>";
+                    echo "<input class=\"renseignements\" type=\"email\" id=\"mailconfirm\" name=\"mailconfirm\" required/>";
+                echo "</div>";
             echo "</div>";
           
           echo "<br/><p class=\"a-lec_paragraph\">Un courriel est fourni par l’association à chacun de ses membres. C’est cette adresse qui sera contactée par l’association pour les invitations aux Assemblées Générales et toute information liée à l’association. Si vous ne comptez pas utiliser ce courriel, vous pouvez opter pour une redirection du courrier entrant à l’adresse que vous aurez choisie vers un mail personnel de votre de choix, en
@@ -103,28 +114,39 @@ remplissant le champ Redirection.</p>";
           echo "<p class=\"a-lec_paragraph\">Nous proposons également à nos membre de posséder un compte sur notre serveur XMPP afin de faciliter la présence dans nos salons où se déroulent la majorité des activités des commissions et projets de l'association. Votre compte aura la même adresse que votre courriel<b>@a-lec.org</b>.</p><br/>";
 
             echo "<div class=\"formbox\">";
-                echo "<label class=\"labels\" for=\"mailalec\">Courriel<b>@a-lec.org</b>désiré</label>";
-                echo "<input class=\"renseignements\" type=\"email\" id=\"mailalec\" name=\"mailalec\" required/>";
-                echo "<label class=\"labels\" for=\"rediralec\">Redirection vers courriel personnel</label>";
-                echo "<input class=\"mode\" type=\"checkbox\" id=\"rediralec\" name=\"rediralec\"/>";
-                echo "<label class=\"labels\" for=\"xmppalec\">Compte XMPP<b>@a-lec.org</b></label>";
-                echo "<input class=\"mode\" type=\"checkbox\" id=\"xmppalec\" name=\"xmppalec\"/>";
+                echo "<div class=\"formline\">";
+                    echo "<label class=\"labels\" for=\"mailalec\">Courriel<b>@a-lec.org</b>désiré</label>";
+                    echo "<input class=\"renseignements\" type=\"email\" id=\"mailalec\" name=\"mailalec\" required/>";
+                echo "</div>";
+                echo "<div class=\"formline\">";
+                    echo "<label class=\"labels\" for=\"rediralec\">Redirection vers courriel personnel</label>";
+                    echo "<input class=\"mode\" type=\"checkbox\" id=\"rediralec\" name=\"rediralec\"/>";
+                echo "</div>";
+                echo "<div class=\"formline\">";
+                    echo "<label class=\"labels\" for=\"xmppalec\">Compte XMPP<b>@a-lec.org</b></label>";
+                    echo "<input class=\"mode\" type=\"checkbox\" id=\"xmppalec\" name=\"xmppalec\"/>";
+                echo "</div>";
             echo "</div>";
           
           echo "<br/><p class=\"a-lec_paragraph\">Les membres de plein droit versent une cotisation annuelle de 20€. Les personnes dont les ressources sont limitées peuvent bénéficier d’une réduction de 10€. Les membres sont libres d’augmenter ou diminuer le montant de leur cotisation chaque année.</p><br/>";
           
             echo "<div class=\"formbox\">";
+                echo "<div class=\"formline\">";
                     echo "<label class=\"labels\" for=\"cotisation\">Cotisation annuelle</label>";
                     echo "<span class=\"mode_radio\">";
                         echo "<span><input class=\"mode\" type=\"radio\" id=\"cotisation\" name=\"cotisation\" value=\"tarif normal\" required>tarif normal (20€)</input></span>";
                         echo "<span><input class=\"mode\" type=\"radio\" id=\"cotisation\" name=\"cotisation\" value=\"tarif réduit\" required>tarif réduit (10€)</input></span>";
                     echo "</span>";
+                echo "</div>";
+                echo "<div class=\"formline\">";
                     echo "<label class=\"labels\" for=\"mode\">Mode de versement</label>";
                     echo "<span class=\"mode_radio\">";
                         echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"virement bancaire\" required>virement bancaire</input></span>";
                         echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"espèces\" required>espèces</input></span>";
                         echo "<span><input class=\"mode\" type=\"radio\" id=\"mode\" name=\"mode\" value=\"chèque\" required>chèque</input></span>";
                     echo "</span>";
+                echo "</div>";
+                echo "<div class=\"formline\">";
                     echo "<label class=\"labels\" for=\"captcha\">Captcha</label>";
                     echo "<div class=\"captcha_inputs\">";
                         echo "<img src=\"" . data_uri($captcha_data, 'image/png') . "\" alt=\"Captcha à résoudre\" style=\"display:table-cell;text-align:right;\"/>";
@@ -136,8 +158,10 @@ remplissant le champ Redirection.</p>";
           echo "<br/><p class=\"a-lec_paragraph\">En cliquant sur <b>Valider</b>, j’atteste sur l’honneur que les informations précédemment renseignées sont exactes.</p><p class=\"a-lec_paragraph\">J’atteste sur l’honneur être âgé de 12 ans au moins.</p><p class=\"a-lec_paragraph\">Une autorisation parentale signée est nécessaire pour les mineurs adhérant. Vous pouvez l'envoyer par courriel à <b>secretaire@a-lec.org</b></p><br/>";
           
           echo "<div class=\"formbox\">";
-            echo "<label class=\"labels\"><br/></label>";
-            echo "<input class=\"validation\" type=\"submit\" value=\"Valider\">";
+            echo "<div class=\"formline\">";
+                echo "<label class=\"labels\"><br/></label>";
+                echo "<input class=\"validation\" type=\"submit\" value=\"Valider\">";
+            echo "</div>";
           echo "</div>";
         echo "</form>";
     }
diff --git a/styles.css b/styles.css
index 0ab4c97..6b13060 100644
--- a/styles.css
+++ b/styles.css
@@ -610,20 +610,8 @@ h1,h2,h3,h4,h5,h6 {
 
 .formbox {
    display: flex;
-   flex-direction: row;
-   flex-wrap: nowrap;
-    justify-content: center;
-}
-
-.labels, .inputs{
-   display: flex;
-   flex-direction: column;
-   flex-wrap: nowrap;
-   justify-content: space-around;
-}
-
-.mode {
-  display: table-cell;
+   flex-flow:  row wrap;
+   align-content: flex-start;
 }
 
 .renseignements {