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>
This commit is contained in:
vnkmpf 2021-02-11 19:28:51 +01:00 committed by GitHub
parent 7d7007dca7
commit 441f3f0f20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 2 deletions

View File

@ -79,7 +79,7 @@
</div> </div>
{{else}} {{else}}
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}"> <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"> <div class="df ac">
{{$isImage := false}} {{$isImage := false}}
{{if $file.IsDeleted}} {{if $file.IsDeleted}}

View File

@ -1830,6 +1830,10 @@ table th[data-sortt-desc] {
.ui.button.dropdown > .dropdown.icon, .ui.button.dropdown > .dropdown.icon,
.btn-review > .dropdown.icon { .btn-review > .dropdown.icon {
float: right !important; float: right !important;
@media (max-width: 480px) {
display: none;
}
} }
.ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .search.icon,
.ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .delete.icon,

View File

@ -1453,6 +1453,10 @@
align-items: flex-start; align-items: flex-start;
} }
@media (max-width: 480px) {
flex-wrap: wrap;
}
&.sticky { &.sticky {
position: sticky; position: sticky;
top: 0; top: 0;
@ -1473,6 +1477,17 @@
margin-right: .25rem; margin-right: .25rem;
} }
.diff-detail-stats {
@media (max-width: 480px) {
font-size: 0;
line-height: 1.6rem;
strong {
font-size: 1rem;
}
}
}
.diff-detail-actions > * { .diff-detail-actions > * {
margin-right: 0; margin-right: 0;
} }
@ -1481,6 +1496,21 @@
margin-left: .25rem; 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 { span.status {
display: inline-block; display: inline-block;
width: 12px; width: 12px;
@ -2996,6 +3026,26 @@ td.blob-excerpt {
margin-left: .5rem !important; 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 { .diff-stats-bar {
display: inline-block; display: inline-block;
background-color: var(--color-red); background-color: var(--color-red);

View File

@ -95,7 +95,7 @@
display: inline-block; display: inline-block;
margin: 5px 0; margin: 5px 0;
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, .6); color: var(--color-text-light);
} }
.ui.right.floated { .ui.right.floated {