scrollbar fix, add radio buttons to manually select categories, general theme updates
All checks were successful
Hugo / build (push) Successful in 9s
All checks were successful
Hugo / build (push) Successful in 9s
This commit is contained in:
parent
ba3bbc3bb3
commit
fe62137d11
7 changed files with 122 additions and 35 deletions
|
|
@ -22,7 +22,7 @@ params:
|
|||
img: https://placehold.co/300x200/
|
||||
- categoryName: 'Chandeliers'
|
||||
img: https://placehold.co/300x200/
|
||||
- categoryName: 'Signature Pieces'
|
||||
- categoryName: 'Signaturepieces'
|
||||
img: https://placehold.co/300x200/
|
||||
- categoryName: 'Centerpieces'
|
||||
img: https://placehold.co/300x200/
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
"deliveryPickup": "",
|
||||
"installBreakdown": "",
|
||||
"purchaseCost": "",
|
||||
"cat": "Signature Pieces"
|
||||
"cat": "Signaturepieces"
|
||||
},
|
||||
{
|
||||
"item": "8ft Circle Arch",
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
"deliveryPickup": "",
|
||||
"installBreakdown": "",
|
||||
"purchaseCost": "",
|
||||
"cat": "Signature Pieces"
|
||||
"cat": "Signaturepieces"
|
||||
},
|
||||
{
|
||||
"item": "Abstract Canopy",
|
||||
|
|
@ -240,7 +240,7 @@
|
|||
"deliveryPickup": "",
|
||||
"installBreakdown": "",
|
||||
"purchaseCost": "",
|
||||
"cat": "Signature Pieces"
|
||||
"cat": "Signaturepieces"
|
||||
},
|
||||
{
|
||||
"item": "Crescent Wood Moon",
|
||||
|
|
@ -260,7 +260,7 @@
|
|||
"deliveryPickup": "",
|
||||
"installBreakdown": "",
|
||||
"purchaseCost": "",
|
||||
"cat": "Signature Pieces"
|
||||
"cat": "Signaturepieces"
|
||||
},
|
||||
{
|
||||
"item": "Dimond Backdrop",
|
||||
|
|
@ -390,7 +390,7 @@
|
|||
"deliveryPickup": "",
|
||||
"installBreakdown": "",
|
||||
"purchaseCost": "",
|
||||
"cat": ""
|
||||
"cat": "Canopies"
|
||||
},
|
||||
{
|
||||
"item": "Rectangle Frame Backdrop",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
{{ partial "head.html" . }}
|
||||
|
||||
<body class="bg-black text-white min-h-screen flex flex-col">
|
||||
<body class="justify-center bg-black text-white min-h-screen flex flex-col">
|
||||
{{ partial "nav.html" . }} {{ block "main" .
|
||||
}}{{ end }} {{ partial "footer.html" . }}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<div class="grid grid-cols-3 gap-3 m-5 my-8">
|
||||
<div class="flex flex-col bg-white font-bold">
|
||||
<div class="flex py-8 justify-center">
|
||||
<p class="border-gray-200 border rounded-xl w-full max-w-[1000px] mx-auto p-2 text-4xl text-center text-black">
|
||||
Rental Catalog
|
||||
</p>
|
||||
</div>
|
||||
<div class="pb-16 max-w-[1000px] grid grid-cols-3 gap-3 mx-auto">
|
||||
{{ range .Site.Params.catalogButtons.home }}
|
||||
<a
|
||||
class="rounded-xl aspect-[3/2] overflow-hidden"
|
||||
|
|
@ -6,7 +12,7 @@
|
|||
>
|
||||
<div class="relative h-full max-w-full">
|
||||
<p
|
||||
class="w-full z-10 text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white font-bold text-4xl"
|
||||
class="text-black w-full z-10 text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-2xl"
|
||||
>
|
||||
{{ .categoryName }}
|
||||
</p>
|
||||
|
|
@ -19,3 +25,4 @@
|
|||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,28 @@
|
|||
<div
|
||||
class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
|
||||
class="mt-4 pb-2 flex flex-row gap-2 max-w-full overflow-x-auto whitespace-nowrap"
|
||||
>
|
||||
{{ $uniqueCategories := slice }} {{ range .Params.catalog }} {{ if not (in
|
||||
$uniqueCategories .cat) }} {{ $uniqueCategories = $uniqueCategories | append
|
||||
.cat }}
|
||||
<div class="flex gap-2 items-center px-4 border border-gray-200 rounded-lg">
|
||||
<input
|
||||
id="radio-button-{{ .cat }}"
|
||||
type="radio"
|
||||
value="{{ .cat }}"
|
||||
name="category"
|
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
|
||||
/>
|
||||
<label
|
||||
for="radio-button-{{ .cat }}"
|
||||
class="noselect text-sm p-2 font-medium text-gray-900"
|
||||
>{{ .cat }}</label
|
||||
>
|
||||
</div>
|
||||
{{ end }} {{ end }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
|
||||
>
|
||||
{{ range .Params.catalog }} {{ if ne .item "" }}
|
||||
<div class="flex flex-col bg-white rounded-lg border p-4 relative">
|
||||
|
|
@ -13,7 +36,7 @@
|
|||
{{ .item }} {{ if ne .cat "" }}
|
||||
<div>
|
||||
<span
|
||||
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300"
|
||||
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full"
|
||||
>{{ .cat }}</span
|
||||
>
|
||||
</div>
|
||||
|
|
@ -179,6 +202,9 @@
|
|||
const modalButtons = document.querySelectorAll(".grid-cols-1 a");
|
||||
const closeButtons = document.querySelectorAll("#close-modal");
|
||||
const modals = document.querySelectorAll(".fixed");
|
||||
const radioButtons = document.querySelectorAll(
|
||||
'input[type="radio"][name="category"]'
|
||||
);
|
||||
|
||||
function filterItems(category) {
|
||||
console.log("Filtering items for category:", category);
|
||||
|
|
@ -186,13 +212,11 @@
|
|||
|
||||
items.forEach((item) => {
|
||||
const itemCategory = item.querySelector(".bg-blue-100");
|
||||
if (!itemCategory) return; // Skip if category not found
|
||||
|
||||
if (category === "" || itemCategory.textContent === category) {
|
||||
if (!category || itemCategory.textContent === category) {
|
||||
item.classList.remove("hidden");
|
||||
} else {
|
||||
item.classList.add("hidden");
|
||||
// Hide modal if it's open for an item that's now hidden
|
||||
|
||||
const modalId = item.id.replace("modal-", "");
|
||||
const modal = document.getElementById(modalId);
|
||||
if (modal) modal.classList.add("hidden");
|
||||
|
|
@ -200,6 +224,12 @@
|
|||
});
|
||||
}
|
||||
|
||||
function updateUrl(category) {
|
||||
const url = window.location.href.split("#")[0];
|
||||
const newUrl = category ? `${url}#${category}` : url;
|
||||
window.history.replaceState({}, "", newUrl);
|
||||
}
|
||||
|
||||
const category = window.location.hash.substring(1);
|
||||
console.log("Initial category:", category);
|
||||
filterItems(category);
|
||||
|
|
@ -210,6 +240,15 @@
|
|||
filterItems(newCategory);
|
||||
});
|
||||
|
||||
radioButtons.forEach((radio) => {
|
||||
radio.addEventListener("change", function () {
|
||||
const category = this.value;
|
||||
console.log("Selected category:", category);
|
||||
updateUrl(category);
|
||||
filterItems(category);
|
||||
});
|
||||
});
|
||||
|
||||
modalButtons.forEach((button) => {
|
||||
button.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -226,5 +265,15 @@
|
|||
modal.classList.add("hidden");
|
||||
});
|
||||
});
|
||||
|
||||
if (category) {
|
||||
const radioToSelect = document.querySelector(
|
||||
`input[type="radio"][name="category"][value="${category}"]`
|
||||
);
|
||||
if (radioToSelect) {
|
||||
radioToSelect.checked = true;
|
||||
filterItems(category);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
#s::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
#s::-webkit-scrollbar-track {
|
||||
background-color: white;
|
||||
}
|
||||
#s::-webkit-scrollbar-thumb {
|
||||
background-color: #606060;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#s::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #909090;
|
||||
}
|
||||
#sc::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
#sc::-webkit-scrollbar-track {
|
||||
background-color: white;
|
||||
}
|
||||
#sc::-webkit-scrollbar-thumb {
|
||||
background-color: #666B7A;
|
||||
}
|
||||
2
themes/gallo/static/css/tailwind.min.css
vendored
2
themes/gallo/static/css/tailwind.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue