Action view mobile improvements and fixes (#30309) (#30320)

Backport #30309 by @silverwind

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

<img width="467" alt="Screenshot 2024-04-06 at 18 58 15"
src="https://github.com/go-gitea/gitea/assets/115237/8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53">

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 10d83ae6435134177253569a2f244935c2bb708c)
This commit is contained in:
Giteabot 2024-04-07 23:22:47 +08:00 committed by Earl Warren
parent deeb268e5d
commit 3f6f134260
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
4 changed files with 30 additions and 14 deletions

View file

@ -44,7 +44,7 @@
} }
.run-list-item-right { .run-list-item-right {
flex: 0 0 15%; flex: 0 0 min(20%, 130px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 3px;

View file

@ -65,7 +65,7 @@
--color-console-fg-subtle: #bec4c8; --color-console-fg-subtle: #bec4c8;
--color-console-bg: #171b1e; --color-console-bg: #171b1e;
--color-console-border: #2e353b; --color-console-border: #2e353b;
--color-console-hover-bg: #e8e8ff16; --color-console-hover-bg: #292d31;
--color-console-active-bg: #2e353b; --color-console-active-bg: #2e353b;
--color-console-menu-bg: #252b30; --color-console-menu-bg: #252b30;
--color-console-menu-border: #424b51; --color-console-menu-border: #424b51;

View file

@ -63,12 +63,12 @@
/* console colors - used for actions console and console files */ /* console colors - used for actions console and console files */
--color-console-fg: #f8f8f9; --color-console-fg: #f8f8f9;
--color-console-fg-subtle: #bec4c8; --color-console-fg-subtle: #bec4c8;
--color-console-bg: #181b1d; --color-console-bg: #171b1e;
--color-console-border: #313538; --color-console-border: #2e353b;
--color-console-hover-bg: #ffffff16; --color-console-hover-bg: #292d31;
--color-console-active-bg: #313538; --color-console-active-bg: #2e353b;
--color-console-menu-bg: #272b2e; --color-console-menu-bg: #252b30;
--color-console-menu-border: #464a4d; --color-console-menu-border: #424b51;
/* named colors */ /* named colors */
--color-red: #db2828; --color-red: #db2828;
--color-orange: #f2711c; --color-orange: #f2711c;

View file

@ -526,8 +526,16 @@ export function initRepositoryActionView() {
.action-summary { .action-summary {
display: flex; display: flex;
flex-wrap: wrap;
gap: 5px; 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; top: 12px;
max-height: 100vh; max-height: 100vh;
overflow-y: auto; 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 { .job-artifacts-title {
@ -701,7 +717,9 @@ export function initRepositoryActionView() {
position: sticky; position: sticky;
top: 0; top: 0;
height: 60px; 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) { .job-info-header:has(+ .job-step-container) {
@ -739,7 +757,7 @@ export function initRepositoryActionView() {
.job-step-container .job-step-summary.step-expandable:hover { .job-step-container .job-step-summary.step-expandable:hover {
color: var(--color-console-fg); 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 { .job-step-container .job-step-summary .step-summary-msg {
@ -757,17 +775,15 @@ export function initRepositoryActionView() {
top: 60px; top: 60px;
} }
@media (max-width: 768px) { @media (max-width: 767.98px) {
.action-view-body { .action-view-body {
flex-direction: column; flex-direction: column;
} }
.action-view-left, .action-view-right { .action-view-left, .action-view-right {
width: 100%; width: 100%;
} }
.action-view-left { .action-view-left {
max-width: none; max-width: none;
overflow-y: hidden;
} }
} }
</style> </style>