Feature #6376

global search bar - add search icon, create space before browse button

Added by Tim Hutchinson about 8 years ago. Updated about 7 years ago.

Status:VerifiedStart date:02/27/2014
Priority:MediumDue date:
Assignee:Dan Gillean% Done:

0%

Category:Usability
Target version:Release 2.2.0
Google Code Legacy ID: Tested version:
Sponsored:No Requires documentation:

Description

This follow up on initial discussion on the user list:
https://groups.google.com/forum/#!topic/ica-atom-users/MBy5vERw590

Key points:
- 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.

search-bar-modified.jpg (19.8 KB) Tim Hutchinson, 02/27/2014 02:56 PM

modified-searchbox.png (3.42 KB) Dan Gillean, 02/27/2014 04:11 PM


Related issues

Blocked by Access to Memory (AtoM) - Bug #7728: Browse drop down goes off screen if no logo / site title ... Verified 12/17/2014

History

#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.

There are a few issues about the header that should be taken into account - namely, #6292 and #6293 - just as a thought.

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

Hi Tim,

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.

#5 Updated by Sarah Romkey almost 8 years ago

Hi all,

Just noticed these updates and wanted to point out this bug in regards to the search icon:

https://projects.artefactual.com/issues/6799

It only happens in IE 9 and lower, but just in case that's deemed to be important.

Cheers,

Sarah

#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 :)

#7 Updated by Tim Hutchinson almost 8 years ago

OK, thanks. Interesting :)

#8 Updated by Heather Anderson almost 8 years ago

Hey all,

A couple of key files would be helpful to point out:

The template for the search box is located here:
https://github.com/artefactual/atom/blob/2.x/apps/qubit/modules/search/templates/_box.php

The template for the header file is here:
https://github.com/artefactual/atom/blob/2.x/apps/qubit/templates/_header.php

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):

<div class="search-realm-advanced-home">
<a href=" 'search', 'action' => 'advanced')) ?>"></a>
</div>

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 (&nbsp) and bullets (&raquo) where required, but ideally this is handled by the stylesheet.

#9 Updated by Tim Hutchinson almost 8 years ago

Hi Heather - great, thanks very much for your thorough and speedy guidance on this.

#10 Updated by Jesús García Crespo over 7 years ago

  • Target version changed from Release 2.1.0 to Release 2.2.0

#11 Updated by Tim Hutchinson over 7 years ago

Steve has submitted a pull request addressing this issue:
https://github.com/artefactual/atom/pull/88

#12 Updated by Dan Gillean over 7 years ago

Nice! Thanks Tim and Steve! Will look at soon.

#13 Updated by Jesús García Crespo over 7 years ago

  • Status changed from New to QA/Review
  • Assignee changed from Tim Hutchinson to Dan Gillean

#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:

The same image describing the header bar is also used on the settings 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?

#15 Updated by Dan Gillean over 7 years ago

Uh oh! We just found an issue with this we hadn't considered - see #7728, we'll address it there.

#16 Updated by Dan Gillean over 7 years ago

  • Blocked by Bug #7728: Browse drop down goes off screen if no logo / site title enabled added

#17 Updated by Tim Hutchinson over 7 years ago

I'm not sure I follow - is the behaviour in #7728 worse when the browse button and search boxes are reversed? (I don't currently have an account on the text box where the new header is implemented, so haven't tested.)

#18 Updated by Tim Hutchinson over 7 years ago

P.S. thanks for looking at this so quickly!

#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.

#20 Updated by Tim Hutchinson over 7 years ago

OK, thanks for clarifying that. I'd somehow missed the fact that #7728 was new.

#21 Updated by Dan Gillean over 7 years ago

  • Status changed from QA/Review to Verified

#7728 Fixed! This now looks great.

#22 Updated by Dan Gillean about 7 years ago

  • Requires documentation deleted (Yes)

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.

Also available in: Atom PDF