From 6dd015a53e94852d2d5bea5fc0412fd3c979d680 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 16 Oct 2021 04:22:24 +0200
Subject: [PATCH] fix: code review comments on mobile (#17321)
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
templates/repo/issue/view_content/comments.tmpl | 6 +--
web_src/less/_repository.less | 4 ++
web_src/less/_review.less | 54 ++++++++++++++++++++++++-
3 files changed, 59 insertions(+), 5 deletions(-)
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index c7d7574231..cb95720e29 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -521,7 +521,7 @@
</div>
</div>
{{end}}
- <div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}} p-3">
+ <div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}}">
<div class="ui comments mb-0">
{{range $comms}}
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
@@ -590,7 +590,7 @@
</div>
{{end}}
</div>
- <div class="df ac fw mt-3 mb-2 mx-3">
+ <div class="code-comment-buttons df ac fw mt-3 mb-2 mx-3">
<div class="f1">
{{if $resolved}}
<div class="ui grey text">
@@ -599,7 +599,7 @@
</div>
{{end}}
</div>
- <div>
+ <div class="code-comment-buttons-buttons">
{{if and $.CanMarkConversation $isNotPending}}
<button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index $comms 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
{{if $resolved}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 3d7d40ffa3..9f32f427f3 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -955,6 +955,10 @@
.ui.comments {
max-width: 100%;
+
+ .avatar {
+ margin-right: .5rem;
+ }
}
.comment {
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 2b15eec82d..12bd6a608a 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -48,13 +48,51 @@
}
.comment-code-cloud {
- padding: .5rem;
- padding-left: 0;
+ padding: .5rem !important;
position: relative;
margin: 0 auto;
+ @media @mediaSm {
+ padding: .75rem !important;
+
+ .code-comment-buttons {
+ margin: .5rem 0 .25rem !important;
+
+ .code-comment-buttons-buttons {
+ width: 100%;
+ }
+ }
+ }
+
.comments .comment {
margin: 0;
+
+ @media @mediaSm {
+ padding: 0;
+
+ .comment-header-right.actions .ui.basic.label {
+ display: none;
+ }
+
+ .avatar {
+ width: auto;
+ float: none;
+ margin: 0 .5rem 0 0;
+ flex-shrink: 0;
+
+ &.image {
+ margin: 0 !important;
+ }
+ }
+
+ .comment-content {
+ margin-left: 0 !important;
+ }
+
+ &.code-comment {
+ padding: 0 0 .5rem !important;
+ }
+ }
}
.attached {
@@ -112,6 +150,17 @@
display: block;
}
}
+
+ @media @mediaSm {
+ .button {
+ width: 100%;
+ margin: 0 !important;
+
+ &:not(:last-child) {
+ margin-bottom: .75rem !important;
+ }
+ }
+ }
}
.diff-file-body .comment-form {
@@ -142,6 +191,7 @@ a.blob-excerpt:hover {
> .ui.segment {
width: 94vw;
}
+
.editor-toolbar {
overflow-x: auto;
}