Move create UI to top, and adjust style to fit.

1 files changed, 21 insertions, 16 deletions

diff --git a/alias-list-form.txr b/alias-list-form.txr
index 53789c7..f029674 100644
--- a/alias-list-form.txr
+++ b/alias-list-form.txr
@@ -1,4 +1,6 @@
 @(define alias-list-form (userid))
+@  (bind label-style "width: 3em; display: inline-block")
+@  (bind button-style "width: 7em; display: inline-block")
 @  (load-aliases userid aliases)
 @  (headers)
 @  (output)
@@ -20,14 +22,30 @@
 @  (end)
 @  (if (cdddr aliases))
 @    (output)
-  <div>
-    <label for="query">Find:</label>
+  <div style="line-height: 1.7">
+    <label for="query"><span style="@{label-style}">Find:</span></label>
     <input type="text" name="query" value="@{(html-encode search-query)}" @\
            size="60">
-    <input type="submit" name="search" value="Search">
+    <input type="submit" name="search" value="Search" style="@{button-style}">
   </div>
 @    (end)
 @  (end)
+@  (output)
+  <div>
+    <label for="memo"><span style="@{label-style}">Memo:</label>
+    <input type="text" name="memo" value="" size="60"
+           title="When you click Create New to generate a new @\
+                  e-mail alias, information entered into this box @\
+                  will be associated with that alias. Use it to track @\
+                  the purpose of the alias, such as who it was given @\
+                  to (which web site or vendor and so forth). Do not @\
+                  include the date; aliases are dated.">
+    <input type="submit" name="create" value="Create New"
+           title="Create a new random e-mail alias, @\
+                  with the Memo attached."
+           style="@{button-style}">
+  </div>
+@  (end)
 @  (do (if search-regex
          (set aliases (keep-if (op (umeth match) @1 search-regex) aliases))))
 @  (if aliases)
@@ -95,19 +113,6 @@
 @    (end)
 @  (end)
 @  (output)
-  <div>
-    <label for="memo">Memo:</label>
-    <input type="text" name="memo" value="" size="60"
-           title="When you click Create New to generate a new @\
-                  e-mail alias, information entered into this box @\
-                  will be associated with that alias. Use it to track @\
-                  the purpose of the alias, such as who it was given @\
-                  to (which web site or vendor and so forth). Do not @\
-                  include the date; aliases are dated.">
-    <input type="submit" name="create" value="Create New"
-           title="Create a new random e-mail alias, @\
-                  with the Memo attached.">
-  </div>
 </form>
 </body>
 </html>