From b615a59db8feb9c2591425f0cc7aca518157f7ea Mon Sep 17 00:00:00 2001 From: Giteabot Date: Tue, 28 May 2024 22:10:01 +0800 Subject: [PATCH] Improve mobile review ui (#31091) (#31136) Backport #31091 by @silverwind Fixes: https://github.com/go-gitea/gitea/issues/31071 Not perfect but much better than before. Before: Overflows, sticky not working, filename unreadable: Screenshot 2024-05-27 at 02 02 40 After: Screenshot 2024-05-27 at 01 59 06 Co-authored-by: silverwind --- templates/repo/diff/box.tmpl | 2 +- templates/repo/diff/conversation.tmpl | 8 +-- web_src/css/markup/content.css | 2 +- web_src/css/modules/comment.css | 14 +++-- web_src/css/modules/segment.css | 3 +- web_src/css/repo.css | 82 ++++++++++++--------------- web_src/css/review.css | 70 +++++------------------ 7 files changed, 69 insertions(+), 112 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 641de294fd..bbca6135d9 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -110,7 +110,7 @@ {{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}} {{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
-

+

-
-
+
+
@@ -50,7 +50,7 @@
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}} - {{end}} {{if and $.SignedUserID (not $.Repository.IsArchived)}} - {{end}} diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css index 6ba4e40072..39d26d7f95 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.css @@ -2,7 +2,7 @@ overflow: hidden; font-size: 16px; line-height: 1.5 !important; - word-wrap: break-word; + overflow-wrap: anywhere; } .markup > *:first-child { diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css index cf080db225..672808e9cc 100644 --- a/web_src/css/modules/comment.css +++ b/web_src/css/modules/comment.css @@ -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 { diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css index 48dc5c4488..0f555cea93 100644 --- a/web_src/css/modules/segment.css +++ b/web_src/css/modules/segment.css @@ -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 { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 4076b50a12..b5a73bc502 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -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 { diff --git a/web_src/css/review.css b/web_src/css/review.css index 7534500e6f..6337748939 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -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; }