From 8612fbc424cd549b04d275ab6ead027ea835ad11 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 6 Apr 2024 18:59:07 +0200 Subject: [PATCH 1/4] Action view mobile improvements --- web_src/css/actions.css | 2 +- web_src/css/themes/theme-gitea-dark.css | 2 +- web_src/css/themes/theme-gitea-light.css | 2 +- web_src/js/components/RepoActionView.vue | 28 +++++++++++++++++++----- 4 files changed, 25 insertions(+), 9 deletions(-) diff --git a/web_src/css/actions.css b/web_src/css/actions.css index e7b9a3855aab3..1613397dadef0 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -44,7 +44,7 @@ } .run-list-item-right { - flex: 0 0 15%; + flex: 0 0 120px; display: flex; flex-direction: column; gap: 3px; diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 626590ca5447b..f22332741e35a 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -65,7 +65,7 @@ --color-console-fg-subtle: #bec4c8; --color-console-bg: #171b1e; --color-console-border: #2e353b; - --color-console-hover-bg: #e8e8ff16; + --color-console-hover-bg: #292d31; --color-console-active-bg: #2e353b; --color-console-menu-bg: #252b30; --color-console-menu-border: #424b51; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index f6913fbe22af4..09d0fe868b7cd 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -65,7 +65,7 @@ --color-console-fg-subtle: #bec4c8; --color-console-bg: #181b1d; --color-console-border: #313538; - --color-console-hover-bg: #ffffff16; + --color-console-hover-bg: #292d31; --color-console-active-bg: #313538; --color-console-menu-bg: #272b2e; --color-console-menu-border: #464a4d; diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 75cd1db70aae9..06c42f0b35dae 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -517,8 +517,16 @@ export function initRepositoryActionView() { .action-commit-summary { display: flex; + flex-wrap: wrap; gap: 5px; - margin: 0 0 0 28px; + margin-left: 28px; +} + +@media (max-width: 767.98px) { + .action-commit-summary { + margin-left: 0; + margin-top: 8px; + } } /* ================ */ @@ -531,6 +539,14 @@ export function initRepositoryActionView() { top: 12px; max-height: 100vh; overflow-y: auto; + background: var(--color-body); + z-index: 2; /* above .job-info-header */ +} + +@media (max-width: 767.98px) { + .action-view-left { + position: static; /* can not sticky because multiple jobs would overlap into right view */ + } } .job-artifacts-title { @@ -692,7 +708,9 @@ export function initRepositoryActionView() { position: sticky; top: 0; height: 60px; - z-index: 1; + z-index: 1; /* above .job-step-container */ + background: var(--color-console-bg); + border-radius: 3px; } .job-info-header:has(+ .job-step-container) { @@ -730,7 +748,7 @@ export function initRepositoryActionView() { .job-step-container .job-step-summary.step-expandable:hover { color: var(--color-console-fg); - background-color: var(--color-console-hover-bg); + background: var(--color-console-hover-bg); } .job-step-container .job-step-summary .step-summary-msg { @@ -748,17 +766,15 @@ export function initRepositoryActionView() { top: 60px; } -@media (max-width: 768px) { +@media (max-width: 767.98px) { .action-view-body { flex-direction: column; } .action-view-left, .action-view-right { width: 100%; } - .action-view-left { max-width: none; - overflow-y: hidden; } } From 5295b0d5c703efc0b44ded5301a118f3a0b4016a Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 6 Apr 2024 19:32:45 +0200 Subject: [PATCH 2/4] tweak --- web_src/css/actions.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/actions.css b/web_src/css/actions.css index 1613397dadef0..43b6db357792c 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -44,7 +44,7 @@ } .run-list-item-right { - flex: 0 0 120px; + flex: 0 0 min(25%, 130px); display: flex; flex-direction: column; gap: 3px; From 411fc7c499c2c550cd7728581b4ed175b3a52fab Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 6 Apr 2024 19:34:16 +0200 Subject: [PATCH 3/4] tweak --- web_src/css/actions.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/actions.css b/web_src/css/actions.css index 43b6db357792c..1d5bea2395e5c 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -44,7 +44,7 @@ } .run-list-item-right { - flex: 0 0 min(25%, 130px); + flex: 0 0 min(20%, 130px); display: flex; flex-direction: column; gap: 3px; From 34bb2a5904a0680a87db9006072a642872d3ccf6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 6 Apr 2024 23:16:19 +0200 Subject: [PATCH 4/4] sync console colors from dark to light theme --- web_src/css/themes/theme-gitea-light.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 09d0fe868b7cd..f2619d07308d7 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -63,12 +63,12 @@ /* console colors - used for actions console and console files */ --color-console-fg: #f8f8f9; --color-console-fg-subtle: #bec4c8; - --color-console-bg: #181b1d; - --color-console-border: #313538; + --color-console-bg: #171b1e; + --color-console-border: #2e353b; --color-console-hover-bg: #292d31; - --color-console-active-bg: #313538; - --color-console-menu-bg: #272b2e; - --color-console-menu-border: #464a4d; + --color-console-active-bg: #2e353b; + --color-console-menu-bg: #252b30; + --color-console-menu-border: #424b51; /* named colors */ --color-red: #db2828; --color-orange: #f2711c;