finn/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](1287839d-7490-42eb-a17e-d526dc0bfd9e)

![image](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](e90b042f-fffb-4f79-a5ae-cd480c9d8334)

![image](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](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
Download patch file Download diff file Expand all files Collapse all files

27
web_src/css/repo.css
View file

@ -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 */
}
}
@ -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;
}
}
@ -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 {
@ -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;