search

rancher / dashboard

The Rancher UI
https://rancher.com
Apache License 2.0
455 stars 257 forks source link

2.6 UX: Make buttons stick to bottom of page on Create/Edit views #2512

Closed nwmac closed 2 years ago

nwmac commented 3 years ago

Where the content will cause the view to scroll, pin the buttons to the bottom of the page:

image

cnotv commented 2 years ago

We have cases where the buttons are next to the header. Should we consider maybe stick to the same design principle?

Screenshot from 2022-03-09 20-53-23

nwmac commented 2 years ago

This is specifically for the form ok and cancel buttons - at the moment you have to scroll to get to these for long forms.

cnotv commented 2 years ago

Ok but this is not just about stick one page footer, but also about sticking the header and make scroll the body, so more like a complete layout change. We should consider how to define the layout without necessarily rewrite everything.

I am investigating about the use of Teleport, which is integrated in Vue3. It would also allow us to work specifically just for this case and just for the footer. Unfortunately this requires further efforts not just in Vue2, but also for SSR as this works on the DOM.

A major layout refactoring may be an optimal and eventual choice.

cnotv commented 2 years ago

We are getting too many issues with the Teleport due SSR, so I will just stick to the CRU component layout and try to play around it.

richard-cox commented 2 years ago

There's some additional cases QA might like to look at in https://github.com/rancher/dashboard/pull/5646

igomez06 commented 2 years ago

Setup: Rancher Version: v2.6.5-rc6 Kubernetes Version: RKE2 v1.22.8+rke2r1 HA Install

Steps:

  1. Checked Cluster create/import screens (types, credentials (create new / existing), import, rke2)
    • RKE1 Cluster create is NOT working as expected, the buttons are NOT pinned to the bottom
  2. Checked Auth providers (shortest form is keycloak saml) it is working as expected
  3. Create/Edit resource types - project, namespace is working as expected.
  4. Create/Edit resource types that have sub-types (secrets, workloads, OPA Gateway / Constraints) are working as expected.
igomez06 commented 2 years ago

@cnotv @richard-cox for cluster create for RKE1 the buttons are not pinned to the bottom.

nwmac commented 2 years ago

That is the ember UI - which we don't plan to update to support the sticky buttons for now - so this will have to stay as is.

igomez06 commented 2 years ago

Thank you, everything else is working as expected.