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) Has been skipped
testing / frontend-checks (push) Has been skipped
testing / test-unit (push) Has been skipped
testing / test-e2e (push) Has been skipped
testing / test-mysql (push) Has been skipped
testing / test-pgsql (push) Has been skipped
testing / test-sqlite (push) Has been skipped
testing / test-remote-cacher (redis) (push) Has been skipped
testing / test-remote-cacher (valkey) (push) Has been skipped
testing / test-remote-cacher (garnet) (push) Has been skipped
testing / test-remote-cacher (redict) (push) Has been skipped
testing / security-check (push) Has been skipped

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

@ -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);
}