feat(ui): enlarge metadata line gaps in issue list and refactor (#7580)
Some checks are pending
/ release (push) Waiting to run
testing / backend-checks (push) Waiting to run
testing / frontend-checks (push) Waiting to run
testing / test-unit (push) Blocked by required conditions
testing / test-e2e (push) Blocked by required conditions
testing / test-remote-cacher (redis) (push) Blocked by required conditions
testing / test-remote-cacher (valkey) (push) Blocked by required conditions
testing / test-remote-cacher (garnet) (push) Blocked by required conditions
testing / test-remote-cacher (redict) (push) Blocked by required conditions
testing / test-mysql (push) Blocked by required conditions
testing / test-pgsql (push) Blocked by required conditions
testing / test-sqlite (push) Blocked by required conditions
testing / security-check (push) Blocked by required conditions

The metadata line can contain many things and can get very busy.

The main change this PR does is addition of `gap:0.5rem` to it's items, so they're better separated.

And there are some harmless refactors, too.

Preview:
https://codeberg.org/attachments/5854ee85-79b3-448a-aafd-4120f34e84e1 - before
https://codeberg.org/attachments/b546efe4-06b7-4cd5-84bf-0afb9e84b9d6 - after

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7580
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2025-04-22 14:58:32 +00:00
parent 358863999e
commit bbb7f6ec6f
2 changed files with 25 additions and 23 deletions

View file

@ -52,25 +52,27 @@
</div>
{{end}}
</div>
<div class="flex-item-body">
<a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{if eq $.listType "dashboard"}}
{{.Repo.FullName}}#{{.Index}}
<div class="flex-item-body issue-meta">
<span>
<a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{if eq $.listType "dashboard"}}
{{.Repo.FullName}}#{{.Index}}
{{else}}
#{{.Index}}
{{end}}
</a>
{{$timeStr := DateUtils.TimeSince .GetLastEventTimestamp}}
{{if .OriginalAuthor}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor}}
{{else if gt .Poster.ID 0}}
{{ctx.Locale.Tr .GetLastEventLabel $timeStr .Poster.HomeLink .Poster.GetDisplayName}}
{{else}}
#{{.Index}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .Poster.GetDisplayName}}
{{end}}
</a>
{{$timeStr := DateUtils.TimeSince .GetLastEventTimestamp}}
{{if .OriginalAuthor}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor}}
{{else if gt .Poster.ID 0}}
{{ctx.Locale.Tr .GetLastEventLabel $timeStr .Poster.HomeLink .Poster.GetDisplayName}}
{{else}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .Poster.GetDisplayName}}
{{end}}
</span>
{{if .IsPull}}
<div class="branches flex-text-inline">
{{svg "gitea-double-chevron-right" 12}}
{{svg "gitea-double-chevron-right" 12}}
<div class="flex-text-inline issue-meta-branch">
<div class="branch">
<a href="{{.PullRequest.BaseRepo.Link}}/src/branch/{{PathEscapeSegments .PullRequest.BaseBranch}}">
{{/* inline to remove the spaces between spans */}}

View file

@ -69,17 +69,17 @@
}
}
#issue-list .flex-item-body .branches {
display: inline-flex;
#issue-list .issue-meta {
gap: 0 0.5rem;
}
#issue-list .flex-item-body .branches .branch {
#issue-list .issue-meta .branch {
background-color: var(--color-secondary-alpha-50);
border-radius: var(--border-radius);
padding: 0 4px;
}
#issue-list .flex-item-body .branches .truncated-name {
#issue-list .issue-meta .branch .truncated-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -88,18 +88,18 @@
vertical-align: top;
}
#issue-list .flex-item-body .checklist progress {
#issue-list .issue-meta .checklist progress {
margin-left: 2px;
width: 80px;
height: 6px;
display: inline-block;
}
#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
#issue-list .issue-meta .checklist progress::-webkit-progress-value {
background-color: var(--color-secondary-dark-4);
}
#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
#issue-list .issue-meta .checklist progress::-moz-progress-bar {
background-color: var(--color-secondary-dark-4);
}