Plots2: Make the Search Results UI look Better!

[digitaldina]

The Problem:

Currently, after users make a search, here's what the search results look like:

We want to make this look better! (#4062).

I think that a good idea to do this would be having a 2 by 2 grid of the Notes, Wikis, Questions and Tags sections. Check out the image below for what I mean:

If you have any issues, I found this, which looks really helpful! Please let me know if you have any questions. And if you've got any other ideas, share/mock them up here: https://publiclab.org/ui

[jywarren]

Hi!, Thank you! A couple suggestions -- for some design questions it may be worthwhile asking for a mockup (you can see a bit about this process at https://publiclab.org/ui, and there is a shared google doc for making mockups there) to explore what a design will look like in detail before we all agree on a specific design to implement. But that's a perfectly fine issue as well, if you want to make this issue into a call for design ideas!

Also, once we open a code issue for a first-timer, we have a specific format for it, as mentioned in your GCI task comments. I'll paste in some guidance if you're interested in doing this in the future -- although if you change this to be a design sketch type issue, that wouldn't be necessary here (though still useful for future issues!).

---

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @publiclab/reviewers to get it labelled. Or, if this is not your first time, try to solve it yourself!

[digitaldina]

@jywarren ok, I've seen the templates for the first-timer-only issues now, thanks for pointing that out! I will continue to work on this (add what files need to be changed, etc) However for creating a mock up, can I take screenshots of the page and re-arrange them to look like what I think they should? Also, I now can add labels, Thanks!

[jywarren]

Sure, you can do just that, and also screenshots from getbootstrap.com, and
there is a Google presentation on publiclab.org/ui where you can use bits
and pieces of mockups others have made to work on your own designs!

https://docs.google.com/presentation/d/1TCZoTfuhamRVrUak8aDgqJAwSgyhRtZg2Pgacl2_4zc/edit?usp=drivesdk

On Tue, Dec 4, 2018, 10:55 AM d1g1t4ld1n4 <[email protected] wrote:

@jywarren https://github.com/jywarren ok, I've seen the templates for
the first-timer-only issues now, thanks for pointing that out! I will
continue to work on this (add what files need to be changed, etc) However
for creating a mock up, can I take screenshots of the page and re-arrange
them to look like what I think they should? I don't really know how to use
Froala.. Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4115#issuecomment-444150823,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ48LdjxsQhaW9hCbdW3zjqdTD4c8ks5u1prlgaJpZM4ZAxn4
.

[digitaldina]

@jywarren do they have to install bootstrap? I see that publiclab uses bootstrap in the css file, but I'm not sure what you mean.. Also, all the tables have the same styling. (the are all called "table inline-grid") Should I get them to give each table unigue id's or classes so that they can display them as blocks? Currently, they all have the same css, see below:

[digitaldina]

@jywarren I have an idea for a really easy task, I will open a new issue for that one, and leave this one as a WIP / planning/ design

[vatbq]

Hey @dinaelhanan! I saw that you ask me check out this. How can I help u?

[digitaldina]

@ValentinaTironi I was just wondering whether I should give each table a different class so that the person working on the issue can just make the divs in different positions? Check my comment above, I'm probably going to sign off for now, but if you've got any ideas, let me know and I'll write back tomorrow. thanks for coming by to help by the way!

[vatbq]

What do you think about showing ten results of each categories (notes, wikis, question, etc) as cards? Like in thumbnails grids? (see https://github.com/publiclab/plots2/pull/4057#issuecomment-442156645) I don't know, I'm just giving an idea

[digitaldina]

@ValentinaTironi I think that as fantastic idea! Could I link to your code so that the first timers can use it as a reference? @jywarren is that OK? I think they would be able to apply the same css and html, just to the table blocks instead of images.. or do I need to add more direction? Thanks!

[vatbq]

Of course, go for it! 💯

[jywarren]

I think the only worry was that the thumbnail grids may take up a lot of space, where this page has 4 different types to display in limited space, versus the individual per-type search results pages, which only have to show 1 type per page. So the idea of a table was to show compactly a range of results of different types, and let people narrow down their search by type by clicking a "more Note results" or "more Wiki results" link next to each section title.

But I think if people want to share some sketches or mockups for different design ideas, we could adopt several to make this page better. They're not mutually exclusive!

Thanks, all!!!

[digitaldina]

@jywarren I did think that too... I think it would be better to have the 4x4 grid rather than a line for the search results, and then change that up. Does that sound like a good idea? Thanks!

[jywarren]

Re: bootstrap, it should already be installed - and you can add additional classes if you like, but there are a lot of Bootstrap classes available that can help you organize things. Take a look!

https://getbootstrap.com/docs/3.3/

Look at the grid layout in particular.

Hope that helps!

[jywarren]

Did you mean "and then change that up" meaning the links to more results of each type? Sure! But I think either way we can add those links in, they'll be similar in both layouts, even if they show up in different places.

[SidharthBansal]

@dinaelhanan just to inform you that creating issues and ftos each will be counted towards your GCI contributions. So if you are a GCI student and you have not claimed them, please claim it. I will approve them for you.
Thanks

[jywarren]

I wanted to suggest perhaps a more minimal design - see how search works on GitHub:

for this page: https://github.com/search?q=org%3Apubliclab+testing

Note how they show /something/ but then show how there are results for other types.

Maybe we should actually mix all the results together into a single table, inside a panel with sections like this:

https://getbootstrap.com/docs/3.3/components/#panels-tables

I'm really interested in making sure we add the links to each page type quickly so that this page becomes useful. Once things are in panels, we could later try breaking it into a 2x2 grid of panels, but let's solve things one at a time, if that's OK?

For the panels, we could use some icons to distinguish each type, and have a link like this:

Here's what a 2x2 grid could look like:

I made this mockup using the Google Presentation here: https://docs.google.com/presentation/d/1TCZoTfuhamRVrUak8aDgqJAwSgyhRtZg2Pgacl2_4zc/edit#slide=id.g4877128470_0_0 (feel free to mess with that for your own designs!)

[digitaldina]

@jywarren that's a great idea! Your issue seems more thorough and looks nicer. I will close this one and work on that other issue with @oorjitchowdhary @SidharthBansal I only see one task for creating a break up issue. I've claimed and completed one. This is a second one. If you could add another task for making a first timer issue, I'd be happy to claim it and submit for review. Thanks!

[SidharthBansal]

https://codein.withgoogle.com/dashboard/tasks/5765666616377344/
https://codein.withgoogle.com/dashboard/tasks/5108091688321024/
https://codein.withgoogle.com/dashboard/tasks/5313931938627584/
https://codein.withgoogle.com/dashboard/tasks/5897760814399488/
Claim the tasks which you have not yet. Please tell the work done on the GCI dashboard itself.

[digitaldina]

@SidharthBansal I will, I'm just waiting for my previous task to be reviewed. I have adding the link in the comment. Thanks!
https://codein.withgoogle.com/dashboard/task-instances/4824240835526656/

[SidharthBansal]

I have approved this task

[grvsachdeva]

Hi @dinaelhanan do you want to open a new issue using @jywarren's idea of resemblance with Github search UI? Or, if you want to edit it?

[digitaldina]

@gauravano I will most likely edit this one. I don't think it'll be a fto, since I won't be able to document it that well, but I do like the idea of that search UI :+1:

[oorjitchowdhary]

@dinaelhanan ping me if you need any help

[grvsachdeva]

@dinaelhanan doesn't have to be a FTO, a issue with all the complete information is also welcome. Thanks!

[DannyBoris]

hey is this issue still open for the crowd? id like to take it to my hands

[grvsachdeva]

Hey @DannyBoris, sure, go ahead!

[jywarren]

Done here!!! Yay!