fix: code review comments on mobile (#17321)
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parent
74b6805225
commit
6dd015a53e
3 changed files with 59 additions and 5 deletions
|
@ -521,7 +521,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{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">
|
<div class="ui comments mb-0">
|
||||||
{{range $comms}}
|
{{range $comms}}
|
||||||
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
|
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
|
||||||
|
@ -590,7 +590,7 @@
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</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">
|
<div class="f1">
|
||||||
{{if $resolved}}
|
{{if $resolved}}
|
||||||
<div class="ui grey text">
|
<div class="ui grey text">
|
||||||
|
@ -599,7 +599,7 @@
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="code-comment-buttons-buttons">
|
||||||
{{if and $.CanMarkConversation $isNotPending}}
|
{{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">
|
<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}}
|
{{if $resolved}}
|
||||||
|
|
|
@ -955,6 +955,10 @@
|
||||||
|
|
||||||
.ui.comments {
|
.ui.comments {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
|
|
|
@ -48,13 +48,51 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-code-cloud {
|
.comment-code-cloud {
|
||||||
padding: .5rem;
|
padding: .5rem !important;
|
||||||
padding-left: 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
|
@media @mediaSm {
|
||||||
|
padding: .75rem !important;
|
||||||
|
|
||||||
|
.code-comment-buttons {
|
||||||
|
margin: .5rem 0 .25rem !important;
|
||||||
|
|
||||||
|
.code-comment-buttons-buttons {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.comments .comment {
|
.comments .comment {
|
||||||
margin: 0;
|
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 {
|
.attached {
|
||||||
|
@ -112,6 +150,17 @@
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media @mediaSm {
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: .75rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.diff-file-body .comment-form {
|
.diff-file-body .comment-form {
|
||||||
|
@ -142,6 +191,7 @@ a.blob-excerpt:hover {
|
||||||
> .ui.segment {
|
> .ui.segment {
|
||||||
width: 94vw;
|
width: 94vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-toolbar {
|
.editor-toolbar {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue