Brand header theme component breaks page layout on static and no_ember pages

(Andreas Motl) #1

Hi there,

Introduction

We rediscovered an issue with the Brand header theme component which breaks the rendering on 404 pages and other pages without ember, already collected some background information about it and thought it would be a good idea to bring this up as a dedicated topic.

The issue was first brought up by @davisonio at brand header component breaks rendering on confirmation pages and JavaScript not loading on certain pages.

Discussion

@sam and @vinothkannans already started a discussion about how to improve the plugin:

but sure there are many many things going on so this got lost. That’s why I’m picking this up again, maybe it could attract others working on it. If I will find some time, I would also like to have a look at the details.

Thanks for listening!

Cheers,
Andreas.

1 Like

Brand header theme component
(Andreas Motl) #2

Screenshots

In the wild, this issue looks like…

Example 1: After someone deletes their account.

https://meta.discourse.org/t/brand-header-theme-component/77977/61

Example 2: When someone activates their account.

https://meta.discourse.org/t/daemonite-material-theme/64521/60

0 Likes

(Andreas Motl) #3

Hi there,

@vinothkannans, the main author of the brand header theme component is already aware of the problem:

Coming from there, we discovered these guys, perfectly complementing what we are up to here:


https://github.com/discourse/discourse/pull/6098

With kind regards,
Andreas.

0 Likes

(Andreas Motl) #4

Workaround

While digging for the root cause, we have been able to spot something we filed at Almost void Discourse object instance will sneak through some safeguards and finally have been able to produce a workaround which works for us.

Mitigate the runtime error

One of the symptoms of this issue was the error message

TypeError: Discourse._registerPluginCode is not a function

revealing something along the way did not get initialized properly.

By following a specific hint found on GitHub from @sam (thanks again!), we have been able to work around the core problem which made Discourse plugin components croak on static and no_ember pages in general:

Learn about the brand header theme component

Before going to the next step, let’s investigate how the Brand header theme component manifests itself into the DOM. While most of its CSS (see common.scss) roams around with the .b-header class, there are two single CSS rules which just move the regular Discourse header a few pixels down, which we identified as a kind of an entrypoint regarding the CSS domain:

Thoughts

The problem looked like it was easy to tackle now.

By piggybacking on the workaround unlocked before, we would just visually toggle off the brand theme header by resetting the css property margin-top of the regular Discourse header through its .d-header class to its initial value, right? Challenge accepted ;].

That’s it

<!--
Work around `TypeError: Discourse._registerPluginCode is not a function`, see also:
- https://meta.discourse.org/t/typeerror-discourse-registerplugincode-is-not-a-function/88572
- https://meta.discourse.org/t/javascript-not-loading-on-certain-pages/92297

This resets the css property "margin-top" on the "d-header" class
to work around an obstacle with the banner header theme component.
-->
<script language="javascript">
    if (!('Discourse' in window)) {
        window.Discourse = {};
    }
    if ('Discourse' in window && !('_registerPluginCode' in window.Discourse)) {
        window.Discourse._registerPluginCode = function() {
            $(document).ready(function() {
                $('.d-header').css('margin-top', 'initial');
            });
        };
    }
</script>

Important note

Amending the margin-top css property will only work in the Header phase (or maybe later) of a theme component and after document.ready() has been signaled.

So, please run this from inside the Header phase or later (</head> will be too early!) of a theme component. Otherwise, it will not work.

Repeat ;].


Hope this helps.

1 Like

(Vinoth Kannan) closed #5

This topic was automatically closed after 3 days. New replies are no longer allowed.

0 Likes