Mobile Search Improvement #115
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
EMaksy
reviewed
Nov 19, 2025
| {{/if}} | ||
| <script> | ||
| function toggleSearch() { | ||
| var searchField = document.getElementById('search-wrapper'); |
Member
There was a problem hiding this comment.
Try to use let or const instead of var overall ,as modern js recommends using let and const because they are block-scope
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
Member
There was a problem hiding this comment.
Or we use es6 syntax?
const toggleSearch = () => {
document.getElementById('search-wrapper')?.classList.toggle('hidden');
};
check out the ternary operator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator
Contributor
Author
There was a problem hiding this comment.
So the lint command doesn't like the use of let for elements. Also I could not get the const toggleSearch = () => {..} to work. Anyway, I have reworked this to use 05-mobile-navbar.js file so that I could make the Menu close when the Search button is clicked and vice versa.
jagabomb
force-pushed
the
mobile-search-improvement
branch
from
1ff145e to
cbf6b10
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds some design improvements to the usability of the search for mobile layouts mostly. The search tool can be accessed by using the search icon button which then display the search field. The close/clear button (X) helps to close the search for now. There is also a minor font change for the desktop search field font size. EOS icons have also included as a CDN import so that we can update other icons in the future to make it more closer to the overall Trento design.
Existing Mobile Search:
Mobile Search with Search Icon Button:
Proposed Behaviour between Search and Menu Panel States
