add "copy" button to every example code blocks #2307
Conversation
sass/pages/_docs.scss
Outdated
|
|
||
| button.copy { | ||
| position: absolute; | ||
| top: .25rem; |
There was a problem hiding this comment.
This seems to work better for single line code blocks if top is set to .5rem, currently the button sits too high in single line code blocks
Single Line
Multi-Line
There was a problem hiding this comment.
Messing with it a bit more these options seem to work better for both Desktop and Mobile, where the icons seem to get pretty small:
top: 0.3rem;
right: 0.3rem;
width: 2.5rem;
height: 2.5rem;
EDIT: top / right value to match for visual cohesion and to better center the icon in single line code blocks
There was a problem hiding this comment.
Thanks for the suggestions! I'm happy to tweak the size and position, but I think we should keep them paired for better visual consistency, ie. top == right and width == height.
I'll try these changes when I'm back on my computer, and update the PR 👍
There was a problem hiding this comment.
width/height of 2.5rem looks a bit too big to me:
I'm keeping it at 2rem for now, but I have adjusted the top/right (which I have folded into margin to have a single value to change) to 0.4rem:
How do this look to you?
There was a problem hiding this comment.
0.4rem still has the icon sitting a bit high in Desktop resolution, 0.5rem works a bit better here.
But the Mobile resolution is still a concern:
When in mobile resolution the icon is quite small, and quite a bit more noticeably offset, even at 0.5rem.
I think the CSS I had suggested previously worked better to solve this without having to introduce media queries or similar.
If we want to split the difference between a too-large icon in Desktop resolution with a too small icon in Mobile resolution something like this could work:
top: 0.45rem;
right: 0.45rem;
width: 2.25rem;
height: 2.25rem;Desktop
Mobile
There was a problem hiding this comment.
I just tested in Chrome and it does look much smaller there than on Firefox; I'm guessing you're on Chrome and that's why you want it bigger? 😄
(BTW I'm not showing the mobile screenshots because on firefox they're the same size as desktop; I do see that in chrome they get even smaller on mobile, but I don't know why or how to work around that)
Since we're on github and it has a copy button as well (which btw they show all the time, but IMO that's too crowded and I prefer to only show it if the user puts their cursor on the code block, which is their natural action to copy it already). I just had a look at its css, and it's 2rem big and 0.5rem away from the edges, so let's just go with that?
It's centered on single-line code blocks on chrome:
and doesn't look too bad on firefox:
Making it 2.25rem tall doesn't look great on firefox:
though it does look better on chrome:
Given that firefox is my main browser, I'd prefer to keep it 2rem, but in the interest of getting this merged and not stuck on details like this, I've changed it to 2.25rem in the PR 😇
There was a problem hiding this comment.
I'm actually using LibreWolf, which is a fork of Firefox, though I think it would be good for this to be tested in the major browsers!
I do think copying GitHub's CSS here is a good call though, I believe they could be considered an authority here!
Your latest changes look good on my end in various browsers, I'll go ahead and approve!
There was a problem hiding this comment.
I do think copying GitHub's CSS here is a good call though, I believe they could be considered an authority here!
Ack, done 👍
alice-i-cecile
left a comment
alice-i-cecile
left a comment
There was a problem hiding this comment.
Oh that's quite nice. I'm not enough of a web dev to comment on the implementation, but I think this is a nice idea, and the aesthetics are good.
We'll wait on a webdev review.
alice-i-cecile
added
C-Feature
1ace
force-pushed
the
copy
branch
2 times, most recently
from
6feb62e to
1a906ea
Compare
(This part of) the Clipboard API is supported (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) by Safari since 2009, by Chrome since 2011, and by Firefox since 2013, but just in case I included a detection code to make sure the "copy to clipboard" button is not shown if we can't copy to the clipboard :) `clone.svg` and `check.svg` from https://dazzleui.gumroad.com/l/dazzleiconsfree Picked because they seem to go well with the rest of the design, but I'm happy to replace them with anything else :)
4 participants
(This part of) the Clipboard API is supported (https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) by Safari since 2009, by Chrome since 2011, and by Firefox since 2013, but just in case I included a detection code to make sure the "copy to clipboard" button is not shown if we can't copy to the clipboard :)
clone.svgandcheck.svgfrom https://dazzleui.gumroad.com/l/dazzleiconsfree; picked because they seem to go well with the rest of the design, but I'm happy to replace them with anything else :)Screenshots
Dark mode
first code block hovered:
after clicking on the button:
Light mode
first code block hovered:
after clicking on the button: