develop notes:tagname inline tag alternative to display a grid of notes, not a table

[jywarren]

This is not very high priority... but:

Currently, on a wiki or note, we can insert a table of topical content using the syntax:

[notes:tagname] -- like, for example, for content tagged "balloon-mapping", we can do:

[notes:balloon-mapping] and that's swapped for a table of balloon mapping posts.

But some content is very visual and it'd be great to see a grid of thumbnails, much like we show on tag pages like https://publiclab.org/tag/balloon-mapping

Let's make a new inline tag, similar to [notes:tagname] but call it [notes:grid:tagname] (which would have to be above the existing [notes:tagname] check, so that it doesn't try to search for content tagged grid:tagname, you know?).

The current inline grids are listed here:

plots2/app/helpers/application_helper.rb

Line 31 in b987906

body = NodeShared.notes_grid(body)

And the code for each lives in this document:

https://github.com/publiclab/plots2/blob/master/app/models/concerns/node_shared.rb#L31-L67

We could have a new section just above that, that uses this matcher:

    body = body.gsub(/\<p\>\[notes\:(.+)\]/) do |tagname|

The template code could be laid out like what we use for the tag pages:

https://github.com/publiclab/plots2/blob/master/app/views/notes/_notes.html.erb

We can actually just render a partial in a helper, as in this line:

plots2/app/models/concerns/node_shared.rb

Line 56 in b987906

output += a.render_to_string(template: "grids/_notes",

This is a little complex, but worth a try -- i'm happy to offer help. It could also be broken up a bit into smaller projects, for example just swapping in a holding string like Inline thumbnail grid coming soon. as the first step.

Mockups

[ryzokuken]

@jywarren I'd like to work on this. Could you point me to an existing page containing the table layout though? (So I could get an idea about how it exactly looks)

Also, I had been thinking that we could choose the size of the grid based on the screen size (this is not exactly required but would really help avoid us cramming 12 partials per row in a mobile screen).

[jywarren]

Yes -- https://publiclab.org/tag/balloon-mapping And yes there are some good layout options available in the grids section of the bootstrap documentation: http://getbootstrap.com/css/ We already use Bootstrap's grid so there are ways to optimize it for better display... Happy to help brainstorm. Thanks!

…

On Dec 16, 2016 7:14 AM, "Ujjwal Sharma" ***@***.***> wrote: @jywarren <https://github.com/jywarren> I'd like to work on this. Could you point me to an existing page containing the table layout though? (So I could get an idea about how it exactly looks) Also, I had been thinking that we could choose the size of the grid based on the screen size (this is not exactly required but would really help avoid us cramming 12 partials per row in a mobile screen). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1097 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ01gcy9u3lW4fmHaZfjsFrZK8e3Mks5rIoCRgaJpZM4LNGWd> .

[jywarren]

There are some great design options here: https://www.froala.com/design-blocks under "Features" -- if anyone would like to tackle this one!

[jywarren]

@ViditChitkara would you like to try tackling this one? We've wanted it for a long time!

[ViditChitkara]

Sure, I'd love to!

[kaustubh-nair]

@jywarren This might take some time, but I'd be willing to work on it!

[sagarpreet-chadha]

That would be great @KauNair 😄 . Thank you 🎉 !