Skip to content

Commit

Permalink
Improve PR diff view on mobile (go-gitea#27883)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
sebastian-sauer committed Nov 16, 2023
1 parent 79394b3 commit 49dddd8
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 26 deletions.
2 changes: 1 addition & 1 deletion templates/repo/diff/box.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
</div>
<div class="diff-detail-actions">
{{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"}}">
{{ctx.Locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
</label>
Expand Down
27 changes: 2 additions & 25 deletions web_src/css/repo.css
Original file line number Diff line number Diff line change
Expand Up @@ -1506,7 +1506,6 @@
@media (max-width: 991.98px) {
.repository .diff-detail-box {
flex-direction: row;
height: 77px; /* this height should match sticky-2nd-row */
}
}

Expand Down Expand Up @@ -1534,13 +1533,9 @@
color: var(--color-red);
}

@media (max-width: 480px) {
@media (max-width: 991.98px) {
.repository .diff-detail-box .diff-detail-stats {
font-size: 0;
line-height: 1.6rem;
}
.repository .diff-detail-box .diff-detail-stats strong {
font-size: 1rem;
display: none !important;
}
}

Expand Down Expand Up @@ -1735,12 +1730,6 @@
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 */
.diff-file-box .ui.attached.header,
.diff-file-box .ui.attached.table {
Expand Down Expand Up @@ -2826,18 +2815,6 @@ tbody.commit-list {
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 {
flex: auto;
min-width: 100px;
Expand Down

0 comments on commit 49dddd8

Please sign in to comment.