Refine cards UI

[janfaracik]

This PR refines the appearance of cards in Jenkins. It:

• Makes the title clickable to navigate to the cards relevant page
• Adjusts the corner radius to be tighter
• Tightens padding
• Improves focus state for card controls
• Introduces a teaser class, essentially for a when a card has too much content to show (e.g. too many tests, too many artefacts)
• Sets a height for cards on the experimental run page

Relates to jenkinsci/pipeline-graph-view-plugin#1006

Before

After

Testing done

• Cards appear as expected

Proposed changelog entries

• Refine cards UI

Proposed changelog category

/label web-ui,rfe

Proposed upgrade guidelines

N/A

Submitter checklist

• The Jira issue, if it exists, is well-described.
• The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
• There is automated testing or an explanation as to why this change has no tests.
• New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
• New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
• New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
• For dependency updates, there are links to external changelogs and, if possible, full differentials.
• For new APIs and extension points, there is a link to at least one consumer.

Desired reviewers

@jenkinsci/sig-ux

Before the changes are marked as ready-for-merge:

Maintainer checklist

• There are at least two (2) approvals for the pull request and no outstanding requests for change.
• Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
• Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
• Proper changelog labels are set so that the changelog can be generated automatically.
• If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).
• If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[timja]

Not manually tested.

[uhafner]

I am not sure if this is related to this PR: when I run this PR on my machine then the builds "legacy" card now fills only half of the screen:

Also using the > icon as a link is untypical, I would expect it to expand something. The previous icon <> (rotated) was better (though it indicates that something can be expanded in the same page). Isn't there an open link icon available?

[uhafner]

And related to all those "link" pages: I think we are adding too many visualizations for our links (buttons, texts, etc.): I would prefer to use the same hover and styling effects for all links: breadcrumb, sidebar, buttons in title, buttons in app bar, buttons in card. Now some have a hover, some a hover with border, some have nothing, this is not consistent.

[janfaracik]

I am not sure if this is related to this PR: when I run this PR on my machine then the builds "legacy" card now fills only half of the screen:

Yep, this PR caused that - I've fixed it now. Thanks!

Also using the > icon as a link is untypical, I would expect it to expand something. The previous icon <> (rotated) was better (though it indicates that something can be expanded in the same page). Isn't there an open link icon available?

I can see that - I'm struggling to find other examples right now and definitely one to iterate on, but just this morning I noticed it after waking up -

[uhafner]

I am not sure if this is related to this PR: when I run this PR on my machine then the builds "legacy" card now fills only half of the screen:

Yep, this PR caused that - I've fixed it now. Thanks!

I can confirm, it works now!

Also using the > icon as a link is untypical, I would expect it to expand something. The previous icon <> (rotated) was better (though it indicates that something can be expanded in the same page). Isn't there an open link icon available?

I can see that - I'm struggling to find other examples right now and definitely one to iterate on, but just this morning I noticed it after waking up -

I see. Seems to be a special IOS method. I don't think it is a good idea, but this is a matter of preference. Maybe this screenshot makes it more easy to understand why I don't like it and would prefer to use the existing <> icon:

The same icon is used to navigate left and right, here the icon fits. In the app bar it is also correctly using an hover overlay when the mouse enters the icon area. When I hover over the icon in the portlet almost nothing happens, it is hard to spot the link.

[janfaracik]

The same icon is used to navigate left and right, here the icon fits.

I see that - I'll take a look at adjusting the prev/next buttons.

Update:

Adjusted the icons for prev/next - they're now arrows rather than chevrons.

In the app bar it is also correctly using an hover overlay when the mouse enters the icon area. When I hover over the icon in the portlet almost nothing happens, it is hard to spot the link.

Updated this branch for this - on hover/active it'll now show the same state.

[uhafner]

The new buttons and the hover-effect look good now! Thanks for adjusting that...

The console card (and the legacy card) have the correct height now. But the width of both cards is broken (twice the page screen width). This is broken in Jenkins 2.532 as well, so maybe unrelated to this PR.

[timja]

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!