Skip to content

Commit 1e3c4d8

Browse files
silverwindsilverwind
authored
Improve mobile review ui (#31091)
Fixes: #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">
1 parent de46166 commit 1e3c4d8

File tree

7 files changed

+69
-112
lines changed

7 files changed

+69
-112
lines changed

‎templates/repo/diff/box.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
111111
{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
112112
<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}}>
113-
<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">
113+
<h4 class="diff-file-header sticky-2nd-row ui top attached header">
114114
<div class="diff-file-name tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-flex-wrap">
115115
<button class="fold-file btn interact-bg tw-p-1{{if not $isExpandable}} tw-invisible{{end}}">
116116
{{if $file.ShouldBeHidden}}

‎templates/repo/diff/conversation.tmpl‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@
4040
{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
4141
</ui>
4242
</div>
43-
<div class="tw-flex tw-justify-end tw-items-center tw-flex-wrap tw-mt-2">
44-
<div class="ui buttons tw-mr-1">
43+
<div class="tw-flex tw-justify-end tw-items-center tw-gap-2 tw-mt-2 tw-flex-wrap">
44+
<div class="ui buttons">
4545
<button class="ui icon tiny basic button previous-conversation">
4646
{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}}
4747
</button>
@@ -50,7 +50,7 @@
5050
</button>
5151
</div>
5252
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
53-
<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">
53+
<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">
5454
{{if $resolved}}
5555
{{ctx.Locale.Tr "repo.issues.review.un_resolve_conversation"}}
5656
{{else}}
@@ -59,7 +59,7 @@
5959
</button>
6060
{{end}}
6161
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
62-
<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0">
62+
<button class="comment-form-reply ui primary tiny labeled icon button tw-mr-0">
6363
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
6464
</button>
6565
{{end}}

‎web_src/css/markup/content.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
overflow: hidden;
33
font-size: 16px;
44
line-height: 1.5 !important;
5-
word-wrap: break-word;
5+
overflow-wrap: anywhere;
66
}
77

88
.markup > *:first-child {

‎web_src/css/modules/comment.css‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
}
1515

1616
.ui.comments .comment {
17+
display: flex;
1718
position: relative;
1819
background: none;
1920
margin: 3px 0 0;
@@ -23,6 +24,10 @@
2324
line-height: 1.2;
2425
}
2526

27+
.edit-content-zone .comment {
28+
flex-direction: column;
29+
}
30+
2631
.ui.comments .comment:first-child {
2732
margin-top: 0;
2833
padding-top: 0;
@@ -46,16 +51,17 @@
4651
}
4752

4853
.ui.comments .comment .avatar {
49-
float: left;
50-
width: 2.5em;
54+
width: 30px;
5155
}
5256

5357
.ui.comments .comment > .content {
54-
display: block;
58+
display: flex;
59+
flex-direction: column;
60+
flex: 1;
5561
}
5662

5763
.ui.comments .comment > .avatar ~ .content {
58-
margin-left: 3.5em;
64+
margin-left: 12px;
5965
}
6066

