Schaffenburg/abrechenbarkeit
3
0
Fork 0
mirror of https://codeberg.org/metamuffin/abrechenbarkeit.git synced 2025-01-31 02:51:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style the user interface in style.css

Browse source
This commit is contained in:
Riley L. 2024-11-03 19:38:22 +01:00
parent 205f708877
commit 79657b9e94
2 changed files with 46 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
abrechenbarkeit.lua
View file

@ -225,8 +225,8 @@ local function r_user(username)
<p>Last transaction added %s ago. <a href="/%s?log">View user log</a> <p>Last transaction added %s ago. <a href="/%s?log">View user log</a>
]], format_duration(os.time() - last_txn), username)) ]], format_duration(os.time() - last_txn), username))
end end
print([[<div class="transactions container">]]) print([[<div class="transactions container firstchildlarge">]])
print([[<div class="amount-presets box">]]) print([[<div class="amount-presets backgroundbox">]])
for _, type in ipairs({ 1, -1 }) do for _, type in ipairs({ 1, -1 }) do
for _, amount in ipairs({ 50, 100, 150, 200, 500, 1000 }) do for _, amount in ipairs({ 50, 100, 150, 200, 500, 1000 }) do
print(string.format([[ print(string.format([[
@ -241,7 +241,7 @@ local function r_user(username)
end end
print("</div>") print("</div>")
print([[ print([[
<form class="transaction box" action="" method="POST"> <form class="transaction box backgroundbox" action="" method="POST">
<h3>Create Transaction</h3> <h3>Create Transaction</h3>
<label for="amount">Amount: </label> <label for="amount">Amount: </label>
<input type="number" name="amount" id="amount" /> <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="text" name="comment" id="comment" />
<input type="submit" value="Update" /> <input type="submit" value="Update" />
</form> </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> <h3>Buy Product</h3>
<label for="product">Product: </label> <label for="product">Product: </label>
<input type="text" name="product" id="product" /> <input type="text" name="product" id="product" />
@ -377,23 +377,25 @@ local function r_products()
print("<h1>Product List</h1>") print("<h1>Product List</h1>")
if notif then print(notif) end if notif then print(notif) end
print([[ print([[
<form action="/?products" method="POST" class="box"> <div class="container">
<form action="/?products" method="POST" class="box backgroundbox">
<h3>Add Product</h3> <h3>Add Product</h3>
<label for="barcode">Barcode: </label> <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> <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> <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" /> <input type="submit" value="Add" />
</form> </form>
<form action="/?products" method="POST" class="box"> <form action="/?products" method="POST" class="box backgroundbox">
<h3>Remove Product</h3> <h3>Remove Product</h3>
<input type="text" name="delete" value="1" hidden /> <input type="text" name="delete" value="1" hidden />
<label for="barcode">Barcode: </label> <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" /> <input type="submit" value="Remove" />
</form> </form>
</div>
]]) ]])
print("<table><tr><th>Name</th><th>Price</th><th>Barcode</th></tr>") print("<table><tr><th>Name</th><th>Price</th><th>Barcode</th></tr>")
for barcode, price, name in read_products() do for barcode, price, name in read_products() do

47
style.css
View file

@ -3,8 +3,7 @@ body {
} }
body > * { body > * {
margin: 0.5rem;
: 0.5rem;
} }
.container { .container {
@ -15,11 +14,12 @@ body > * {
list-style-type: none; list-style-type: none;
} }
.container > :first-child { .container.firstchildlarge > :first-child {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.container > * { .container > * {
display: block;
margin: 0.5rem; margin: 0.5rem;
} }
@ -50,10 +50,15 @@ nav h2 {
display: inline-block display: inline-block
} }
nav > :last-child {
float: right;
padding-right: 0;
}
/* notification stuff */ /* notification stuff */
.notif { .notif {
padding: 0.5em; padding: 0.5em;
background-color: #ddd; background-color: #1d2832;
} }
.notif.error { .notif.error {
@ -95,13 +100,14 @@ li a {
} }
ul { ul {
padding-left: 0;
display: grid; display: grid;
justify-content: left; justify-content: left;
grid-auto-rows: minmax(5em, auto); grid-auto-rows: minmax(5em, auto);
gap: 1em; gap: 1em;
grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
list-style-type: none; list-style-type: none;
margin-left: auto;
margin-right: auto;
} }
li { li {
@ -180,20 +186,18 @@ h3 {
margin-left: 0; margin-left: 0;
} }
.box { .backgroundbox {
width: 16em; width: fit-content;
background-color: #1d2832; background-color: #1d2832;
padding: 1em; padding: 1em;
padding-right: 2em;
} }
.transactions.container > :first-child { .transactions.container > :first-child {
width: 36em; width: 36em;
} }
/* create transaction box */ /* create transaction box */
.transaction { .box {
display: grid; display: grid;
justify-content: left; justify-content: left;
/* grid-auto-rows: minmax(5em, 2); */ /* grid-auto-rows: minmax(5em, 2); */
@ -201,11 +205,28 @@ h3 {
grid-template-columns: auto 10em; 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; grid-column: 1 / -1;
} }
.transaction.box > * { form.box > * {
margin: .3em; 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;
}