Skip to content

Commit 44f25a4

Browse files
janfaracikjanfaracik
committed
Update design of Design Library
1 parent 4c88912 commit 44f25a4

File tree

5 files changed

+70
-78
lines changed

5 files changed

+70
-78
lines changed

‎pom.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ THE SOFTWARE.
6060
<gitHubRepo>jenkinsci/design-library-plugin</gitHubRepo>
6161
<!-- https://www.jenkins.io/doc/developer/plugin-development/choosing-jenkins-baseline/ -->
6262
<jenkins.baseline>2.479</jenkins.baseline>
63-
<jenkins.version>2.516</jenkins.version>
63+
<jenkins.version>2.541</jenkins.version>
6464
<node.version>22.15.0</node.version>
6565
<npm.version>11.6.4</npm.version>
6666
<spotless.check.skip>false</spotless.check.skip>

‎src/main/resources/io/jenkins/plugins/designlibrary/Home/index.jelly‎

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -14,59 +14,63 @@
1414
}
1515
</style>
1616

17-
<s:section hideBorder="true">
18-
<div class="app-card__container app-card__container--large">
19-
<div class="app-card__preview">
20-
<div class="app-card__preview__introduction">
21-
<img src="${imagesURL}/svgs/logo.svg" alt="${%Jenkins illustration}" />
17+
<div class="app-settings-container">
18+
<div class="app-settings-container__inner">
19+
<s:section hideBorder="true">
20+
<div class="app-card__container app-card__container--large">
21+
<div class="app-card__preview">
22+
<div class="app-card__preview__introduction">
23+
<img src="${imagesURL}/svgs/logo.svg" alt="${%Jenkins illustration}" />
24+
</div>
25+
</div>
26+
<p class="app-card__title">${%welcome}</p>
27+
<p class="app-card__description">${%description}</p>
2228
</div>
23-
</div>
24-
<p class="app-card__title">${%welcome}</p>
25-
<p class="app-card__description">${%description}</p>
26-
</div>
27-
</s:section>
29+
</s:section>
2830

29-
<s:section title="${%topics}">
30-
<div class="app-home__side-by-side">
31-
<s:card icon="symbol-cards plugin-design-library"
32-
title="${%cards}"
33-
description="${%cards-description}"
34-
href="cards"
35-
tag="${%New}" />
36-
<s:card icon="symbol-dropdown-menu plugin-design-library"
37-
title="${%menu}"
38-
description="${%menu-description}"
39-
href="menu"
40-
tag="${%New}" />
41-
<s:card icon="symbol-buttons plugin-design-library"
42-
title="${%buttons}"
43-
description="${%buttons-description}"
44-
href="buttons" />
45-
<s:card icon="symbol-star-outline plugin-ionicons-api"
46-
title="${%symbols}"
47-
description="${%symbols-description}"
48-
href="symbols" />
49-
</div>
50-
</s:section>
31+
<s:section title="${%topics}">
32+
<div class="app-home__side-by-side">
33+
<s:card icon="symbol-cards plugin-design-library"
34+
title="${%cards}"
35+
description="${%cards-description}"
36+
href="cards"
37+
tag="${%New}" />
38+
<s:card icon="symbol-dropdown-menu plugin-design-library"
39+
title="${%menu}"
40+
description="${%menu-description}"
41+
href="menu"
42+
tag="${%New}" />
43+
<s:card icon="symbol-buttons plugin-design-library"
44+
title="${%buttons}"
45+
description="${%buttons-description}"
46+
href="buttons" />
47+
<s:card icon="symbol-star-outline plugin-ionicons-api"
48+
title="${%symbols}"
49+
description="${%symbols-description}"
50+
href="symbols" />
51+
</div>
52+
</s:section>
5153

52-
<s:section title="${%get-involved}">
53-
<div class="app-home__side-by-side">
54-
<s:card icon="symbol-gitter plugin-design-library"
55-
title="${%gitter-description}"
56-
href="https://gitter.im/jenkinsci/ux-sig" />
57-
<s:card icon="symbol-logo-youtube plugin-ionicons-api"
58-
title="${%ux-youtube}"
59-
href="https://www.youtube.com/playlist?list=PLN7ajX_VdyaOnsIIsZHsv_fM9QhOcajWe" />
60-
<s:card icon="symbol-logo-github plugin-ionicons-api"
61-
title="${%ux-wip-core}"
62-
href="https://github.com/jenkinsci/jenkins/pulls?q=is%3Apr+is%3Aopen+label%3Aweb-ui" />
63-
<s:card icon="symbol-heart-outline plugin-ionicons-api"
64-
title="${%contribute}"
65-
href="https://github.com/jenkinsci/design-library-plugin" />
66-
</div>
67-
</s:section>
54+
<s:section title="${%get-involved}">
55+
<div class="app-home__side-by-side">
56+
<s:card icon="symbol-gitter plugin-design-library"
57+
title="${%gitter-description}"
58+
href="https://gitter.im/jenkinsci/ux-sig" />
59+
<s:card icon="symbol-logo-youtube plugin-ionicons-api"
60+
title="${%ux-youtube}"
61+
href="https://www.youtube.com/playlist?list=PLN7ajX_VdyaOnsIIsZHsv_fM9QhOcajWe" />
62+
<s:card icon="symbol-logo-github plugin-ionicons-api"
63+
title="${%ux-wip-core}"
64+
href="https://github.com/jenkinsci/jenkins/pulls?q=is%3Apr+is%3Aopen+label%3Aweb-ui" />
65+
<s:card icon="symbol-heart-outline plugin-ionicons-api"
66+
title="${%contribute}"
67+
href="https://github.com/jenkinsci/design-library-plugin" />
68+
</div>
69+
</s:section>
6870

69-
<s:previous-next-controls previousPage="${null}" nextPage="${it.all.0}" />
71+
<s:previous-next-controls previousPage="${null}" nextPage="${it.all.0}" />
72+
</div>
73+
</div>
7074
</l:main-panel>
7175
</l:layout>
7276
</j:jelly>

‎src/main/resources/lib/samples/layout.jelly‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,24 @@ THE SOFTWARE.
4646
</l:side-panel>
4747

4848
<l:main-panel>
49-
<l:app-bar title="${it.displayName}">
50-
<j:if test="${it.since != null}">
51-
<a href="https://www.jenkins.io/changelog/${it.since}" class="jenkins-button jdl-since-tag" target="_blank">
52-
<l:icon src="symbol-information-circle-outline plugin-ionicons-api" />
53-
Since ${it.since}
54-
</a>
55-
</j:if>
56-
</l:app-bar>
49+
<div class="app-settings-container">
50+
<div class="app-settings-container__inner">
51+
<l:app-bar title="${it.displayName}">
52+
<j:if test="${it.since != null}">
53+
<a href="https://www.jenkins.io/changelog/${it.since}" class="jenkins-button jdl-since-tag" target="_blank">
54+
<l:icon src="symbol-information-circle-outline plugin-ionicons-api" />
55+
Since ${it.since}
56+
</a>
57+
</j:if>
58+
</l:app-bar>
5759

58-
<p class="jdl-subtitle">${it.description}</p>
60+
<p class="jdl-subtitle">${it.description}</p>
5961

60-
<d:invokeBody/>
62+
<d:invokeBody/>
6163

62-
<s:previous-next-controls previousPage="${it.previousPage}" nextPage="${it.nextPage}" />
64+
<s:previous-next-controls previousPage="${it.previousPage}" nextPage="${it.nextPage}" />
65+
</div>
66+
</div>
6367
</l:main-panel>
6468
</l:layout>
6569
</j:jelly>

‎src/main/resources/lib/samples/sidepanel.jelly‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<l:task title="${%Home}" href="${rootURL}/design-library" icon="symbol-design-library plugin-design-library" contextMenu="false" />
99

1010
<j:forEach var="s" items="${it.grouped.entrySet()}">
11-
<div class="app-sidepanel__heading">${s.key.displayName}</div>
11+
<div class="jenkins-side-nav__heading">${s.key.displayName}</div>
1212
<j:forEach var="s" items="${s.value}">
1313
<l:task title="${s.displayName}" href="${rootURL}/design-library/${s.urlName}" icon="${s.iconFileName}" />
1414
</j:forEach>

‎src/main/resources/scss/abstracts/_overrides.scss‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,6 @@
1414
}
1515
}
1616

17-
#main-panel {
18-
margin-left: auto;
19-
margin-right: auto;
20-
21-
@media (min-width: 1200px) {
22-
max-width: min(1200px, 60vw);
23-
}
24-
}
25-
2617
code {
2718
font-family: var(--font-family-mono) !important;
2819
color: var(--text-color-secondary);
@@ -35,10 +26,3 @@ a {
3526
color: unset;
3627
}
3728
}
38-
39-
.app-sidepanel__heading {
40-
font-size: 0.875rem;
41-
color: var(--text-color-secondary);
42-
font-weight: 450;
43-
margin: 1rem 0 0.25rem 0;
44-
}

0 commit comments

Comments
 (0)