From dd5901710cc8f3e1d254eb1e6ea65c3bdca92047 Mon Sep 17 00:00:00 2001
From: Juan Bono <juanbono94@gmail.com>
Date: Sun, 23 Apr 2017 16:19:14 -0300
Subject: [PATCH] [GD-9] Restyle item-info form

---
 templates/item-info.widget | 116 ++++++++++++++++++++++---------------
 1 file changed, 68 insertions(+), 48 deletions(-)

diff --git a/templates/item-info.widget b/templates/item-info.widget
index 638958c..c1f7e1e 100644
--- a/templates/item-info.widget
+++ b/templates/item-info.widget
@@ -152,64 +152,84 @@ function editItemInfo(itemUid) {
   switchSection("#item-" + itemUid + " .item-info", "editing");
 }
 
+CSS
+------------------------------------------------------------
+.formLabel {
+  display: block;
+  margin-bottom: 5px;
+  margin-top: 15px;
+}
+
+.form-group {
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+
+.form-btn-group {
+  margin-top: 20px;
+  margin-bottom: 5px;
+}
+
+.save {
+  margin-right: 20px;
+}
 
 HTML: item-info-edit-form
 ------------------------------------------------------------
 {{! "autocomplete=off" everywhere: http://stackoverflow.com/q/8311455 }}
-<form onsubmit="submitItemInfo('{{item.uid}}', this); return false;">
-  <label>
-    Name<br>
-    <input name="name" value="{{item.name}}"
-           type="text" autocomplete="off">
+<form class="form-group" onsubmit="submitItemInfo('{{item.uid}}', this); return false;">
+  <label class="formLabel" for="name">
+    Name
   </label>
-  <br>
+  <input id="name" name="name" value="{{item.name}}"
+          type="text" autocomplete="off">
 
-  <label>
-    Kind<br>
-    <select name="kind" autocomplete="off">
-      {{! possible_kinds would have stuff like “library”, “tool”, “other” }}
-      {{#possible_kinds}}
-        <option value="{{name}}" {{%selectIf selected}}>{{caption}}</option>
-      {{/possible_kinds}}
+  <label class="formLabel" for="kind">
+    Kind
+  </label>
+  <select id="kind" name="kind" autocomplete="off">
+    {{! possible_kinds would have stuff like “library”, “tool”, “other” }}
+    {{#possible_kinds}}
+      <option value="{{name}}" {{%selectIf selected}}>{{caption}}</option>
+    {{/possible_kinds}}
+  </select>
+ 
+  <label class="formLabel" for="hackage-name">
+    Name on Hackage
+  </label>
+  <input id="hackage-name" name="hackage-name" value="{{#item.kind.hackageName}}{{.}}{{/item.kind.hackageName}}"
+          type="text" autocomplete="off">
+
+  <label class="formLabel" for="site">
+    Site (optional)
+  </label>
+  <input id="site" name="link" value="{{item.link}}"
+          type="text" autocomplete="off">
+  
+<div class="form-group">
+  <label class="formLabel" for="group">
+    Group
+  </label>
+  {{! When “new group” is selected in the list, we show a field for
+      entering new group's name }}
+  <select id="group" name="group" onchange="itemGroupSelectHandler(this);"
+          autocomplete="off">
+    <option value="-" {{%selectIf item_no_group}}>-</option>
+    {{# category_groups }}
+      <option value="{{name}}" {{%selectIf selected}}>{{name}}</option>
+    {{/ category_groups }}
+    <option value="">New group...</option>
     </select>
-  </label>
-  <br>
-
-  <label>
-    Name on Hackage<br>
-    <input name="hackage-name" value="{{#item.kind.hackageName}}{{.}}{{/item.kind.hackageName}}"
-           type="text" autocomplete="off">
-  </label>
-  <br>
-
-  <label>
-    Site (optional)<br>
-    <input name="link" value="{{item.link}}"
-           type="text" autocomplete="off">
-  </label>
-  <br>
-
-  <label>
-    Group<br>
-    {{! When “new group” is selected in the list, we show a field for
-        entering new group's name }}
-    <select name="group" onchange="itemGroupSelectHandler(this);"
-            autocomplete="off">
-      <option value="-" {{%selectIf item_no_group}}>-</option>
-      {{# category_groups }}
-        <option value="{{name}}" {{%selectIf selected}}>{{name}}</option>
-      {{/ category_groups }}
-      <option value="">New group...</option>
-    </select>
-  </label>
-
+  
   <input hidden class="custom-group-input" name="custom-group"
          type="text" autocomplete="off">
-  <br>
+  </div>
 
-  <input value="Save" class="save" type="submit">
-  <input value="Cancel" class="cancel" type="button"
-         onclick="itemInfoCancelEdit('{{item.uid}}');">
+  <div class="form-btn-group">
+    <input value="Save" class="save" type="submit">
+    <input value="Cancel" class="cancel" type="button"
+          onclick="itemInfoCancelEdit('{{item.uid}}');">
+  </div>
 </form>