aniani/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-12-04 14:46:57 -05:00
Code

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">
This commit is contained in:
silverwind 2024-05-28 15:41:37 +02:00 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 Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/diff/box.tmpl
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
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
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
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
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
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
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;
}