global search bar - add search icon, create space before browse button
|Assignee:||Dan Gillean||% Done:|
|Target version:||Release 2.2.0|
|Google Code Legacy ID:||Tested version:|
This follow up on initial discussion on the user list:
- browse button is in the spot where you’d normally have a search submit button/icon
- seems fairly standard to have a search button, and most other AtoM searches have one (e.g. advanced, authority records, etc.)
We're not ready for development at this point, but I think it's fair to say that we'll want to contribute something, even if it's done in a way that will allow installations to toggle between the proposed enhancements and the current design, via CSS. Hence the liberty I am taking in filing the issue :)
This specifically applies to the 2.x Dominion theme.
#1 Updated by Dan Gillean about 8 years ago
- File modified-searchbox.png added
- Category set to Usability
- Assignee set to Tim Hutchinson
- Target version set to Release 2.1.0
Tim, I have tentatively assigned this to you, for 2.1 - we can always revise this if needed.
We have recently done pretty much exactly what was discussed (namely: move browse button to other side and separate from search to avoid confusion; add a search button icon; as well as make a link to advanced search persistent) for a client theme that is not yet public. I'm attaching a screenshot of what was done for the theme.
Keep in mind that the header on that theme is larger than 50px - but if, in general, this is what is planned, it might be possible that we could put our developer in touch with yours and share some of the code, for incorporation into the Dominion theme.
It's also possible that, since we have a model in-house, we might be able to find time in the future to implement this ourselves here. I have been hearing lots of feedback about this from the community, now that the discussion is in the open, and it seems an easy way to improve the usability of the site, so I'd love to see this happen one way or another soon.
#2 Updated by Tim Hutchinson about 8 years ago
Thanks, Dan. I'm glad to hear you've already been working on this. I hadn't thought about swapping search and browse (I guess I was focusing on the path of least resistance!) but I like that better. I also like the separate link for advanced search, but I guess that should be pursued separately once the 50x issue is addressed. I'll certainly take you up on your offer to have your people contact my people once we're ready to develop this piece :) If you don't get there first.
#3 Updated by Tim Hutchinson almost 8 years ago
Hi Dan - Just wanted to check in on this issue. Any chance you will be able to handle this yourself in 2.1? Otherwise, we are interested in making this change (swap search and browse, add search icon) and contributing it back, but our developer will want to take you up on your offer of the client code, and may need some further guidance. In particular we weren't sure whether this would just be a change to the Dominion theme or the default templates as well. I think we will omit the text link to advanced search unless #6293 gets fixed on time.
#4 Updated by Dan Gillean almost 8 years ago
Sadly, I think it unlikely that we will have time to address #6293 for 2.1 - and fixing the header bar's search box is uncertain, so if USask did want to take it on, that would be great! I've asked heather, our front-end dev who did the work for the CVA theme to post some useful information here about where the code will need to be modified.
I know for example that in this file: https://github.com/artefactual/atom/blob/2.x/apps/qubit/templates/_header.php#L27
... the order of the elements called needs to be switched around, and some CSS tweaked to add some padding, etc. Heather will add some further notes as well.
Let us know how else we can help!
And yes, I agree that leaving out the advanced search link for now will be best - we also have to think about the effect this will have on custom-themed sites, and i think that if we are just switching the default position of search and browse on the Dominion template, and adding a search button/icon, the impact should be minimal.
#6 Updated by Dan Gillean almost 8 years ago
Tim, I don't think you'll be able to see that issue ticket, but here's the text from it:
"When using the custom search button (magnifying glass) in IE 9 or lower, the search string is replaced by the word "search" and results for the word "search" appear."
Heather, take this into account when advising Tim and Steve :)
#8 Updated by Heather Anderson almost 8 years ago
A couple of key files would be helpful to point out:
The template for the search box is located here:
The template for the header file is here:
Changing the order of 'Browse' and 'Search' menu is only a matter of flipping lines 29 with 31.
To add 'advanced search' button
When inserting a custom 'Advanced Search' button, add the following code after line 54 (or just after the closing </form> tag):
<a href=" 'search', 'action' => 'advanced')) ?>"></a>
To add search button with icon
This one is a combination of using CSS for the icon (bootstrap's glyphicons are supported, or other) and adding a line similar to this around line 10 of the _box.php file:
<button action=" 'search')) ?>" data-autocomplete=" 'search', 'action' => 'autocomplete')) ?>" autocomplete="off"></button>
Note that the background contains the icon, and so is done through CSS using the content: selector and a pseudo-class (usually 'before').
Style to taste. You may have to add space ( ) and bullets (») where required, but ideally this is handled by the stylesheet.
#14 Updated by Dan Gillean over 7 years ago
- Requires documentation set to Yes
Will require updates to some screenshots - most importantly on this page:
Spot check other image directories and if possible, update shots that include the header bar - or if easier and not relevant to the instructions, simply crop the screenshot to exclude the header bar?
#19 Updated by Dan Gillean over 7 years ago
Basically, the search box gave the old browse button enough room for the drop-down menu to open to the left, even when the site title and logo was disabled. Now that it is moved to the left, there is no room - so the drop-down menu opens off-screen.
Mike Gale wanted to make use of this commit in a theme he's working on, so he will aim to fix the issue on #7728. You guys can always cherry-pick the commit if you want it right away. I think the easiest fix will be to have the drop-down menu open to the right - e.g. under the search bar.
#22 Updated by Dan Gillean about 7 years ago
- Requires documentation deleted (
Key screenshots and sections in Navigate are already updated in 2.2 docs. I'm slowly going through old images and cropping out the header bar from older images, where it is not necessary, so we don't have to update them all.