Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement/reusable search bar component #364

Merged

Conversation

manuel12
Copy link
Contributor

@manuel12 manuel12 commented Jun 1, 2023

Hello Spacelab team. This is my solution for: #328.

I've added stylings to the scroll bar in results container. Also removed the blue X that appeared on container on focus:

image

I've also moved the search icon farther to the left and added search result title as placeholder:

image

And also the x icon will change to search when user clicks outside of search input:

Input focused:

image

Input blurred:

image

Please tell me if all is as expected :)

manuel12 added 6 commits May 30, 2023 09:32
Updated height and border of .searchInputs.

Added padding and shortened width of input.

Removed the blue x button of input.

Added min-height, min-width and padding of
.search-icon-div.
search results is clicked or enter is pressed.
Added styling for search-results-container
scrollbar.
@netlify
Copy link

netlify bot commented Jun 1, 2023

Deploy Preview for spacelab-main ready!

Name Link
🔨 Latest commit 070829a
🔍 Latest deploy log https://app.netlify.com/sites/spacelab-main/deploys/647aec1e5273c40008d134ac
😎 Deploy Preview https://deploy-preview-364--spacelab-main.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Copy link
Contributor

@lauraehiller lauraehiller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! Before I approve, can you please comment out the code inside podcastArray? It is filler data that is only used for testing and shouldn't appear on the website.

@manuel12
Copy link
Contributor Author

manuel12 commented Jun 3, 2023

This looks great! Before I approve, can you please comment out the code inside podcastArray? It is filler data that is only used for testing and shouldn't appear on the website.

Definitely, will do.

@manuel12
Copy link
Contributor Author

manuel12 commented Jun 5, 2023

Already commented out the podcastArray, btw :)

@manuel12 manuel12 requested a review from lauraehiller June 5, 2023 20:03
Copy link
Contributor

@lauraehiller lauraehiller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@lauraehiller lauraehiller merged commit c5f98a9 into spacelabdev:main Jun 8, 2023
@manuel12 manuel12 deleted the enhancement/ReusableSearchBarComponent branch June 9, 2023 11:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants