From 0647b4af89352b706b7a5ccce3fea28ba1263d43 Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Tue, 21 Jan 2025 15:45:43 -0500
Subject: [PATCH] call it done
---
inventory/public/css/style.css | 119 +++++++++++++++++--
inventory/public/js/script.js | 14 +++
inventory/src/controllers/indexController.js | 2 +-
inventory/src/views/addForm.ejs | 19 ++-
inventory/src/views/card.ejs | 4 +-
inventory/src/views/header.ejs | 5 +-
6 files changed, 140 insertions(+), 23 deletions(-)
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 @@
<div class="container">
<%- include("card", {items: data}) %>
<button class="btn add-btn">New <%= type %></button>
-</div>
<form method="POST" action="/<%= type %>" class="add-form">
- <div class="container">
- <div class="form-item">
- <label for="name">Name</label>
- <input type="text" name="name" placeholder="" required>
- </div>
- <div class="form-item btn-row">
- <button type="submit">Submit</button>
- <button type="button">Cancel</button>
- </div>
+ <div class="form-item">
+ <label for="name">Name</label>
+ <input type="text" name="name" placeholder="" required>
+ </div>
+ <div class="form-item btn-row">
+ <button type="submit">Submit</button>
+ <button type="button">Cancel</button>
</div>
-
</form>
+</div>
diff --git a/inventory/src/views/card.ejs b/inventory/src/views/card.ejs
index f180a04..b9aec9c 100644
--- a/inventory/src/views/card.ejs
+++ b/inventory/src/views/card.ejs
@@ -3,10 +3,10 @@
<p class="title">
<%= item.name %>
</p>
- <button>Edit</button>
<% let itemId; %>
<% if (item.category_id) {itemId = item.category_id} else { itemId = item.store_id } %>
- <button class="delete-btn" data-id="<%= itemId %>">Delete</button>
+ <button class="edit-btn btn">Edit</button>
+ <button class="delete-btn btn" data-id="<%= itemId %>">Delete</button>
</div>
<% }); %>
diff --git a/inventory/src/views/header.ejs b/inventory/src/views/header.ejs
index d4198e0..4d0510b 100644
--- a/inventory/src/views/header.ejs
+++ b/inventory/src/views/header.ejs
@@ -2,8 +2,11 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= pageTitle %></title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>