Skip to content

Commit 24e1efe

Browse files
uhafneruhafner
authored
Merge pull request #157 from jenkinsci/ui-refresh
UI refresh for cards and carousel
2 parents 216426f + a59b15b commit 24e1efe

File tree

5 files changed

+78
-27
lines changed

5 files changed

+78
-27
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pom.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
<revision>5.2.0-2</revision>
2323
<changelist>-SNAPSHOT</changelist>
2424
<module.name>${project.groupId}.bootstrap5</module.name>
25+
26+
<jenkins.baseline>2.346</jenkins.baseline>
27+
<jenkins.version>2.346.3</jenkins.version>
2528
</properties>
2629

2730
<licenses>

‎src/main/resources/bootstrap5/card.jelly‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,23 @@
3131
<st:adjunct includes="io.jenkins.plugins.bootstrap5"/>
3232

3333
<div class="card ${class}">
34-
<div class="card-body ${bodyClass}">
35-
<div class="card-title">
36-
${title}
37-
38-
<j:if test="${pngIcon!=null}">
39-
<img src="${pngIcon}" class="icon-right"/>
40-
</j:if>
41-
<j:if test="${fontAwesomeIcon!=null}">
42-
<fa:svg-icon name="${fontAwesomeIcon}" prefix="${fontAwesomeStyle != null ? fontAwesomeStyle : 'solid'}" class="icon-right"/>
43-
</j:if>
44-
34+
<div class="card-header">
35+
<div class="d-flex align-items-center">
36+
<span class="card-header-title">
37+
${title}
38+
</span>
39+
<span class="icon-border">
40+
<j:if test="${pngIcon!=null}">
41+
<img src="${pngIcon}" class="icon-right"/>
42+
</j:if>
43+
<j:if test="${fontAwesomeIcon!=null}">
44+
<fa:svg-icon name="${fontAwesomeIcon}" prefix="${fontAwesomeStyle != null ? fontAwesomeStyle : 'solid'}"
45+
class="icon-right"/>
46+
</j:if>
47+
</span>
4548
</div>
49+
</div>
50+
<div class="card-body ${bodyClass}">
4651
<d:invokeBody/>
4752
</div>
4853
</div>

‎src/main/resources/bootstrap5/carousel.jelly‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?jelly escape-by-default='true'?>
2+
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:fa="/font-awesome">
3+
<st:documentation>
4+
Renders a Bootstrap carousel.
5+
6+
<st:attribute name="id" use="required" type="String">
7+
The ID of the carousel.
8+
</st:attribute>
9+
10+
</st:documentation>
11+
12+
<st:adjunct includes="io.jenkins.plugins.bootstrap5"/>
13+
14+
<div id="${id}" class="carousel slide carousel" data-bs-interval="false">
15+
<div class="carousel-inner">
16+
<d:invokeBody/>
17+
</div>
18+
<button class="carousel-control-prev" type="button" data-bs-target="#overview-carousel" data-bs-slide="prev">
19+
<fa:svg-icon name="chevron-left" />
20+
<span class="visually-hidden">Previous</span>
21+
</button>
22+
<button class="carousel-control-next" type="button" data-bs-target="#overview-carousel" data-bs-slide="next">
23+
<fa:svg-icon name="chevron-right" />
24+
<span class="visually-hidden">Next</span>
25+
</button>
26+
</div>
27+
28+
</j:jelly>

‎src/main/webapp/css/jenkins-style.css‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,40 +31,55 @@ pre {
3131
}
3232

3333
/* ------------------------------------------------------------------------------------------------------------------- */
34-
/* Bootstrap Carousel */
34+
/* Bootstrap carousel */
3535
/* ------------------------------------------------------------------------------------------------------------------- */
3636

37-
.carousel-control-prev {
38-
width: 20px;
39-
}
40-
41-
.carousel-control-next {
42-
width: 20px;
37+
.carousel-control-prev, .carousel-control-next {
38+
width: 15px;
39+
fill: var(--text-color);
4340
}
4441

4542
/* ------------------------------------------------------------------------------------------------------------------- */
4643
/* Font awesome icons float right */
4744
/* ------------------------------------------------------------------------------------------------------------------- */
4845
.card {
4946
background-color: var(--background);
47+
border-radius: calc(var(--table-border-radius) + 2px);
48+
border-width: 5px;
49+
border-color: var(--table-background);
5050
color: var(--text-color);
5151
font-size: inherit;
5252
}
5353

54-
.card-title {
55-
font-size: 1.2rem;
54+
.card-header {
55+
font-size: 1.1rem;
5656
font-weight: 500;
57-
margin-bottom: 1.5rem;
57+
background: var(--table-background);
58+
border-bottom: var(--table-background);
59+
}
60+
61+
.card-header-title {
62+
margin-right: auto;
63+
}
64+
65+
.icon-right {
66+
fill: currentColor;
67+
height: 24px;
68+
width: 24px;
69+
position: relative;
70+
margin: auto;
5871
}
5972

60-
.icon-right {
73+
.icon-border {
6174
float: right;
62-
fill: var(--fa-image-color);
75+
background: var(--item-background--active);
76+
border-radius: 100%;
6377
height: 48px;
6478
width: 48px;
65-
position: absolute;
66-
right: 25px;
67-
top: 10px;
79+
content: "";
80+
pointer-events: none;
81+
position: relative;
82+
display: flex;
6883
}
6984

7085
.tooltip-inner {

0 commit comments

Comments
 (0)