diff --git a/inventory/public/css/style.css b/inventory/public/css/style.css
index de381bf..ed822df 100644
--- a/inventory/public/css/style.css
+++ b/inventory/public/css/style.css
@@ -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;
+ }
+}
diff --git a/inventory/public/js/script.js b/inventory/public/js/script.js
index a4885c9..315152e 100644
--- a/inventory/public/js/script.js
+++ b/inventory/public/js/script.js
@@ -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();
diff --git a/inventory/src/controllers/indexController.js b/inventory/src/controllers/indexController.js
index 25a1fcb..92f956f 100644
--- a/inventory/src/controllers/indexController.js
+++ b/inventory/src/controllers/indexController.js
@@ -143,7 +143,7 @@ async function itemEditPost(req, res, next) {
async function itemDelete(req, res) {
const itemId = await db.getItemByName(req.body.name);
if (itemId) db.deleteItem(itemId);
- console.log(`Delted item: ${itemId}`);
+ console.log(`Delted item: ${JSON.stringify(itemId)}`);
res.redirect("deleted item: ${item}");
}
diff --git a/inventory/src/views/addForm.ejs b/inventory/src/views/addForm.ejs
index d626290..a60a5e0 100644
--- a/inventory/src/views/addForm.ejs
+++ b/inventory/src/views/addForm.ejs
@@ -3,18 +3,15 @@
<%- include("card", {items: data}) %>
-