Show grid of notes with thumbnails

[kaustubh-nair]

Fixes #1097
I had to make minor changes in the main notes show html page since the grid was overflowing out of the container for some reason.
Please let me know if there are any changes to be made in the design. I'll add tests soon too.

Here's a screenshot:

[plotsbot]

	2 Messages
📖	@KauNair Thank you for your pull request! I’m here to help with some tips and recommendations. Please take a look at the list provided and help us review and accept your contribution! And don’t be discouraged if you see errors – we’re here to help.
📖	Your pull request is on the master branch. Please make a separate feature branch) with a descriptive name like new-blog-design while making PRs in the future.

Generated by 🚫 Danger

[jywarren]

This is super super exciting; it's been a long-standing issue we are very eager to have solved. THANK YOU SO MUCH!!!!

I've added a note above, where I'd like to see if we could resolve the layout issues you mentioned through a different CSS solution. I'm worried a change of that kind would have to be replicated in other templates for this to work, and I think you've done the hard part of this issue already, so we could potentially work through the layout issue without needing a change to the show.html.erb templates. I may be wrong! But I'd like to give it a try because otherwise we'll have to visually inspect a lot of varying pages that would potentially be affected by the column width changes you're suggesting here. Let's see if we can do it a simpler way.

Thanks again!!! 👍 👍 👍

[jywarren]

Hm, ok! I see how this may help... however, do you think it could be potentially moving other page content around in a way that would cause trouble? I also wonder what might happen on other pages, such as wiki pages from /app/views/wiki/show.html.erb and /app/views/question/show.html.erb - other places this type of grid might be shown.

[jywarren]

er, i guess my note came out below 😄

[kaustubh-nair]

Div tags are so difficult to work with. 😞
But I changed the grid into a table, so now it works without having to change the original notes show view. 😄
Also what should I do for notes that do not have any main image?

The thumbnails are slightly bigger than before but I guess that's okay?

[jywarren]

This looks great. Any adjustments can be done in follow-up! Thanks so much!!! Again, this was very sought after, so THANKS A LOT!!! 👍 👍 👍

[jywarren]

Would you be interested in a new issue, related to this one? Perhaps this one? #3758

[jywarren]

Also, let's think about what this looks like in mobile phones... can you try in a narrower window? See some about the class-based page layout system here: https://getbootstrap.com/docs/3.3/css/

[kaustubh-nair]

This is how they look on mobile . Maybe we can try responsive tables so they have a scroll bar in them.
Smaller images make the grid irregular. We should scale the all the images to a fixed size so they look better.
Also this tag doesn't have test coverage.
All these should be easy to fix. Do you think we should make new issues for these or should I send a PR?

[jywarren]

The Bootstrap classes are responsive, they take some getting used to to use effectively, but are generally worth it. I think we've been able to do this inline; see:

See that example here: https://publiclab.org/wiki/micro and click Research

The code is here:

plots2/app/views/wiki/show.html.erb

Lines 31 to 37 in 39cfd13

	<% if @node.power_tags('tabbed').include?("notes") %>
	<div class="tab-pane" id="tab-notes">
	<%= render :partial => "notes/notes" %>
	<p><a href="/tag/<%= @node.slug_from_path %>"><%= raw t('wiki.show.more_research', :tag => @node.slug_from_path) %> &raquo;</a></p>
	<br />
	</div>
	<% end %>

I think if you want to go for it, a PR is fine. If you'd like to tackle it in stages, start an issue and make a checklist!

I love the idea of test coverage too. Thanks!! Great initiative and great work!

[jywarren]

Hi, I wanted to note this is live now, and looks great! https://publiclab.org/wiki/micro#Assembly

Some of the followup steps will really make this shine. Great work!!!

[vatbq]

Can someone tell me how render the notes like this? Because when I did notes:tagname it renders a grid, and I don't know how show them with images

[jywarren]

Ah, take a look through the implementation as in the pr where I'd made comments about bootstrap, to see how the HTML is generated. Does that help?

…

On Mon, Nov 26, 2018, 5:04 PM Valentina Tironi ***@***.*** wrote: Hi! I'm a little confused. I don't know how to render notes in the section so, if you can clear that for me would be amazing! How I can show it? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#3970 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-zLRQ8n4NqtZAVvuPHJjuK_y4eFks5uzGVkgaJpZM4Yep7S> .

[vatbq]

Yeah. This is merged in master branch, right? I did git pull but there aren't changes, I think that is something related to repository forked. I'm gonna google how to update a fork repository from original

[jywarren]

if you are in a feature branch, you can do:

1. git checkout master
2. git pull https://github.com/publiclab/plots2.git master
3. git checkout feature-branch
4. git merge master

Looking for lines of code to help you out too now!

[vatbq]

Ready! I could do it! Thank you!

[jywarren]

See how this assembles data in the node_shared file, and then displays them in a template?

https://github.com/publiclab/plots2/pull/3970/files

Hope that helps!

[vatbq]

Yes, I'm in that 💯

[vatbq]

Hey @jywarren I could do something like that

What do you think?

[jywarren]

That's lovely. I think that looks perfect; is it defaulting to a 2x3 grid? Thanks! And a link maybe that says "see more"?

…

On Mon, Nov 26, 2018 at 6:07 PM Valentina Tironi ***@***.***> wrote: Hey @jywarren <https://github.com/jywarren> I could do something like that [image: screen shot 2018-11-26 at 8 06 12 pm] <https://user-images.githubusercontent.com/20969831/49047632-cf5b2900-f1b6-11e8-8c26-a23be9e32080.png> What do you think? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3970 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6FS-xAOzI27MxV7_rN0ll5CgWzjks5uzHQogaJpZM4Yep7S> .

[vatbq]

Thank you! The maximum number of images per row is 3, if that is that you refer.
Do you want that I add a link in every note?

[jywarren]

ah, sorry, i guess i am thinking ahead -- what if there are too many results? Should we limit it to 6 shown, and the "see more" would expose more? If you look at a page like https://publiclab.org/w/lego-spectrometer, you'll see some grids that overflowed and so they are limited to 10.

…

On Mon, Nov 26, 2018 at 7:13 PM Valentina Tironi ***@***.***> wrote: Thank you! The maximum number of images per row is 3, if that is that you refer. Do you want that I add a link in every note? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3970 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJx3J2Lj7DgPih64Z901jwZRvNebOks5uzIOjgaJpZM4Yep7S> .

[vatbq]

Oh, I understand. I'm trying to do it

[vatbq]

Me again! Well, I did it

Also, I did a show less button but I didn't have time to recording because github just allow 10MB