style the user interface in style.css

2 files changed, 46 insertions, 23 deletions

diff --git a/abrechenbarkeit.lua b/abrechenbarkeit.lua
index 0efac7c..0e246af 100755
--- a/abrechenbarkeit.lua
+++ b/abrechenbarkeit.lua
@@ -225,8 +225,8 @@ local function r_user(username)
                 <p>Last transaction added %s ago. <a href="/%s?log">View user log</a>
             ]], format_duration(os.time() - last_txn), username))
         end
-        print([[<div class="transactions container">]])
-		print([[<div class="amount-presets box">]])
+        print([[<div class="transactions container firstchildlarge">]])
+		print([[<div class="amount-presets backgroundbox">]])
         for _, type in ipairs({ 1, -1 }) do
             for _, amount in ipairs({ 50, 100, 150, 200, 500, 1000 }) do
                 print(string.format([[
@@ -241,7 +241,7 @@ local function r_user(username)
         end
         print("</div>")
         print([[
-            <form class="transaction box" action="" method="POST">
+            <form class="transaction box backgroundbox" action="" method="POST">
                 <h3>Create Transaction</h3>
                 <label for="amount">Amount: </label>
                 <input type="number" name="amount" id="amount" />
@@ -249,7 +249,7 @@ local function r_user(username)
                 <input type="text" name="comment" id="comment" />
                 <input type="submit" value="Update" />
             </form>
-            <form class="transaction box" action="" method="POST" id="buy_product">
+            <form class="transaction box backgroundbox" action="" method="POST" id="buy_product">
                 <h3>Buy Product</h3>
                 <label for="product">Product: </label>
                 <input type="text" name="product" id="product" />
@@ -377,23 +377,25 @@ local function r_products()
         print("<h1>Product List</h1>")
         if notif then print(notif) end
         print([[
-            <form action="/?products" method="POST" class="box">
+        	<div class="container">
+            <form action="/?products" method="POST" class="box backgroundbox">
                 <h3>Add Product</h3>
                 <label for="barcode">Barcode: </label>
-                <input type="text" name="barcode" id="barcode" /><br/>
+                <input type="text" name="barcode" id="barcode" />
                 <label for="name">Name: </label>
-                <input type="text" name="name" id="name" /><br/>
+                <input type="text" name="name" id="name" />
                 <label for="price">Price: </label>
-                <input type="number" name="price" id="price" /><br/>
+                <input type="number" name="price" id="price" />
                 <input type="submit" value="Add" />
             </form>
-            <form action="/?products" method="POST" class="box">
+            <form action="/?products" method="POST" class="box backgroundbox">
                 <h3>Remove Product</h3>
                 <input type="text" name="delete" value="1" hidden />
                 <label for="barcode">Barcode: </label>
-                <input type="text" name="barcode" id="barcode" /><br/>
+                <input type="text" name="barcode" id="barcode" />
                 <input type="submit" value="Remove" />
             </form>
+            </div>
         ]])
         print("<table><tr><th>Name</th><th>Price</th><th>Barcode</th></tr>")
         for barcode, price, name in read_products() do
diff --git a/style.css b/style.css
index f6a1075..ef7104a 100644
--- a/style.css
+++ b/style.css
@@ -3,8 +3,7 @@ body {
 }
 
 body > * {
-
-	: 0.5rem;
+	margin: 0.5rem;
 }
 
 .container {
@@ -15,11 +14,12 @@ body > * {
     list-style-type: none;
 }
 
-.container > :first-child {
+.container.firstchildlarge > :first-child {
 	grid-column: 1 / -1;	
 }
 
 .container > * {
+	display: block;
 	margin: 0.5rem;
 }
 
@@ -50,10 +50,15 @@ nav h2 {
     display: inline-block
 }
 
+nav > :last-child {
+	float: right;
+	padding-right: 0;
+}
+
 /* notification stuff */
 .notif {
     padding: 0.5em;
-    background-color: #ddd;
+    background-color: #1d2832;
 }
 
 .notif.error {
@@ -95,13 +100,14 @@ li a {
 }
 
 ul {
-    padding-left: 0;
     display: grid;
     justify-content: left;
     grid-auto-rows: minmax(5em, auto);
     gap: 1em;
     grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
     list-style-type: none;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 li {
@@ -180,20 +186,18 @@ h3 {
 	margin-left: 0;	
 }
 
-.box {
-	width: 16em;
+.backgroundbox {
+	width: fit-content;
 	background-color: #1d2832;
 	padding: 1em;
-	padding-right: 2em;
 }
 
 .transactions.container > :first-child {
 	width: 36em;
 }
 
-
 /* create transaction box */
-.transaction {
+.box {
 	display: grid;
     justify-content: left;
     /* grid-auto-rows: minmax(5em, 2); */
@@ -201,11 +205,28 @@ h3 {
     grid-template-columns: auto 10em;
 }
 
-.transaction :first-child, form.transaction.box > :last-child {
+form.box > :first-child, form.box > :last-child {
   grid-column: 1 / -1;
 }
 
-.transaction.box > * {
+form.box > * {
 	margin: .3em;
-	width: 100%;
+	width: auto;
 }
+
+
+table {
+	padding: 1em;
+	margin-right: auto;
+	margin-left: auto;
+}
+
+td {
+	padding: .3em;
+	min-width: 5em;
+}
+
+tr:nth-child(2n) {
+	background-color: #1d2832;
+}
+