Improve mobile review ui (#31091)
Fixes: https://github.com/go-gitea/gitea/issues/31071 Not perfect but much better than before. Before: Overflows, sticky not working, filename unreadable: <img width="506" alt="Screenshot 2024-05-27 at 02 02 40" src="https://github.com/go-gitea/gitea/assets/115237/a06b1edf-dece-4402-98c2-68670fca265f"> After: <img width="457" alt="Screenshot 2024-05-27 at 01 59 06" src="https://github.com/go-gitea/gitea/assets/115237/2a282c96-e719-4554-b418-81963ae6269c">
This commit is contained in:
GitHub
parent
de4616690f
commit
1e3c4d8fc7
@ -110,7 +110,7 @@
|
||||
{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
|
||||
{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
|
||||
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} tw-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
|
||||
<h4 class="diff-file-header sticky-2nd-row ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between tw-flex-wrap">
|
||||
<h4 class="diff-file-header sticky-2nd-row ui top attached header">
|
||||
<div class="diff-file-name tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-flex-wrap">
|
||||
<button class="fold-file btn interact-bg tw-p-1{{if not $isExpandable}} tw-invisible{{end}}">
|
||||
{{if $file.ShouldBeHidden}}
|
||||
|
||||
@ -40,8 +40,8 @@
|
||||
{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
|
||||
</ui>
|
||||
</div>
|
||||
<div class="tw-flex tw-justify-end tw-items-center tw-flex-wrap tw-mt-2">
|
||||
<div class="ui buttons tw-mr-1">
|
||||
<div class="tw-flex tw-justify-end tw-items-center tw-gap-2 tw-mt-2 tw-flex-wrap">
|
||||
<div class="ui buttons">
|
||||
<button class="ui icon tiny basic button previous-conversation">
|
||||
{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}}
|
||||
</button>
|
||||
@ -50,7 +50,7 @@
|
||||
</button>
|
||||
</div>
|
||||
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
|
||||
<button class="ui icon tiny basic button resolve-conversation" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
|
||||
<button class="ui icon tiny basic button resolve-conversation tw-mr-0" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
|
||||
{{if $resolved}}
|
||||
{{ctx.Locale.Tr "repo.issues.review.un_resolve_conversation"}}
|
||||
{{else}}
|
||||
@ -59,7 +59,7 @@
|
||||
</button>
|
||||
{{end}}
|
||||
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
|
||||
<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0">
|
||||
<button class="comment-form-reply ui primary tiny labeled icon button tw-mr-0">
|
||||
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
|
||||
</button>
|
||||
{{end}}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
line-height: 1.5 !important;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.markup > *:first-child {
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
}
|
||||
|
||||
.ui.comments .comment {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: none;
|
||||
margin: 3px 0 0;
|
||||
@ -23,6 +24,10 @@
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.edit-content-zone .comment {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ui.comments .comment:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
@ -46,16 +51,17 @@
|
||||
}
|
||||
|
||||
.ui.comments .comment .avatar {
|
||||
float: left;
|
||||
width: 2.5em;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .content {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .avatar ~ .content {
|
||||
margin-left: 3.5em;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.ui.comments .comment .author {
|
||||
|
||||
@ -156,7 +156,8 @@
|
||||
.ui.attached.segment:last-child,
|
||||
.ui.segment:has(+ .ui.segment:not(.attached)),
|
||||
.ui.attached.segment:has(+ .ui.modal) {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
border-bottom-left-radius: 0.28571429rem;
|
||||
border-bottom-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui[class*="top attached"].segment {
|
||||
|
||||
@ -824,8 +824,7 @@ td .commit-summary {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
|
||||
.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
|
||||
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
@ -1037,10 +1036,6 @@ td .commit-summary {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment > .avatar ~ .content {
|
||||
margin-left: 42px;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
|
||||
margin: 0;
|
||||
}
|
||||
@ -1064,12 +1059,6 @@ td .commit-summary {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.repository.view.issue .comment-list {
|
||||
padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
|
||||
}
|
||||
}
|
||||
|
||||
.repository.view.issue .ui.depending .item.is-closed .title {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
@ -1551,39 +1540,6 @@ td .commit-summary {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.repository .diff-box .header:not(.resolved-placeholder) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.repository .diff-box .header:not(.resolved-placeholder) .file {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.repository .diff-box .header:not(.resolved-placeholder) .file .file-link {
|
||||
max-width: fit-content;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.repository .diff-box .header:not(.resolved-placeholder) .button {
|
||||
padding: 0 12px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.repository .diff-box .resolved-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px !important;
|
||||
height: 36px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.repository .diff-box .resolved-placeholder .button {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
@ -2428,6 +2384,10 @@ tbody.commit-list {
|
||||
}
|
||||
|
||||
.resolved-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px !important;
|
||||
padding: 8px !important;
|
||||
font-weight: var(--font-weight-normal) !important;
|
||||
border: 1px solid var(--color-secondary) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
@ -2537,6 +2497,38 @@ tbody.commit-list {
|
||||
.diff-file-header {
|
||||
padding: 5px 8px !important;
|
||||
box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
|
||||
font-weight: var(--font-weight-normal);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.diff-file-header .file {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.diff-file-header .file-link {
|
||||
max-width: fit-content;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.diff-file-header .button {
|
||||
padding: 0 12px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.diff-file-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-file-box[data-folded="true"] .diff-file-body {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.ui.button.add-code-comment {
|
||||
@ -71,57 +72,10 @@
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.comment-code-cloud {
|
||||
max-width: none;
|
||||
padding: 0.75rem !important;
|
||||
}
|
||||
.comment-code-cloud .code-comment-buttons {
|
||||
margin: 0.5rem 0 0.25rem !important;
|
||||
}
|
||||
.comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
.comment-code-cloud .ui.buttons {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.comment-code-cloud .ui.buttons .button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-code-cloud .comments .comment {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.comment-code-cloud .comments .comment .comment-header-right.actions .ui.basic.label {
|
||||
display: none;
|
||||
}
|
||||
.comment-code-cloud .comments .comment .avatar {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin: 0 0.5rem 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.comment-code-cloud .comments .comment .avatar ~ .content {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.comment-code-cloud .comments .comment img.avatar {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.comment-code-cloud .comments .comment .comment-content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.comment-code-cloud .comments .comment .comment-container {
|
||||
width: 100%;
|
||||
}
|
||||
.comment-code-cloud .comments .comment.code-comment {
|
||||
padding: 0 0 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-code-cloud .attached.tab {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
@ -132,6 +86,13 @@
|
||||
padding: 1px 8px 1px 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.comment-code-cloud .attached.header {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-code-cloud .attached.header .text {
|
||||
margin: 0;
|
||||
}
|
||||
@ -179,14 +140,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.comment-code-cloud .button {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-file-body .comment-form {
|
||||
margin: 0 0 0 3em;
|
||||
}
|
||||
@ -273,11 +226,16 @@
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
padding: 4px 8px;
|
||||
margin: -8px 0; /* just like other buttons in the diff box header */
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 0.857rem; /* just like .ui.tiny.button */
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.viewed-file-form {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.viewed-file-form input {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user