Skip to content

Commit

Permalink
Addressed issues with css and enter key event
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexis Rodriguez Reyes committed Jan 28, 2025
1 parent b289d21 commit 925e8d0
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 67 deletions.
53 changes: 18 additions & 35 deletions css/site-search.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions js/modules/es4/site-search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ const search = new (function() {
link.style.display = 'block';
link.style.textDecoration = 'none';

// Highlight title and description
const title = document.createElement('strong');
title.innerHTML = highlightText(item.title, searchTerm);

Expand All @@ -66,7 +65,13 @@ const search = new (function() {

listItem.appendChild(link);
list.appendChild(listItem);
});

listItem.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
link.click();
}
});
});
};

populateList(titleMatches);
Expand Down
9 changes: 7 additions & 2 deletions js/modules/site-search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ const search = new function () {
link.style.display = 'block';
link.style.textDecoration = 'none';

// Highlight title and description
const title = document.createElement('strong');
title.innerHTML = highlightText(item.title, searchTerm);

Expand All @@ -68,7 +67,13 @@ const search = new function () {

listItem.appendChild(link);
list.appendChild(listItem);
});

listItem.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
link.click();
}
});
});
};

populateList(titleMatches);
Expand Down
73 changes: 45 additions & 28 deletions less/site-search.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,20 @@
&__button {
width: (40 / @px);
height: (36 / @px);
//border: 1px solid @dark-grey;
background: white;
border: none;
text-align: center;
cursor: pointer;
padding: 0;
padding:0 0 10px 10px;
padding: 0 0 10px 10px;
margin: 0 !important;
}

&__icon {
width: (20 / @px);
}

&__inner-container {
text-align: left;
/* pc is positioning context */
position: relative;
width: 100%;
max-width: 100%;
Expand All @@ -46,7 +43,6 @@
padding: 10px;
}


&__reset-button {
position: absolute;
z-index: 1;
Expand Down Expand Up @@ -110,55 +106,76 @@

li {
padding: 0;
}
}
}

[role="option"] {
display: block;
margin: 0;
padding: 0.3em 0.5em;
list-style: none;
font-size: (16/@px);
font-size: (16 / @px);
cursor: pointer;
border-bottom: 1px solid #ccc;
}

[role="option"]:hover {
color: #000;
background-color: #ccc;
}

[aria-selected="true"] {
color: #fff;
background-color: #666;
}

&__reset-button {
position: absolute;
z-index: 1;
right: 5px;
top: 0;
bottom: 0;
padding: 0;
border: none;
background: transparent;
.vendor(appearance, none);
background-color: #ccc;

.enable-combobox input[role="combobox"]:not(:valid) ~ & {
display: none;
border: solid 30px red;
p,
strong {
color: #000;
}

}

&__controls-container {
display: flex;
flex-direction: row;
}


input[role="combobox"]{
input[role="combobox"] {
font-size: inherit !important;
height: inherit !important;
padding: inherit !important;
border: none !important;
}
}

[role="option"]:hover {
color: #000;
background-color: #ccc;

p,
strong {
color: #000;
}
}

}

.enable__is-dark-mode {
.enable-combobox {
[role="listbox"] {
background: #121212;
}
.site-search__button {
background: #121212;
}
.site-search__icon {
background: #121212;
content: url('../images/search.svg');
}
}
}

.highlight {
background-color: yellow;
color: black;
font-weight: bold;
}

0 comments on commit 925e8d0

Please sign in to comment.