Skip to content

Commit e35679d

Browse files
silverwindsilverwind
committed
Improve mobile review ui
Fixes: go-gitea#31071
1 parent 14f6105 commit e35679d

File tree

7 files changed

+61
-106
lines changed

7 files changed

+61
-106
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: 3 additions & 3 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">
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>
@@ -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: 6 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;
@@ -46,16 +47,17 @@
4647
}
4748

4849
.ui.comments .comment .avatar {
49-
float: left;
50-
width: 2.5em;
50+
width: 30px;
5151
}
5252

5353
.ui.comments .comment > .content {
54-
display: block;
54+
display: flex;
55+
flex-direction: column;
56+
flex: 1;
5557
}
5658

5759
.ui.comments .comment > .avatar ~ .content {
58-
margin-left: 3.5em;
60+
margin-left: 12px;
5961
}
6062

6163
.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: 34 additions & 40 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,37 +1540,11 @@ 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 {
1543+
.resolved-placeholder {
15791544
display: flex;
15801545
align-items: center;
15811546
font-size: 14px !important;
1582-
height: 36px;
1583-
padding-top: 0;
1584-
padding-bottom: 0;
1547+
padding: 8px !important;
15851548
}
15861549

15871550
.repository .diff-box .resolved-placeholder .button {
@@ -2537,6 +2500,37 @@ tbody.commit-list {
25372500
.diff-file-header {
25382501
padding: 5px 8px !important;
25392502
box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
2503+
font-weight: var(--font-weight-normal);
2504+
display: flex;
2505+
justify-content: space-between;
2506+
align-items: center;
2507+
flex-wrap: wrap;
2508+
}
2509+
2510+
.diff-file-header .file {
2511+
min-width: 0;
2512+
}
2513+
2514+
.diff-file-header .file-link {
2515+
max-width: fit-content;
2516+
display: -webkit-box;
2517+
-webkit-box-orient: vertical;
2518+
-webkit-line-clamp: 2;
2519+
overflow: hidden;
2520+
}
2521+
2522+
.diff-file-header .button {
2523+
padding: 0 12px;
2524+
flex: 0 0 auto;
2525+
margin-right: 0;
2526+
height: 30px;
2527+
}
2528+
2529+
@media (max-width: 767.98px) {
2530+
.diff-file-header {
2531+
flex-direction: column;
2532+
align-items: stretch;
2533+
}
25402534
}
25412535

25422536
.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)