Security Dashboard: responsive layout
Problem
We are revising our layout and adding new sections: https://gitlab.com/gitlab-org/gitlab-ee/issues/12846 (related: https://gitlab.com/gitlab-org/gitlab-ee/issues/12881), and https://gitlab.com/gitlab-org/gitlab-ee/issues/11190, and https://gitlab.com/gitlab-org/gitlab-ee/issues/13298. Need responsive layout consideration in how to handle new sections: (https://gitlab.com/gitlab-org/gitlab-ee/issues/11190, and https://gitlab.com/gitlab-org/gitlab-ee/issues/13298).
Proposed Solution
breakpoint TBD | breakpoint TBD |
div.container-fluid min-width: 1280px; (desktop) |
---|---|---|
Key
- Filters and header
- Vulnerability Table
- Trends over time https://gitlab.com/gitlab-org/gitlab-ee/issues/12846 & https://gitlab.com/gitlab-org/gitlab-ee/issues/12881
- Most affected projects https://gitlab.com/gitlab-org/gitlab-ee/issues/11190
- Out of date and untested projects https://gitlab.com/gitlab-org/gitlab-ee/issues/13298
Decisions
- Establish breakpoints degradation/enhancement (per FE meeting discussion: use default breakpoints )
original proposal
Breakpoint TBD (mobile) | Breakpoint TBD (Tablet) | container min-width: 1280px; (desktop) |
---|---|---|
4 AND 5 are not displayed | 4 OR 5 are not displayed | desktop layout based on https://gitlab.com/gitlab-org/gitlab-ee/issues/12846 implementation |
Key
- Filters and header
- Vulnerability Table
- Trends over time https://gitlab.com/gitlab-org/gitlab-ee/issues/12846 & https://gitlab.com/gitlab-org/gitlab-ee/issues/12881
- Most affected projects https://gitlab.com/gitlab-org/gitlab-ee/issues/11190
- Out of date and untested projects https://gitlab.com/gitlab-org/gitlab-ee/issues/13298
Decisions
- Establish breakpoints degradation/enhancement of sections
- Do we want to display 4 and 5 at non-desktop viewport sizes? Why?
- If we display 4 or 5 at tablet+: what is prioritized to view?
Edited by Kyle Mann