From 50e0587546e3d81b34814d2b4c1fe9a70b62b912 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 7 Apr 2024 14:41:42 +0200 Subject: [PATCH] Action view mobile improvements and fixes (#30309) Fix the action issue in https://github.com/go-gitea/gitea/issues/30303, specifically: - Use opaque step header hover background to avoid transparency issue - Un-sticky the `action-view-left` on mobile, it would otherwise overlap into right view - Improve commit summary, let it wrap - Fix and comment z-indexes - Tweak width for run-list-item-right so it wastes less space on desktop - Synced latest changes to console colors from dark to light theme Screenshot 2024-04-06 at 18 58 15 (cherry picked from commit 0178eaec256a349371c75e582edd7fefca2085d0) --- web_src/css/actions.css | 2 +- web_src/css/themes/theme-gitea-dark.css | 2 +- web_src/css/themes/theme-gitea-light.css | 12 +++++----- web_src/js/components/RepoActionView.vue | 28 +++++++++++++++++++----- 4 files changed, 30 insertions(+), 14 deletions(-) diff --git a/web_src/css/actions.css b/web_src/css/actions.css index e7b9a3855a..1d5bea2395 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 min(20%, 130px); 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 b98b1e638f..c74f334c2d 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 75fece1dd0..01dd8ba4f7 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-hover-bg: #ffffff16; - --color-console-active-bg: #313538; - --color-console-menu-bg: #272b2e; - --color-console-menu-border: #464a4d; + --color-console-bg: #171b1e; + --color-console-border: #2e353b; + --color-console-hover-bg: #292d31; + --color-console-active-bg: #2e353b; + --color-console-menu-bg: #252b30; + --color-console-menu-border: #424b51; /* named colors */ --color-red: #db2828; --color-orange: #f2711c; diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index f10694cde0..378f726688 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -526,8 +526,16 @@ export function initRepositoryActionView() { .action-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; + } } /* ================ */ @@ -540,6 +548,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 { @@ -701,7 +717,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) { @@ -739,7 +757,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 { @@ -757,17 +775,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; } }