search

publiclab / plots2

a collaborative knowledge-exchange platform in Rails; we welcome first-time contributors! :balloon:
https://publiclab.org
GNU General Public License v3.0
961 stars 1.83k forks source link

UI improvements Planning Issue : Searchbar and Search Results page #5708

Closed CleverFool77 closed 5 years ago

CleverFool77 commented 5 years ago

New Searhbar ? Hi @jywarren Regarding this, I wanted to ask that What would be new design of searhbar. Should it be something like below ? ff cc : @gautamig54 Checklists

Searchbar

Search Results

jywarren commented 5 years ago

Hi! This is looking great. I think more is coming via @ebarry but just wanted to note this great search results page design by @IshaGupta18 here:

https://publiclab.org/notes/IshaGupta18/03-22-2019/outreachy-19-proposal-public-lab-ui-improvements#Part+9:+Search+results

We have a page in the shared mockups presentation for search results UI where @ebarry and I built on that design idea a bit too:

Screen Shot 2019-05-13 at 12 51 33 PM

This is all a bit more to do with displaying the results rather than the search input form but is still related. Thank you!!!

jywarren commented 5 years ago

Also noting relation to #5719!

CleverFool77 commented 5 years ago

HI @jywarren The design of search results UI looks great. I haven been thinking about results of search, and had similar design UI for that. I've updated the issue regarding search results UI and added todos checklists. What I am curious about the searhbar. Is there gonna be a new minimal search UI like google or we'll have a searchbar in navbar only.

jywarren commented 5 years ago

I think we've worried about the redundancy of the navbar search with the in-page search box. What do you think is a good way forward?

On Tue, May 14, 2019 at 10:53 AM Lekhika Dugtal notifications@github.com wrote:

HI @jywarren https://github.com/jywarren The design of search results UI looks great. I haven been thinking about results of search, and had similar design UI for that. I've updated the issue regarding search results UI and added todos checklists. What I am curious about the searhbar. Is there gonna be a new minimal search UI like google or we'll have a searchbar in navbar only.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/plots2/issues/5708?email_source=notifications&email_token=AAAF6J7PJSLITE2A6SHZWNDPVLG4RA5CNFSM4HMITEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVLXUKY#issuecomment-492272171, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAF6J6LJ4QNIMMQO4NZWULPVLG4RANCNFSM4HMITELQ .

IshaGupta18 commented 5 years ago

Thank you for the appreciation!

On Tue, May 14, 2019, 10:28 PM Jeffrey Warren notifications@github.com wrote:

I think we've worried about the redundancy of the navbar search with the in-page search box. What do you think is a good way forward?

On Tue, May 14, 2019 at 10:53 AM Lekhika Dugtal notifications@github.com wrote:

HI @jywarren https://github.com/jywarren The design of search results UI looks great. I haven been thinking about results of search, and had similar design UI for that. I've updated the issue regarding search results UI and added todos checklists. What I am curious about the searhbar. Is there gonna be a new minimal search UI like google or we'll have a searchbar in navbar only.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub < https://github.com/publiclab/plots2/issues/5708?email_source=notifications&email_token=AAAF6J7PJSLITE2A6SHZWNDPVLG4RA5CNFSM4HMITEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVLXUKY#issuecomment-492272171 , or mute the thread < https://github.com/notifications/unsubscribe-auth/AAAF6J6LJ4QNIMMQO4NZWULPVLG4RANCNFSM4HMITELQ

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/plots2/issues/5708?email_source=notifications&email_token=AJXHQZ34YJEKTJ3RT34WI7TPVLVUHA5CNFSM4HMITEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVMDZ4A#issuecomment-492322032, or mute the thread https://github.com/notifications/unsubscribe-auth/AJXHQZ2BWLEECIIR7LMLA5DPVLVUHANCNFSM4HMITELQ .

CleverFool77 commented 5 years ago

Hi @jywarren , Maybe we can just have search option in navbar which would link to another page. At newpage, we can have minimal search bar like google and we can do various search by option , there itself. What do you think about this ?

CleverFool77 commented 5 years ago

Hi @gautamig54 As I can see gsoc starts later than outeachy and you have exams too. So I'll begin the work for design. I have done assignments for checklists for myself. Thanks !!

gautamig54 commented 5 years ago

@CleverFool77 I am done with my exams. Let's start with the UI implementation. Let's take it one by one. I will get started with the people's page. Thanks!