6167
.ui.comments .comment .author {

‎web_src/css/modules/segment.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,8 @@
156156
.ui.attached.segment:last-child,
157157
.ui.segment:has(+ .ui.segment:not(.attached)),
158158
.ui.attached.segment:has(+ .ui.modal) {
159-
border-radius: 0 0 0.28571429rem 0.28571429rem;
159+
border-bottom-left-radius: 0.28571429rem;
160+
border-bottom-right-radius: 0.28571429rem;
160161
}
161162

162163
.ui[class*="top attached"].segment {

‎web_src/css/repo.css‎

Lines changed: 37 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -824,8 +824,7 @@ td .commit-summary {
824824
padding-top: 0;
825825
}
826826

827-
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
828-
.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
827+
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar {
829828
margin-right: 0.25em;
830829
}
831830

@@ -1037,10 +1036,6 @@ td .commit-summary {
10371036
margin-top: 6px;
10381037
}
10391038

1040-
.repository.view.issue .comment-list .comment > .avatar ~ .content {
1041-
margin-left: 42px;
1042-
}
1043-
10441039
.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
10451040
margin: 0;
10461041
}
@@ -1064,12 +1059,6 @@ td .commit-summary {
10641059
box-shadow: none;
10651060
}
10661061

1067-
@media (max-width: 767.98px) {
1068-
.repository.view.issue .comment-list {
1069-
padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
1070-
}
1071-
}
1072-
10731062
.repository.view.issue .ui.depending .item.is-closed .title {
10741063
text-decoration: line-through;
10751064
}
@@ -1551,39 +1540,6 @@ td .commit-summary {
15511540
height: 30px;
15521541
}
15531542

1554-
.repository .diff-box .header:not(.resolved-placeholder) {
1555-
display: flex;
1556-
align-items: center;
1557-
}
1558-
1559-
.repository .diff-box .header:not(.resolved-placeholder) .file {
1560-
min-width: 0;
1561-
}
1562-
1563-
.repository .diff-box .header:not(.resolved-placeholder) .file .file-link {
1564-
max-width: fit-content;
1565-
display: -webkit-box;
1566-
-webkit-box-orient: vertical;
1567-
-webkit-line-clamp: 2;
1568-
overflow: hidden;
1569-
}
1570-
1571-
.repository .diff-box .header:not(.resolved-placeholder) .button {
1572-
padding: 0 12px;
1573-
flex: 0 0 auto;
1574-
margin-right: 0;
1575-
height: 30px;
1576-
}
1577-
1578-
.repository .diff-box .resolved-placeholder {
1579-
display: flex;
1580-
align-items: center;
1581-
font-size: 14px !important;
1582-
height: 36px;
1583-
padding-top: 0;
1584-
padding-bottom: 0;
1585-
}
1586-
15871543
.repository .diff-box .resolved-placeholder .button {
15881544
padding: 8px 12px;
15891545
}
@@ -2428,6 +2384,10 @@ tbody.commit-list {
24282384
}
24292385

24302386
.resolved-placeholder {
2387+
display: flex;
2388+
align-items: center;
2389+
font-size: 14px !important;
2390+
padding: 8px !important;
24312391
font-weight: var(--font-weight-normal) !important;
24322392
border: 1px solid var(--color-secondary) !important;
24332393
border-radius: var(--border-radius) !important;
@@ -2537,6 +2497,38 @@ tbody.commit-list {
25372497
.diff-file-header {
25382498
padding: 5px 8px !important;
25392499
box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
2500+
font-weight: var(--font-weight-normal);
2501+
display: flex;
2502+
justify-content: space-between;
2503+
align-items: center;
2504+
flex-wrap: wrap;
2505+
}
2506+
2507+
.diff-file-header .file {
2508+
min-width: 0;
2509+
}
2510+
2511+
.diff-file-header .file-link {
2512+
max-width: fit-content;
2513+
display: -webkit-box;
2514+
-webkit-box-orient: vertical;
2515+
-webkit-line-clamp: 2;
2516+
overflow: hidden;
2517+
overflow-wrap: anywhere;
2518+
}
2519+
2520+
.diff-file-header .button {
2521+
padding: 0 12px;
2522+
flex: 0 0 auto;
2523+
margin-right: 0;
2524+
height: 30px;
2525+
}
2526+
2527+
@media (max-width: 767.98px) {
2528+
.diff-file-header {
2529+
flex-direction: column;
2530+
align-items: stretch;
2531+
}
25402532
}
25412533

25422534
.diff-file-box[data-folded="true"] .diff-file-body {

‎web_src/css/review.css‎

Lines changed: 14 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
-webkit-touch-callout: none;
44
-webkit-user-select: none;
55
user-select: none;
6+
margin-right: 0 !important;
67
}
78

89
.ui.button.add-code-comment {
@@ -71,57 +72,10 @@
7172
max-width: 820px;
7273
}
7374

74-
@media (max-width: 767.98px) {
75-
.comment-code-cloud {
76-
max-width: none;
77-
padding: 0.75rem !important;
78-
}
79-
.comment-code-cloud .code-comment-buttons {
80-
margin: 0.5rem 0 0.25rem !important;
81-
}
82-
.comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons {
83-
width: 100%;
84-
}
85-
.comment-code-cloud .ui.buttons {
86-
width: 100%;
87-
margin: 0 !important;
88-
}
89-
.comment-code-cloud .ui.buttons .button {
90-
flex: 1;
91-
}
92-
}
93-
9475
.comment-code-cloud .comments .comment {
9576
padding: 0;
9677
}
9778

98-
@media (max-width: 767.98px) {
99-
.comment-code-cloud .comments .comment .comment-header-right.actions .ui.basic.label {
100-
display: none;
101-
}
102-
.comment-code-cloud .comments .comment .avatar {
103-
width: auto;
104-
float: none;
105-
margin: 0 0.5rem 0 0;
106-
flex-shrink: 0;
107-
}
108-
.comment-code-cloud .comments .comment .avatar ~ .content {
109-
margin-left: 1em;
110-
}
111-
.comment-code-cloud .comments .comment img.avatar {
112-
margin: 0 !important;
113-
}
114-
.comment-code-cloud .comments .comment .comment-content {
115-
margin-left: 0 !important;
116-
}
117-
.comment-code-cloud .comments .comment .comment-container {
118-
width: 100%;
119-
}
120-
.comment-code-cloud .comments .comment.code-comment {
121-
padding: 0 0 0.5rem !important;
122-
}
123-
}
124-
12579
.comment-code-cloud .attached.tab {
12680
border: 0;
12781
padding: 0;
@@ -132,6 +86,13 @@
13286
padding: 1px 8px 1px 12px;
13387
}
13488

89+
@media (max-width: 767.98px) {
90+
.comment-code-cloud .attached.header {
91+
padding-top: 4px;
92+
padding-bottom: 4px;
93+
}
94+
}
95+
13596
.comment-code-cloud .attached.header .text {
13697
margin: 0;
13798
}
@@ -179,14 +140,6 @@
179140
display: block;
180141
}
181142

182-
@media (max-width: 767.98px) {
183-
.comment-code-cloud .button {
184-
width: 100%;
185-
margin: 0 !important;
186-
margin-bottom: 0.75rem !important;
187-
}
188-
}
189-
190143
.diff-file-body .comment-form {
191144
margin: 0 0 0 3em;
192145
}
@@ -273,11 +226,16 @@
273226
align-items: center;
274227
border: 1px solid transparent;
275228
padding: 4px 8px;
276-
margin: -8px 0; /* just like other buttons in the diff box header */
277229
border-radius: var(--border-radius);
278230
font-size: 0.857rem; /* just like .ui.tiny.button */
279231
}
280232

233+
@media (max-width: 767.98px) {
234+
.viewed-file-form {
235+
margin-left: auto;
236+
}
237+
}
238+
281239
.viewed-file-form input {
282240
margin-right: 4px;
283241
}

0 commit comments

Comments
 (0)