From 49dddd87b19aebe83e1c54a455e62529a19f61b4 Mon Sep 17 00:00:00 2001 From: sebastian-sauer 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 945c521a5..e72ac1eea 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -25,7 +25,7 @@
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived) (not .DiffNotAvailable)}} -
+
diff --git a/web_src/css/repo.css b/web_src/css/repo.css index d759d10c8..6bddbe9ba 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;