CleverFool77 commented 5 years ago

Hi @gautmig54 How about we take two issues together. Both people section and questions page sideways. What do you think? So that if checklists of one section are dependent on each other and we are unable to move forward. At that time, we can work on different checklist from different issue. But in real, let's take people section first. I'll do the assignment then. Thanks.

CleverFool77 commented 5 years ago

Hi @jywarren @gauravano I was going through the search results UI section. I did some chnages to code and did this (below) Screenshot from 2019-05-19 22-48-17

Is pill size correct or is there need to chnage this. Should the design be like this only ? I need suggestion so that I can move forward. Thanks !!!!

gautamig54 commented 5 years ago

@CleverFool77 I think it will look better if you can reduce the pill size and shift the left column downwards.

CleverFool77 commented 5 years ago

Hi @gautamig54 So should it be 3/4 of what it is right now ? Screenshot from 2019-05-20 12-37-18

Smaller pill size Screenshot from 2019-05-20 13-16-33

IshaGupta18 commented 5 years ago

Hey this looks pretty great!

gautamig54 commented 5 years ago

@CleverFool77 The original width of the pill looks better. Maybe you can try altering the height of the pills and also centre align the text in the them.

CleverFool77 commented 5 years ago

Hi @gautamig54 Thanks for your opinion. let's wait for @jywarren's view regarding this. Then I'll proceed further and fix it. Thanks.

jywarren commented 5 years ago

Hi! need to catch up here... sorry! Hopefully today, and @ebarry has input too. But wanted to link in this side-issue where we are thinking that the typeahead search might only return tag results, as shown in the mockup:

Screen Shot 2019-05-13 at 12 51 33 PM

That's covered in this issue: https://github.com/publiclab/plots2/issues/5719

Thanks!

jywarren commented 5 years ago

Hi, the pills look good; are they using the standard Bootstrap vertical navs with pills? https://getbootstrap.com/docs/4.3/components/navs/#vertical

In general, using the defaults with as little extra CSS as possible will be great to keep our long-term maintenance low. But this is looking great. We will be wanting also to begin to show fewer types in the nav - just "Content" and "People" -- although we can approach this step by step!

Other parts of the mockup:

How does this sound?

jywarren commented 5 years ago

For featured results, we could:

  1. keep a text document with searchterms and nids in 2 columns, or comma-separated
  2. use tags like featured-search:searchterm -- but this is kind of ugly and wouldn't work for search terms that include punctuation or spaces
  3. we could keep the text document in a Feature: https://github.com/publiclab/plots2/blob/master/doc/DATA_MODEL.md#features although we'd have to be very careful to put in only well-formatted data, or it could break the search page
CleverFool77 commented 5 years ago

Hi, the pills look good; are they using the standard Bootstrap vertical navs with pills? https://getbootstrap.com/docs/4.3/components/navs/#vertical

In general, using the defaults with as little extra CSS as possible will be great to keep our long-term maintenance low. But this is looking great. We will be wanting also to begin to show fewer types in the nav - just "Content" and "People" -- although we can approach this step by step!

Other parts of the mockup:

  • [ ] showing "featured results" for search terms (and thinking of how we can store them)
  • [ ] showing "related tags" in the top of the search results
  • [ ] showing the # of results per type (let's do this after consolidating the types, so it's less work smile)

How does this sound?

hi @jywarren regarding pills, I used standard bootstrap4 classes. As you said that according to new style guide, there would be fewer options which is content and people. So should I code the UI for new style guide with fewer options, Or should I follow the method which is still being followed which has 6-7 options ? regarding other parts, me and @gautamig54 will add them as checklist in this issue.

gautamig54 commented 5 years ago

I have added the other features in the checklist. @CleverFool77 Let's discuss them and get to work! Thanks!

CleverFool77 commented 5 years ago

I have added the other features in the checklist. @CleverFool77 Let's discuss them and get to work! Thanks!

Great :+1:

jywarren commented 5 years ago

Let's aim for the 2 types. This will require some controller changes as well, though! Do you feel like you're able to read through how the controller works to provide different types, and the API documentation to show notes+questions+wikis together as "content"? @milaaraujo and @cesswairimu may know more about these and could potentially offer some input?

On Mon, May 20, 2019 at 1:24 PM Lekhika Dugtal notifications@github.com wrote:

Hi, the pills look good; are they using the standard Bootstrap vertical navs with pills? https://getbootstrap.com/docs/4.3/components/navs/#vertical

In general, using the defaults with as little extra CSS as possible will be great to keep our long-term maintenance low. But this is looking great. We will be wanting also to begin to show fewer types in the nav - just "Content" and "People" -- although we can approach this step by step!

Other parts of the mockup:

  • showing "featured results" for search terms (and thinking of how we can store them)
  • showing "related tags" in the top of the search results
  • showing the # of results per type (let's do this after consolidating the types, so it's less work smile)

How does this sound?

hi @jywarren https://github.com/jywarren regarding pills, I used standard bootstrap4 classes. As you said that according to new style guide, there would be fewer options which is content and people. So should I code the UI for new style guide with fewer options, Or should I follow the method which is still being followed which has 6-7 options ? regarding other parts, me and @gautamig54 https://github.com/gautamig54 will add them as checklist in this issue.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/plots2/issues/5708?email_source=notifications&email_token=AAAF6JYGM3WNAOEOZVEUY4LPWLNDDA5CNFSM4HMITEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVZQPYI#issuecomment-494077921, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAF6J4Y4VRNMA345IAJG6LPWLNDDANCNFSM4HMITELQ .

jywarren commented 5 years ago

Aha! https://github.com/publiclab/plots2/blob/439d3ce4feed3fdef5323b679ed2b04c8bc93179/app/services/search_service.rb#L29

cesswairimu commented 5 years ago

Wow awesome designs and great collaboration going on here @gautamig54 @CleverFool77 :tada: The controller is https://github.com/publiclab/plots2/blob/master/app/controllers/search_controller.rb and the apis that serve this are found here https://github.com/publiclab/plots2/blob/master/app/services/ Feel free to ping me if you have any questions tough I guess @milaaraujo and @stefannibrasil understand the apis better.

CleverFool77 commented 5 years ago

Sure @cesswairimu Right now, I'm going through it. If I came across any issues. I'll surely ping you and others Thanks !!!!

CleverFool77 commented 5 years ago

Hi @jywarren According to new style guide. There will be only fewer options consist of people and content . So Is this new pill content alias for All content tab of earlier design or Is it specific pill consisting of some information including notes and other ? And other options should be removed ? cc : @gautamig54 Thanks !!!

CleverFool77 commented 5 years ago

Hi, the pills look good; are they using the standard Bootstrap vertical navs with pills? https://getbootstrap.com/docs/4.3/components/navs/#vertical

In general, using the defaults with as little extra CSS as possible will be great to keep our long-term maintenance low. But this is looking great. We will be wanting also to begin to show fewer types in the nav - just "Content" and "People" -- although we can approach this step by step!

Other parts of the mockup:

  • [ ] showing "featured results" for search terms (and thinking of how we can store them)
  • [ ] showing "related tags" in the top of the search results
  • [ ] showing the # of results per type (let's do this after consolidating the types, so it's less work smile)

How does this sound?

And Hi once again @jywarren I wanted to ask that what would be specific point to consider a result as a featured result. I mean kinda the distinction which will be used to consider a feature result.

jywarren commented 5 years ago

Is this new pill content alias for All content tab of earlier design

Yes, that's right!

I wanted to ask that what would be specific point to consider a result as a featured result. I mean kinda the distinction which will be used to consider a feature result.

We're planning to make a system whereby some results can be automatically displayed at the top if a certain set of keywords is input. It'll be a little bit like "pinning" them, but we will probably not use tags to accomplish it. Probably we'll have a set of key/value pairs we'll make editable, so like:

keyword,featured_nid
software,124312
workshops,3252

We'd then want to make sure they weren't /also/ shown in the results below. So in that respect it'll be similar to the pinning code in https://github.com/publiclab/plots2/blob/master/app/models/concerns/node_shared.rb

Sorry it took me a little while to get back to you! Thanks!

jywarren commented 5 years ago

Actually sorry, to clarify:

Is this new pill content alias for All content tab of earlier design

Yes, that's right!

Actually we are going to just show "people" in the one tab and then flatten "notes, questions and wiki pages" (all of them based on the Node model, after all) into a combined single display called "Content".

I'm especially thinking of this method:

https://github.com/publiclab/plots2/blob/master/app/services/search_service.rb#L58-L60

