* 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>tags/v1.15.0-dev
@@ -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}} |
@@ -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, |
@@ -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); |
@@ -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 { |