mycosystems/gallowelds.com
4
0
Fork 0
Code Issues 1 Pull requests Activity Actions

scrollbar fix, add radio buttons to manually select categories, general theme updates
All checks were successful
Hugo / build (push) Successful in 9s
Details

Browse source
This commit is contained in:
brooke 2024-06-08 22:48:56 -04:00
parent ba3bbc3bb3
commit fe62137d11
7 changed files with 122 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.yaml
View file

@ -22,7 +22,7 @@ params:
img: https://placehold.co/300x200/ img: https://placehold.co/300x200/
- categoryName: 'Chandeliers' - categoryName: 'Chandeliers'
img: https://placehold.co/300x200/ img: https://placehold.co/300x200/
- categoryName: 'Signature Pieces' - categoryName: 'Signaturepieces'
img: https://placehold.co/300x200/ img: https://placehold.co/300x200/
- categoryName: 'Centerpieces' - categoryName: 'Centerpieces'
img: https://placehold.co/300x200/ img: https://placehold.co/300x200/

10
content/catalog/index.md
View file

@ -130,7 +130,7 @@
"deliveryPickup": "", "deliveryPickup": "",
"installBreakdown": "", "installBreakdown": "",
"purchaseCost": "", "purchaseCost": "",
"cat": "Signature Pieces" "cat": "Signaturepieces"
}, },
{ {
"item": "8ft Circle Arch", "item": "8ft Circle Arch",
@ -200,7 +200,7 @@
"deliveryPickup": "", "deliveryPickup": "",
"installBreakdown": "", "installBreakdown": "",
"purchaseCost": "", "purchaseCost": "",
"cat": "Signature Pieces" "cat": "Signaturepieces"
}, },
{ {
"item": "Abstract Canopy", "item": "Abstract Canopy",
@ -240,7 +240,7 @@
"deliveryPickup": "", "deliveryPickup": "",
"installBreakdown": "", "installBreakdown": "",
"purchaseCost": "", "purchaseCost": "",
"cat": "Signature Pieces" "cat": "Signaturepieces"
}, },
{ {
"item": "Crescent Wood Moon", "item": "Crescent Wood Moon",
@ -260,7 +260,7 @@
"deliveryPickup": "", "deliveryPickup": "",
"installBreakdown": "", "installBreakdown": "",
"purchaseCost": "", "purchaseCost": "",
"cat": "Signature Pieces" "cat": "Signaturepieces"
}, },
{ {
"item": "Dimond Backdrop", "item": "Dimond Backdrop",
@ -390,7 +390,7 @@
"deliveryPickup": "", "deliveryPickup": "",
"installBreakdown": "", "installBreakdown": "",
"purchaseCost": "", "purchaseCost": "",
"cat": "" "cat": "Canopies"
}, },
{ {
"item": "Rectangle Frame Backdrop", "item": "Rectangle Frame Backdrop",

4
themes/gallo/layouts/_default/baseof.html
View file

@ -1,8 +1,8 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
{{ partial "head.html" . }} {{ 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" . {{ partial "nav.html" . }} {{ block "main" .
}}{{ end }} {{ partial "footer.html" . }} }}{{ end }} {{ partial "footer.html" . }}
</body> </body>

47
themes/gallo/layouts/partials/categories.html
View file

@ -1,21 +1,28 @@
<div class="grid grid-cols-3 gap-3 m-5 my-8"> <div class="flex flex-col bg-white font-bold">
{{ range .Site.Params.catalogButtons.home }} <div class="flex py-8 justify-center">
<a <p class="border-gray-200 border rounded-xl w-full max-w-[1000px] mx-auto p-2 text-4xl text-center text-black">
class="rounded-xl aspect-[3/2] overflow-hidden" Rental Catalog
href="/catalog/#{{ .categoryName }}" </p>
> </div>
<div class="relative h-full max-w-full"> <div class="pb-16 max-w-[1000px] grid grid-cols-3 gap-3 mx-auto">
<p {{ range .Site.Params.catalogButtons.home }}
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" <a
> class="rounded-xl aspect-[3/2] overflow-hidden"
{{ .categoryName }} href="/catalog/#{{ .categoryName }}"
</p> >
<img <div class="relative h-full max-w-full">
class="h-full max-w-full opacity-50" <p
src="{{ .img }}" 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"
alt="Category {{ .categoryName }}" >
/> {{ .categoryName }}
</div> </p>
</a> <img
{{ end }} class="h-full max-w-full opacity-50"
src="{{ .img }}"
alt="Category {{ .categoryName }}"
/>
</div>
</a>
{{ end }}
</div>
</div> </div>

61
themes/gallo/layouts/partials/rental-catalog.html
View file

@ -1,5 +1,28 @@
<div <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 "" }} {{ range .Params.catalog }} {{ if ne .item "" }}
<div class="flex flex-col bg-white rounded-lg border p-4 relative"> <div class="flex flex-col bg-white rounded-lg border p-4 relative">
@ -13,7 +36,7 @@
{{ .item }} {{ if ne .cat "" }} {{ .item }} {{ if ne .cat "" }}
<div> <div>
<span <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 >{{ .cat }}</span
> >
</div> </div>
@ -179,6 +202,9 @@
const modalButtons = document.querySelectorAll(".grid-cols-1 a"); const modalButtons = document.querySelectorAll(".grid-cols-1 a");
const closeButtons = document.querySelectorAll("#close-modal"); const closeButtons = document.querySelectorAll("#close-modal");
const modals = document.querySelectorAll(".fixed"); const modals = document.querySelectorAll(".fixed");
const radioButtons = document.querySelectorAll(
'input[type="radio"][name="category"]'
);
function filterItems(category) { function filterItems(category) {
console.log("Filtering items for category:", category); console.log("Filtering items for category:", category);
@ -186,13 +212,11 @@
items.forEach((item) => { items.forEach((item) => {
const itemCategory = item.querySelector(".bg-blue-100"); 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"); item.classList.remove("hidden");
} else { } else {
item.classList.add("hidden"); item.classList.add("hidden");
// Hide modal if it's open for an item that's now hidden
const modalId = item.id.replace("modal-", ""); const modalId = item.id.replace("modal-", "");
const modal = document.getElementById(modalId); const modal = document.getElementById(modalId);
if (modal) modal.classList.add("hidden"); 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); const category = window.location.hash.substring(1);
console.log("Initial category:", category); console.log("Initial category:", category);
filterItems(category); filterItems(category);
@ -210,6 +240,15 @@
filterItems(newCategory); 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) => { modalButtons.forEach((button) => {
button.addEventListener("click", function (e) { button.addEventListener("click", function (e) {
e.preventDefault(); e.preventDefault();
@ -226,5 +265,15 @@
modal.classList.add("hidden"); 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> </script>

31
themes/gallo/static/css/style.css
View file

@ -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
View file

File diff suppressed because one or more lines are too long