Uploaded image for project: 'Automation Hub'
  1. Automation Hub
  2. AAH-822

Allign all filters to be in line with the title of a page

    • Icon: Task Task
    • Resolution: Done
    • Icon: Normal Normal
    • cloud-2022-02-16
    • None
    • UI
    • None
    • 4.5.0 Sprint 6, 4.5.0 Sprint 7

      Allign all filters in headers to be in line with the title of a page.

       

      It goes for two places:

      via left navbar: Collections -> Collections (both filters)

      via left navbar: Collections -> Namespace

       

      Note: It seems .pf-c-toolbargroup is to blame for ones under the title.

       

      How it looks:

      How it should looklike:

      Acceptance criteria:

       

       

            [AAH-822] Allign all filters to be in line with the title of a page

            https://github.com/ansible/ansible-hub-ui/pull/1489#issuecomment-1012010072

            For screenshots see the comment in GH.

            I modified most of the toolbars to:

            1. Keep the current looks and the fixed paddings
            2. Use minimal scss and custom styling and follow the PF library as close as possible.

             

            There may be a few pixel differences between groups as the overwritten pf classes did not exactly matched all the PF values, but I think this does NOT change the user experience in any way.

            Levente Berky (Inactive) added a comment - https://github.com/ansible/ansible-hub-ui/pull/1489#issuecomment-1012010072 For screenshots see the comment in GH. I modified most of the toolbars to: Keep the current looks and the fixed paddings Use minimal scss and custom styling and follow the PF library as close as possible.   There may be a few pixel differences between groups as the overwritten pf classes did not exactly matched all the PF values, but I think this does NOT change the user experience in any way.

            Ah, we really have 2 different layouts:

            • both title and search are in the header - Collections, Namespaces
            • title in header, search and table in body - Approval, EE, EE>RR, Task management, Users, Groups, Users tab under group detail

            For Collections and Namespaces it's as described above, the filter should align with the title

            But for the rest, the alignment is between the filter and the first column table header.

            Martin Hradil added a comment - Ah, we really have 2 different layouts: both title and search are in the header - Collections, Namespaces title in header, search and table in body - Approval, EE, EE>RR, Task management, Users, Groups, Users tab under group detail For Collections and Namespaces it's as described above, the filter should align with the title But for the rest, the alignment is between the filter and the first column table header.

            Levente Berky (Inactive) added a comment - mrahman@redhat.com  

            I made the changes, but I have to note here, that if we edit these pages, then the toolbar indent is not matching to the "Approval" and "User access" page's toolbar (Where they have this indent).

            Levente Berky (Inactive) added a comment - I made the changes, but I have to note here, that if we edit these pages, then the toolbar indent is not matching to the "Approval" and "User access" page's toolbar (Where they have this indent).

              ctorrens@redhat.com Christian Torrens (Inactive)
              znemecko Zita Nemeckova (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated:
                Resolved: