test1234
/
gitea
forked from gitea/gitea
1
0
Fork 0
Code Pull Requests Activity

Fix sticky header in diff view (#23554) 

Ressurection of #23549.

Fix regression https://github.com/go-gitea/gitea/pull/23513#issuecomment-1474356817 from #23271.
The previous sticky CSS did assume the content is always 2 rows, but since that PR, it's single-row above 993px width.
Adjust the sticky offset to match and add a small tweak that hides content behind the `border-radius`.

Single row:
<img width="1264" alt="Screenshot 2023-03-17 at 21 33 05"
src="https://user-images.githubusercontent.com/115237/226034050-a04b131d-fd3f-45c0-bc72-413738a59825.png">

Double row:
<img width="1243" alt="Screenshot 2023-03-17 at 21 32 53"
src="https://user-images.githubusercontent.com/115237/226034163-2f1c6aa9-fc72-432f-bc46-9a7119da8677.png">
This commit is contained in:
silverwind 2023-03-18 23:51:00 +01:00 committed by GitHub
parent 27fcfae6d9
commit 9efcce563b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web_src/css/repository.css
View File

@ -1615,12 +1615,14 @@
padding: 7px 0; padding: 7px 0;
background: var(--color-body); background: var(--color-body);
line-height: 30px; line-height: 30px;
height: 47px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.repository .diff-detail-box { .repository .diff-detail-box {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
height: 77px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */
} }
} }
@ -1634,7 +1636,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 8; z-index: 8;
border-bottom: 1px solid var(--color-secondary); border-bottom: none;
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
margin-left: -1px; margin-left: -1px;
@ -3322,10 +3324,16 @@ td.blob-excerpt {
.ui.attached.header.diff-file-header.sticky-2nd-row { .ui.attached.header.diff-file-header.sticky-2nd-row {
position: sticky; position: sticky;
top: 77px; top: 47px; /* match .repository .diff-detail-box */
z-index: 7; z-index: 7;
} }
@media (max-width: 991px) {
.ui.attached.header.diff-file-header.sticky-2nd-row {
top: 77px; /* match .repository .diff-detail-box */
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.ui.attached.header.diff-file-header.sticky-2nd-row { .ui.attached.header.diff-file-header.sticky-2nd-row {
position: static; position: static;