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

Added search button to search box #4098

Closed

Conversation

viciousvex
Copy link

@viciousvex viciousvex commented Sep 12, 2023

Closes #529

Added a search button, because some mobile or TV browsers like Amazon Silk do not submit the search query after entering a value into the search box.

Added a search button, because some mobile or TV browsers like Amazon Silk do not submit the search query after entering a value into the search box.
@viciousvex viciousvex requested a review from a team as a code owner September 12, 2023 19:46
@viciousvex viciousvex requested review from syeopite and removed request for a team September 12, 2023 19:46
@@ -5,5 +5,6 @@
name="q" placeholder="<%= translate(locale, "search") %>"
title="<%= translate(locale, "search") %>"
value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
<input type="submit" value="<%= translate(locale, "search") %>">
Copy link
Member

@syeopite syeopite Sep 14, 2023

Choose a reason for hiding this comment

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

Just a UI suggestion:

Before:
unstyled

After:
icon

Suggested change
<input type="submit" value="<%= translate(locale, "search") %>">
<button class="search-button" id="right-overlap-search-button" type="submit"><i class="icon ion-md-search"></i></button>
Styling: add it to default.css
.search-button {
    border: none;
    color: #3E4446;
    background: transparent;
    font-size: 1.1em;
}

.search-button:hover {
    color: #090909;
}

#right-overlap-search-button {
    float: right;
    position: relative;
    bottom: 1.8em;
}

Copy link
Contributor

Choose a reason for hiding this comment

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

I like the suggestion but an aria-label would need to be added to that button to make it accessible for visually impaired users

... type="submit" aria-label="<%= translate(locale, "search") %>"><i ...

@SamantazFox
Copy link
Member

@viciousvex Can you please implement the changes proposed by the reviewers?

Copy link

This pull request has been automatically marked as stale and will be closed in 30 days because it has not had recent activity and is much likely abandoned or outdated. If you think this pull request is still relevant and applicable, you just have to post a comment and it will be unmarked.

@github-actions github-actions bot added the stale label Jan 15, 2024
@github-actions github-actions bot closed this Feb 14, 2024
@SamantazFox SamantazFox added unfinished More work is needed on this PR, or on something this PR uses. and removed stale labels Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
unfinished More work is needed on this PR, or on something this PR uses.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[suggestion] search button
4 participants