Better associate docs 'run' buttons with the sections they run

[zackbloom]

One option is to move the buttons into the corner (I think top right might actually be best), and lighten the background of the runnable code areas a bit more:

[adamschwartz]

Thanks!

[adamschwartz]

After trying this out for a bit, I felt that putting the buttons on the bottom didn’t work because they interacted with the horizontal scrollbar.

For design/development, I recommend setting “Show scrollbars” to “Always” in System Preferences, as it makes issues like these more obvious.

I did however increase the contrast of the code block, which should help with the association, and improve the scrollbar styling. https://github.com/EagerIO/EmbedBox/commit/7f1fe21aca75b009a9f46924bbdab14fbc17e38a

[zackbloom]

Is putting them in the top right, but more tightly connected with the edge of the box like in the example an option? I think the padding they have now creates a new left-alignment context for me which make the page hard to parse.

[adamschwartz]

I’ll show you what that looks like. I tried that myself in my iterations just now and didn’t love it, but we’ll see what you think ;)

[zackbloom]

Thx, I appreciate it!

On Thu, Sep 8, 2016 at 3:17 PM, Adam Schwartz notifications@github.com wrote:

I’ll show you what that looks like. I tried that myself in my iterations just now and didn’t love it, but we’ll see what you think ;)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/EagerIO/EmbedBox/issues/98#issuecomment-245709281, or mute the thread https://github.com/notifications/unsubscribe-auth/AADYM7nVufVL4ISpdZuhJBba6t42YqSRks5qoF9mgaJpZM4J4SK5 .

[adamschwartz]

A few options. Last one is current.

[adamschwartz]

Oddly enough, my favorite is now this one:

Although I’ll definitely have to tweak the button type to get better vertical alignment with “Run”, the code, and the play icons.

[zackbloom]

For me any of the options which move the buttons outside of the code area break the association between the code and the buttons. Also for me, having the padding around the buttons makes it hard to tell this isn't a part of the code sample, but is meta.

My personal favorites are the first two:

and

I really love both of them, with the first one as my ultimate favorite, but I defer to you.

[adamschwartz]

After much deliberation we have decided to go with this: