Skip to content

Restyle collection list item controls to keep alignment#3603

Merged
jerabekjiri merged 1 commit into
ansible:masterfrom
himdel:collection-list-flex
Apr 17, 2023
Merged

Restyle collection list item controls to keep alignment#3603
jerabekjiri merged 1 commit into
ansible:masterfrom
himdel:collection-list-flex

Conversation

@himdel

@himdel himdel commented Apr 14, 2023

Copy link
Copy Markdown
Collaborator

Issue: AAH-2303

When repository names vary in length, collection list items (both in namespace detail and in collection list view (but not cards view)) end up with misaligned controls:

Namespace detail

before

20230414214655

after

20230415010104

Collection list

before

20230414214718

after

20230415010140

Fixing by unifying the rendering between the two, and rendering as a right-aligned block of column flex items, aligned to the right, with text inside aligned to the left.

  • flex-direction: column align-items: flex-end
    • flex-direction: column align-items: flex-start
      • synclist switch
      • upload button + dropdown menu
      • 2 lines of text
    • flex-direction: row align-self: flex-start
      • repository
      • signature badge

@himdel himdel force-pushed the collection-list-flex branch from 9d59a38 to ab24eea Compare April 15, 2023 00:58
@himdel himdel marked this pull request as ready for review April 15, 2023 01:03
@himdel himdel requested a review from jerabekjiri April 15, 2023 01:17

@jerabekjiri jerabekjiri left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very nice, didn't think of this, LGTM 👍

@jerabekjiri jerabekjiri added the backport-4.7 This PR should be backported to stable-4.7 (2.4) label Apr 17, 2023
@jerabekjiri jerabekjiri merged commit 686ef1f into ansible:master Apr 17, 2023
@jerabekjiri jerabekjiri deleted the collection-list-flex branch April 17, 2023 13:00
@patchback

This comment was marked as outdated.

jerabekjiri pushed a commit to jerabekjiri/ansible-hub-ui that referenced this pull request Apr 17, 2023
jerabekjiri added a commit to jerabekjiri/ansible-hub-ui that referenced this pull request Apr 17, 2023
jerabekjiri pushed a commit to jerabekjiri/ansible-hub-ui that referenced this pull request Apr 17, 2023
…ng repository name lengths (ansible#3603)

Issue: AAH-2303
(cherry picked from commit 686ef1f)
jerabekjiri pushed a commit to jerabekjiri/ansible-hub-ui that referenced this pull request Apr 17, 2023
…ng repository name lengths (ansible#3603)

Issue: AAH-2303
(cherry picked from commit 686ef1f)
jerabekjiri added a commit that referenced this pull request Apr 17, 2023
…3603 (#3624)

* Restyle collection list item controls to keep alignment despite varying repository name lengths (#3603)

Issue: AAH-2303
(cherry picked from commit 686ef1f)

* fix after rebase

Issue: AAH-2303

---------

Co-authored-by: Martin Hradil <mhradil@redhat.com>
@himdel

himdel commented Apr 17, 2023

Copy link
Copy Markdown
Collaborator Author

Backported via #3624 (for some reason the bot didn't catch it (missing parentheses around #3624), adding label manually)

@himdel himdel added the backported-4.7 This PR has been backported to stable-4.7 (2.4) label Apr 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport-4.7 This PR should be backported to stable-4.7 (2.4) backported-4.7 This PR has been backported to stable-4.7 (2.4)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants