From 60f9d41f48630c238393893a70f99b63af73c638 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexis=20M=C3=83taireau?= <alexis@notmyidea.org>
Date: Sun, 7 Jun 2020 17:34:57 +0200
Subject: [PATCH] Enhance the style of the forms. Fixes #13

---
 .../templates/products/edit_producer.html     | 44 ++++++++---------
 copanier/templates/products/edit_product.html | 47 ++++++++++---------
 2 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/copanier/templates/products/edit_producer.html b/copanier/templates/products/edit_producer.html
index 9b09055..8c86bb3 100644
--- a/copanier/templates/products/edit_producer.html
+++ b/copanier/templates/products/edit_producer.html
@@ -30,38 +30,40 @@
 {% if producer and producer.needs_price_update(delivery) %}
 <p class="notification info">Les prix pour {{ producer.name }} ont besoin d'être validés.</p>
 {% endif %}
-<form method="post">
+<form method="post" class="pure-form pure-form-aligned">
+    <fieldset>
     {% if producer.id %}
     <input type="hidden" name="id" value="{{ producer.id }}">
     {% else %}
-    <label>
-        <p>Nom</p>
-        <input type="text" name="name" value="{{ producer.name or '' }}">
-    </label>
+    <div class="pure-control-group">
+        <label for="name">Nom</label>
+        <input id="name" type="text" name="name" value="{{ producer.name or '' }}" required>
+    </div>
     {% endif %}
-    <label>
-        <h5>Description</h5>
+    <div class="pure-control-group">
+        <label>Description</label>
         <input type="text" name="description" value="{{ producer.description or '' }}">
-    </label>
-    <label>
-        <p>Email de la personne référente</p>
+    </div>
+    <div class="pure-control-group">
+        <label>Email référent⋅e</label>
         <input type="email" name="referent" value="{{ producer.referent or '' }}" required>
-    </label>
-    <label>
-        <p>Nom de la personne référente</p>
+    </div>
+    <div class="pure-control-group">
+        <label>Nom référent⋅e</label>
         <input type="text" name="referent_name" value="{{ producer.referent_name or '' }}" required>
-    </label>
-    <label>
-        <p>Téléphone de la personne référente</p>
+    </div>
+    <div class="pure-control-group">
+        <label>Téléphone référent⋅e</label>
         <input type="tel" name="referent_tel" value="{{ producer.referent_tel or '' }}" required>
-    </label>
-    <label>
-        <h5>Contact product⋅eur⋅rice</h5>
+    </div>
+    <div class="pure-control-group">
+        <label>Contact producteur⋅rice</label>
         <input type="text" name="contact" value="{{ producer.contact or '' }}">
-    </label>
-    <div>
+    </div>
+    <div class="pure-controls">
         <input type="submit" name="submit" value="Valider" class="primary">
     </div>
+    </fieldset>
 </form>
 
 {% if delivery.shipping.get(producer.id) %}
diff --git a/copanier/templates/products/edit_product.html b/copanier/templates/products/edit_product.html
index c270f50..f5e330c 100644
--- a/copanier/templates/products/edit_product.html
+++ b/copanier/templates/products/edit_product.html
@@ -19,39 +19,44 @@
     {% endif %}
 </div>
 
-<form method="post">
-    <label>
-        <p>Nom</p>
+<form method="post" class="pure-form pure-form-aligned">
+    <fieldset>
+    
+    <div class="pure-control-group">
+        <label>Nom</label>
         <input type="text" name="name" value="{{ product.name or '' }}" required>
-    </label>
-    <label>
-        <p>Prix (en €), pour une unité</p>
-        <input type="number" step="0.001" name="price" value="{{ product.price or '' }}" required>
-    </label>
-    <label>
-        <p>Unité de commande</p>
+    </div>
+    <div class="pure-control-group">
+        <label>Unité de commande</label>
         <input type="text" name="unit" placeholder="sachet de 200g" value="{{ product.unit or '' }}" required>
-    </label>
-    <label>
-        <h5>Description du produit</h5>
+    </div>
+    <div class="pure-control-group">
+        <label>Prix</label>
+        <input type="number" step="0.001" name="price" value="{{ product.price or '' }}" required>
+        <span class="pure-form-message-inline">En euros (TTC), pour une unité</span>
+    </div>
+    <div class="pure-control-group">
+        <label>Description</label>
         <input type="text" name="description" placeholder="Bière type American Pale Ale" value="{{ product.description or '' }}">
-    </label>
+    </div>
     <br />
-    <label>
-        Produit actuellement en rupture ?
+    <div class="pure-control-group">
+        <label>Rupture de stock ?</label>
         <input type="checkbox" name="rupture" value="RUPTURE" {% if product.rupture %}checked="true"{% endif %}>
-    </label>
+    </div>
     <br />
-    {% set body %}
+    
+        
+    <div class="pure-controls">
+        <input type="submit" name="submit" value="Valider" class="primary">
+        {% set body %}
     <h3>Conditionnement</h3>
         <h5><strong>A indiquer uniquement si ces produits ne peuvent pas être achetés à l'unité</strong>. Par exemple, si il est uniquement possible d'acheter des cartons de 12 bouteilles, alors indiquez « 12 » ici. Dans le doute, laissez vide.</h5>
         <input type="number" name="packing" value="{{ product.packing or '' }}">
     {%- endset %}
     {{ macros.modal(id="advanced", label="Voir les options avancées", body=body) }}
-        
-    <div>
-        <input type="submit" name="submit" value="Valider" class="primary">
     </div>
+    </fieldset>
 </form>
 
 <hr>