From e3d404629e32113e25be01027cff5c1e4fb63b7f Mon Sep 17 00:00:00 2001
From: Michael Leon Putra Widhi <leonmichael463@gmail.com>
Date: Sat, 7 Oct 2023 11:10:20 +0700
Subject: [PATCH] feat : more responsive home
---
scripts/client/pages/template/navbar.php | 4 ++--
scripts/client/public/css/components/navbar.css | 17 ++++++++++++++++-
scripts/client/public/js/navigation.js | 14 +++++++-------
scripts/client/public/js/product.js | 4 ++--
scripts/server/app/models/ProductModel.php | 3 +--
5 files changed, 28 insertions(+), 14 deletions(-)
diff --git a/scripts/client/pages/template/navbar.php b/scripts/client/pages/template/navbar.php
index 15d4389..be77689 100644
--- a/scripts/client/pages/template/navbar.php
+++ b/scripts/client/pages/template/navbar.php
@@ -3,11 +3,11 @@
<div class="navCt">
<div class="navLeft">
<div class="navLogoSide" onclick="redirectToHome()">
- <img class="navLogo" src="../../public/images/logo.png"/>
+ <img class="navLogo" src="../../public/images/logo.png" alt="logo"/>
<h1 class="navTitle">KBL</h1>
</div>
<div class="navSearch">
- <img class="navSearchIcon" id="productqueryimg" src="../../public/images/search-black.png"/>
+ <img class="navSearchIcon" id="productqueryimg" src="../../public/images/search-black.png" alt="search"/>
<input class="navSearchInput" type="text" id="queryproduct" placeholder=" Search for products or categories" >
</div>
</div>
diff --git a/scripts/client/public/css/components/navbar.css b/scripts/client/public/css/components/navbar.css
index 3f5f938..9c1e0dd 100644
--- a/scripts/client/public/css/components/navbar.css
+++ b/scripts/client/public/css/components/navbar.css
@@ -64,7 +64,16 @@ h1.navTitle {
font-size: 15px;
font-family: "Arial";
text-align: left;
- color: #888888;
+ color: black;
+ width: 85%;
+}
+
+.navSearch input::placeholder {
+ border: none;
+ font-size: 15px;
+ font-family: "Arial";
+ text-align: left;
+ color: #828282;
width: 85%;
}
@@ -225,6 +234,9 @@ h1.navTitle {
.navSearch input {
width: 80%;
}
+ .navSearch input::placeholder {
+ width: 80%;
+ }
.navSearchIcon {
margin-left: 7px;
}
@@ -251,6 +263,9 @@ h1.navTitle {
.navSearch input {
font-size: 10px;
}
+ .navSearch input::placeholder {
+ font-size: 10px;
+ }
.navSearch {
border-radius: 20px;
height: 28px;
diff --git a/scripts/client/public/js/navigation.js b/scripts/client/public/js/navigation.js
index fde676f..7af390b 100644
--- a/scripts/client/public/js/navigation.js
+++ b/scripts/client/public/js/navigation.js
@@ -2,13 +2,13 @@ function putNavbar(userRole) {
// Create an object to store navigation data for different roles
const navData = {
user: [
- { text: "History", icon: "history.png", onClick: "http://localhost:8000/pages/history" },
- { text: "Topup", icon: "topup.png", onClick: "http://localhost:8000/pages/topup" }
+ { text: "History", icon: "history.png", alt: "history", onClick: "http://localhost:8000/pages/history" },
+ { text: "Topup", icon: "topup.png", alt: "topup", onClick: "http://localhost:8000/pages/topup" }
],
admin: [
- { text: "Edit Product", icon: "edit-product.png", onClick: "http://localhost:8000/pages/admin-product" },
- { text: "Handle Topup", icon: "topup.png", onClick: "http://localhost:8000/pages/admin-top-up" },
- { text: "Users", icon: "user-manage.png", onClick: "http://localhost:8000/pages/admin-user" }
+ { text: "Edit Product", icon: "edit-product.png", alt: "editpro", onClick: "http://localhost:8000/pages/admin-product" },
+ { text: "Handle Topup", icon: "topup.png", alt: "topup", onClick: "http://localhost:8000/pages/admin-top-up" },
+ { text: "Users", icon: "user-manage.png", alt: "user", onClick: "http://localhost:8000/pages/admin-user" }
],
guest : [],
};
@@ -21,7 +21,7 @@ function putNavbar(userRole) {
function createNavItem(item) {
navRight.innerHTML += `
<div class="navItems" onclick="window.location.href='${item.onClick}'">
- <img class="navIcon" src="../../public/images/${item.icon}"/>
+ <img class="navIcon" src="../../public/images/${item.icon}" alt="${item.alt}"/>
<span class="navText">${item.text}</span>
</div>`;
}
@@ -32,7 +32,7 @@ function putNavbar(userRole) {
navRight.innerHTML +=
'<div class="navCollapse"> \
<div class="navItems"> \
- <img class="navIcon" src="../../public/images/user.png"/> \
+ <img class="navIcon" src="../../public/images/user.png" alt="profile"/> \
<span class="navText" id="unameuser"></span> \
<i class="fa fa-caret-down"></i> \
</div> \
diff --git a/scripts/client/public/js/product.js b/scripts/client/public/js/product.js
index d1b7e57..a9beb0c 100644
--- a/scripts/client/public/js/product.js
+++ b/scripts/client/public/js/product.js
@@ -182,11 +182,11 @@ function appendData(data, target) {
<div class="productdesc"> \
<div class="stockCategory"> \
<div class="category"> \
- <img src="/public/images/category.png" class="cardIcon">
+ <img src="/public/images/category.png" class="cardIcon" alt="category">
${data[i].category_name}
</div> \
<div class="stock"> \
- <img src="/public/images/quantity.png" class="cardIcon">
+ <img src="/public/images/quantity.png" class="cardIcon" alt="stock">
${data[i].stock}
</div> \
</div> \
diff --git a/scripts/server/app/models/ProductModel.php b/scripts/server/app/models/ProductModel.php
index 20bddfd..820d05b 100644
--- a/scripts/server/app/models/ProductModel.php
+++ b/scripts/server/app/models/ProductModel.php
@@ -43,7 +43,7 @@ class ProductModel {
product.price,
product.stock
FROM product
- INNER JOIN category ON product.idCategory = category.id WHERE stock > 0
+ INNER JOIN category ON product.idCategory = category.id
ORDER BY product.name');
return $this->db->resultSet();
@@ -103,7 +103,6 @@ class ProductModel {
product.stock
FROM product
INNER JOIN category ON product.idCategory = category.id
- WHERE stock > 0
ORDER BY product.name
LIMIT :limit
OFFSET :offset');
--
GitLab