mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-09-13 14:27:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

ui: refactor display of review threads on pr view (#8138)

Browse source 
* refactored to untangle comment headers of different styles of comments from each other
* fixed misalignments
* improved consistency
* fixed missing avatar rounding
* made reactions aligned with content
* fixed text in the "Outdated" label overflowing into the toggle icon

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8138
Reviewed-by: Beowulf <beowulf@beocode.eu>
This commit is contained in:
0ko 2025-08-27 06:02:56 +02:00
commit cd08265406
9 changed files with 171 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

70
web_src/css/repo.css
View file

@ -984,23 +984,57 @@ pdf-object {
}
.repository.view.issue .comment-list .code-comment {
border: 1px solid transparent;
margin: 0;
/* top: around 5px of whitespace are added by reaction octicon. (0.5rem=7px)-5px=2px */
padding: 2px 0.5rem 1.5rem;
}
.repository.view.issue .comment-list .code-comment .comment-header {
background: transparent;
border-bottom: 0 !important;
padding: 0 !important;
@media (max-width: 768px) {
.repository.view.issue .comment-list .code-comment {
padding: 0.33rem 0.33rem 1.33rem;
}
}
.repository.view.issue .comment-list .code-comment .comment-header::after,
.repository.view.issue .comment-list .code-comment .comment-header::before {
display: none;
.repository.view.issue .comment-list .code-comment:target {
outline: 1px solid var(--color-primary);
}
.repository.view.issue .comment-list .code-comment .header {
display: flex;
margin-bottom: 0.25rem;
justify-content: space-between;
align-items: center;
}
.repository.view.issue .comment-list .code-comment .header .comment-header-left {
gap: 0.5rem;
}
.repository.view.issue .comment-list .code-comment .header .avatar {
margin: 0 !important;
}
.repository.view.issue .comment-list .code-comment .comment-content {
margin-left: 36px;
margin-left: calc(20px + 0.5rem);
}
.repository.view.issue .comment-list .code-comment .add-reaction {
padding: 0 0.5rem;
}
/* emulation of horizontal rule between comments originating from forgejo- themes, commit faab0c670e */
.repository.view.issue .comment-list .code-comment + .code-comment {
margin-top: 1rem !important;
padding-top: 1rem !important;
border-top: 1px solid var(--color-secondary) !important;
}
@media (max-width: 768px) {
.repository.view.issue .comment-list .code-comment + .code-comment {
margin-top: 0.5rem !important;
padding-top: 0.5rem !important;
}
}
.repository.view.issue .comment-list .comment > .avatar {
@ -1012,15 +1046,19 @@ pdf-object {
}
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
margin-top: 16px !important;
margin-bottom: -8px !important;
gap: var(--button-spacing);
flex-wrap: wrap;
width: unset !important;
margin-left: calc(20px + 0.5rem) !important;
margin-top: 1rem !important;
margin-bottom: -1rem !important;
border-top: none !important;
background: transparent !important;
}
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
border: 1px solid;
padding: 5px 8px !important;
margin: 0 2px;
border-radius: var(--border-radius);
border-color: var(--color-secondary-dark-1) !important;
}
@ -2031,7 +2069,7 @@ details.repo-search-result summary::marker {
margin: 0 !important;
position: relative;
color: var(--color-text);
min-height: var(--repo-header-issue-min-height);
min-height: 41px;
background-color: var(--color-box-header);
display: flex;
justify-content: space-between;
@ -2081,11 +2119,11 @@ details.repo-search-result summary::marker {
left: 7px;
}
.comment-header .actions a:not(.label) {
padding: 0.5rem !important;
.comment-header-right.actions a:not(.label) {
padding: 0.5rem;
}
.comment-header .actions .label {
.comment-header-right.actions .label {
margin: 0 !important;
}