469156 - Implementing a Search Feature

Status: VERIFIED FIXED

(Websites :: communitystore.mozilla.org, defect)

Description

[Tara (musingt)]

Would be great if we can add some sort of search feature so designs can be found through tags, and artist's name.  Whether this is a search box, a cool tag cloud, or both, or something else.

I think it not only helps people search through the designs on our site, but also helps the designs become more visible through other searches.  For example we recently indexed the official Mozilla Store into Teenormous.  But they are having a hard time indexing this store since there are no tags or keywords surround the designs.  (http://musingt.com/?p=38)

Comment 1

[Ryan Doherty (:rdoherty)]

Design file is here:
people.mozilla.org/~rdoherty/CommunityStore.pdf

Comment 2

[Ryan Doherty (:rdoherty)]

(In reply to comment #1)
> Design file is here:
> people.mozilla.org/~rdoherty/CommunityStore.pdf

That file has the wrong font for the navbar, but it's the desired layout otherwise. The only graphic that would need to be pulled out is the arrow button.

Comment 3

[Tara (musingt)]

(In reply to comment #2)

The only graphic that would need to be pulled out is the arrow
> button.

Is that something I need to do?  And by pulling out, do you mean in a separate layer?  Let me know.

Comment 4

[Alex Buchanan [:abuchanan]]

Attachment: v1, search by design name, author, tags

Comment 5

[Alex Buchanan [:abuchanan]]

Attachment: search submit button image

I cut this out of the PDF.  It works OK, but feel free to replace with something better if you have it.

Comment 6

[Ryan Doherty (:rdoherty)]

Comment on attachment 353432 [details] [diff] [review]
v1, search by design name, author, tags

Search works pretty well, needs a little work.

Missing views/search-no-results.tpl.php

Could the 2 search queries be combined into 1 using a LEFT JOIN from uploads across to tags? Using a distinct(upload.id) would fix the issue of the join returning  multiple upload rows. This will save a SQL query and some code.

The search form doesn't match the spec, which has:
Search
Looking for something specific?
Try a quick keyword search.

I think I've emailed the font for 'Search'.

Also, the search submit button needs a value of "Submit" for when CSS is disabled and screen readers. You can hide it with text-indent: -1000px;

Also, we shouldn't have any inline JS. I would create a jquery plugin in script.js that has the same functionality and call the plugin in foot.tpl.php. This is similar to how the slideshow and colorchooser are done, except since it needs to be called on every page, the JS can be put directly in the foot of the template.

Comment 7

[Ryan Doherty (:rdoherty)]

Tara, we were wondering if all the text in the spec is necessary or if we can go with just a textbox with "Search..." in it.

I'll attach a screenshot of the current implementation.

Comment 8

[Ryan Doherty (:rdoherty)]

Attachment: Screenshot of search box

Comment 9

[Tara (musingt)]

Sorry for the late response.  I was trying to find an earlier mock-up I had done.  The extra text is not necessary.  But I would like it to say "Search" on top of the search box, in the same font as the others and nix the "search" inside the box.  I've also attached what I think is a cleaner arrow PNG.

Comment 10

[Tara (musingt)]

Attachment: Arrow PNG

Comment 11

[Alex Buchanan [:abuchanan]]

Tara,

GIMP isn't making a very good "Search" image, and I don't have PS.

Could you, or rdoherty, create the "Search" image text and attach it here please?

Thanks

Comment 12

[Tara (musingt)]

Hey Alex.  What do you mean by the "search" image?  Do you mean the word itself? (font is "luv ya like a sista"). or re-creating the nav bar image?  Or the actual search box? I think what you had attached earlier was fine, except that the arrow button next to it wasn't aligned.  

Let me know what it is you need and I'll see if I can do it.  But I'm stepping away soon and won't be able to help until around 1:30 PM.

Comment 13

[Tara (musingt)]

Couldn't send on the bug, please check email for updated PSD.  Let me know if that works.

Comment 14

[Ryan Doherty (:rdoherty)]

Attachment: Search images

Comment 15

[Ryan Doherty (:rdoherty)]

Attachment: Fixed color search images

Comment 16

[Alex Buchanan [:abuchanan]]

Attachment: v2, different CSS, no JS, proper images, coolness

I'm going to leave the search SQL as it stands for now, because I couldn't figure out the right query, and it's getting a bit late today.  I'll look back into that for the next milestone.

CSS and text should match design spec now.

Per above spec, there is no more JS

submit button value is "Search" and is text-indented to -1000px

Comment 17

[Alex Buchanan [:abuchanan]]

Attachment: resized submit arrow

Comment 18

[Ryan Doherty (:rdoherty)]

Comment on attachment 353523 [details] [diff] [review]
v2, different CSS, no JS, proper images, coolness

Looks pretty good, I'm fine with leaving the SQL for later, it won't be a problem for now.

Before committing, please fix validation errors the search form introduced. Every page except the upload page should validate.

Comment 19

[Tara (musingt)]

Sorry guys, just got back.  Looks like we have all the assets we need, right? Let me know if I can help.  Thanks Ryan for whipping those up.

Comment 20

[Alex Buchanan [:abuchanan]]

r21029

Comment 21

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED:

http://communitystore.mozilla.org/gallery/search?query=kevin