Docs: Add top/bottom margin to highlighted code samples #31036
Conversation
provide more space to avoid having the "Copy" button overlap code sample content
|
admittedly looks a bit "spacey" for code sample one-liners, but works well for content that is very long/wide like in the second example (where otherwise you get the unsightly overlap of "Copy") |
|
I'm definetely for this. If spacing doesn't look good, might we consider adding a |
|
there is a subtle background color already. what i meant more was that it looks odd being top-right in an otherwise one-liner box (where currently for single-line code blocks like that, the "Copy" looks inline with the single line of code) |
|
or did you mean a background on the non-hovered/non-focused "Copy" button? |
|
Indeed, a background for the copy button: to make it stand out a bit, and prevent it from being unreadable. Note sure it'd be better than spacing though. |
|
while not obvious anymore on the new v5 homepage (as the code samples have been prefixed with a comment that's short and doesn't creep to the right-hand side), the fundamental problem is still there in places, e.g. https://v5.getbootstrap.com/docs/5.0/forms/form-control/#sizing |
|
On the Icons site, I've changed the button style vs adding more vertical margin/padding. See https://icons.getbootstrap.com/icons/alarm/ for an example. I'd be more in favor of that vs the added page height. |
|
@mdo it will still overlap in those situations...but will look prettier. up to you. |
|
@mdo taking the example for v5 from #31036 (comment) and grafting in the styles for the clipboard buttons from https://icons.getbootstrap.com/icons/alarm/ still results in the buttons then covering/overlapping the content. true, it's prettier. but functionally still the same...they get in the way. how about combining the two approaches? nicer styles for the clipboard buttons and more padding? |
Let's try it out! |
|
added new styles for the clipboard button, and tweaked both the size/position of the button and my added margin ... to some middle-of-the-road compromise. still overlaps content a bit if the first line fills the whole width, but at least doesn't look broken now. and the slightly reduced size of the clipboard button feels good, subjectively. |
patrickhlauke
force-pushed
the
docs-highlight-pre-tweak
branch
from
3349fa0
to
957ab20
Compare
|
not urgent, but just to clear the deck of relatively simple little things... ping @mdo @twbs/css-review |
|
@patrickhlauke can you please backport this in v4-dev? |
Backport of #31036 to v4
* Add top/bottom margin to highlighted code samples provide more space to avoid having the "Copy" button overlap code sample content * Modify clipboard button style Per twbs#31036 (comment) and twbs#31036 (comment) * Tweak margin, clipboard button size and position Co-authored-by: XhmikosR <xhmikosr@gmail.com>
provide more space to avoid having the "Copy" button overlap code sample content
Preview: https://deploy-preview-31036--twbs-bootstrap.netlify.app/
Before:
After: