Geo Status Page 2.0 - Mobile Components Followup
What/Why
Started from a conversation with @nmezzopera !58121 (comment 563437016)
There are two pairs of components in the geo_nodes_beta
scope that use a CSS hide/show approach to rendering the Desktop vs Mobile Component.
geo_nodes_actions
: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_actions.vue#L32-37
geo_nodes_replication_details
: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/geo_nodes_beta/components/details/secondary_node/geo_node_replication_details.vue#L103-121
With these components, we use GitLab UI utility classes that include @media
tags to determine which component to render. Ideally we would like to use something like a v-if
along with some JS to render only one component rather than both being in the DOM always. There has been some talk about trying to use the breakpoints.js file but usage is quite small in our code base as well as concerns around how nice it will play with CSS @media
breakpoints.
Proposal
Explore more in depth the feasibility of using JS and v-if
to cleanup the CSS approach to rendering these separate components. Best case could be that we are able to set a standard for future issues like this.