smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-06-28 04:45:36 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

call it done

Browse source
This commit is contained in:
Smigz 2025-01-21 15:45:43 -05:00
parent 77a93ae9b1
commit 0647b4af89
6 changed files with 140 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

119
inventory/public/css/style.css
View file

@ -15,7 +15,8 @@ body {
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
font-size: 18px;
font-size: 14px;
font-family: "Inter", serif;
}
/* 5. Improve media defaults */
@ -89,9 +90,9 @@ li {
ul {
display: flex;
justify-content: space-around;
max-width: 50vw;
margin: 0 auto;
justify-content: space-evenly;
margin: 0;
padding: 0;
}
td {
@ -115,10 +116,12 @@ main {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5em;
}
nav {
font-size: 1.5rem;
margin: 1em 0;
}
a {
@ -127,8 +130,7 @@ a {
.container {
width: 100%;
max-width: 800px;
margin: 0.25em 1em;
margin: 0.25em 0;
}
.flex {
@ -137,7 +139,7 @@ a {
.btn {
padding: 0.5em 1em;
width: 100%;
/*width: 100%;*/
}
.container.flex {
@ -154,7 +156,7 @@ a {
}
.items-table {
width: 80%;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
@ -162,6 +164,8 @@ a {
.form-item {
display: flex;
flex-direction: column;
margin: 0.7em 0;
width: 100%;
}
.form-item.btn-row {
@ -176,3 +180,102 @@ a {
.add-form {
display: none;
}
@media only screen and (min-width: 778px) {
body {
font-size: 18px;
}
ul {
display: flex;
justify-content: space-around;
max-width: 50vw;
margin: 0 auto;
}
td {
text-align: center;
}
th,
td {
border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
thead {
text-transform: uppercase;
}
main {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5em;
}
nav {
font-size: 1.5rem;
margin: 1em 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
max-width: 800px;
margin: 0.25em 0;
}
.flex {
display: flex;
}
.btn {
padding: 0.5em 1em;
width: 100%;
}
.container.flex {
width: 100%;
}
.container.flex p {
align-self: center;
}
.container.flex p,
.container.flex button {
flex: 1;
}
.items-table {
width: 80%;
border-collapse: collapse;
table-layout: fixed;
}
.form-item {
display: flex;
flex-direction: column;
margin: 0.7em 0;
width: 100%;
}
.form-item.btn-row {
justify-content: center;
width: 100%;
}
.btn-row button {
flex: 1;
}
.add-form {
display: none;
}
}

14
inventory/public/js/script.js
View file

@ -66,5 +66,19 @@ modalElement.addEventListener("click", (e) => {
modalToggle = !modalToggle;
});
const itemTitles = document.querySelectorAll("p.title");
const editItemBtn = document.querySelectorAll(".edit-btn");
editItemBtn.forEach((btn) => {
btn.addEventListener("click", (e) => {
const parent = e.target.parentElement;
const itemId = e.target.nextElementSibling.dataset.id;
const p = e.target.previousElementSibling;
// temp hide
p.remove();
const input = document.createElement("input");
parent.insertBefore(input, e.target);
});
});
document.body.append(modalElement);
addForm();