Skip to content

Commit fcf4bba

Browse files
authored
fix: Product selector click is not working fully (#196)
1 parent d727a19 commit fcf4bba

File tree

3 files changed

+24
-15
lines changed

3 files changed

+24
-15
lines changed

assets/css/v2/style.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -497,7 +497,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
497497
border: none;
498498
font-size: 1.25rem;
499499
width: 100%;
500-
padding: 0.5rem;
500+
padding: 0.5rem 0.5rem 0.5rem 1rem; /* 1rem to vertically align with searchbar text */
501501
cursor: pointer;
502502
}
503503

@@ -519,6 +519,16 @@ atomic-search-layout atomic-layout-section[section="search"] {
519519
box-shadow: 3px 3px 0px var(--color-shadow);
520520
}
521521

522+
button:has(~ .product-selector[style*="block"])
523+
> .product-selector-button-icon {
524+
transition: transform 0.25s ease-in-out;
525+
transform: rotate(180deg);
526+
}
527+
528+
button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
529+
transition: transform 0.25s ease-in-out;
530+
transform: rotate(0deg);
531+
}
522532
.product-selector p {
523533
font-size: 0.75rem;
524534
color: var(--color-product-title);

assets/js/product-selector.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ document.addEventListener('DOMContentLoaded', () => {
44
'product-selector-button'
55
);
66

7-
if (productSelectorButton === null || productSelectorButton == null) {
7+
if (productSelectorButton === null || productSelectorContent == null) {
88
return;
99
}
1010

1111
productSelectorButton.addEventListener('click', () => {
12+
/* Logic for hiding/showing ONLY when the button is clicked */
1213
if (productSelectorContent.style.display === 'block') {
1314
productSelectorContent.style.display = 'none';
1415
productSelectorButton.classList.remove('remove-bottom-radius');
@@ -19,12 +20,10 @@ document.addEventListener('DOMContentLoaded', () => {
1920
});
2021

2122
window.addEventListener('click', (event) => {
22-
if (
23-
!event.target.matches('#product-selector-button') &&
24-
!event.target.matches('#product-selector-button-icon')
25-
) {
23+
/* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
24+
if (!event.target.id.includes('product-selector')) {
2625
productSelectorContent.style.display = 'none';
26+
productSelectorButton.classList.remove('remove-bottom-radius');
2727
}
28-
productSelectorButton.classList.remove('remove-bottom-radius');
2928
});
3029
});

layouts/partials/sidebar-v2.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@
2626
</atomic-search-interface>
2727
<button class="product-selector-button" id="product-selector-button">
2828
{{/* product name and selector */}}
29-
<div class="product-name">{{ $productName }}</div>
30-
<div class="product-selector-button-icon">
31-
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
32-
<path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
29+
<div class="product-selector-name" id="product-selector-name">{{ $productName }}</div>
30+
<div class="product-selector-button-icon" id="product-selector-button-icon">
31+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" id="product-selector-chevron-icon">
32+
<path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="product-selector-chevron-icon"/>
3333
</svg>
3434
</div>
3535
</button>
@@ -45,11 +45,11 @@
4545
{{ $type := . }}
4646
{{ $products := index $groupedProducts $type }}
4747
<div class="product-selector-content" id="product-selector-content">
48-
<p>{{ $type | humanize | title | upper }}</p>
49-
<ul>
48+
<p id="product-selector-content-product-group-name">{{ $type | humanize | title | upper }}</p>
49+
<ul id="product-selector-content-product-container">
5050
{{ range $products }}
51-
<li>
52-
<a href="{{ .url }}">{{ .title }}</a>
51+
<li id="product-selector-content-product-name">
52+
<a id="product-selector-content-product-link" href="{{ .url }}">{{ .title }}</a>
5353
</li>
5454
{{ end }}
5555
</ul>

0 commit comments

Comments
 (0)