From c97e05e0ddbe6d7662d24f99af26316f946bd675 Mon Sep 17 00:00:00 2001
From: Simon Michael <simon@joyful.com>
Date: Sat, 27 Aug 2022 12:12:45 +0100
Subject: [PATCH] imp: web: add form: layout improvements, use available space

---
 hledger-web/Hledger/Web/Handler/AddR.hs |  2 +-
 hledger-web/templates/add-form.hamlet   | 42 +++++++++++--------------
 hledger-web/templates/manage.hamlet     |  2 +-
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/hledger-web/Hledger/Web/Handler/AddR.hs b/hledger-web/Hledger/Web/Handler/AddR.hs
index 9ec4a8d81..80ac72f68 100644
--- a/hledger-web/Hledger/Web/Handler/AddR.hs
+++ b/hledger-web/Hledger/Web/Handler/AddR.hs
@@ -51,7 +51,7 @@ postAddR = do
       sendResponse =<< defaultLayout [whamlet|
         <h2>Add transaction
         <div .row style="margin-top:1em">
-          <form#addform.form.col-xs-12.col-md-8 method=post enctype=#{enctype}>
+          <form#addform.form.col-xs-12.col-sm-11 method=post enctype=#{enctype}>
             ^{view}
       |]
 
diff --git a/hledger-web/templates/add-form.hamlet b/hledger-web/templates/add-form.hamlet
index 3b3cff63c..bc2a2ad4f 100644
--- a/hledger-web/templates/add-form.hamlet
+++ b/hledger-web/templates/add-form.hamlet
@@ -21,40 +21,36 @@
   });
 ^{extra}
 
-<div .form-group>
-  <div .row>
-    <div .col-md-3 .col-xs-6 .col-sm-6 :isJust (fvErrors dateView):.has-error>
-      <div #dateWrap .form-group.input-group.date>
-        ^{fvInput dateView}
-        <div .input-group-addon>
-          <span .glyphicon .glyphicon-th>
-      $maybe err <- fvErrors dateView
-        <span .help-block .error-block>#{err}
-    <div .col-md-9 .col-xs-6 .col-sm-6 :isJust (fvErrors descView):.has-error>
-      <div .form-group>
-        ^{fvInput descView}
-      $maybe err <- fvErrors descView
-        <span .help-block .error-block>#{err}
-  <div .row>
-    <div .col-md-3 .col-xs-6 .col-sm-6>
-    <div .col-md-9 .col-xs-6 .col-sm-6>
+<div .row>
+  <div .col-md-3.col-sm-5.col-xs-6 :isJust (fvErrors dateView):.has-error>
+    <div #dateWrap .form-group.input-group.date>
+      ^{fvInput dateView}
+      <div .input-group-addon>
+        <span .glyphicon .glyphicon-th>
+    $maybe err <- fvErrors dateView
+      <span .help-block .error-block>#{err}
+  <div .col-md-9.col-sm-7.col-xs-6 :isJust (fvErrors descView):.has-error>
+    <div .form-group>
+      ^{fvInput descView}
+    $maybe err <- fvErrors descView
+      <span .help-block .error-block>#{err}
 
 <div .account-postings>
   $forall (n, (acc, amt, accE, amtE)) <- displayRows
-    <div .form-group .row .account-group>
-      <div .col-md-8 .col-xs-8 .col-sm-8 :isJust accE:.has-error>
+    <div .form-group .row .account-group style="padding-left:1em;">
+      <div .col-sm-9.col-xs-9 :isJust accE:.has-error>
         <input .account-input.form-control.input-lg.typeahead type=text
           name=account placeholder="Account #{n}" value="#{acc}">
         $maybe err <- accE
           <span .help-block .error-block>_{err}
-      <div .col-md-4 .col-xs-4 .col-sm-4 :isJust amtE:.has-error>
+      <div .col-sm-3.col-xs-3 :isJust amtE:.has-error>
         <input .amount-input.form-control.input-lg type=text
           name=amount placeholder="Amount #{n}" value="#{amt}">
         $maybe err <- amtE
           <span .help-block .error-block>_{err}
 
 <div .row>
-  <div .col-md-9 .col-xs-9 .col-sm-9>
+  <div .col-sm-9.col-xs-9>
     $if length files > 1
       Add to:
       &nbsp;
@@ -62,5 +58,5 @@
         ^{fvInput fileView}
         $maybe err <- fvErrors fileView
           <span .help-block .error-block>#{err}
-  <div .col-md-3 .col-xs-3 .col-sm-3 style="text-align:right;">
-    <button type=submit .btn .btn-default .btn-lg name=submit style="font-weight:bold;">Add
+  <div .col-sm-3.col-xs-3 style="text-align:right;">
+    <button type=submit .btn .btn-default .btn-lg name=submit style="font-weight:bold;">Save
diff --git a/hledger-web/templates/manage.hamlet b/hledger-web/templates/manage.hamlet
index a8b107e01..ca7067416 100644
--- a/hledger-web/templates/manage.hamlet
+++ b/hledger-web/templates/manage.hamlet
@@ -2,7 +2,7 @@
   Your journal's files
 
 <div.row>
-  <div .col-xs-12.col-sm-8.col-md-6>
+  <div .col-md-6.col-sm-8.col-xs-12>
     <table .table.table-condensed>
       <thead>
         <th>