Instead of this method:

https://github.com/publiclab/plots2/blob/master/app/services/search_service.rb#L5-L25

jywarren commented 5 years ago

And, noting on

try the search by google option and display results of google search

There's a page here which successfully demonstrates this -- using a wiki -- https://publiclab.org/wiki/search

CleverFool77 commented 5 years ago

Hi @jywarren I was working on search section today. So I wanted to ask that Is people tab alias for profiles ? eg - All content to Content profiles to people

Screenshot from 2019-06-05 17-53-53

ebarry commented 5 years ago

hi @CleverFool77 , yes what you mapped is correct:

All content to Content profiles to people

CleverFool77 commented 5 years ago

Hi @ebarry I pushed the latest changes to https://github.com/publiclab/plots2/pull/5747

Screenshot from 2019-06-05 20-29-10

ebarry commented 5 years ago

Such nice looking work @CleverFool77 ! I was just looking back at the checklist at the very top of this document, and wondering if we could update our priorities now that a couple weeks have gone by?

CleverFool77 commented 5 years ago

Sure @ebarry We were working on other sections. So this section got delayed. Right now, we are working on questions section. Now we'll proceed with the search section and Both of them would go side by side.

CleverFool77 commented 5 years ago

Hi @ebarry You can go though the progress of project here https://github.com/publiclab/plots2/projects/10 and suggest us that which section parts can be prioritised. Thanks !!

ebarry commented 5 years ago

Thank you, that project board looks cool!!!

From your checklist above, i suggest we prioritize this:

So that the main Search page result can look like this:

Screen Shot 2019-06-05 at 2 39 47 PM

The defining aspects of this mockup are:

From this Search Results page, clicking "By Type" or one of the dropdown categories would lead to https://publiclab.org/search/advanced. Here's what the display of custom wiki page search results could look like on that page:

Screen Shot 2019-06-05 at 2 40 08 PM
CleverFool77 commented 5 years ago

The by type search seems to be a new design. Thanks @ebarry I'll soon push the the changes with new designs. I wanted to ask that Does Places and tags would be included in By type search ?

jywarren commented 5 years ago

Hi, all - noting that the code for running the Google-backed search is at https://publiclab.org/w/search running already, and if you use a parameter q you can initiate it with a search term, like: https://publiclab.org/w/search?q=balloon

The code to make this work can be found on the "raw" view of that page: https://publiclab.org/notes/raw/19093 (i had just been prototyping it in a wiki page)

On Wed, Jun 5, 2019 at 3:09 PM Lekhika Dugtal notifications@github.com wrote:

The by type search seems to be a new design. Thanks @ebarry https://github.com/ebarry I'll soon push the the changes with new designs. I wanted to ask that Does Places and tags would be included in By type search ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/plots2/issues/5708?email_source=notifications&email_token=AAAF6J7CC4MOOYPAXJEXBGDPZAFONA5CNFSM4HMITEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXAW4IY#issuecomment-499215907, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAF6JYSH4DMAM6SSRWERULPZAFONANCNFSM4HMITELQ .

ebarry commented 5 years ago

Hi @CleverFool77, thanks for writing back!

i'm not sure about places.

For tags, also not sure, but maybe for now, let's explore offering the Tag Search through the Search Bar:

Looking closely, very closely, at the mockup, it can be seen that typing a word into the search bar triggers autosuggested tags. Then there are four ways to advance:

1) from the dropdown, choose a tag which goes to the particular tag page (/tag/name) 2) from the dropdown, choose the "View More Results" to go to the main Search page 3) click the "magnifying glass icon" to go to the main Search page 4) press "enter" to go to the main Search page

jywarren commented 5 years ago

Hi, just noting that tags will be omitted in favor of showing tags on each search results page along the top in blue pills, as in the mock-up.

On Wed, Jun 5, 2019, 4:59 PM Liz Barry notifications@github.com wrote:

Hi @CleverFool77 https://github.com/CleverFool77, thanks for writing back!

i'm not sure about places.

For tags, also not sure, but maybe for now, let's explore offering the Tag Search through the Search Bar:

