Skip to content

Fix various overflows on actions view #30344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Apr 15, 2024
Merged

Fix various overflows on actions view #30344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4e99247
Fix various overflows on actions view
silverwind Apr 8, 2024
bbe5782
Merge branch 'main' into actov
silverwind Apr 11, 2024
87e5af3
Merge branch 'main' into actov
silverwind Apr 13, 2024
0a080dc
limit right side to 100px on mobile
silverwind Apr 13, 2024
f875c3c
110
silverwind Apr 13, 2024
abbf9e3
static width
silverwind Apr 13, 2024
40905e5
Merge branch 'main' into actov
silverwind Apr 14, 2024
e3dd18e
remove max-width and fixes
silverwind Apr 14, 2024
70f8b5c
Merge branch 'main' into actov
silverwind Apr 15, 2024
9aa3066
Merge branch 'main' into actov
GiteaBot Apr 15, 2024
4e5864f
Merge branch 'main' into actov
GiteaBot Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions templates/repo/actions/runs_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Expand Down Expand Up @@ -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}}
Expand Down
26 changes: 25 additions & 1 deletion web_src/css/actions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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;
}
}
16 changes: 11 additions & 5 deletions web_src/js/components/RepoActionView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -503,6 +503,7 @@ export function initRepositoryActionView() {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

.action-info-summary-title {
Expand All @@ -513,6 +514,7 @@ export function initRepositoryActionView() {
font-size: 20px;
margin: 0 0 0 8px;
flex: 1;
overflow-wrap: anywhere;
}

.action-commit-summary {
Expand Down Expand Up @@ -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);
Expand Down