mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Improve mobile review ui (#31091)

Browse Source 
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">
pull/31139/head
silverwind 6 months ago committed by GitHub
parent de4616690f
commit 1e3c4d8fc7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 69 additions and 112 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      templates/repo/diff/box.tmpl
  2. 8
      templates/repo/diff/conversation.tmpl
  3. 2
      web_src/css/markup/content.css
  4. 14
      web_src/css/modules/comment.css
  5. 3
      web_src/css/modules/segment.css
  6. 82
      web_src/css/repo.css
  7. 70
      web_src/css/review.css

2
templates/repo/diff/box.tmpl
Unescape View File

@ -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}}

8
templates/repo/diff/conversation.tmpl
Unescape View File

@ -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
web_src/css/markup/content.css
Unescape View File

@ -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
web_src/css/modules/comment.css
Unescape View File

@ -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 {

3
web_src/css/modules/segment.css
Unescape View File

@ -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 {

82
web_src/css/repo.css
Unescape View File

@ -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 {

70
web_src/css/review.css
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save