Looking closely, very closely, at the mockup, it can be seen that typing a word into the search bar triggers autosuggested tags. Then there are four ways to advance:

  1. from the dropdown, choose a tag which goes to the particular tag page (/tag/name)
  2. from the dropdown, choose the "View More Results" to go to the main Search page
  3. click the "magnifying glass icon" to go to the main Search page
  4. press "enter" to go to the main Search page

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/plots2/issues/5708?email_source=notifications&email_token=AAAF6J5A2FCRGGDF77JK5M3PZASHJA5CNFSM4HMITEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXA75TA#issuecomment-499252940, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAF6JYAYBH2WPKCRL25LCTPZASHJANCNFSM4HMITELQ .

jywarren commented 5 years ago

Places at the moment will be a type of wiki page, so should be omitted in favor of that display. So places and tags can just be left out!

On Wed, Jun 5, 2019, 8:36 PM Jeffrey Warren jeff@unterbahn.com wrote:

Hi, just noting that tags will be omitted in favor of showing tags on each search results page along the top in blue pills, as in the mock-up.

On Wed, Jun 5, 2019, 4:59 PM Liz Barry notifications@github.com wrote:

Hi @CleverFool77 https://github.com/CleverFool77, thanks for writing back!

i'm not sure about places.

For tags, also not sure, but maybe for now, let's explore offering the Tag Search through the Search Bar:

Looking closely, very closely, at the mockup, it can be seen that typing a word into the search bar triggers autosuggested tags. Then there are four ways to advance:

  1. from the dropdown, choose a tag which goes to the particular tag page (/tag/name)
  2. from the dropdown, choose the "View More Results" to go to the main Search page
  3. click the "magnifying glass icon" to go to the main Search page
  4. press "enter" to go to the main Search page

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/plots2/issues/5708?email_source=notifications&email_token=AAAF6J5A2FCRGGDF77JK5M3PZASHJA5CNFSM4HMITEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXA75TA#issuecomment-499252940, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAF6JYAYBH2WPKCRL25LCTPZASHJANCNFSM4HMITELQ .

CleverFool77 commented 5 years ago

Hi @jywarren @ebarry I wanted to ask that regarding google search, it should be link as per the UI and then the results from google search will be displayed in second column of UI ?

CleverFool77 commented 5 years ago

Hi @ebarry @jywarren

I was trying out the code, So I wanted to ask instead of search box, I should have Try with Google search link which would have action of google search (Similar to UI which you posted above ) or Should it be just searchbox like below ? And the other results for intra search would be hidden when google search results are shown ?

Screenshot from 2019-06-06 16-20-59

jywarren commented 5 years ago

Hmm, can you show a quick mock-up? I was hoping Google search would seem like the "default" to people for the time being. I think it's a little odd that navbar search would still exist but we could see how it works... it'll offer tag search results and then offer to continue in the Google search with the "view all results" entry, so even if it's a little odd I think people will still be routed eventually back to the full Google search input once they interact with it.

On Thu, Jun 6, 2019, 3:55 AM Lekhika Dugtal notifications@github.com wrote:

Hi @ebarry https://github.com/ebarry @jywarren https://github.com/jywarren

I was trying out the code, So I wanted to ask instead of search box, I should have Try with Google search link which would have action of google search (Similar to UI which you posted above ) ? And the other results for intra search would be hidden when google search results are shown ?

[image: Screenshot from 2019-06-06 16-20-59] https://user-images.githubusercontent.com/26685258/59027624-22551d80-8877-11e9-846e-1a377a6093a7.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/plots2/issues/5708?email_source=notifications&email_token=AAAF6J7ZPODP22MJCYYG4TDPZDUGDA5CNFSM4HMITEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXCPMLI#issuecomment-499447341, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAF6J3LK45HDUR3TJPDRUDPZDUGDANCNFSM4HMITELQ .

CleverFool77 commented 5 years ago

Hi @jywarren I did add screenshot in comment above. How do you want Google search to be ? default be like ? Similar to Try your search with Google as it appears in UI and then get the Google results ? or View All entry be a button leading to action of custom google search

jywarren commented 5 years ago

Oh I see, sorry! So, let's try to not show "Google" unless it is a lot of work to remove it. How does that sound?

CleverFool77 commented 5 years ago

Ohkk!! I'm still pretty confused about the UI , so I'll show the mockup first then let's see and do the further changes.

ebarry commented 5 years ago

Thank you @CleverFool77 !!!

CleverFool77 commented 5 years ago

Hi @gautamig54 Can you look over some of the parts for search section here ? Thanks !!!