Fix various overflows on actions view (#30344)
Fix a number of text overflow issues in actions view and run list. Also improve mobile view of run list. Fixes: https://github.com/go-gitea/gitea/issues/30328 <img width="782" alt="Screenshot 2024-04-08 at 23 10 16" src="https://github.com/go-gitea/gitea/assets/115237/3d9f9f88-3eab-44a0-8144-30c2b58b24cb"> <img width="935" alt="Screenshot 2024-04-08 at 23 17 46" src="https://github.com/go-gitea/gitea/assets/115237/581d73ea-a31d-416b-be3a-47313b879b12"> <img width="1008" alt="Screenshot 2024-04-08 at 23 49 05" src="https://github.com/go-gitea/gitea/assets/115237/c5d10565-f285-477f-8659-1caf94797647"> <img width="397" alt="Screenshot 2024-04-08 at 23 55 30" src="https://github.com/go-gitea/gitea/assets/115237/368aaa75-1903-4058-9d75-d1fe91c564d6">
This commit is contained in:
parent
2c80421243
commit
b9f69b4a4d
|
@ -1,4 +1,4 @@
|
|||
<div class="flex-list">
|
||||
<div class="flex-list run-list">
|
||||
{{if not .Runs}}
|
||||
<div class="empty-placeholder">
|
||||
{{svg "octicon-no-entry" 48}}
|
||||
|
@ -28,14 +28,14 @@
|
|||
</div>
|
||||
<div class="flex-item-trailing">
|
||||
{{if .RefLink}}
|
||||
<a class="ui label tw-px-1 tw-mx-0" href="{{.RefLink}}">{{.PrettyRef}}</a>
|
||||
<a class="ui label run-list-ref gt-ellipsis" href="{{.RefLink}}">{{.PrettyRef}}</a>
|
||||
{{else}}
|
||||
<span class="ui label tw-px-1 tw-mx-0">{{.PrettyRef}}</span>
|
||||
<span class="ui label run-list-ref gt-ellipsis">{{.PrettyRef}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="run-list-item-right">
|
||||
<div class="run-list-meta">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated ctx.Locale}}</div>
|
||||
<div class="run-list-meta">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div>
|
||||
<div class="run-list-item-right">
|
||||
<div class="run-list-meta">{{svg "octicon-calendar" 16}}{{TimeSinceUnix .Updated ctx.Locale}}</div>
|
||||
<div class="run-list-meta">{{svg "octicon-stopwatch" 16}}{{.Duration}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
@ -44,9 +44,10 @@
|
|||
}
|
||||
|
||||
.run-list-item-right {
|
||||
flex: 0 0 min(20%, 130px);
|
||||
width: 130px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
gap: 3px;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
@ -57,3 +58,26 @@
|
|||
gap: .25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.run-list .flex-item-trailing {
|
||||
flex-wrap: nowrap;
|
||||
width: 280px;
|
||||
flex: 0 0 280px;
|
||||
}
|
||||
|
||||
.run-list-ref {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.run-list .flex-item-trailing {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
width: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.run-list-item-right,
|
||||
.run-list-ref {
|
||||
max-width: 110px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -377,7 +377,7 @@ export function initRepositoryActionView() {
|
|||
<button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
|
||||
{{ locale.cancel }}
|
||||
</button>
|
||||
<button class="ui basic small compact button tw-mr-0 link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
|
||||
<button class="ui basic small compact button tw-mr-0 tw-whitespace-nowrap link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
|
||||
{{ locale.rerun_all }}
|
||||
</button>
|
||||
</div>
|
||||
|
@ -386,8 +386,8 @@ export function initRepositoryActionView() {
|
|||
<a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a>
|
||||
{{ run.commit.localePushedBy }}
|
||||
<a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
|
||||
<span class="ui label" v-if="run.commit.shortSHA">
|
||||
<a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
|
||||
<span class="ui label tw-max-w-full" v-if="run.commit.shortSHA">
|
||||
<a class="gt-ellipsis" :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -426,8 +426,8 @@ export function initRepositoryActionView() {
|
|||
|
||||
<div class="action-view-right">
|
||||
<div class="job-info-header">
|
||||
<div class="job-info-header-left">
|
||||
<h3 class="job-info-header-title">
|
||||
<div class="job-info-header-left gt-ellipsis">
|
||||
<h3 class="job-info-header-title gt-ellipsis">
|
||||
{{ currentJob.title }}
|
||||
</h3>
|
||||
<p class="job-info-header-detail">
|
||||
|
@ -503,6 +503,7 @@ export function initRepositoryActionView() {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-info-summary-title {
|
||||
|
@ -513,6 +514,7 @@ export function initRepositoryActionView() {
|
|||
font-size: 20px;
|
||||
margin: 0 0 0 8px;
|
||||
flex: 1;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.action-commit-summary {
|
||||
|
@ -728,6 +730,10 @@ export function initRepositoryActionView() {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.job-info-header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.job-step-container {
|
||||
max-height: 100%;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
|
|
Loading…
Reference in New Issue
Block a user