From 82aeb010c31bd6ed0c7167f827c4189d04ffa43c Mon Sep 17 00:00:00 2001
From: opi <opi@no-log.org>
Date: Fri, 5 Dec 2014 18:49:15 +0100
Subject: [PATCH] =?utf8?q?Am=C3=A9lioration=20du=20formulaire=20FDN.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 Donnez.html | 61 +++++++++++++++++++++++++----------------------------
 local.css   | 23 ++++++++++++++++----
 2 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/Donnez.html b/Donnez.html
index 2c415d0..5575d7e 100644
--- a/Donnez.html
+++ b/Donnez.html
@@ -30,36 +30,16 @@
   le site <code>secure.fdn2.org</code>.
 </p>
 
-<form method="get" action="https://secure.fdn2.org/fdn2/nouser">
-  <div>
-    <div>
-      <input type="radio" name="px" id="amount-10" value="10"
-      /><label for="amount-10">10 €</label>
-    </div>
-    <div>
-      <input type="radio" name="px" id="amount-25" value="25"
-      /><label for="amount-25">25 €</label>
-    </div>
-    <div>
-      <input type="radio" name="px" id="amount-50" value="50"
-      /><label for="amount-50">50 €</label>
-    </div>
-    <div>
-      <input type="radio" name="px" id="amount-100" value="100"
-      /><label for="amount-100">100 €</label>
-    </div>
-    <div>
-      <input type="radio" name="px" id="amount-250" value="250"
-      /><label for="amount-250">250 €</label>
-    </div>
-    <div>
-      <input type="radio" name="amount" id="amount-custom" value=""
-      /><label for="amount-custom">Autre</label><!-- XXX: need some support code,
-      <label for="custom-amount">montant :</label
-      > <input type="text" name="custom-amount" id="custom-amount" />
-      -->
-    </div>
-  </div>
+<form method="get" class="fdn-form" action="https://secure.fdn2.org/fdn2/nouser">
+  <select name="px" id="px">
+    <option value="10">10 €</option>
+    <option value="25">25 €</option>
+    <option value="50">50 €</option>
+    <option value="100">100 €</option>
+    <option value="250">250 €</option>
+    <option value="">Autre</option>
+  </select>
+  <input type="text" name="custom-amount" id="custom-amount" />
   <!-- XXX: need some support code
   <div>
     <input type="checkbox" name="recurring" id="reccuring" value="true" />
@@ -67,11 +47,28 @@
     (<em>banque française seulement</em>).</label>
   </div>
   -->
-  <div>
     <input type="hidden" name="lang" value="fr" />
     <input type="hidden" name="dest" value="oignon" />
     <input type="submit" name="submit" id="submit" value="Soutenez le réseau Tor…" />
-  </div>
+    <script type="text/javascript">
+    var px = document.querySelector('#px'),
+        customAmount = document.querySelector('#custom-amount');
+    px.addEventListener('change',function(){
+      // Update input name to prefill FDN form
+      if (px.value) {
+        px.name = "px";
+        customAmount.name = "custom-amount";
+        customAmount.value = "";
+        customAmount.style.display = "none";
+
+      }
+      else {
+        customAmount.style.display = "inline-block";
+        customAmount.name = "px";
+        px.name = "dummy_px";
+      }
+    });
+    </script>
 </form>
 
 <h3>Par virement</h3>
diff --git a/local.css b/local.css
index 28b9137..aee5a4c 100644
--- a/local.css
+++ b/local.css
@@ -388,15 +388,30 @@ thead td {
   background: lightGrey url(assets/progress_bar.png) top left repeat-x;
   border: 1px solid #ccc;
 }
-.progress-bar-wrapper .progress-bar {
-  height: 85px;
-  background: grey url(assets/progress_bar.png) bottom left repeat-x;
-}
+  .progress-bar-wrapper .progress-bar {
+    height: 85px;
+    background: grey url(assets/progress_bar.png) bottom left repeat-x;
+  }
 .section-progress-text {
   width: 47.5%;
   padding-left: 2%;
 }
 
+/* FDN Form */
+.fdn-form {}
+  .fdn-form select,
+  .fdn-form input {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 1em;
+    height: 26px;
+  }
+  .fdn-form #custom-amount {
+    display:none;
+    height: 22px;
+  }
+
+
 
 /* {{{ .inlinepage */
 
-- 
2.39.5