Patch #43641 » support-responsive-mode.diff
| app/assets/stylesheets/responsive.css | ||
|---|---|---|
| 867 | 867 |
inset-block-start: 64px; |
| 868 | 868 |
} |
| 869 | 869 | |
| 870 |
/* Offset sticky issue list headers below the fixed mobile header. */ |
|
| 871 |
table.list.sticky thead {
|
|
| 872 |
inset-block-start: 64px; |
|
| 873 |
} |
|
| 874 | ||
| 870 | 875 |
/* Prevent content from being hidden behind #sticky-issue-header and project-jump when scrolling via anchor links. */ |
| 871 | 876 |
.controller-issues.action-show div.wiki a[name], |
| 872 | 877 |
.controller-issues.action-show #history div[id^="note-"], |
| app/javascript/controllers/sticky_table_header_controller.js | ||
|---|---|---|
| 49 | 49 |
this.stickyValue = false |
| 50 | 50 |
} |
| 51 | 51 |
}) |
| 52 |
}, {
|
|
| 53 |
rootMargin: `-${this.stickyTopOffset}px 0px 0px 0px`
|
|
| 52 | 54 |
}) |
| 53 | 55 | |
| 54 | 56 |
this.resizeObserver = new ResizeObserver(() => {
|
| ... | ... | |
| 66 | 68 |
} |
| 67 | 69 | |
| 68 | 70 |
syncWidth() {
|
| 71 |
const headRect = this.headTarget.getBoundingClientRect() |
|
| 72 | ||
| 73 |
this.stickyHeader.style.insetInlineStart = `${headRect.left}px`
|
|
| 69 | 74 |
this.stickyHeader.style.width = window.getComputedStyle(this.headTarget).width |
| 70 | 75 |
this.bodyColumns.forEach((col, i) => {
|
| 71 | 76 |
const style = window.getComputedStyle(col) |
| ... | ... | |
| 90 | 95 |
} |
| 91 | 96 | |
| 92 | 97 |
get isIntersecting() {
|
| 93 |
return this.headTarget.getBoundingClientRect().top > 0
|
|
| 98 |
return this.headTarget.getBoundingClientRect().top > this.stickyTopOffset
|
|
| 94 | 99 |
} |
| 95 | 100 | |
| 96 | 101 |
get isHeaderOverflowX() {
|
| 97 | 102 |
return this.element.scrollWidth > this.element.clientWidth |
| 98 | 103 |
} |
| 104 | ||
| 105 |
get stickyTopOffset() {
|
|
| 106 |
this.prepare() |
|
| 107 | ||
| 108 |
const top = window.getComputedStyle(this.stickyHeader).top |
|
| 109 |
return top === "auto" ? 0 : parseFloat(top) |
|
| 110 |
} |
|
| 99 | 111 |
} |
