Fix diff tree height and adjust target file style (#23616)

Extract from https://github.com/go-gitea/gitea/pull/23553, just the
parts that fix the diff tree height and the change to the file `:target`
style.

Fixes: https://github.com/go-gitea/gitea/issues/23593
This commit is contained in:
silverwind 2023-03-22 21:32:27 +01:00 committed by GitHub
parent 774b37b9f8
commit 622d21691c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 14 deletions

View file

@ -1611,14 +1611,12 @@
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 */
} }
} }
@ -1674,6 +1672,13 @@
} }
} }
.diff-detail-actions {
/* prevent font-size from increasing element height so that .diff-detail-box comes
out with height of 47px (one line) and 77px (two lines), which is important for
position: sticky */
height: 33px;
}
.repository .diff-detail-box .diff-detail-actions > * { .repository .diff-detail-box .diff-detail-actions > * {
margin-right: 0; margin-right: 0;
} }
@ -1848,10 +1853,24 @@
padding-bottom: 5px; padding-bottom: 5px;
} }
.diff-file-box {
border: 1px solid transparent;
border-radius: var(--border-radius);
}
/* TODO: this can potentially be made "global" by removing the class prefix */
.diff-file-box .ui.attached.header,
.diff-file-box .ui.attached.table {
margin: 0; /* remove fomantic negative margins */;
width: initial; /* remove fomantic over 100% width */;
max-width: initial; /* remove fomantic over 100% width */;
}
.repository .diff-stats { .repository .diff-stats {
clear: both; clear: both;
margin-bottom: 5px; margin-bottom: 5px;
max-height: 400px; max-height: 200px;
height: fit-content;
overflow: auto; overflow: auto;
padding-left: 0; padding-left: 0;
} }
@ -2647,7 +2666,8 @@
filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important; filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
} }
.code-comment:target { .code-comment:target,
.diff-file-box:target {
border-color: var(--color-primary) !important; border-color: var(--color-primary) !important;
border-radius: var(--border-radius) !important; border-radius: var(--border-radius) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
@ -3238,13 +3258,13 @@ td.blob-excerpt {
} }
#diff-file-tree { #diff-file-tree {
width: 20%; flex: 0 0 20%;
max-width: 380px; max-width: 380px;
line-height: inherit; line-height: inherit;
position: sticky; position: sticky;
padding-top: 0; padding-top: 0;
top: 47px; top: 47px;
max-height: calc(100vh - 50px); max-height: calc(100vh - 47px);
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }

View file

@ -308,11 +308,3 @@ a.blob-excerpt:hover {
width: 72px; width: 72px;
height: 10px; height: 10px;
} }
.diff-file-box {
border-radius: 0.285rem; /* Just like ui.top.attached.header */
}
.diff-file-box:target {
box-shadow: 0 0 0 3px var(--color-accent);
}