More width on viewing comments

Gusted · Apr 29, 2022 · b9e8fa5 · b9e8fa5
1 parent 81f6687
commit b9e8fa5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
@@ -41,6 +41,9 @@
 									{{if .Repository.OriginalURL}} ({{$.i18n.Tr "repo.migrated_from" (.Repository.OriginalURL|Escape) (.Repository.GetOriginalURLHostname|Escape) | Safe }}){{end}}
 								</span>
 							{{else}}
+								<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
+									{{avatar .Issue.Poster}}
+								</a>
 								<span class="text grey">
 									<a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
 									{{.i18n.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
@@ -50,12 +53,12 @@
 						<div class="comment-header-right actions df ac">
 							{{if gt .Issue.ShowRole 0}}
 								{{if (.Issue.ShowRole.HasRole "Writer")}}
-									<div class="ui basic label">
+									<div class="ui basic label role-label">
 										{{$.i18n.Tr "repo.issues.collaborator"}}
 									</div>
 								{{end}}
 								{{if (.Issue.ShowRole.HasRole "Owner")}}
-									<div class="ui basic label">
+									<div class="ui basic label role-label">
 										{{$.i18n.Tr "repo.issues.owner"}}
 									</div>
 								{{end}}

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
@@ -861,6 +861,10 @@
           }
         }
 
+        .inline-timeline-avatar {
+          display: none;
+        }
+
         .avatar.image,
         .avatar.image img {
           width: 20px;
@@ -3284,4 +3288,41 @@ td.blob-excerpt {
       width: 50%;
     }
   }
+
+  .repository.view.issue .comment-list {
+    .timeline,
+    .timeline-item {
+      margin-left: 0;
+    }
+
+    .timeline {
+      &::before {
+        left: 14px;
+      }
+
+      .inline-timeline-avatar {
+        display: flex;
+        margin-bottom: auto;
+
+        img.avatar.image {
+          height: 24px;
+          width: 24px;
+        }
+      }
+
+      .comment-header {
+        &::before,
+        &::after {
+          content: unset;
+        }
+
+        padding-left: 4px;
+      }
+
+      .timeline-avatar,
+      .comment-header-right .role-label {
+        display: none;
+      }
+    }
+  }
 }