add printing design for lists; add some currency

abrechenbarkeit.lua

@@ -248,7 +248,7 @@ local function r_user(username)
                     <form action="" method="POST">
                         <input type="number" name="amount" id="amount" value="%d" hidden />
                         <input type="text" name="comment" id="comment" value="" hidden />
-                        <input type="submit" value="%s%.02f€" class="amount-%s" />
+                        <input type="submit" value="%s%.02f€" class="amount-%s button" />
                     </form>
                     ]], amount * type, ({ [-1] = "-", [1] = "+" })[type], amount / 100,
                     ({ [-1] = "neg", [1] = "pos" })[type]))
@@ -257,18 +257,18 @@ local function r_user(username)
         print("</div>")
         print([[
             <form class="transaction box backgroundbox" action="" method="POST">
-                <h3>Create Transaction</h3>
+                <h3>Create 🏳️‍⚧️✊</h3>
-                <label for="amount">Amount: </label>
+                <label for="amount">Amount (ct): </label>
                 <input type="number" name="amount" id="amount" />
                 <label for="comment">Comment: </label>
                 <input type="text" name="comment" id="comment" />
-                <input type="submit" value="Update" />
+                <input type="submit" value="Update" class="amount-ntr button" />
             </form>
             <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" />
-                <input type="submit" value="Buy" />
+                <input class="amount-neg button" type="submit" value="Buy" />
             </form>
         ]])
         print("</div>")
@@ -277,7 +277,7 @@ end
 
 local function r_log(filter)
     return respond(200, "Abrechnungen", function()
-        print("<table>")
+        print([[<table class="log">]])
         print("<tr><th>Time</th><th>Username</th><th>Amount</th><th>P.-Barcode</th><th>P.-Count</th><th>Comment</th></tr>")
         for time, username, amount, pcode, pcount, comment in read_log() do
             if filter == nil or filter == username then
@@ -293,7 +293,7 @@ local function r_log(filter)
                             <form action="/%s" method="POST">
                                 <input type="number" name="amount" id="amount" value="%d" hidden />
                                 <input type="text" name="comment" id="comment" value="Revert %s" hidden />
-                                <input type="submit" value="Revert" />
+                                <input type="submit" class="amount-ntr button" value="Revert" />
                             </form>
                         </td>
                     </tr>
@@ -403,8 +403,8 @@ local function r_products()
                 <input type="text" name="barcode" id="barcode" />
                 <label for="name">Name: </label>
                 <input type="text" name="name" id="name" />
-                <label for="price">Price: </label>
+                <label for="price">Price (ct): </label>
-                <input type="number" name="price" id="price" />
+                <input type="number" name="price" id="price" unit="cent"/>
                 <input type="submit" value="Add" />
             </form>
             <form action="/?products" method="POST" class="box backgroundbox">
@@ -416,7 +416,7 @@ local function r_products()
             </form>
             </div>
         ]])
-        print("<table><tr><th>Name</th><th>Price</th><th>Barcode</th><th>Count</th></tr>")
+        print([[<table class="productlist"><tr><th>Name</th><th>Price</th><th>Barcode</th><th>Count</th></tr>]])
         local pbals = product_balances()
         for barcode, price, name in read_products() do
             print(string.format([[

style.css

@@ -151,12 +151,14 @@ li {
     grid-template-columns: repeat(6, 6em);
     list-style-type: none;
 }
+input.button {
+	place-content: center;
+	padding: 0.8em 0.5em;
+	border: none;
+	border-radius: 4px;
+}
 
 .amount-presets > form > input {
-    place-content: center;
-    padding: 0.8em 0.5em;
-    border: none;
-    border-radius: 4px;
     width: 6em;
     margin: 1em;
 }
@@ -181,6 +183,15 @@ input.amount-neg {
     background-color: rgb(84, 64, 82);
 }
 
+/* amount neutral */
+.amount-ntr {
+    color: #04d8f4;
+}
+
+input.amount-ntr {
+    background-color: #5285a8;
+}
+
 h3 {
 	margin: 4px;
 	margin-left: 0;	
@@ -230,3 +241,47 @@ tr:nth-child(2n) {
 	background-color: #1d2832;
 }
 
+input {
+	background-color: inherit;
+	color: white;
+}
+
+input:not([type=submit]) {
+	border: none;
+	border-bottom: 1px solid #e2e2e2;
+}
+
+@media print {
+	nav, .container, h1 {
+		display: none;
+	}
+
+	table.log:before {
+		content: "Abrechenbarkeit Log";
+		font-size: 2em;
+		text-decoration: underline;
+	}
+
+	table.productlist:before {
+		content: "Produkt Liste";
+		font-size: 2em;
+		text-decoration: underline;
+	}
+
+	tr :last-child {
+		display: none;		
+	}
+
+	td {
+	  border-bottom: 1px solid black;
+	}
+
+	*, body {
+		background-color: white;
+		color: black;
+	}
+
+	form {
+		display: none;
+	}
+}