mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-10-30 22:11:07 +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;
}

22
web_src/css/review.css
View file

@ -57,13 +57,20 @@
margin-bottom: 0.5em;
}
/* `.ui.label` implies `min-width: 0` breaking the layout.
(https://codeberg.org/forgejo/forgejo/pulls/8138#issuecomment-5960251)
When it becomes possible, feel free to replace with something better. */
.collapsible-comment-box .ui.label {
min-width: unset;
}
.show-outdated:hover,
.hide-outdated:hover {
text-decoration: underline;
}
.comment-code-cloud {
padding: 0.5rem 1rem !important;
padding: 0.5rem !important;
position: relative;
}
@ -71,10 +78,13 @@
max-width: 820px;
}
.add-comment .comment-code-cloud form {
margin-left: 42px;
}
@media (max-width: 767.98px) {
.comment-code-cloud {
max-width: none;
padding: 0.75rem !important;
}
}
@ -128,10 +138,6 @@
cursor: pointer;
}
.comment-code-cloud .ui.active.tab {
padding: 0.5em;
}
.comment-code-cloud .ui.active.tab.markup {
padding: 1em;
min-height: 168px;
@ -150,7 +156,7 @@
}
.comment-code-cloud .footer {
padding: 10px 0;
padding: 10px 0 0;
}
.comment-code-cloud .footer .markup-info {
@ -171,7 +177,7 @@
}
.diff-file-body .comment-form {
margin: 0 0 0 3em;
margin-left: 3em;
}
.diff-file-body.binary {

5
web_src/css/themes/theme-forgejo-dark.css
View file

@ -309,11 +309,6 @@ i.grey.icon.icon.icon.icon {
.ui.primary.labels .label {
background-color: var(--color-primary-light-3) !important;
}
.repository.view.issue .comment-list .code-comment + .code-comment {
margin: 1.25rem 0 !important;
padding-top: 1.25rem !important;
border-top-color: var(--steel-650) !important;
}
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
background-color: var(--color-light) !important;

5
web_src/css/themes/theme-forgejo-light.css
View file

@ -298,11 +298,6 @@
.ui.primary.labels .label {
background-color: var(--color-primary-dark-1) !important;
}
.repository.view.issue .comment-list .code-comment + .code-comment {
margin: 1.25rem 0 !important;
padding-top: 1.25rem !important;
border-top-color: var(--zinc-250) !important;
}
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
background-color: var(--color-shadow) !important;