REFACTOR: Remove position fixed from the header and use sticky instead (#10781)

REFACTOR: Remove position fixed from the header and use sticky instead (#10781)

This removes fixed positioning from d-header and the topic timeline.

Plugins, themes and components that use the above/below header plugin outlet will likely need some margin/padding adjustments.

diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index 3784dcf..f0c8f8f 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -373,7 +373,9 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
   },
 });
 
-export default SiteHeaderComponent;
+export default SiteHeaderComponent.extend({
+  classNames: ["d-header-wrap"],
+});
 
 export function headerHeight() {
   const $header = $("header.d-header");
diff --git a/app/assets/javascripts/discourse/app/lib/offset-calculator.js b/app/assets/javascripts/discourse/app/lib/offset-calculator.js
index c8e43d6..efa258f 100644
--- a/app/assets/javascripts/discourse/app/lib/offset-calculator.js
+++ b/app/assets/javascripts/discourse/app/lib/offset-calculator.js
@@ -3,31 +3,29 @@ export function scrollTopFor(y) {
 }
 
 export function minimumOffset() {
-  const $header = $("header.d-header");
-  const headerHeight = $header.outerHeight(true) || 0;
-  const headerPositionTop = $header.position().top;
-  return headerHeight + headerPositionTop;
+  const header = document.querySelector("header.d-header");
+  return header ? header.offsetHeight : 0;
 }
 
 export default function offsetCalculator() {
   const min = minimumOffset();
 
   // on mobile, just use the header
-  if ($("html").hasClass("mobile-view")) {
+  if (document.querySelector("html").classList.contains("mobile-view")) {
     return min;
   }
 
-  const $window = $(window);
-  const windowHeight = $window.height();
-  const documentHeight = $(document).height();
-  const topicBottomOffsetTop = $("#topic-bottom").offset().top;
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.body.clientHeight;
+  const topicBottomOffsetTop = document.getElementById("topic-bottom")
+    .offsetTop;
 
   // the footer is bigger than the window, we can scroll down past the last post
   if (documentHeight - windowHeight > topicBottomOffsetTop) {
     return min;
   }
 
-  const scrollTop = $window.scrollTop();
+  const scrollTop = window.scrollY;
   const visibleBottomHeight = scrollTop + windowHeight - topicBottomOffsetTop;
 
   if (visibleBottomHeight > 0) {
diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs
index 0490f39..de14092 100644
--- a/app/assets/javascripts/discourse/app/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/topic.hbs
@@ -128,7 +128,7 @@
         }}
       </div>
 
-      {{#topic-navigation topic=model jumpToDate=(action "jumpToDate") jumpToIndex=(action "jumpToIndex") as |info|}}
+      {{#topic-navigation class="topic-navigation" topic=model jumpToDate=(action "jumpToDate") jumpToIndex=(action "jumpToIndex") as |info|}}
         {{#if info.renderTimeline}}
           {{topic-timeline
             topic=model
@@ -299,41 +299,6 @@
                   categoryId=model.topic_timer.category_id
                   removeTopicTimer=(action "removeTopicTimer" model.topic_timer.status_type "topic_timer")}}
 
-              {{#if session.showSignupCta}}
-                {{! replace "Log In to Reply" with the infobox }}
-                {{signup-cta}}
-              {{else}}
-                {{#if currentUser}}
-                  {{plugin-outlet name="topic-above-footer-buttons" args=(hash model=model)}}
-
-                  {{topic-footer-buttons
-                    topic=model
-                    toggleMultiSelect=(action "toggleMultiSelect")
-                    showTopicSlowModeUpdate=(route-action "showTopicSlowModeUpdate")
-                    deleteTopic=(action "deleteTopic")
-                    recoverTopic=(action "recoverTopic")
-                    toggleClosed=(action "toggleClosed")
-                    toggleArchived=(action "toggleArchived")
-                    toggleVisibility=(action "toggleVisibility")
-                    showTopicStatusUpdate=(route-action "showTopicStatusUpdate")
-                    showFeatureTopic=(route-action "showFeatureTopic")
-                    showChangeTimestamp=(route-action "showChangeTimestamp")
-                    resetBumpDate=(action "resetBumpDate")
-                    convertToPublicTopic=(action "convertToPublicTopic")
-                    convertToPrivateMessage=(action "convertToPrivateMessage")
-                    toggleBookmark=(action "toggleBookmark")
-                    showFlagTopic=(route-action "showFlagTopic")
-                    toggleArchiveMessage=(action "toggleArchiveMessage")
-                    editFirstPost=(action "editFirstPost")
-                    deferTopic=(action "deferTopic")
-                    replyToPost=(action "replyToPost")}}
-                {{else}}
-                  <div id="topic-footer-buttons">
-                    {{d-button icon="reply" class="btn-primary pull-right" action=(route-action "showLogin") label="topic.reply.title"}}
-                  </div>
-                {{/if}}
-              {{/if}}
-
               {{#if showSelectedPostsAtBottom}}
                 <div class="selected-posts {{unless multiSelect "hidden"}}">
                   {{selected-posts
@@ -353,15 +318,6 @@
                 </div>
               {{/if}}
 
-              {{plugin-outlet name="topic-above-suggested" args=(hash model=model)}}
-              <div class="{{if model.relatedMessages.length "related-messages-wrapper"}} {{if model.suggestedTopics.length "suggested-topics-wrapper"}}">
-                {{#if model.relatedMessages.length}}
-                  {{related-messages topic=model}}
-                {{/if}}
-                {{#if model.suggestedTopics.length}}
-                  {{suggested-topics topic=model}}
-                {{/if}}
-              </div>
             {{/if}}
           {{/conditional-loading-spinner}}
 
@@ -369,6 +325,52 @@
       </div>
 
     </div>
+    {{#if loadedAllPosts}}
+      {{#if session.showSignupCta}}
+        {{! replace "Log In to Reply" with the infobox }}
+        {{signup-cta}}
+      {{else}}
+        {{#if currentUser}}
+          {{plugin-outlet name="topic-above-footer-buttons" args=(hash model=model)}}
+
+          {{topic-footer-buttons
+            topic=model
+            toggleMultiSelect=(action "toggleMultiSelect")
+            showTopicSlowModeUpdate=(route-action "showTopicSlowModeUpdate")
+            deleteTopic=(action "deleteTopic")
+            recoverTopic=(action "recoverTopic")
+            toggleClosed=(action "toggleClosed")
+            toggleArchived=(action "toggleArchived")
+            toggleVisibility=(action "toggleVisibility")
+            showTopicStatusUpdate=(route-action "showTopicStatusUpdate")
+            showFeatureTopic=(route-action "showFeatureTopic")
+            showChangeTimestamp=(route-action "showChangeTimestamp")
+            resetBumpDate=(action "resetBumpDate")
+            convertToPublicTopic=(action "convertToPublicTopic")
+            convertToPrivateMessage=(action "convertToPrivateMessage")
+            toggleBookmark=(action "toggleBookmark")
+            showFlagTopic=(route-action "showFlagTopic")
+            toggleArchiveMessage=(action "toggleArchiveMessage")
+            editFirstPost=(action "editFirstPost")
+            deferTopic=(action "deferTopic")
+            replyToPost=(action "replyToPost")}}
+        {{else}}
+          <div id="topic-footer-buttons">
+            {{d-button icon="reply" class="btn-primary pull-right" action=(route-action "showLogin") label="topic.reply.title"}}
+          </div>
+        {{/if}}
+      {{/if}}
+
+      {{plugin-outlet name="topic-above-suggested" args=(hash model=model)}}
+      <div class="{{if model.relatedMessages.length "related-messages-wrapper"}} {{if model.suggestedTopics.length "suggested-topics-wrapper"}}">
+        {{#if model.relatedMessages.length}}

[... diff too long, it was truncated ...]

GitHub sha: da5841de

This commit appears in #10781 which was approved by CvX. It was merged by awesomerobot.

FIX: Loading container needs same width as posts, follow up to da5841d (#10966)

FIX: Remove need for overflow hidden, follow-up to da5841d (#10971)

UX: Fix mobile padding-top on mobile, follow up to da5841d (#10982)

This commit has been mentioned on Discourse Meta. There might be relevant details there:

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/whos-online-plugin-discourse-whos-online/52345/321

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143/243

FIX: adjust user card position, follow-up to da5841d (#11036)

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/recent-update-broke-my-top-navigation-bar/168702/2