fix/add wraping on user page

2 files changed, 45 insertions, 30 deletions

diff --git a/abrechenbarkeit.lua b/abrechenbarkeit.lua
index 2b3f9ea..0210865 100755
--- a/abrechenbarkeit.lua
+++ b/abrechenbarkeit.lua
@@ -467,8 +467,9 @@ local function r_user(username)
                 { time = format_duration(os.time() - last_txn), username = urlencode(username) }))
             print([[</div>]])
         end
-        print([[<div class="transactions container firstchildlarge">]])
-        print([[<div class="amount-presets backgroundbox">]])
+		print([[
+		<ul class="userforms"><li>
+        <div class="amount-presets backgroundbox">]])
         for _, type in ipairs({ 1, -1 }) do
             for _, amount in ipairs({ 50, 100, 150, 200, 500, 1000 }) do
                 local a = amount * type
@@ -486,14 +487,32 @@ local function r_user(username)
                 }))
             end
         end
-        print("</div>")
+        print("</div></li>")
 		print(format([[
-            <form class="transaction box backgroundbox {disable_class}" action="" method="POST">
+            <li><form class="transaction box backgroundbox {disable_class}" action="" method="POST">
+                <h3>{+user.form.transaction}</h3>
+                <input type="text" name="user_dst" value="{!username}" hidden />
+                <label for="amount">{+field.amount}: </label>
+                <input type="number" name="amount" id="amount" />
+                <label for="comment">{+field.comment}: </label>
+                <input type="text" name="comment" id="comment" />
+                <input type="submit" value="{+user.form.transaction.submit}" class="amount-ntr button" />
+            </form></li>
+            <li><form class="transaction box backgroundbox {disable_class}" action="" method="POST" id="buy_product">
+                <h3>{+user.form.buy}</h3>
+                <input type="text" name="user_dst" value="{!username}" hidden />
+                <input type="text" name="negate_pcount" value="1" hidden />
+                <label for="pcount">{+field.count}: </label>
+                <input type="number" name="pcount" id="pcount" value="1" />
+                <label for="pcode">{+field.barcode}: </label>
+                <input type="text" name="pcode" id="pcode" />
+                <input class="amount-neg button" type="submit" value="{+user.form.buy.submit}" />
+            </form></li>
+            <li><form class="transaction box backgroundbox {disable_class}" action="" method="POST">
                 <h3>{+user.form.transfer}</h3>
                 <label for="user_dst">{+field.destination}: </label>
-                <select name="user_dst">]], {
-                	username = username,
-                }))
+                <select name="user_dst">]],
+			{ username = username, disable_class = is_special and "disabled" or "" }))
 		local users = get_active_users();
 		for _, u in ipairs(users) do
 			if u.name ~= username then
@@ -508,27 +527,8 @@ local function r_user(username)
                 <label for="comment">{+field.comment}: </label>
                 <input type="text" name="comment" id="comment" />
                 <input type="submit" value="{+user.form.transfer.submit}" class="amount-ntr button" />
-            </form>
-            <form class="transaction box backgroundbox {disable_class}" action="" method="POST">
-                <h3>{+user.form.transaction}</h3>
-                <input type="text" name="user_dst" value="{!username}" hidden />
-                <label for="amount">{+field.amount}: </label>
-                <input type="number" name="amount" id="amount" />
-                <label for="comment">{+field.comment}: </label>
-                <input type="text" name="comment" id="comment" />
-                <input type="submit" value="{+user.form.transaction.submit}" class="amount-ntr button" />
-            </form>
-            <form class="transaction box backgroundbox {disable_class}" action="" method="POST" id="buy_product">
-                <h3>{+user.form.buy}</h3>
-                <input type="text" name="user_dst" value="{!username}" hidden />
-                <input type="text" name="negate_pcount" value="1" hidden />
-                <label for="pcount">{+field.count}: </label>
-                <input type="number" name="pcount" id="pcount" value="1" />
-                <label for="pcode">{+field.barcode}: </label>
-                <input type="text" name="pcode" id="pcode" />
-                <input class="amount-neg button" type="submit" value="{+user.form.buy.submit}" />
-            </form>
-            <form class="transaction box backgroundbox {disable_class}" action="" method="POST" id="buy_product">
+            </form></li>
+            <li><form class="transaction box backgroundbox {disable_class}" action="" method="POST" id="buy_product">
                 <h3>{+user.form.restock}</h3>
                 <input type="text" name="user_dst" value="{!username}" hidden />
                 <label for="pcount">{+field.count}: </label>
@@ -538,9 +538,9 @@ local function r_user(username)
                 <label for="pcode">{+field.barcode}: </label>
                 <input type="text" name="pcode" id="pcode" />
                 <input type="submit" value="{+user.form.restock.submit}" class="button amount-pos" />
-            </form>
+            </form></li>
         ]], { username = username, disable_class = is_special and "disabled" or "" }))
-        print("</div>")
+        print("</ul>")
     end)
 end
 
diff --git a/style.css b/style.css
index a2d8f1f..e1f7a74 100644
--- a/style.css
+++ b/style.css
@@ -266,6 +266,21 @@ h3 {
     margin-left: 0;
 }
 
+ul.userforms {
+    content: '';
+    display: table;
+    clear: both;
+    list-style: none;
+    margin-left: 0.5rem;
+    padding: 0;
+}
+
+ul.userforms > li {
+	width: fit-content;
+	float: left;
+	padding: 0.5rem;
+}
+
 .backgroundbox {
     width: fit-content;
     background-color: var(--b0);