Part 1 - Setup for responsive top nav redesign [RUN AS-IF-FOSS]
- Requirements (issue)
- Tasks (epic)
- Full Context Spike MR (permanent draft)
-
All MR Parts...
-
Decouple content-wrapper and content-wrapper-margin
-
Part 1 - Setup for responsive top nav redesign (depends on parent MR)
- Part 2 - Top nav responsive view (depends on parent MR)
-
Part 1 - Setup for responsive top nav redesign (depends on parent MR)
-
Decouple content-wrapper and content-wrapper-margin
What does this MR do?
This MR sets up the CSS, HAML, and minimal JavaScript required for the responsive version of the top nav redesign.
What's in the upcoming MR?
- Updating the view model
- Updating the Vue components to actually render the responsive menu, reusing many of the already existing top nav components. This includes finishing the move of the "search" icon and "New..." dropdown.
Screenshots (strongly suggested)
How to test?
You will need to enable the feature flag :combined_menu
to test the new behavior locally. Nothing should have changed with the feature flag off.
What should I look for?
- With the feature flag on and responsive menu open, the "search icon" and "new dropdown" are now hidden.
- With the feature flag on and responsive menu open, the GitLab instance logo is now visible.
- With the feature flag on and responsive menu open, the "Placeholder for responsive top nav" is visible across various contexts like performance bar / system headers / Web IDE.
Description | Feature.disable(:combined_menu) |
Feature.enable(:combined_menu) |
---|---|---|
Video | 20210606_setup_responsive_ff_off | 20210606_setup_responsive_ff_on |
Large display | ||
Medium display | ||
Small display | ||
Small display (responsive menu open) | ||
Small display with performance bar and system header/footer (responsive menu open) | ||
Web IDE (responsive menu open) |
Does this MR meet the acceptance criteria?
Conformity
-
[ ] I have included a changelog entry, or it's not needed. (Does this MR need a changelog?)Not needed since it's behind a feature flag. -
I have added/updated documentation, or it's not needed. (Is documentation required?) -
I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?) -
I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?) -
I have self-reviewed this MR per code review guidelines. -
This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines) -
I have followed the style guides. -
This change is backwards compatible across updates, or this does not apply.
Availability and Testing
-
I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.) -
I have tested this MR in all supported browsers, or it's not needed.
Related to #301143 (closed)
Edited by Paul Slaughter