oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

<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">

(cherry picked from commit 0178eaec256a349371c75e582edd7fefca2085d0)

authored by

silverwind and committed by
Gergely Nagy 50e05875 0bd1e136

+30 -14
+1 -1
web_src/css/actions.css
··· 44 44 } 45 45 46 46 .run-list-item-right { 47 - flex: 0 0 15%; 47 + flex: 0 0 min(20%, 130px); 48 48 display: flex; 49 49 flex-direction: column; 50 50 gap: 3px;
+1 -1
web_src/css/themes/theme-gitea-dark.css
··· 65 65 --color-console-fg-subtle: #bec4c8; 66 66 --color-console-bg: #171b1e; 67 67 --color-console-border: #2e353b; 68 - --color-console-hover-bg: #e8e8ff16; 68 + --color-console-hover-bg: #292d31; 69 69 --color-console-active-bg: #2e353b; 70 70 --color-console-menu-bg: #252b30; 71 71 --color-console-menu-border: #424b51;
+6 -6
web_src/css/themes/theme-gitea-light.css
··· 63 63 /* console colors - used for actions console and console files */ 64 64 --color-console-fg: #f8f8f9; 65 65 --color-console-fg-subtle: #bec4c8; 66 - --color-console-bg: #181b1d; 67 - --color-console-border: #313538; 68 - --color-console-hover-bg: #ffffff16; 69 - --color-console-active-bg: #313538; 70 - --color-console-menu-bg: #272b2e; 71 - --color-console-menu-border: #464a4d; 66 + --color-console-bg: #171b1e; 67 + --color-console-border: #2e353b; 68 + --color-console-hover-bg: #292d31; 69 + --color-console-active-bg: #2e353b; 70 + --color-console-menu-bg: #252b30; 71 + --color-console-menu-border: #424b51; 72 72 /* named colors */ 73 73 --color-red: #db2828; 74 74 --color-orange: #f2711c;
+22 -6
web_src/js/components/RepoActionView.vue
··· 526 526 527 527 .action-summary { 528 528 display: flex; 529 + flex-wrap: wrap; 529 530 gap: 5px; 530 - margin: 0 0 0 28px; 531 + margin-left: 28px; 532 + } 533 + 534 + @media (max-width: 767.98px) { 535 + .action-commit-summary { 536 + margin-left: 0; 537 + margin-top: 8px; 538 + } 531 539 } 532 540 533 541 /* ================ */ ··· 540 548 top: 12px; 541 549 max-height: 100vh; 542 550 overflow-y: auto; 551 + background: var(--color-body); 552 + z-index: 2; /* above .job-info-header */ 553 + } 554 + 555 + @media (max-width: 767.98px) { 556 + .action-view-left { 557 + position: static; /* can not sticky because multiple jobs would overlap into right view */ 558 + } 543 559 } 544 560 545 561 .job-artifacts-title { ··· 701 717 position: sticky; 702 718 top: 0; 703 719 height: 60px; 704 - z-index: 1; 720 + z-index: 1; /* above .job-step-container */ 721 + background: var(--color-console-bg); 722 + border-radius: 3px; 705 723 } 706 724 707 725 .job-info-header:has(+ .job-step-container) { ··· 739 757 740 758 .job-step-container .job-step-summary.step-expandable:hover { 741 759 color: var(--color-console-fg); 742 - background-color: var(--color-console-hover-bg); 760 + background: var(--color-console-hover-bg); 743 761 } 744 762 745 763 .job-step-container .job-step-summary .step-summary-msg { ··· 757 775 top: 60px; 758 776 } 759 777 760 - @media (max-width: 768px) { 778 + @media (max-width: 767.98px) { 761 779 .action-view-body { 762 780 flex-direction: column; 763 781 } 764 782 .action-view-left, .action-view-right { 765 783 width: 100%; 766 784 } 767 - 768 785 .action-view-left { 769 786 max-width: none; 770 - overflow-y: hidden; 771 787 } 772 788 } 773 789 </style>