Close #26730 1. The `diff-detail-box` was abused, it shouldn't be used for "DiffFileList/DiffFileTree". 2. Fix the sticky position for various screens. ![image](https://github.com/go-gitea/gitea/assets/2114189/558a5c06-c94c-4e5c-8395-d38473dd21c2) ![image](https://github.com/go-gitea/gitea/assets/2114189/3390fb0e-7dc7-457f-bd0c-398fdb6d24c0) ![image](https://github.com/go-gitea/gitea/assets/2114189/d19dd350-aecf-4909-8ef9-73b09d94560e)tags/v1.22.0-rc0
@@ -1,5 +1,5 @@ | |||
<div> | |||
<div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac"> | |||
<div class="diff-detail-box diff-box"> | |||
<div class="gt-df gt-ac gt-fw"> | |||
{{if not .DiffNotAvailable}} | |||
<button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}"> |
@@ -1502,14 +1502,21 @@ | |||
} | |||
.repository .diff-detail-box { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
position: sticky; | |||
top: 0; | |||
z-index: 8; | |||
padding: 7px 0; | |||
height: 44px; /* this height should match sticky-2nd-row */ | |||
background: var(--color-body); | |||
} | |||
@media (max-width: 991.98px) { | |||
.repository .diff-detail-box { | |||
flex-direction: row; | |||
align-items: flex-start; | |||
height: 77px; /* this height should match sticky-2nd-row */ | |||
} | |||
} | |||
@@ -1518,18 +1525,6 @@ | |||
flex-wrap: wrap; | |||
} | |||
} | |||
.repository .diff-detail-box.sticky { | |||
position: sticky; | |||
top: 0; | |||
z-index: 8; | |||
border-bottom: none; | |||
padding-left: 5px; | |||
padding-right: 5px; | |||
margin-left: -4px; | |||
margin-right: -4px; | |||
} | |||
.repository .diff-detail-box .diff-detail-stats strong { | |||
margin-left: 0.25rem; | |||
margin-right: 0.25rem; | |||
@@ -2830,7 +2825,7 @@ tbody.commit-list { | |||
.ui.attached.header.diff-file-header.sticky-2nd-row { | |||
position: sticky; | |||
top: 47px; /* match .repository .diff-detail-box */ | |||
top: 44px; /* match .repository .diff-detail-box */ | |||
z-index: 7; | |||
} | |||
@@ -36,7 +36,7 @@ export default { | |||
}; | |||
</script> | |||
<template> | |||
<ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible"> | |||
<ol class="diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible"> | |||
<li v-for="file in store.files" :key="file.NameHash"> | |||
<div class="gt-font-semibold gt-df gt-ac pull-right"> | |||
<span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ store.binaryFileMessage }}</span> |
@@ -126,7 +126,7 @@ export default { | |||
}; | |||
</script> | |||
<template> | |||
<div v-if="store.fileTreeIsVisible" class="gt-mr-3 gt-mt-3 diff-detail-box"> | |||
<div v-if="store.fileTreeIsVisible" class="gt-mr-3"> | |||
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> | |||
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/> | |||
<div v-if="store.isIncomplete" class="gt-pt-2"> |