File tree Expand file tree Collapse file tree 3 files changed +24
-15
lines changed Expand file tree Collapse file tree 3 files changed +24
-15
lines changed Original file line number Diff line number Diff line change @@ -497,7 +497,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
497
497
border : none;
498
498
font-size : 1.25rem ;
499
499
width : 100% ;
500
- padding : 0.5rem ;
500
+ padding : 0.5rem 0.5 rem 0.5 rem 1 rem ; /* 1rem to vertically align with searchbar text */
501
501
cursor : pointer;
502
502
}
503
503
@@ -519,6 +519,16 @@ atomic-search-layout atomic-layout-section[section="search"] {
519
519
box-shadow : 3px 3px 0px var (--color-shadow );
520
520
}
521
521
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
+ }
522
532
.product-selector p {
523
533
font-size : 0.75rem ;
524
534
color : var (--color-product-title );
Original file line number Diff line number Diff line change @@ -4,11 +4,12 @@ document.addEventListener('DOMContentLoaded', () => {
4
4
'product-selector-button'
5
5
) ;
6
6
7
- if ( productSelectorButton === null || productSelectorButton == null ) {
7
+ if ( productSelectorButton === null || productSelectorContent == null ) {
8
8
return ;
9
9
}
10
10
11
11
productSelectorButton . addEventListener ( 'click' , ( ) => {
12
+ /* Logic for hiding/showing ONLY when the button is clicked */
12
13
if ( productSelectorContent . style . display === 'block' ) {
13
14
productSelectorContent . style . display = 'none' ;
14
15
productSelectorButton . classList . remove ( 'remove-bottom-radius' ) ;
@@ -19,12 +20,10 @@ document.addEventListener('DOMContentLoaded', () => {
19
20
} ) ;
20
21
21
22
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' ) ) {
26
25
productSelectorContent . style . display = 'none' ;
26
+ productSelectorButton . classList . remove ( 'remove-bottom-radius' ) ;
27
27
}
28
- productSelectorButton . classList . remove ( 'remove-bottom-radius' ) ;
29
28
} ) ;
30
29
} ) ;
Original file line number Diff line number Diff line change 26
26
</ atomic-search-interface >
27
27
< button class ="product-selector-button " id ="product-selector-button ">
28
28
{{/* 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 " />
33
33
</ svg >
34
34
</ div >
35
35
</ button >
45
45
{{ $type := . }}
46
46
{{ $products := index $groupedProducts $type }}
47
47
< 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 " >
50
50
{{ 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 >
53
53
</ li >
54
54
{{ end }}
55
55
</ ul >
You can’t perform that action at this time.
0 commit comments