search

jenkinsci / badge-plugin

Jenkins Badge plugin
https://plugins.jenkins.io/badge/
MIT License
32 stars 43 forks source link

Creating simple badge with rounded borders #177

Closed thweiss closed 3 months ago

thweiss commented 3 months ago

Describe your use-case which is not covered by existing documentation.

The documentation shows a simple badge with rounded corners and lightgrey background for build 8 with text "1.0.0" and a tooltip: badge

Assuming it was generated with addShortText(text: <text>), I have not been able to create a similar looking badge. The closest I could get with addShortText is rather ugly: badge_addShortText

Please describe how to create a badge with the same styling as first one on your screenshot (ideally without custom CSS).

I'm using Jenkins v2.452.1 with Badge v1.13.

Reference any relevant documentation, other materials or issues/pull requests that can be used for inspiration.

No response

Are you interested in contributing to the documentation?

No response

strangelookingnerd commented 3 months ago

By using addShortText(text: "1.0.0", border: "0", background: "lightgrey; border-radius: 5px") I got this result

grafik

By using addShortText(text: "1.0.0", border: "1", borderColor: "lightgrey", background: "lightgrey; border-radius: 5px") I got this result

grafik

There may be other ways to achieve this result I guess. Please let me know if this answers your question.

thweiss commented 3 months ago

Thanks, applying padding: 2px with border: "0" I could also achieve similar results. However, I noticed the build history for that particular job will occupy a lot of space because the badge(s) will be put above the timestamp even though they could well fit right next to it. Also, any additional info badges will not end next to short text badges but below them (see screenshot).

Screenshot 2024-08-09 194910

Is there anything I can do about those spacing issues?

strangelookingnerd commented 3 months ago

Is there anything I can do about those spacing issues?

The overall layout is handled outside of the plugin so there is not too much I could think of. However the redesign of the enclosing build history widget was released recently and brings a lot of improvements that may fix this particular issue.

thweiss commented 3 months ago

Ah, good to know there will be some general improvements soon. Already expected it will involve altering the markup of the divs that are not under control of the plugin.

I'll close this issue then as I received the information I wanted: the user needs to provide their own CSS to achieve results similar to the badge on the first screenshot of the documentation which was not immediately obvious.