experiment with nicer transfer dialog design

2 files changed, 53 insertions, 14 deletions

diff --git a/talerbank/app/static/bank.css b/talerbank/app/static/bank.css
index 4c16e94..2b71200 100644
--- a/talerbank/app/static/bank.css
+++ b/talerbank/app/static/bank.css
@@ -49,3 +49,34 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
+#transfer-fields {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#id_amount {
+  width: 7em;
+  display: inline-block;
+  border-radius: 4px 0px 0px 4px;
+}
+
+#id_currency {
+  color: black;
+}
+
+.fieldlabel {
+  display: block;
+  padding-bottom: 0.5em;
+}
+
+.fieldbox {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+#id_currency {
+  display: inline-block;
+  border-radius: 0px 4px 4px 0px;
+}
diff --git a/talerbank/app/templates/profile_page.html b/talerbank/app/templates/profile_page.html
index 4a03e52..a770edd 100644
--- a/talerbank/app/templates/profile_page.html
+++ b/talerbank/app/templates/profile_page.html
@@ -109,20 +109,28 @@
               name="tform">
 
           <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
-            <span class="currency-widget">
-              <span class="currency-symbol">{{ currency }}</span>
-              {{ wt_form.amount }}
-            </span>
-            <label for="id_receiver">
-              to
-              {{ wt_form.receiver }}
-            </label>
-            <br />
-            <br />
-            <label for="id_subject">
-              subject
-              {{ wt_form.subject }}
-            </label>
+
+          <div id="transfer-fields">
+          
+          <div class="fieldbox">
+            <label class="fieldlabel" for="id_amount">Amount to transfer</label>
+            {{ wt_form.amount }}<!--
+            --><input type="text" readonly id="id_currency" size="9" value="{{ currency }}">
+          </div>
+            
+          <div class="fieldbox">
+            <label class="fieldlabel" for="id_receiver">Receiver</label>
+            {{ wt_form.receiver }}
+          </div>
+            
+          <div class="fieldbox">
+            <label class="fieldlabel" for="id_receiver">Subject</label>
+            {{ wt_form.subject }}
+          </div>
+          
+          </div>
+
+
           <input class="pure-button pure-button-primary"
                  type="submit"
                  value="Transfer!" />