Embed enhancements

• This element collapsed shouldn’t have a white shadow nor a scrolling bar.

• 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.

• 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?)

• 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

• Social media icons should have a Builder blue hover effect

• 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.

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

Assigning @ramiroaznar as requested.

[rjimenezda]

On production 🚢

[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.