style the user interface in style.css

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

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>
]], 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

View file

@ -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;
}