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 @@ -486,7 +486,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
486
486
border : none;
487
487
font-size : 1.25rem ;
488
488
width : 100% ;
489
- padding : 0.5rem ;
489
+ padding : 0.5rem 0.5 rem 0.5 rem 1 rem ; /* 1rem to vertically align with searchbar text */
490
490
cursor : pointer;
491
491
}
492
492
@@ -508,6 +508,16 @@ atomic-search-layout atomic-layout-section[section="search"] {
508
508
box-shadow : 3px 3px 0px var (--color-shadow );
509
509
}
510
510
511
+ button : has (~ .product-selector [style *= "block" ])
512
+ > .product-selector-button-icon {
513
+ transition : transform 0.25s ease-in-out;
514
+ transform : rotate (180deg );
515
+ }
516
+
517
+ button : has (~ .product-selector [style *= "none" ]) > .product-selector-button-icon {
518
+ transition : transform 0.25s ease-in-out;
519
+ transform : rotate (0deg );
520
+ }
511
521
.product-selector p {
512
522
font-size : 0.75rem ;
513
523
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 22
22
23
23
< button class ="product-selector-button " id ="product-selector-button ">
24
24
{{/* product name and selector */}}
25
- < div class ="product-name "> {{ $productName }}</ div >
26
- < div class ="product-selector-button-icon ">
27
- < svg width ="8 " height ="14 " viewBox ="0 0 8 14 " fill ="none " xmlns ="http://www.w3.org/2000/svg ">
28
- < path d ="M1 13L7 7L0.999999 1 " stroke ="white " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round "/>
25
+ < div class ="product-selector-name " id =" product-selector- name "> {{ $productName }}</ div >
26
+ < div class ="product-selector-button-icon " id =" product-selector-button-icon " >
27
+ < svg width ="8 " height ="14 " viewBox ="0 0 8 14 " fill ="none " xmlns ="http://www.w3.org/2000/svg " id =" product-selector-chevron-icon " >
28
+ < path d ="M1 13L7 7L0.999999 1 " stroke ="white " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round " id =" product-selector-chevron-icon " />
29
29
</ svg >
30
30
</ div >
31
31
</ button >
41
41
{{ $type := . }}
42
42
{{ $products := index $groupedProducts $type }}
43
43
< div class ="product-selector-content " id ="product-selector-content ">
44
- < p > {{ $type | humanize | title | upper }}</ p >
45
- < ul >
44
+ < p id =" product-selector-content-product-group-name " > {{ $type | humanize | title | upper }}</ p >
45
+ < ul id =" product-selector-content-product-container " >
46
46
{{ range $products }}
47
- < li >
48
- < a href ="{{ .url }} "> {{ .title }}</ a >
47
+ < li id =" product-selector-content-product-name " >
48
+ < a id =" product-selector-content-product-link " href ="{{ .url }} "> {{ .title }}</ a >
49
49
</ li >
50
50
{{ end }}
51
51
</ ul >
You can’t perform that action at this time.
0 commit comments