Add collapsible commit component for blob page on narrow viewports
What does this MR do and why?
This MR adds a new vue component that renders for blob page on narrow viewports.
This is based on !172632 (merged) and is half of the work for closing #504359 (closed).
| Description | MR |
|---|---|
|
For both blob and repository view: Move history button to commit box on larger viewport Keep the button in header on small viewport |
|
|
For repository page: Add new Vue component in |
|
|
For blob page: Add new haml component in |
|
References
Please include cross links to any resources that are relevant to this MR This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
- this was split from !172325 (closed), which does implement the entire issue but ends up being too much
😂 - original issue #421376 (closed) has the design mocks
- technical spike was done in #486950 (comment 2100482881)
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Before | After | |
|---|---|---|
|
Blob page Note: this link is good as it has a commit message body to test the collapse/expand of commit message details |
|
|
|
Blob page - narrow viewport Note: this link is good as it has a commit message body to test the collapse/expand of commit message details |
|
|
How to set up and validate locally
- Visit blob page - http://localhost:3000/flightjs/Flight/-/blob/master/test/spec/standalone_spec.js
- Make screen small
- New component should look and work as per design request:
Avatar: Displayed to show the who in the latest change
- Not displaying name as there could be long names and/or multiple author/commiters that could affect the layout. This could be revealed in the expanded state.
Time: Displayed to show the when was the latest changeCommit: Reference to the latest change, clicks on it goes to the commit detail viewellipsis: View commit details inlineHistory: Links to the commit list
Related to #504359 (closed)