From 6c3bf7cf417e2b8124944896f9efe40171983010 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat, 21 Dec 2024 00:15:05 +0000 Subject: [PATCH 01/10] Update _app-bar.scss --- src/main/scss/components/_app-bar.scss | 31 ++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index b1b30048ca70..c2bc926dc506 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -1,8 +1,17 @@ +@use "../base/breakpoints"; + .jenkins-app-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--section-padding); + gap: var(--section-padding); + + /* stylelint-disable-next-line media-query-no-invalid */ + @media (max-width: breakpoints.$tablet-breakpoint) { + align-items: stretch; + flex-direction: column; + } .jenkins-app-bar__content { display: flex; @@ -16,13 +25,31 @@ display: flex; align-items: center; justify-content: center; - margin-left: var(--section-padding); - min-height: 2.25rem; gap: 0.75rem; .jenkins-search { min-width: 260px; } + + /* stylelint-disable-next-line media-query-no-invalid */ + @media (max-width: breakpoints.$tablet-breakpoint) { + justify-content: stretch; + flex-wrap: wrap; + + & > * { + flex-grow: 1; + flex-basis: 0; + } + + .jenkins-button:first-child { + width: 100%; + flex-basis: auto !important; + } + } + + &:empty { + display: none; + } } &--sticky { From e5c05ba16c04883d10f8c977719c47f946ffd1bf Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat, 21 Dec 2024 00:17:23 +0000 Subject: [PATCH 02/10] Update _app-bar.scss --- src/main/scss/components/_app-bar.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index c2bc926dc506..32c34853e937 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -6,9 +6,10 @@ justify-content: space-between; margin-bottom: var(--section-padding); gap: var(--section-padding); + flex-wrap: wrap; /* stylelint-disable-next-line media-query-no-invalid */ - @media (max-width: breakpoints.$tablet-breakpoint) { + @media (width <= 800px) { align-items: stretch; flex-direction: column; } @@ -17,7 +18,6 @@ display: flex; justify-content: center; flex-direction: column; - width: 100%; min-height: 2.25rem; } @@ -32,7 +32,7 @@ } /* stylelint-disable-next-line media-query-no-invalid */ - @media (max-width: breakpoints.$tablet-breakpoint) { + @media (width <= 800px) { justify-content: stretch; flex-wrap: wrap; From 205b7bac7bf84425ee4f09e48e10a6d961010d71 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat, 21 Dec 2024 00:17:35 +0000 Subject: [PATCH 03/10] Update _app-bar.scss --- src/main/scss/components/_app-bar.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index 32c34853e937..f7dd6f59bebd 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -8,7 +8,6 @@ gap: var(--section-padding); flex-wrap: wrap; - /* stylelint-disable-next-line media-query-no-invalid */ @media (width <= 800px) { align-items: stretch; flex-direction: column; @@ -31,7 +30,6 @@ min-width: 260px; } - /* stylelint-disable-next-line media-query-no-invalid */ @media (width <= 800px) { justify-content: stretch; flex-wrap: wrap; From 056d7fbf0b102f02475efa981ead6edd768339c6 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat, 21 Dec 2024 00:20:40 +0000 Subject: [PATCH 04/10] Improve plugins ui --- src/main/scss/components/_app-bar.scss | 3 +-- src/main/scss/form/_search-bar.scss | 7 ++++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index f7dd6f59bebd..174468d91003 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -1,5 +1,3 @@ -@use "../base/breakpoints"; - .jenkins-app-bar { display: flex; align-items: center; @@ -18,6 +16,7 @@ justify-content: center; flex-direction: column; min-height: 2.25rem; + flex-grow: 1; } .jenkins-app-bar__controls { diff --git a/src/main/scss/form/_search-bar.scss b/src/main/scss/form/_search-bar.scss index e520f9c7e69b..906db3e68de2 100644 --- a/src/main/scss/form/_search-bar.scss +++ b/src/main/scss/form/_search-bar.scss @@ -1,3 +1,5 @@ +@use "../base/breakpoints"; + .jenkins-search-container { position: relative; } @@ -182,7 +184,10 @@ &--app-bar { --search-bar-height: 3rem; - max-width: 50vw; + width: 100%; + @media (min-width: breakpoints.$tablet-breakpoint) { + max-width: 50vw; + } margin-block: -6px; .jenkins-keyboard-shortcut { From 73f42062ecfb8d9b2ae135e7cfab5b81dda8803f Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat, 21 Dec 2024 00:23:19 +0000 Subject: [PATCH 05/10] Update _search-bar.scss --- src/main/scss/form/_search-bar.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/main/scss/form/_search-bar.scss b/src/main/scss/form/_search-bar.scss index 906db3e68de2..81aa72fb3f97 100644 --- a/src/main/scss/form/_search-bar.scss +++ b/src/main/scss/form/_search-bar.scss @@ -185,10 +185,12 @@ --search-bar-height: 3rem; width: 100%; + + /* stylelint-disable-next-line media-query-no-invalid */ @media (min-width: breakpoints.$tablet-breakpoint) { + margin-block: -6px; max-width: 50vw; } - margin-block: -6px; .jenkins-keyboard-shortcut { right: 0.8125rem; From 86d3683eef1249198e32c99cdb1ab06804831925 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat, 21 Dec 2024 00:24:03 +0000 Subject: [PATCH 06/10] Update _search-bar.scss --- src/main/scss/form/_search-bar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/scss/form/_search-bar.scss b/src/main/scss/form/_search-bar.scss index 81aa72fb3f97..a3692e0847c7 100644 --- a/src/main/scss/form/_search-bar.scss +++ b/src/main/scss/form/_search-bar.scss @@ -185,10 +185,10 @@ --search-bar-height: 3rem; width: 100%; + margin-block: -6px; /* stylelint-disable-next-line media-query-no-invalid */ @media (min-width: breakpoints.$tablet-breakpoint) { - margin-block: -6px; max-width: 50vw; } From acbbd28a446a3320f1bed2c9feba2417e034281c Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sun, 5 Jan 2025 13:20:13 +0000 Subject: [PATCH 07/10] Update _buttons.scss --- src/main/scss/components/_buttons.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 4812949af07c..ac00c7eda52b 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -162,7 +162,7 @@ .jenkins-buttons-row { display: flex; align-items: center; - gap: 1rem; + gap: 0.75rem; &--invert { justify-content: flex-end; @@ -177,6 +177,14 @@ &--equal-width { min-width: 5.625rem; } + + @media (width <= 600px) { + justify-content: stretch; + + .jenkins-button { + flex-grow: 1; + } + } } .jenkins-copy-button { From c9db0cf71704c43e8d494d6421331b6cfb5b4ff8 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sun, 5 Jan 2025 13:35:17 +0000 Subject: [PATCH 08/10] Update _style.scss --- src/main/scss/base/_style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/main/scss/base/_style.scss b/src/main/scss/base/_style.scss index 98807c6e5401..40b95382f5b3 100644 --- a/src/main/scss/base/_style.scss +++ b/src/main/scss/base/_style.scss @@ -339,11 +339,6 @@ pre.console { } } } - - .yui-button { - margin-left: 0; - margin-right: 0.5rem; - } } .icon16x16 { From 89e34179c7f765ea4215c353c13353fde0ff1f92 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 6 Jan 2025 11:50:19 +0000 Subject: [PATCH 09/10] Move bottom app bar styling --- src/main/scss/base/_style.scss | 54 -------------------------- src/main/scss/components/_app-bar.scss | 54 ++++++++++++++++++++++++++ src/main/scss/components/_buttons.scss | 4 +- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/src/main/scss/base/_style.scss b/src/main/scss/base/_style.scss index ce02bca14858..41f107d5a760 100644 --- a/src/main/scss/base/_style.scss +++ b/src/main/scss/base/_style.scss @@ -287,60 +287,6 @@ pre.console { z-index: 998; /* behind top-sticker */ } -.bottom-sticker-inner { - position: relative; - padding: 1em var(--section-padding); - z-index: 0; - - &::before { - content: ""; - position: absolute; - inset: 0; - background: var(--background); - opacity: 0; - z-index: -1; - } - - &::after { - content: ""; - position: absolute; - top: -30px; - left: 0; - right: 0; - background: linear-gradient(rgba(black, 0), rgba(#556, 0.075) 110%); - max-width: 100%; - height: 30px; - opacity: 0; - transition: var(--standard-transition); - mask-image: linear-gradient( - to right, - transparent, - white var(--section-padding), - white calc(100% - var(--section-padding)), - transparent - ); - pointer-events: none; - } - - &--stuck { - .bottom-sticker-inner { - backdrop-filter: blur(15px); - - &::before { - opacity: 0.75 !important; - - @supports not (backdrop-filter: blur(15px)) { - opacity: 1 !important; - } - } - - &::after { - opacity: 1 !important; - } - } - } -} - .icon16x16 { width: 16px; height: 16px; diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index 174468d91003..7fed24c55c87 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -109,3 +109,57 @@ height: 2rem !important; } } + +.bottom-sticker-inner { + position: relative; + padding: 1em var(--section-padding); + z-index: 0; + + &::before { + content: ""; + position: absolute; + inset: 0; + background: var(--background); + opacity: 0; + z-index: -1; + } + + &::after { + content: ""; + position: absolute; + top: -30px; + left: 0; + right: 0; + background: linear-gradient(transparent, rgba(#556, 0.075) 110%); + max-width: 100%; + height: 30px; + opacity: 0; + transition: var(--standard-transition); + mask-image: linear-gradient( + to right, + transparent, + white var(--section-padding), + white calc(100% - var(--section-padding)), + transparent + ); + pointer-events: none; + } + + &--stuck { + .bottom-sticker-inner { + backdrop-filter: blur(15px); + + &::before { + opacity: 0.75 !important; + + @supports not (backdrop-filter: blur(15px)) { + opacity: 1 !important; + } + } + + &::after { + opacity: 1 !important; + } + } + } +} diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index ac00c7eda52b..a8c5c7b91bfd 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -170,12 +170,12 @@ &--equal-width { .jenkins-button { - min-width: 5.625rem; + min-width: 6.5rem; } } &--equal-width { - min-width: 5.625rem; + min-width: 6.5rem; } @media (width <= 600px) { From 3a8c0d846c8f36a83924c932dd235111937df433 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 6 Jan 2025 17:42:25 +0000 Subject: [PATCH 10/10] Update _app-bar.scss --- src/main/scss/components/_app-bar.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/main/scss/components/_app-bar.scss b/src/main/scss/components/_app-bar.scss index 7fed24c55c87..bce8aa213a41 100644 --- a/src/main/scss/components/_app-bar.scss +++ b/src/main/scss/components/_app-bar.scss @@ -136,11 +136,11 @@ opacity: 0; transition: var(--standard-transition); mask-image: linear-gradient( - to right, - transparent, - white var(--section-padding), - white calc(100% - var(--section-padding)), - transparent + to right, + transparent, + white var(--section-padding), + white calc(100% - var(--section-padding)), + transparent ); pointer-events: none; }