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:
parent
7d7007dca7
commit
441f3f0f20
|
@ -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}}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue