Redmine

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.750rem;

  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;

}

  /* 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;

  }

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();

  }

}

<div data-controller="sticky-issue-header">

  <div class="subject" data-sticky-issue-header-target="original">

    <%= render_issue_subject_with_tree(@issue) %>

  </div>

  <div id="sticky-issue-header" data-sticky-issue-header-target="stickyHeader" class="issue">

    <span class="issue-heading"><%= issue_heading(@issue) %>:</span>

    <span class="subject"><%= @issue.subject %></span>

  </div>

# frozen_string_literal: true

# Redmine - project management software

# Copyright (C) 2006-  Jean-Philippe Lang

#

# This program is free software; you can redistribute it and/or

# modify it under the terms of the GNU General Public License

# as published by the Free Software Foundation; either version 2

# of the License, or (at your option) any later version.

#

# This program is distributed in the hope that it will be useful,

# but WITHOUT ANY WARRANTY; without even the implied warranty of

# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

# GNU General Public License for more details.

#

# You should have received a copy of the GNU General Public License

# along with this program; if not, write to the Free Software

# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

require_relative '../application_system_test_case'

class StickyIssueHeaderSystemTest < ApplicationSystemTestCase

  test "sticky issue header is hidden by default" do

    issue = Issue.find(1)

    visit issue_path(issue)

    assert_no_selector "#sticky-issue-header", text: issue.subject

  end

  test "sticky issue header appears on scroll" do

    issue = Issue.find(1)

    visit issue_path(issue)

    page.execute_script("window.scrollTo(0, 1000)")

    assert_selector "#sticky-issue-header.is-visible", text: issue.subject

    page.execute_script("window.scrollTo(0, 0)")

    assert_no_selector "#sticky-issue-header", text: issue.subject

  end

end