aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-05-18 18:17:41 +0200
committerlonkaars <loek@pipeframe.xyz>2023-05-18 18:17:41 +0200
commit569d61381723eea60188e00d6133fddcaee37ef8 (patch)
tree386c4a441900977ec262a5ba54e191c1dfa4db07 /public
parente5e3cdb4da3b5c0f4298f84e80de5182b1f632c0 (diff)
display and filter categories on products page
Diffstat (limited to 'public')
-rw-r--r--public/global.css7
-rw-r--r--public/product.css6
-rw-r--r--public/products.css60
-rw-r--r--public/products.php88
4 files changed, 133 insertions, 28 deletions
diff --git a/public/global.css b/public/global.css
index 4add154..a417d10 100644
--- a/public/global.css
+++ b/public/global.css
@@ -79,3 +79,10 @@ body, html {
}
.d-ib { display: inline-block; }
+
+.twocolumn {
+ display: grid;
+ grid-template-columns: 200px 1fr;
+ gap: 16px;
+}
+
diff --git a/public/product.css b/public/product.css
index 54fe81b..b3d0e59 100644
--- a/public/product.css
+++ b/public/product.css
@@ -1,9 +1,3 @@
-.twocolumn {
- display: grid;
- grid-template-columns: 200px 1fr;
- gap: 16px;
-}
-
.twocolumn .left { text-align: center; }
.twocolumn .left img {
max-width: 100%;
diff --git a/public/products.css b/public/products.css
index 5dee942..ecaaaa3 100644
--- a/public/products.css
+++ b/public/products.css
@@ -1,12 +1,14 @@
+:root {
+ --width: 1000px;
+}
+
.products {
- --grid-columns: 3;
+ --min-width: 200px;
display: grid;
- grid-template-columns: repeat(var(--grid-columns), 1fr);
+ grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
gap: 8px;
align-items: start;
}
-@media (max-width: 600px) { .products { --grid-columns: 2; } }
-@media (max-width: 400px) { .products { --grid-columns: 1; } }
.products .product {
background-color: var(--bg-alt);
@@ -22,3 +24,53 @@
.product span { display: block; }
.product .price { font-size: 1.5rem; }
+
+.categories a {
+ position: relative;
+ display: block;
+ color: var(--fg-alt);
+ text-decoration: none;
+}
+.categories .category {
+ margin-left: 8px;
+ height: 1.25em;
+}
+
+.categories .category::before {
+ content: "";
+ position: absolute;
+ height: 2px;
+ width: 14px;
+ background-color: var(--fg);
+ left: -2px;
+ top: 50%;
+ transform: translate(-100%, -50%);
+}
+
+.categories .sub {
+ margin-left: 8px;
+ position: relative;
+}
+
+.categories > .sub::before {
+ top: 0;
+}
+
+.sub::before {
+ content: "";
+ position: absolute;
+ width: 2px;
+ background-color: var(--fg);
+ left: -8px;
+ top: calc(1.25em * -0.5);
+ bottom: calc(1.25em * 0.5);
+}
+
+.categories:has(.current) a {
+ color: var(--fg);
+}
+
+.categories:has(.current) a.current {
+ color: var(--fg-alt);
+ font-weight: 700;
+}
diff --git a/public/products.php b/public/products.php
index da337ad..ce0ada5 100644
--- a/public/products.php
+++ b/public/products.php
@@ -13,6 +13,34 @@ function product_template($product) {
EOF;
}
?>
+<?php $cat_id = $_GET['c']; ?>
+<?php function categories_recursive($id = null) {
+ global $cursor, $cat_id;
+ if ($id === null) {
+ $res = $cursor->query("select id, name, parent from category where parent is null");
+ } else {
+ $statement = $cursor->prepare("select id, name, parent from category where parent = ?");
+ $statement->bind_param("i", $id);
+ $statement->execute();
+ $res = $statement->get_result();
+ }
+ if (!mysqli_num_rows($res)) return;
+ echo '<div class="sub">';
+ $categories = $res->fetch_all(MYSQLI_ASSOC);
+ foreach ($categories as $category) {
+ // php is een hele mooie programmeertaal die heel fijn werkt
+ echo "<a href='?c=";
+ echo $category["id"];
+ echo "' class='";
+ echo "category ";
+ if ($category["id"] == $cat_id) echo "current ";
+ echo "'>";
+ echo $category["name"];
+ echo "</a>";
+ categories_recursive($category["id"]);
+ }
+ echo '</div>';
+} ?>
<html>
<head>
<?php include 'head.php' ?>
@@ -22,25 +50,49 @@ EOF;
<body>
<?php include 'navbar.php' ?>
<div class="main limwidth">
- <h2>lijst met producten:</h2>
- <?php do {
- if (($user_privileges & PRIVILEGE_ADMIN) == 0) break;
- echo <<<"EOF"
- <div class="center">
- <form action="/admin-product.php" method="get" class="d-ib">
- <input type="submit" value="Nieuw product toevoegen" class="button filled">
- </form>
- <form action="/admin-category.php" method="get" class="d-ib">
- <input type="submit" value="Nieuwe categorie toevoegen" class="button filled">
- </form>
+ <div class="twocolumn">
+ <div class="left">
+ <h2>Filters</h2>
+ <h3>Categorieën</h3>
+ <div class="categories">
+ <a href="?">Reset</a>
+ <?php categories_recursive() ?>
</div>
- EOF;
- } while (false); ?>
- <div class="products">
- <?php
- $res = $cursor->query("select id, image, price, name from webs.product");
- while ($product = $res->fetch_object()) product_template($product);
- ?>
+ </div>
+ <div class="right">
+ <?php
+ $id = $_GET['c'];
+ echo "<h2>Producten";
+ if ($id !== null) echo " in categorie $id";
+ echo "</h2>";
+ ?>
+ <?php do {
+ if (($user_privileges & PRIVILEGE_ADMIN) == 0) break;
+ echo <<<"EOF"
+ <div class="center">
+ <form action="/admin-product.php" method="get" class="d-ib">
+ <input type="submit" value="Nieuw product toevoegen" class="button filled">
+ </form>
+ <form action="/admin-category.php" method="get" class="d-ib">
+ <input type="submit" value="Nieuwe categorie toevoegen" class="button filled">
+ </form>
+ </div>
+ EOF;
+ } while (false); ?>
+ <div class="products">
+ <?php
+ if ($id === null) {
+ $res = $cursor->query("select id, image, price, name from webs.product");
+ } else {
+ $statement = $cursor->prepare("select id, image, price, name from webs.product where category = ?");
+ $statement->bind_param("i", $id);
+ $statement->execute();
+ $res = $statement->get_result();
+ }
+ while ($product = $res->fetch_object()) product_template($product);
+ ?>
+ </div>
+ </div>
</div>
</div>
<?php include 'footer.php' ?>