luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-06-21 08:30:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

6
templates/shared/issuelist.tmpl
View file

@ -52,7 +52,8 @@
</div> </div>
{{end}} {{end}}
</div> </div>
<div class="flex-item-body"> <div class="flex-item-body issue-meta">
<span>
<a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> <a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{if eq $.listType "dashboard"}} {{if eq $.listType "dashboard"}}
{{.Repo.FullName}}#{{.Index}} {{.Repo.FullName}}#{{.Index}}
@ -68,9 +69,10 @@
{{else}} {{else}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .Poster.GetDisplayName}} {{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .Poster.GetDisplayName}}
{{end}} {{end}}
</span>
{{if .IsPull}} {{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"> <div class="branch">
<a href="{{.PullRequest.BaseRepo.Link}}/src/branch/{{PathEscapeSegments .PullRequest.BaseBranch}}"> <a href="{{.PullRequest.BaseRepo.Link}}/src/branch/{{PathEscapeSegments .PullRequest.BaseBranch}}">
{{/* inline to remove the spaces between spans */}} {{/* inline to remove the spaces between spans */}}

14
web_src/css/repo/issue-list.css
View file

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