diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7dc97a8f9..8bcfb2fb1 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -680,6 +680,36 @@ div.issue .attribute.string_cf .value .wiki p {margin-top: 0; margin-bottom: 0;} div.issue .attribute.text_cf .value .wiki p:first-of-type {margin-top: 0;} div.issue.overdue .due-date .value { color: #c22; } body.controller-issues h2.inline-flex {padding-right: 0} +div#sticky-issue-header { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + border-bottom: 1px solid #d0d7de; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + font-size: 0.8125rem; + align-items: center; + z-index: 1000; + padding: 10px 6px; + border-radius: 0px; +} +div#sticky-issue-header.is-visible { + display: flex; +} +div#sticky-issue-header .issue-heading { + flex-shrink: 0; + white-space: nowrap; + margin-right: 6px; +} +div#sticky-issue-header .subject { + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-grow: 1; +} #issue_tree table.issues, #relations table.issues {border: 0;} #issue_tree table.issues td, #relations table.issues td {border: 0;} diff --git a/app/assets/stylesheets/responsive.css b/app/assets/stylesheets/responsive.css index c5278c87f..3a2eb46bb 100644 --- a/app/assets/stylesheets/responsive.css +++ b/app/assets/stylesheets/responsive.css @@ -848,6 +848,12 @@ font-size: 1.1em; text-align: left; } + + /* Sticky issue header */ + /* When project-jump.drdn is visible in mobile layout, offset the sticky header by its height to prevent it from being hidden. */ + div#sticky-issue-header { + top: 64px; + } } @media all and (max-width: 599px) { diff --git a/app/javascript/controllers/sticky_issue_header_controller.js b/app/javascript/controllers/sticky_issue_header_controller.js new file mode 100644 index 000000000..aebc7d2dc --- /dev/null +++ b/app/javascript/controllers/sticky_issue_header_controller.js @@ -0,0 +1,22 @@ +import { Controller } from "@hotwired/stimulus"; + +export default class extends Controller { + static targets = ["original", "stickyHeader"]; + + connect() { + if (!this.originalTarget || !this.stickyHeaderTarget) return; + + this.observer = new IntersectionObserver( + ([entry]) => { + this.stickyHeaderTarget.classList.toggle("is-visible", !entry.isIntersecting); + }, + { threshold: 0 } + ); + + this.observer.observe(this.originalTarget); + } + + disconnect() { + this.observer?.disconnect(); + } +} diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb index 36111efa4..0a6da1098 100644 --- a/app/views/issues/show.html.erb +++ b/app/views/issues/show.html.erb @@ -37,9 +37,16 @@ <%= assignee_avatar(@issue.assigned_to, :size => "22", :class => "gravatar-child") if @issue.assigned_to %> -