loading up the forgejo repo on tangled to test page performance
Improve clickable area in repo action view page (#26115)
Before:
After:
In current design, the clickable area is too small, and it is hard to
find the correct clickable area as the area with background color (div
with class name `job-brief-item selected`) is bigger than it.
---------
Co-authored-by: Giteabot <teabot@gitea.io>
+10
-14
+10
-14
web_src/js/components/RepoActionView.vue
+10
-14
web_src/js/components/RepoActionView.vue
···
32
32
<div class="action-view-left">
33
33
<div class="job-group-section">
34
34
<div class="job-brief-list">
35
-
<div class="job-brief-item" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id" @mouseleave="onHoverRerunIndex = -1">
36
-
<a class="job-brief-link" :href="run.link+'/jobs/'+index">
35
+
<a class="job-brief-item" :href="run.link+'/jobs/'+index" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id" @mouseleave="onHoverRerunIndex = -1">
36
+
<div class="job-brief-item-left">
37
37
<ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
38
38
<span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span>
39
-
</a>
40
-
<span class="job-brief-info">
39
+
</div>
40
+
<span class="job-brief-item-right">
41
41
<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"/>
42
42
<span class="step-summary-duration">{{ job.duration }}</span>
43
43
</span>
44
-
</div>
44
+
</a>
45
45
</div>
46
46
</div>
47
47
<div class="job-artifacts" v-if="artifacts.length > 0">
···
575
575
flex-wrap: nowrap;
576
576
justify-content: space-between;
577
577
align-items: center;
578
+
color: var(--color-text);
578
579
}
579
580
580
581
.job-brief-item:hover {
···
599
600
transform: scale(130%);
600
601
}
601
602
602
-
.job-brief-item .job-brief-link {
603
+
.job-brief-item .job-brief-item-left {
603
604
display: flex;
604
605
width: 100%;
605
606
min-width: 0;
606
607
}
607
608
608
-
.job-brief-item .job-brief-link span {
609
+
.job-brief-item .job-brief-item-left span {
609
610
display: flex;
610
611
align-items: center;
611
612
}
612
613
613
-
.job-brief-item .job-brief-link .job-brief-name {
614
+
.job-brief-item .job-brief-item-left .job-brief-name {
614
615
display: block;
615
616
width: 70%;
616
-
color: var(--color-text);
617
617
}
618
618
619
-
.job-brief-item .job-brief-link:hover {
620
-
text-decoration: none;
621
-
}
622
-
623
-
.job-brief-item .job-brief-info {
619
+
.job-brief-item .job-brief-item-right {
624
620
display: flex;
625
621
align-items: center;
626
622
}