From 441f3f0f205234e8cb8d7bac90ed115ebd2e9d43 Mon Sep 17 00:00:00 2001
From: vnkmpf <tz@zztt.eu>
Date: Thu, 11 Feb 2021 19:28:51 +0100
Subject: [PATCH] Make fileheader sticky in diffs (#14616)

* Make fileheader sticky #12552

* Remove sticky filenames when width is 480px or less

On mobile phone sticky filename is hidden due to the combination
of many possible widths and lengths.

* Fix text color for .markdown-info

* Fix visual of sticky diff box on 480px or less

- Hide arrow for select buttons.
- Fix changes, additions and deletions.
With flexbox they look very broken.
This commit hides some words to, so the result is:
"123 changed files  987 additions  456 deletions"
- center text in buttons

Co-authored-by: zeripath <art27@cantab.net>
---
 templates/repo/diff/box.tmpl  |  2 +-
 web_src/less/_base.less       |  4 +++
 web_src/less/_repository.less | 50 +++++++++++++++++++++++++++++++++++
 web_src/less/_review.less     |  2 +-
 4 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index f01795ad15..5110129b8d 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -79,7 +79,7 @@
 				</div>
 			{{else}}
 				<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}">
-					<h4 class="diff-file-header ui top attached normal header df ac sb">
+					<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb">
 						<div class="df ac">
 							{{$isImage := false}}
 							{{if $file.IsDeleted}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index b5c890fd61..c054c1dc12 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1830,6 +1830,10 @@ table th[data-sortt-desc] {
 .ui.button.dropdown > .dropdown.icon,
 .btn-review > .dropdown.icon {
   float: right !important;
+
+  @media (max-width: 480px) {
+    display: none;
+  }
 }
 .ui.selection.dropdown > .search.icon,
 .ui.selection.dropdown > .delete.icon,
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 57f101abb9..88a1a38bb6 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1453,6 +1453,10 @@
       align-items: flex-start;
     }
 
+    @media (max-width: 480px) {
+      flex-wrap: wrap;
+    }
+
     &.sticky {
       position: sticky;
       top: 0;
@@ -1473,6 +1477,17 @@
       margin-right: .25rem;
     }
 
+    .diff-detail-stats {
+      @media (max-width: 480px) {
+        font-size: 0;
+        line-height: 1.6rem;
+
+        strong {
+          font-size: 1rem;
+        }
+      }
+    }
+
     .diff-detail-actions > * {
       margin-right: 0;
     }
@@ -1481,6 +1496,21 @@
       margin-left: .25rem;
     }
 
+    .diff-detail-actions {
+      @media (max-width: 480px) {
+        padding-top: .25rem;
+
+        .ui.button {
+          padding-left: .5rem;
+          padding-right: .5rem;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          text-align: center;
+        }
+      }
+    }
+
     span.status {
       display: inline-block;
       width: 12px;
@@ -2996,6 +3026,26 @@ td.blob-excerpt {
   margin-left: .5rem !important;
 }
 
+.ui.attached.header.diff-file-header {
+  &.sticky-2nd-row {
+    position: sticky;
+    top: 46px;
+    z-index: 7;
+
+    @media @mediaMd {
+      top: 77px;
+    }
+
+    @media @mediaSm {
+      top: 77px;
+    }
+
+    @media (max-width: 480px) {
+      position: static;
+    }
+  }
+}
+
 .diff-stats-bar {
   display: inline-block;
   background-color: var(--color-red);
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 4d8b402bd3..059e3d0ff5 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -95,7 +95,7 @@
       display: inline-block;
       margin: 5px 0;
       font-size: 12px;
-      color: rgba(0, 0, 0, .6);
+      color: var(--color-text-light);
     }
 
     .ui.right.floated {