Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refresh the design of the About Jenkins page #7712

Merged
merged 4 commits into from Mar 17, 2023
Merged

Refresh the design of the About Jenkins page #7712

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4261ea1
Init
janfaracik Mar 11, 2023
e6962aa
Add translation for Get involved, remove old translations for blurb
janfaracik Mar 11, 2023
6488606
Lint
janfaracik Mar 11, 2023
f20cbc6
Merge branch 'master' into refresh-about-page
janfaracik Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 23 additions & 17 deletions core/src/main/resources/hudson/AboutJenkins/index.jelly
View file
Open in desktop
Expand Up @@ -25,27 +25,33 @@ THE SOFTWARE.
<!-- About Jenkins page -->
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:t="/lib/hudson">
<l:layout permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%about(app.VERSION)}">
<l:side-panel>
<style>
#side-panel {
padding: 0 !important;
border-right: none;
}
</style>

<l:layout type="one-column" permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%about(app.VERSION)}">
<l:header>
<script src="${resURL}/jsbundles/section-to-tabs.js" type="text/javascript" defer="true" />
</l:header>

<l:main-panel>
<div class="app-about-branding">
<div class="app-about-branding__logo">
<img src="${imagesURL}/svgs/logo.svg" alt="${%logo}"/>
<h1>Jenkins <span class="jenkins-visually-hidden">${%Version}</span>
<span>${app.VERSION}</span>
</h1>
<div class="app-about-branding__aurora"></div>
<img src="${imagesURL}/svgs/logo.svg" alt="${%logo}" />
</div>

<div class="jenkins-app-bar">
<div class="jenkins-app-bar__content">
<h1 class="app-about-heading">Jenkins</h1>
<p class="app-about-version">
${%Version} ${app.VERSION}
</p>
</div>
<div class="jenkins-app-bar__controls">
<a href="https://www.jenkins.io/participate/" class="jenkins-button" target="_blank">
<l:icon src="symbol-heart" />
${%Get involved}
</a>
</div>
</div>
</l:side-panel>

<l:main-panel>
<l:js src="jsbundles/section-to-tabs.js" />
<p class="app-about-paragraph">${%blurb}</p>

<div class="jenkins-tab-pane">
<h2 class="jenkins-tab-pane__title">${%maven.dependencies}</h2>
Expand Down
2 changes: 1 addition & 1 deletion core/src/main/resources/hudson/AboutJenkins/index.properties
View file
Open in desktop
Expand Up @@ -21,7 +21,7 @@
# THE SOFTWARE.

