search

cloudflare / embed-box

Universal install guide for embed codes and CMS plugins.
http://embedbox.io
MIT License
78 stars 12 forks source link

Improve code “Copy” button styling #97

Closed zackbloom closed 8 years ago

zackbloom commented 8 years ago

The idea is to make it look better given how we align the copyable text with the left edge of the page, not the rest of the text:

image

I also like this more because it raises the weight of the copy button, which is the only real interaction anyone needs to have with the content.

adamschwartz commented 8 years ago

Thanks!

adamschwartz commented 8 years ago

@zackbloom I def do like the direction of this, but what should we do about multiline embed codes. Perhaps this should just be an optimization for single-line embed codes?

Here’s what this looks like with Disqus’s embed (with their comments removed, it’s usually even longer): image

We could just display any embed code on one line but I feel like there’s some value in having people actually see the bulk of it. Anyhow, curious your thoughts.

zackbloom commented 8 years ago

Honestly, this looks fine to me: image

This also looks good to me (with the understanding it may cover some of the text and be partially covered or shifted by the scrollbar): image

adamschwartz commented 8 years ago

Went with a similar style to the run buttons in the site docs. Closed with https://github.com/EagerIO/EmbedBox/commit/e53ac5abdd8176c00f95e3cc04e24a4f5419ab92.

zackbloom commented 8 years ago

🚀