Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve PR diff view on mobile (#27883)

Browse source 
1. Show diff stats only on large screens

these are already shown in tabs, so no need for this duplicate
information on small screens


![image](https://github.com/go-gitea/gitea/assets/1135157/1287839d-7490-42eb-a17e-d526dc0bfd9e)

![image](https://github.com/go-gitea/gitea/assets/1135157/e9dcd89d-ed4d-4945-a7aa-4e6fc6d9c3a2)


2. Hide viewed files information on small screens

Github does the same and this gives us more free space on small screens


![image](https://github.com/go-gitea/gitea/assets/1135157/e90b042f-fffb-4f79-a5ae-cd480c9d8334)

![image](https://github.com/go-gitea/gitea/assets/1135157/d2480ffe-58f2-4694-8ae1-a2ab0aae14d4)


3. Review bar now doesn't wrap so we don't need the 77px even on very
small screens

(the sticky headers are still working)


![image](https://github.com/go-gitea/gitea/assets/1135157/42b19b2b-73ef-4b88-8680-c555879b363b)
This commit is contained in:
sebastian-sauer 2023-11-16 04:58:53 +01:00 committed by GitHub
parent 79394b340d
commit 49dddd87b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/repo/diff/box.tmpl
View file

@ -25,7 +25,7 @@
</div> </div>
<div class="diff-detail-actions"> <div class="diff-detail-actions">
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived) (not .DiffNotAvailable)}} {{if and .PageIsPullFiles $.SignedUserID (not .IsArchived) (not .DiffNotAvailable)}}
<div class="gt-df gt-ac gt-fc gt-whitespace-nowrap gt-mr-2"> <div class="not-mobile gt-df gt-ac gt-fc gt-whitespace-nowrap gt-mr-2">
<label for="viewed-files-summary" id="viewed-files-summary-label" data-text-changed-template="{{ctx.Locale.Tr "repo.pulls.viewed_files_label"}}"> <label for="viewed-files-summary" id="viewed-files-summary-label" data-text-changed-template="{{ctx.Locale.Tr "repo.pulls.viewed_files_label"}}">
{{ctx.Locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}} {{ctx.Locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
</label> </label>

27
web_src/css/repo.css
View file

@ -1506,7 +1506,6 @@
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.repository .diff-detail-box { .repository .diff-detail-box {
flex-direction: row; flex-direction: row;
height: 77px; /* this height should match sticky-2nd-row */
} }
} }
@ -1534,13 +1533,9 @@
color: var(--color-red); color: var(--color-red);
} }
@media (max-width: 480px) { @media (max-width: 991.98px) {
.repository .diff-detail-box .diff-detail-stats { .repository .diff-detail-box .diff-detail-stats {
font-size: 0; display: none !important;
line-height: 1.6rem;
}
.repository .diff-detail-box .diff-detail-stats strong {
font-size: 1rem;
} }
} }
@ -1735,12 +1730,6 @@
border: none; border: none;
} }
@media (max-width: 991.98px) {
.diff-file-box {
scroll-margin-top: 77px; /* match .repository .diff-detail-box */
}
}
/* TODO: this can potentially be made "global" by removing the class prefix */ /* TODO: this can potentially be made "global" by removing the class prefix */
.diff-file-box .ui.attached.header, .diff-file-box .ui.attached.header,
.diff-file-box .ui.attached.table { .diff-file-box .ui.attached.table {
@ -2826,18 +2815,6 @@ tbody.commit-list {
z-index: 7; z-index: 7;
} }
@media (max-width: 991.98px) {
.ui.attached.header.diff-file-header.sticky-2nd-row {
top: 77px; /* match .repository .diff-detail-box */
}
}
@media (max-width: 480px) {
.ui.attached.header.diff-file-header.sticky-2nd-row {
position: static;
}
}
.diff-file-name { .diff-file-name {
flex: auto; flex: auto;
min-width: 100px; min-width: 100px;