From 49dddd87b19aebe83e1c54a455e62529a19f61b4 Mon Sep 17 00:00:00 2001
From: sebastian-sauer <sauer.sebastian@gmail.com>
Date: Thu, 16 Nov 2023 04:58:53 +0100
Subject: [PATCH] Improve PR diff view on mobile (#27883)

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)
---
 templates/repo/diff/box.tmpl |  2 +-
 web_src/css/repo.css         | 27 ++-------------------------
 2 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 945c521a5773..e72ac1eeaefe 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -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>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index d759d10c8a06..6bddbe9ba560 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -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;