Embedded snippets: Improve UI representation
Summary
We have a great new community contribution with our "Embedded snippets" feature, available with 10.8.
The UI presentation of the embedded snippet could be improved in some details.
Steps to reproduce
Embedded these two public (project) snippets in any HTML.
<script src="https://gitlab.com/akaemmerle/example-project/snippets/1714803.js"></script> <!-- includes file name -->
<script src="https://gitlab.com/akaemmerle/example-project/snippets/1714813.js"></script>
Examples
- Example of new "Embed/Share" block available for public snippets at GitLab
- Embedded snippet example on GitLab Pages
- Screenshot of embedded snippets for reference.
Findings/Improvements
- Header
- Do we need the leading
gl-snippet-icon
icon at all? Does not hold any UI functionality - Vertical alignment:
gl-snippet-icon
is not centered - Vertical alignment:
gl-logo
is not optically centered, horizontal padding too large - Horizontal alignment: padding right too small (especially if no filename available)
- Is there any other snippet information available if no filename is provided?
- Move "… on
🦊 GitLab" outside of the title text, to the right or to a new footer? - Active state of embedded snippet input (
js-snippet-url-area
) grows into right "Copy to clipboard" button - Line numbering gets cut off after magic 79.
- Do we need the leading
cc @tauriedavis
Edited by 🤖 GitLab Bot 🤖