about=About Jenkins {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> is a community-developed open-source automation server.
blurb=The leading open source automation server which enables developers around the world to reliably build, test, and deploy their software.

dependencies=Jenkins depends on the following 3rd party libraries
maven.dependencies=Mavenized dependencies
Expand Down
3 changes: 0 additions & 3 deletions core/src/main/resources/hudson/AboutJenkins/index_bg.properties
View file
Open in desktop
Expand Up @@ -35,6 +35,3 @@ No\ information\ recorded=\
dependencies=\
Jenkins зависи и от следните библиотеки от други места
# <a href="https://www.jenkins.io/">Jenkins</a> is a community-developed open-source automation server.
blurb=\
<a href="https://www.jenkins.io/">Jenkins</a> е сървър за автоматизиране с\
отворен код, който се разработва от своята общност от разработчици.
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_cs.properties
View file
Open in desktop
@@ -1,4 +1,3 @@
# This file is under the MIT License by authors

blurb=<a href="https://www.jenkins.io/">Jenkins</a> je komunitou vyvíjený server průběžné integrace s otevřeným zdrojovým kódem.
dependencies=Jenkins závisí na následujících knihovnách 3. stran.
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_da.properties
View file
Open in desktop
Expand Up @@ -21,5 +21,4 @@
# THE SOFTWARE.

about=Om Jenkins {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> er en fællesskab udviklede open-source continuous integration server.
dependencies=Jenkins afhænger af de følgende 3. parts libraries
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_de.properties
View file
Open in desktop
Expand Up @@ -21,7 +21,6 @@
# THE SOFTWARE.

about=Über Jenkins {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> ist ein Open Source Continuous Integration Server.

dependencies=Jenkins benutzt folgende Dritthersteller-Bibliotheken.
No\ information\ recorded=Keine Informationen verfügbar
Expand Down
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_es.properties
View file
Open in desktop
Expand Up @@ -21,5 +21,4 @@
# THE SOFTWARE.

about=Acerca de Jenkins {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> un servidor de Integración Contínua, de código abierto y desarrollado en comunidad.
dependencies=Jenkins depende de las siguientes librerias de terceros.
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_fi.properties
View file
Open in desktop
Expand Up @@ -21,5 +21,4 @@
# THE SOFTWARE.

about=Tietoja Jenkinsistä {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> on yhteisökehitteinen, avoimen lähdekoodin jatkuvan integroinnin palvelinohjelmisto
dependencies=Jenkins käyttää seuraavia kolmannen osapuolen kirjastoja
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_fr.properties
View file
Open in desktop
Expand Up @@ -21,7 +21,6 @@
# THE SOFTWARE.

about=A propos de Jenkins {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> est un serveur d''intégration continue développé par la communauté open-source.

dependencies=Jenkins dépend des librairies externes suivantes
plugin.dependencies=Licence et informations de dépendance pour les plugins :
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_hu.properties
View file
Open in desktop
@@ -1,5 +1,4 @@
# This file is under the MIT License by authors

about=Jenkins {0} Névjegye
blurb=<a href="https://www.jenkins.io/">Jenkins</a> egy közösségi fejlesztésű, nyílt forrású CI szerver.
dependencies=Jenking a következő 3. féltől származó könyvtáraktól függ.
2 changes: 0 additions & 2 deletions core/src/main/resources/hudson/AboutJenkins/index_it.properties
View file
Open in desktop
Expand Up @@ -22,8 +22,6 @@
# THE SOFTWARE.

about=Informazioni su Jenkins {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> è un server di automazione \
open source sviluppato dalla comunità.
dependencies=Jenkins dipende dalle seguenti librerie di terze parti
maven.dependencies=Dipendenze recuperate con Maven
No\ information\ recorded=Informazioni non registrate
Expand Down
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_ja.properties
View file
Open in desktop
Expand Up @@ -21,7 +21,6 @@
# THE SOFTWARE.

about=Jenkins {0} について
blurb=<a href="https://www.jenkins.io/">Jenkins</a> はコミュニティで開発されているオープンソースのCIサーバです。

dependencies=Jenkins は次のサードパーティのライブラリを使用しています。
plugin.dependencies=プラグインのライセンスと依存性:
Expand Down
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_lt.properties
View file
Open in desktop
@@ -1,5 +1,4 @@
about=Apie Jenkins {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> - bendruomenės kuriamas atviro kodo pastovios integracijos (CIS) serveris.
dependencies=Jenkins priklauso nuo šių 3-ųjų šalių bibliotekų.
plugin.dependencies=Priedų licencijos ir priklausomybių informacija
static.dependencies=Statiniai resursai
Expand Down
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_nb_NO.properties
View file
Open in desktop
Expand Up @@ -21,5 +21,4 @@
# THE SOFTWARE.

about=Om Jenkins
blurb=<a href="https://www.jenkins.io/">Jenkins</a> er en fellesskaps-utviklet, åpen kildekode kontinuerlig integrasjonsserver.
dependencies=Jenkins benytter følgende tredjeparts-biblioteker.
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_pl.properties
View file
Open in desktop
Expand Up @@ -20,7 +20,6 @@
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
# THE SOFTWARE.
about=O Jenkinsie {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> jest rozwijanym przez społeczność open-source serwerem Continuous Integration
dependencies=Jenkins jest oparty na następujących zewnętrznych bibliotekach:
plugin.dependencies=Informacja o licencji i zależności pluginów:
static.dependencies=Statyczne zasoby
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_ru.properties
View file
Open in desktop
Expand Up @@ -21,6 +21,5 @@
# THE SOFTWARE.

about=О Jenkins {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> сервер непрерывной интеграции с открытым исходным кодом.
dependencies=Jenkins использует следующие сторонние библиотеки.
plugin.dependencies=Информация о лицензиях и зависимостях плагинов:
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_sr.properties
View file
Open in desktop
@@ -1,7 +1,6 @@
# This file is under the MIT License by authors

about=О Jenkins-у {0}
blurb=<a href="https://www.jenkins.io/">Jenkins</a> сервер за континуирану интеграцију са отвореним изворним кодом.
dependencies=Jenkins зависи од страних библиотека
No\ information\ recorded=Нема информације
static.dependencies=Статучки ресурси
Expand Down
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_uk.properties
View file
Open in desktop
@@ -1,5 +1,4 @@
# This file is under the MIT License by authors

about=Про Дженкікс
blurb=<a href="https://www.jenkins.io/">Дженкінс</a> є сервером безперервної інтеграції з відкритим кодом розроблюваний спільнотою.
dependencies=Дженкінс має залежності від натупних
1 change: 0 additions & 1 deletion core/src/main/resources/hudson/AboutJenkins/index_zh_TW.properties
View file
Open in desktop
Expand Up @@ -20,7 +20,6 @@
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
# THE SOFTWARE.
about=關於 Jenkins {0}
blurb=<a href\="https\://www.jenkins.io/">Jenkins</a> 是社群開發的開放原始碼自動化伺服器。
dependencies=Jenkins 相依於下列第三方函式庫
maven.dependencies=Mavenized 相依性
plugin.dependencies=外掛的授權條款和相依性資訊
Expand Down
173 changes: 130 additions & 43 deletions war/src/main/less/pages/about.less
View file
Open in desktop
@@ -1,49 +1,136 @@
.app-about-branding {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: #28404e;
padding: 2rem;
min-width: 250px;

@media (max-width: 970px) {
height: 200px;
}

.app-about-branding__logo {
position: fixed;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;

@media (max-width: 970px) {
position: relative;
}

img {
height: 12.5vh;
margin-right: 1.5rem;
}

h1 {
display: flex;
flex-direction: column;
font-family: Georgia, serif;
color: white;
text-shadow: 0 2px 0 #1b1819;

span {
margin-top: 10px;
font-family: var(--font-family-sans);
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 1px;
opacity: 0.85;
}
}
padding: calc(var(--section-padding) * 2);
pointer-events: none;
margin-bottom: var(--section-padding);
overflow: hidden;
mask-border-source: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 22.5C0 15.5109 0 12.0163 1.14181 9.25975C2.66422 5.58433 5.58433 2.66422 9.25975 1.14181C12.0163 0 15.5109 0 22.5 0C29.4891 0 32.9837 0 35.7402 1.14181C39.4157 2.66422 42.3358 5.58433 43.8582 9.25975C45 12.0163 45 15.5109 45 22.5C45 29.4891 45 32.9837 43.8582 35.7402C42.3358 39.4157 39.4157 42.3358 35.7402 43.8582C32.9837 45 29.4891 45 22.5 45C15.5109 45 12.0163 45 9.25975 43.8582C5.58433 42.3358 2.66422 39.4157 1.14181 35.7402C0 32.9837 0 29.4891 0 22.5Z' fill='%23D9D9D9'/%3E%3C/svg%3E%0A");
mask-border-slice: 49% fill;

&::before {
content: "";
position: absolute;
width: 120%;
aspect-ratio: 1;
z-index: 1;
background: repeating-conic-gradient(
var(--background) 0deg,
rgba(100, 100, 100, 0.25) 20deg
);
animation: app-about-starburst 100s linear infinite;
opacity: 0.25;
}

img {
height: 7.5rem;
z-index: 1;
}
}

.app-about-branding__aurora {
position: absolute;
width: 120%;
aspect-ratio: 1;

&::before,
&::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: 100%;
}

&::before {
background-color: var(--color);
background-image: radial-gradient(
at 40% 20%,
hsla(28, 100%, 74%, 1) 0,
transparent 50%
),
radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0, transparent 50%),
radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 1) 0, transparent 50%),
radial-gradient(at 80% 50%, hsl(359, 70%, 46%) 0, transparent 50%),
radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0, transparent 50%),
radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0, transparent 50%),
radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0, transparent 50%);
opacity: 0.4;
animation: app-about-aurora-one 7s linear infinite;
}

&::after {
background-image: radial-gradient(
at 40% 20%,
hsla(212, 100%, 74%, 1) 0,
transparent 50%
),
radial-gradient(at 80% 0%, hsla(13, 100%, 56%, 1) 0, transparent 50%),
radial-gradient(at 0% 50%, hsla(179, 85%, 93%, 1) 0, transparent 50%),
radial-gradient(at 80% 50%, hsla(164, 100%, 76%, 1) 0, transparent 50%),
radial-gradient(at 0% 100%, hsla(206, 100%, 77%, 1) 0, transparent 50%),
radial-gradient(at 80% 100%, hsla(66, 100%, 70%, 1) 0, transparent 50%),
radial-gradient(at 0% 0%, hsla(167, 100%, 76%, 1) 0, transparent 50%);
opacity: 0.2;
animation: app-about-aurora-two 14s linear infinite;
}
}

@keyframes app-about-aurora-one {
0% {
opacity: 0.4;
}

50% {
opacity: 0.2;
transform: rotate(-180deg);
}

100% {
opacity: 0.4;
transform: rotate(-360deg);
}
}

@keyframes app-about-aurora-two {
0% {
opacity: 0.2;
}

50% {
opacity: 0.55;
transform: rotate(180deg);
}

100% {
opacity: 0.2;
transform: rotate(360deg);
}
}

@keyframes app-about-starburst {
to {
transform: rotate(360deg);
}
}

.app-about-heading {
font-weight: 600;
font-family: Georgia, serif;
font-size: 1.6rem;
margin-bottom: 0.5rem !important;
}

.app-about-version {
font-weight: 600;
color: var(--text-color-secondary);
margin: 0;
}

.app-about-paragraph {
font-size: 1.1rem;
margin-bottom: var(--section-padding);
font-weight: 500;
}
1 change: 1 addition & 0 deletions war/src/main/resources/images/symbols/heart.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.