From 6f796a8cc13a521f47eb97561647af89a1b12cc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Guillot?=
 <fguillot@users.noreply.github.com>
Date: Fri, 9 May 2014 19:14:48 -0400
Subject: [PATCH] Improve forms

---
 assets/css/app.css       | 37 +++++++++++++++++------
 templates/task_edit.php  | 44 ++++++++++++++++-----------
 templates/task_new.php   | 45 +++++++++++++++-------------
 templates/user_edit.php  | 64 ++++++++++++++++++++++------------------
 templates/user_login.php |  2 +-
 templates/user_new.php   | 34 +++++++++++++--------
 6 files changed, 136 insertions(+), 90 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 44abace36..1d2d4be3a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -110,11 +110,11 @@ td li {
 
 /* forms */
 form {
-    padding-top: 5px;
-    padding-bottom: 5px;
-    padding-left: 15px;
+    padding: 10px;
     margin-bottom: 20px;
-    border-left: 2px dotted #ddd;
+    background: #fcfcfc;
+    border: 1px solid #eee;
+    border-radius: 5px;
 }
 
 label {
@@ -133,11 +133,13 @@ input[type="email"],
 input[type="tel"],
 input[type="password"],
 input[type="text"] {
+    color: #888;
     border: 1px solid #ccc;
-    padding: 3px;
-    line-height: 15px;
     width: 400px;
-    font-size: 99%;
+    font-size: 1.0em;
+    height: 25px;
+    padding-bottom: 0;
+    font-family: sans-serif;
     margin-top: 5px;
     -webkit-appearance: none;
     appearance: none;
@@ -162,10 +164,10 @@ input[type="number"] {
 
 textarea {
     border: 1px solid #ccc;
-    padding: 3px;
     width: 400px;
     height: 200px;
-    font-size: 99%;
+    font-size: 1.0em;
+    font-family: sans-serif;
 }
 
 ::-webkit-input-placeholder {
@@ -184,6 +186,7 @@ textarea {
 }
 
 .form-actions {
+    clear: both;
     margin-top: 20px;
 }
 
@@ -234,6 +237,22 @@ input.form-date {
     margin-bottom: 20px;
 }
 
+.form-column {
+    float: left;
+    margin-bottom: 60px;
+    padding-right: 30px;
+    padding-left: 30px;
+}
+
+.form-column:first-child {
+    padding-left: 0;
+}
+
+.form-login {
+    padding-left: 20px;
+    width: 430px;
+}
+
 /* alerts */
 .alert {
     padding: 8px 35px 8px 14px;
diff --git a/templates/task_edit.php b/templates/task_edit.php
index 9fe0418fc..0c19db38a 100644
--- a/templates/task_edit.php
+++ b/templates/task_edit.php
@@ -5,31 +5,39 @@
     <section>
     <form method="post" action="?controller=task&amp;action=update" autocomplete="off">
 
-        <?= Helper\form_hidden('id', $values) ?>
-        <?= Helper\form_hidden('project_id', $values) ?>
+        <div class="form-column">
 
-        <?= Helper\form_label(t('Title'), 'title') ?>
-        <?= Helper\form_text('title', $values, $errors, array('required')) ?><br/>
+            <?= Helper\form_label(t('Title'), 'title') ?>
+            <?= Helper\form_text('title', $values, $errors, array('required')) ?><br/>
 
-        <?= Helper\form_label(t('Column'), 'column_id') ?>
-        <?= Helper\form_select('column_id', $columns_list, $values, $errors) ?><br/>
+            <?= Helper\form_label(t('Description'), 'description') ?>
+            <?= Helper\form_textarea('description', $values, $errors) ?><br/>
+            <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
 
-        <?= Helper\form_label(t('Color'), 'color_id') ?>
-        <?= Helper\form_select('color_id', $colors_list, $values, $errors) ?><br/>
+        </div>
 
-        <?= Helper\form_label(t('Assignee'), 'owner_id') ?>
-        <?= Helper\form_select('owner_id', $users_list, $values, $errors) ?><br/>
+        <div class="form-column">
 
-        <?= Helper\form_label(t('Story Points'), 'score') ?>
-        <?= Helper\form_number('score', $values, $errors) ?><br/>
+            <?= Helper\form_hidden('id', $values) ?>
+            <?= Helper\form_hidden('project_id', $values) ?>
 
-        <?= Helper\form_label(t('Due Date'), 'date_due') ?>
-        <?= Helper\form_text('date_due', $values, $errors, array('placeholder="'.t('month/day/year').'"'), 'form-date') ?><br/>
-        <div class="form-help"><?= t('Others formats accepted: %s and %s', date('Y-m-d'), date('Y_m_d')) ?></div>
+            <?= Helper\form_label(t('Assignee'), 'owner_id') ?>
+            <?= Helper\form_select('owner_id', $users_list, $values, $errors) ?><br/>
 
-        <?= Helper\form_label(t('Description'), 'description') ?>
-        <?= Helper\form_textarea('description', $values, $errors) ?><br/>
-        <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
+            <?= Helper\form_label(t('Column'), 'column_id') ?>
+            <?= Helper\form_select('column_id', $columns_list, $values, $errors) ?><br/>
+
+            <?= Helper\form_label(t('Color'), 'color_id') ?>
+            <?= Helper\form_select('color_id', $colors_list, $values, $errors) ?><br/>
+
+            <?= Helper\form_label(t('Story Points'), 'score') ?>
+            <?= Helper\form_number('score', $values, $errors) ?><br/>
+
+            <?= Helper\form_label(t('Due Date'), 'date_due') ?>
+            <?= Helper\form_text('date_due', $values, $errors, array('placeholder="'.t('month/day/year').'"'), 'form-date') ?><br/>
+            <div class="form-help"><?= t('Others formats accepted: %s and %s', date('Y-m-d'), date('Y_m_d')) ?></div>
+
+        </div>
 
         <div class="form-actions">
             <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/>
diff --git a/templates/task_new.php b/templates/task_new.php
index f5797cdf4..cf320e727 100644
--- a/templates/task_new.php
+++ b/templates/task_new.php
@@ -5,34 +5,39 @@
     <section>
     <form method="post" action="?controller=task&amp;action=save" autocomplete="off">
 
-        <?= Helper\form_label(t('Title'), 'title') ?>
-        <?= Helper\form_text('title', $values, $errors, array('autofocus', 'required')) ?><br/>
+        <div class="form-column">
+            <?= Helper\form_label(t('Title'), 'title') ?>
+            <?= Helper\form_text('title', $values, $errors, array('autofocus', 'required')) ?><br/>
 
-        <?= Helper\form_hidden('project_id', $values) ?>
+            <?= Helper\form_label(t('Description'), 'description') ?>
+            <?= Helper\form_textarea('description', $values, $errors) ?><br/>
+            <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
 
-        <?= Helper\form_label(t('Column'), 'column_id') ?>
-        <?= Helper\form_select('column_id', $columns_list, $values, $errors) ?><br/>
+            <?php if (! isset($duplicate)): ?>
+                <?= Helper\form_checkbox('another_task', t('Create another task'), 1, isset($values['another_task']) && $values['another_task'] == 1) ?>
+            <?php endif ?>
+        </div>
 
-        <?= Helper\form_label(t('Color'), 'color_id') ?>
-        <?= Helper\form_select('color_id', $colors_list, $values, $errors) ?><br/>
+        <div class="form-column">
 
-        <?= Helper\form_label(t('Assignee'), 'owner_id') ?>
-        <?= Helper\form_select('owner_id', $users_list, $values, $errors) ?><br/>
+            <?= Helper\form_hidden('project_id', $values) ?>
 
-        <?= Helper\form_label(t('Story Points'), 'score') ?>
-        <?= Helper\form_number('score', $values, $errors) ?><br/>
+            <?= Helper\form_label(t('Assignee'), 'owner_id') ?>
+            <?= Helper\form_select('owner_id', $users_list, $values, $errors) ?><br/>
 
-        <?= Helper\form_label(t('Due Date'), 'date_due') ?>
-        <?= Helper\form_text('date_due', $values, $errors, array('placeholder="'.t('month/day/year').'"'), 'form-date') ?><br/>
-        <div class="form-help"><?= t('Others formats accepted: %s and %s', date('Y-m-d'), date('Y_m_d')) ?></div>
+            <?= Helper\form_label(t('Column'), 'column_id') ?>
+            <?= Helper\form_select('column_id', $columns_list, $values, $errors) ?><br/>
 
-        <?= Helper\form_label(t('Description'), 'description') ?>
-        <?= Helper\form_textarea('description', $values, $errors) ?><br/>
-        <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
+            <?= Helper\form_label(t('Color'), 'color_id') ?>
+            <?= Helper\form_select('color_id', $colors_list, $values, $errors) ?><br/>
 
-        <?php if (! isset($duplicate)): ?>
-            <?= Helper\form_checkbox('another_task', t('Create another task'), 1, isset($values['another_task']) && $values['another_task'] == 1) ?>
-        <?php endif ?>
+            <?= Helper\form_label(t('Story Points'), 'score') ?>
+            <?= Helper\form_number('score', $values, $errors) ?><br/>
+
+            <?= Helper\form_label(t('Due Date'), 'date_due') ?>
+            <?= Helper\form_text('date_due', $values, $errors, array('placeholder="'.t('month/day/year').'"'), 'form-date') ?><br/>
+            <div class="form-help"><?= t('Others formats accepted: %s and %s', date('Y-m-d'), date('Y_m_d')) ?></div>
+        </div>
 
         <div class="form-actions">
             <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/>
diff --git a/templates/user_edit.php b/templates/user_edit.php
index 1805d042c..c857fe1c8 100644
--- a/templates/user_edit.php
+++ b/templates/user_edit.php
@@ -8,47 +8,53 @@
     <section>
     <form method="post" action="?controller=user&amp;action=update" autocomplete="off">
 
-        <?= Helper\form_hidden('id', $values) ?>
-        <?= Helper\form_hidden('is_ldap_user', $values) ?>
+        <div class="form-column">
 
-        <?= Helper\form_label(t('Username'), 'username') ?>
-        <?= Helper\form_text('username', $values, $errors, array('required', $values['is_ldap_user'] == 1 ? 'readonly' : '')) ?><br/>
+            <?= Helper\form_hidden('id', $values) ?>
+            <?= Helper\form_hidden('is_ldap_user', $values) ?>
 
-        <?= Helper\form_label(t('Name'), 'name') ?>
-        <?= Helper\form_text('name', $values, $errors) ?><br/>
+            <?= Helper\form_label(t('Username'), 'username') ?>
+            <?= Helper\form_text('username', $values, $errors, array('required', $values['is_ldap_user'] == 1 ? 'readonly' : '')) ?><br/>
 
-        <?= Helper\form_label(t('Email'), 'email') ?>
-        <?= Helper\form_email('email', $values, $errors) ?><br/>
+            <?= Helper\form_label(t('Name'), 'name') ?>
+            <?= Helper\form_text('name', $values, $errors) ?><br/>
 
-        <?php if ($values['is_ldap_user'] == 0): ?>
+            <?= Helper\form_label(t('Email'), 'email') ?>
+            <?= Helper\form_email('email', $values, $errors) ?><br/>
 
-            <?= Helper\form_label(t('Current password for the user "%s"', Helper\get_username()), 'current_password') ?>
-            <?= Helper\form_password('current_password', $values, $errors) ?><br/>
+            <?= Helper\form_label(t('Default Project'), 'default_project_id') ?>
+            <?= Helper\form_select('default_project_id', $projects, $values, $errors) ?><br/>
 
-            <?= Helper\form_label(t('Password'), 'password') ?>
-            <?= Helper\form_password('password', $values, $errors) ?><br/>
+        </div>
 
-            <?= Helper\form_label(t('Confirmation'), 'confirmation') ?>
-            <?= Helper\form_password('confirmation', $values, $errors) ?><br/>
+        <div class="form-column">
 
-        <?php endif ?>
+            <?php if ($values['is_ldap_user'] == 0): ?>
 
-        <?= Helper\form_label(t('Default Project'), 'default_project_id') ?>
-        <?= Helper\form_select('default_project_id', $projects, $values, $errors) ?><br/>
+                <?= Helper\form_label(t('Current password for the user "%s"', Helper\get_username()), 'current_password') ?>
+                <?= Helper\form_password('current_password', $values, $errors) ?><br/>
 
-        <?php if (Helper\is_admin()): ?>
-            <?= Helper\form_checkbox('is_admin', t('Administrator'), 1, isset($values['is_admin']) && $values['is_admin'] == 1 ? true : false) ?><br/>
-        <?php endif ?>
+                <?= Helper\form_label(t('Password'), 'password') ?>
+                <?= Helper\form_password('password', $values, $errors) ?><br/>
+
+                <?= Helper\form_label(t('Confirmation'), 'confirmation') ?>
+                <?= Helper\form_password('confirmation', $values, $errors) ?><br/>
 
-        <?php if (GOOGLE_AUTH && Helper\is_current_user($values['id'])): ?>
-        <div class="form-row">
-            <?php if (empty($values['google_id'])): ?>
-                <a href="?controller=user&amp;action=google"><?= t('Link my Google Account') ?></a>
-            <?php else: ?>
-                <a href="?controller=user&amp;action=unlinkGoogle"><?= t('Unlink my Google Account') ?></a>
             <?php endif ?>
-        <div>
-        <?php endif ?>
+
+            <?php if (Helper\is_admin()): ?>
+                <?= Helper\form_checkbox('is_admin', t('Administrator'), 1, isset($values['is_admin']) && $values['is_admin'] == 1 ? true : false) ?><br/>
+            <?php endif ?>
+
+            <?php if (GOOGLE_AUTH && Helper\is_current_user($values['id'])): ?>
+                <?php if (empty($values['google_id'])): ?>
+                    <a href="?controller=user&amp;action=google"><?= t('Link my Google Account') ?></a>
+                <?php else: ?>
+                    <a href="?controller=user&amp;action=unlinkGoogle"><?= t('Unlink my Google Account') ?></a>
+                <?php endif ?>
+            <?php endif ?>
+
+        </div>
 
         <div class="form-actions">
             <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/> <?= t('or') ?> <a href="?controller=user"><?= t('cancel') ?></a>
diff --git a/templates/user_login.php b/templates/user_login.php
index f8981cb5a..878170e32 100644
--- a/templates/user_login.php
+++ b/templates/user_login.php
@@ -6,7 +6,7 @@
     <p class="alert alert-error"><?= Helper\escape($errors['login']) ?></p>
 <?php endif ?>
 
-<form method="post" action="?controller=user&amp;action=check">
+<form method="post" action="?controller=user&amp;action=check" class="form-login">
 
     <?= Helper\form_label(t('Username'), 'username') ?>
     <?= Helper\form_text('username', $values, $errors, array('autofocus', 'required')) ?><br/>
diff --git a/templates/user_new.php b/templates/user_new.php
index ec3d3f15e..6ad976f27 100644
--- a/templates/user_new.php
+++ b/templates/user_new.php
@@ -8,25 +8,33 @@
     <section>
     <form method="post" action="?controller=user&amp;action=save" autocomplete="off">
 
-        <?= Helper\form_label(t('Username'), 'username') ?>
-        <?= Helper\form_text('username', $values, $errors, array('autofocus', 'required')) ?><br/>
+        <div class="form-column">
 
-        <?= Helper\form_label(t('Name'), 'name') ?>
-        <?= Helper\form_text('name', $values, $errors) ?><br/>
+            <?= Helper\form_label(t('Username'), 'username') ?>
+            <?= Helper\form_text('username', $values, $errors, array('autofocus', 'required')) ?><br/>
 
-        <?= Helper\form_label(t('Email'), 'email') ?>
-        <?= Helper\form_email('email', $values, $errors) ?><br/>
+            <?= Helper\form_label(t('Name'), 'name') ?>
+            <?= Helper\form_text('name', $values, $errors) ?><br/>
 
-        <?= Helper\form_label(t('Password'), 'password') ?>
-        <?= Helper\form_password('password', $values, $errors, array('required')) ?><br/>
+            <?= Helper\form_label(t('Email'), 'email') ?>
+            <?= Helper\form_email('email', $values, $errors) ?><br/>
 
-        <?= Helper\form_label(t('Confirmation'), 'confirmation') ?>
-        <?= Helper\form_password('confirmation', $values, $errors, array('required')) ?><br/>
+            <?= Helper\form_label(t('Default Project'), 'default_project_id') ?>
+            <?= Helper\form_select('default_project_id', $projects, $values, $errors) ?><br/>
 
-        <?= Helper\form_label(t('Default Project'), 'default_project_id') ?>
-        <?= Helper\form_select('default_project_id', $projects, $values, $errors) ?><br/>
+        </div>
 
-        <?= Helper\form_checkbox('is_admin', t('Administrator'), 1, isset($values['is_admin']) && $values['is_admin'] == 1 ? true : false) ?>
+        <div class="form-column">
+
+            <?= Helper\form_label(t('Password'), 'password') ?>
+            <?= Helper\form_password('password', $values, $errors, array('required')) ?><br/>
+
+            <?= Helper\form_label(t('Confirmation'), 'confirmation') ?>
+            <?= Helper\form_password('confirmation', $values, $errors, array('required')) ?><br/>
+
+            <?= Helper\form_checkbox('is_admin', t('Administrator'), 1, isset($values['is_admin']) && $values['is_admin'] == 1 ? true : false) ?>
+
+        </div>
 
         <div class="form-actions">
             <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/>