Plots2: Make 'places' tagged pages show full-width map

[jywarren]

We have a nice feature which now displays a full-width map at the top of wiki pages tagged with place, like in this example: https://publiclab.org/wiki/puerto-rico

However, it'd be great if we could display them with the map above the title, full width, pegged to the top of the page, like this:

This could be accomplished using HTML and CSS on this template:

https://github.com/publiclab/plots2/blob/master/app/views/wiki/show.html.erb

The map is currently shown here:

https://github.com/publiclab/plots2/blob/b62f51d618d1ef3d2a0ded9cb2a60b49bc0cac03/app/views/wiki/_header.html.erb#L117-L119

We could move that to the show.html.erb file and remove it from the old location.

We could also hide the redundant map from here when the place tag is present:

https://github.com/publiclab/plots2/blob/b62f51d618d1ef3d2a0ded9cb2a60b49bc0cac03/app/views/sidebar/_related.html.erb#L46-L48

[InPen]

may I be assigned to this issue?

[jywarren]

Please go ahead! Do you think you have a good sense of how to take this on?
We're happy to help!

On Mon, Nov 5, 2018, 6:51 PM Maria I. Peniche <[email protected]
wrote:

may I be assigned to this issue?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/3895#issuecomment-436079514,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ5N6ZOGkTNPoezf2pkawqi8h0yfUks5usM7OgaJpZM4YN0oz
.

[InPen]

I understand what I have to fix:
I need to make the map a hero on the page
Move the title underneath

I was also able to fork and clone the project
I followed the standard installation instructions

What I'm a little lost with is:
-the syntax is new to me since I have not seen HTML embedded with Ruby
-I don't know which CSS file to work on since there are several style links

[jywarren]

Yes, awesome! and there is a decent example of this kind of page here: https://publiclab.org/places

However, in this project, we'd really like the map to go all the way to the edges of the page. This could be done with CSS like:

position: absolute;
left: 0;
top: 80px; /* <==== or however tall the header is */
width: 100%;
height: 300px;

Then we'd have to push down the rest of the page, probably with a margin. What do you think?

I think this would go above this section, at the top of a given wiki page:

https://github.com/publiclab/plots2/blob/98287930ec736e9645239813a4d69f04b1fc7b89/app/views/wiki/show.html.erb#L13-L20

It'd need the same conditional to be sure it only happens when it's a page tagged with place -- as in the original map code linked above.

If you want to give this a try, it might be a bit complex but we're happy to help you through it! Thank you!!! 🙌

[ananyaarun]

@InPen Are u still working on this issue ? Else can i take it up @jywarren . Thanks :)

[grvsachdeva]

Hi @ananyaarun, go ahead with the issue. Thanks!

[ananyaarun]

@jywarren Can u pls tell me what exactly this line means
We could also hide the redundant map from here when the place tag is present:
Wanted to make sure i'm understanding the issue right.

[sagarpreet-chadha]

Hi @ananyaarun ,
The small map on the sidebar shows the same information as the bigger map , hence it is redundant and it makes sense to remove it . Thanks 😄 !

[ananyaarun]

@jywarren , @sagarpreet-chadha i made the changes in the files as asked, but to test i am not able to reproduce this issue. In my local installation no such link exists though i see it in the main public labs page. Am i missing something ? Thanks !!

[vansjyo]

@ananyaarun I suppose you can reproduce this issue by clicking on "Create a new wiki page" on "/wiki" route. Then you can add the map or test with an image too.

[ananyaarun]

Thanks !! @vansjyo :+1: I'll try that.

[jywarren]

I believe this is complete, thanks all!