Snippets: Clean up existing page UI
Currently, our GitLab snippets page has some UI glitches and inconsistencies. Cleaning up this page improves information structure and experience.
1. Embed/share link too much in focus
Right now, the “Embed/Share” link is very dominant, following right after the snippet title block. It takes horizontal screen estate especially on small screens and the width is unnecessary (the actual link typically is not interesting if copyable, similar to SSH project URL project-clone-holder
that uses 380px).
We should move it to the right side of the title block, according to @dimitrieh's original design in.
Current | Proposal |
---|---|
Fix input group UI details
The current input group is not consistent with with the project-clone-holder
on the project page. We should adjust these details:
- Gray background color on
input-group-btn
- Arrow icon within left dropdown
2. Snippet title whitespace
Currently, the snippet title does not have any bottom margin, unlike issue titles (margin-bottom: 16px
). See attached screens.
Markup difference:
<h2 class="title">Example issue 01</h2>
<h2 class="snippet-title prepend-top-0 append-bottom-0">
Markdown example 02
</h2>
Snippet | Issue |
---|---|
3. Edited: author information
When I edit and save a snippet, the information on the edit is displayed in edited-text
. Unlike issues, the information of the author of the edit is not displayed.
Snippet | Issue |
---|---|
4. Render preview of Markdown snippets
Currently, Markdown snippets are shown in raw format. As there is an “Open raw” button, I’d expect Markdown snippets to be shown as Markdown preview, similar to Files. Example.
Snippet | Issue |
---|---|