From bfa48f928e4e081418d23e5012985a630943463e Mon Sep 17 00:00:00 2001 From: vnkmpf Date: Mon, 8 Feb 2021 21:04:22 +0100 Subject: [PATCH 1/5] Make fileheader sticky #12552 --- templates/repo/diff/box.tmpl | 2 +- web_src/less/_repository.less | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index f01795ad15b60..5110129b8d0e2 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -79,7 +79,7 @@ {{else}}
-

+

{{$isImage := false}} {{if $file.IsDeleted}} diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 57f101abb9186..48a8ca089e066 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2996,6 +2996,22 @@ td.blob-excerpt { margin-left: .5rem !important; } +.ui.attached.header.diff-file-header { + &.sticky-2nd-row { + position: sticky; + top: 46px; + z-index: 7; + + @media @mediaSm { + top: 77px; + } + + @media @mediaMd { + top: 77px; + } + } +} + .diff-stats-bar { display: inline-block; background-color: var(--color-red); From 8a3634caa2f6fab0b4f827e2e916769277117393 Mon Sep 17 00:00:00 2001 From: vnkmpf Date: Wed, 10 Feb 2021 20:10:36 +0100 Subject: [PATCH 2/5] 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. --- web_src/less/_repository.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 48a8ca089e066..f3c276ee56e60 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3002,13 +3002,17 @@ td.blob-excerpt { top: 46px; z-index: 7; - @media @mediaSm { + @media @mediaMd { top: 77px; } - @media @mediaMd { + @media @mediaSm { top: 77px; } + + @media (max-width: 480px) { + position: static; + } } } From db773a601ab9f878f53f2e093c167e240da66ad7 Mon Sep 17 00:00:00 2001 From: vnkmpf Date: Mon, 8 Feb 2021 21:14:08 +0100 Subject: [PATCH 3/5] Fix text color for .markdown-info --- web_src/less/_review.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 4d8b402bd3e08..059e3d0ff5698 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 { From 5ab3ec476e8119e9276c091f6491bfecece00978 Mon Sep 17 00:00:00 2001 From: vnkmpf Date: Wed, 10 Feb 2021 20:20:01 +0100 Subject: [PATCH 4/5] 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 --- web_src/less/_base.less | 4 ++++ web_src/less/_repository.less | 30 ++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index b5c890fd61144..c054c1dc12083 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 f3c276ee56e60..3bf8a52a09360 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: 0.25rem; + + .ui.button { + padding-left: 0.5rem; + padding-right: 0.5rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + } + } + } + span.status { display: inline-block; width: 12px; From 785459435c1a5eb7ecb8007f9befc8960fae7a05 Mon Sep 17 00:00:00 2001 From: zeripath Date: Wed, 10 Feb 2021 20:20:17 +0000 Subject: [PATCH 5/5] fix lint --- web_src/less/_repository.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 3bf8a52a09360..88a1a38bb679b 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1498,11 +1498,11 @@ .diff-detail-actions { @media (max-width: 480px) { - padding-top: 0.25rem; + padding-top: .25rem; .ui.button { - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-left: .5rem; + padding-right: .5rem; display: flex; flex-wrap: wrap; justify-content: center;