mirror of
https://codeberg.org/metamuffin/abrechenbarkeit.git
synced 2024-12-28 07:54:35 +00:00
style the user interface in style.css
This commit is contained in:
parent
205f708877
commit
79657b9e94
2 changed files with 46 additions and 23 deletions
|
@ -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
|
||||
|
|
47
style.css
47
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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue