Cartodb: Embed enhancements

[arianaescobar]

• [x] This element collapsed shouldn't have a white shadow nor a scrolling bar.

• [x] If you collapse it, and expand the viewport, the legend looks like the image below. It should be shown entirely. This can also be seen in the gif below.

• [x] Long legends are getting covered by the horizontal nav of widgets in viewports between 600px and 760px. The legends box is not adjusting its height on that breakpoint. (Could it be related to it being a custom legend?)

• [x] There has to be at least 8px of margin between the legends and the map buttons

• [ ] Since we had to add more light blue margins in the latest iterations of the embed that weren't considered in the original design, the current bottom bar has some visual issues. We want to solve them by making the whole bottom bar also light blue with 8px of margin all around it.

Production

Design

• [x] Social media icons should have a Builder blue hover effect

• [x] We want to add a border: 1px solid #DDD to the whole embed on viewports below 600px to avoid these situations in which the embed's boundaries aren't obvious.

• [x] There's an unnecessary border radius on the legends div on viewports below 600px that we should remove.

Assigning @ramiroaznar as requested.

[ivanmalagon]

I'm adding here some visual tweaks related with embed legends that haven dropped out from a related ticket.

This is how it should look:

Below 600px:

• "LEGENDS" should say "LAYERS" instead.
• 16px margin between layers

Above 600px:

(Left: Production | Right: Design)

• 16px margin between header and layers (currently is set on 8px)
• 16px margin between layers (currently is set on 24px)
• 10px margin top and bottom of the whole box (right now, the last layer is adding a margin bottom of 24px), and 12px margin left and right.

[rjimenezda]

Second case is fixed on prod :ship:

[rjimenezda]

@ivanmalagon should it never say 'Legends'? The code switches depending on whether there are legends + layer selector, or only layer selector

@arianaescobar The first one I can't reproduce, maybe it's been fixed in another one.

[arianaescobar]

@rjimenezda yeah, I can't reproduce it either.

should it never say 'Legends'?

Nope. If there are legends, it should say Legends.

[rjimenezda]

@arianaescobar Oh, I just reproduced it 🎉

You need a big legend that scrolls, scroll it a bit, but not so much that you can't collapse it anymore. Collapse it and bam, there it is.

[arianaescobar]

there you go!

[rjimenezda]

Staging User: embedimprove

[rjimenezda]

On production 🚢

[ramiroaznar]

Hey @rjimenezda legends margins should be 20px top and bottom, 24px left and right

[rjimenezda]

@arianaescobar @ramiroaznar

[ramiroaznar]

It looks good to me. Let's see what Ari has to say.

[arianaescobar]

I'm sorry guys, I'm just reviewing this more calmly and I was wrong when I gave you those numbers, @ramiroaznar. Damn context switch.

Our design mockups are not updated with the latest decisions on that, the correct ones (for legends above 600px of viewport) are those that @ivanmalagon shared in his comment above.

10px margin top and bottom of the whole box (right now, the last layer is adding a margin bottom of 24px), and 12px margin left and right.

Also, careful with the margin-bottom of each legend, I can see that the last one is adding extra margin.

[rjimenezda]

So, to clear up. Leave them as they are, but double check all legends types in case they're inserting margin-bottom?

[arianaescobar]

That extra margin-bottom needs to be fixed, yup. We're taking a lot of screenshots right now for CARTO Locations' talks and that's a problem.

Buuuut, honestly, it worries me making other types of changes (like the surrounding margins) on this right now, given how this component breaks with the slightest change and because right now we're so busy with the event that we don't have the time to properly review every case and perform proper acceptances.