Added search input to mobile top navbar
Hello everyone.
This is my first development contribution report. I've made one PR with search input box for the mobile site. It was merged today.
What I've done:
I've added search icon which user can click to show search input.
That's how it looks like when the user shows search input.
I've got constructive feedback from @Sekhmet @bonustrack during PR. It was really helpful. I applied it in free time. @bonustrack pointed to the UX stuff such as clickable area and triggering focus on input. @Sakmet was focused on the code quality, style, and performance. I've converted Topnav.js
stateless component to stateful react component. Also, I've added handlers for user click and ref
.
From CSS side I've changed colors and sizing for the navbar.
PR: 1085
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution can't be approved yet.
See the Utopian rules. Please edit your post to apply for approval. You can edit your post here.
You can contact us on Discord.
[utopian-moderator]
I've just added screenshot to a post.
Thank you for the contribution. It has been approved.
[utopian-moderator]
Hey @d646d19cf I am @utopian-io. I have just upvoted you at 19% Power!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Congratulations @d646d19cf! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
You published your First Post
You got a First Vote
Award for the number of upvotes received
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOP
Congratulations @d646d19cf! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
You made your First Comment
You made your First Vote
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOP
Congratulations @d646d19cf! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
You got your First payout
Award for the total payout received
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOP
Congratulations @d646d19cf! You have received a personal award!
1 Year on Steemit
Click on the badge to view your Board of Honor.
Do not miss the last post from @steemitboard:
Congratulations @d646d19cf! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!