Add button to clear search field #127
Conversation
| clear_search | ||
| expect(page_params).to eq("order=name") | ||
| expect(page).to have_content(mismatch.email) | ||
|
|
There was a problem hiding this comment.
Extra empty line detected at block body end.
|
Can I suggest actually putting a button with the word "Clear" on it? Currently it looks a little like a close button. |
|
On reading back I realise my last comment sounded a bit rude. Wasn't meant to be! |
|
@danbee no, you're fine! Would it be better if the X only appeared when there's text in the box? The fading in might give the user context about its meaning. I'll try it with "Clear" and add a screenshot as well. |
|
Search boxes on Mac's tend to use a cross in a little circle. I'm just knocking up an SVG now to see what it looks like. |
|
How about this?
|
|
I think it does make sense for the clear button to only appear when there is text in the search box. This mirrors the way I've seen search boxes work elsewhere. |
|
@danbee @Graysonwright This is exactly what I was looking for! |
|
@danbee I like it - did you make that icon? I've been making custom icons for administrate so far, to avoid copyright issues. If you got that from somewhere, we should check the license or I can just make one up. |
|
I made it myself. Did it by scaling down the existing one and putting a circle around it. I'm not 100% happy with it though so let me make a better one. |
c-lliope
force-pushed
the
gw-clear-search
branch
from
107addc to
102be76
Compare
| @@ -38,6 +53,7 @@ | |||
| } | |||
|
|
|||
| .search__hint { | |||
| z-index: 1; | |||
There was a problem hiding this comment.
Rule sets should be ordered as follows: @extends, @includes without @content, properties, @includes with @content, nested rule sets
Properties should be ordered color, opacity, z-index
|
@Graysonwright Will this be getting pushed? |
|
What about using the input type search? |
|
|
|
@danbee And do we really need to style that? |
|
@zamith To fit the current layout, yes. |
|
Also, the default styling is very inconsistent between different browsers. Safari, for instance, has it's own magic CSS incantations to style certain aspects of it. |
|
What ever happened to this? |
danbee
force-pushed
the
gw-clear-search
branch
from
dd0b6ea to
090b9e9
Compare
| @@ -37,6 +56,7 @@ | |||
| } | |||
|
|
|||
| .search__hint { | |||
| z-index: 1; | |||
There was a problem hiding this comment.
Properties should be ordered color, opacity, transition, z-index
Closes #121. Problem: Users cannot clear their search unless they re-submit the search with an empty field, or click on the resource link in the navigation bar. Solution: Add a button for clearing out the search field and going back to showing all resources.
danbee
force-pushed
the
gw-clear-search
branch
from
2d52acd to
85788df
Compare
Closes #121.
Problem:
Users cannot clear their search
unless they re-submit the search with an empty field,
or click on the resource link in the navigation bar.
Solution:
Add a button for clearing out the search field
and going back to showing all resources.
## To Do - [ ] Only show clear icon when there is text in the search bar - [ ] CHANGELOG