Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix rerun icon on action view component (#25531) (#25536)

Browse source 
Backport #25531 by @HesterG

Right now rerun icon on action view component will not be seen when
duration text length is long, because the wrapper `job-brief-info` has a
fixed width, and the svg is squeezed. The way to fix this in this PR is
to change width to `fit-content` and exchange position of duration text
and rerun svg.

Before (rerun svg not shown on hover):

<img width="1401" alt="Screen Shot 2023-06-27 at 12 53 41"
src="https://github.com/go-gitea/gitea/assets/17645053/bb3f62ec-8c56-4dbc-96f1-718b50426d91">

After:

<img width="1409" alt="Screen Shot 2023-06-27 at 12 50 59"
src="https://github.com/go-gitea/gitea/assets/17645053/620aa02c-2326-408d-a763-453f48f42c40">

Co-authored-by: HesterG <hestergong@gmail.com>
This commit is contained in:
Giteabot 2023-06-27 12:28:14 -04:00 committed by GitHub
parent e8a7cd4a1d
commit 345a25d016
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web_src/js/components/RepoActionView.vue
View file

@ -38,8 +38,8 @@
<span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span> <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span>
</a> </a>
<span class="job-brief-info"> <span class="job-brief-info">
<span class="step-summary-duration">{{ job.duration }}</span>
<SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-if="job.canRerun && onHoverRerunIndex === job.id"/> <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3" @click="rerunJob(index)" v-if="job.canRerun && onHoverRerunIndex === job.id"/>
<span class="step-summary-duration">{{ job.duration }}</span>
</span> </span>
</div> </div>
</div> </div>
@ -634,6 +634,7 @@ export function ansiLogToHTML(line) {
.job-brief-item .job-brief-link { .job-brief-item .job-brief-link {
display: flex; display: flex;
width: 100%; width: 100%;
min-width: 0;
} }
.job-brief-item .job-brief-link span { .job-brief-item .job-brief-link span {
@ -654,7 +655,6 @@ export function ansiLogToHTML(line) {
.job-brief-item .job-brief-info { .job-brief-item .job-brief-info {
display: flex; display: flex;
align-items: center; align-items: center;
width: 55px;
} }
/* ================ */ /* ================ */