Welcome Link Banner

Theme component
,
153

So, now that I am able to bring the banner back, since it’s messing with the Channels, how would I work around this? I was thinking of using CSS to hide the banner when the channels are visible, thinking the URL would change, but it doesn’t change.

Any tips on how to fix this without disabling the banner on mobile via the settings page?

UPDATE: I was wrong when I assumed the URL didn’t change. I just saw that the URL contained “General” which is one of my categories, and I assumed it didn’t change. So, ChatGPT helped me achieve this as well, if anyone is interested (even though this could be something that the Component itself included to avoid messing with the channels on mobile):

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.onPageChange(() => {
    const chatPath = /^\/chat(\/|$)/;

    let attempts = 0;
    const maxAttempts = 10;

    function hideBanner() {
      const banner = document.querySelector('.welcome-link-banner-wrapper');
      if (banner) {
        banner.style.display = chatPath.test(window.location.pathname) ? 'none' : 'block';
      } else if (attempts < maxAttempts) {
        attempts++;
        setTimeout(hideBanner, 200);
      }
    }

    hideBanner();
  });
});

I added this to a new component I created called: Hide Welcome Banner on Channels (mobile), in the JS tab.

It seems to work. If anyone who’s an expert on JavaScript sees something that can be tweaked/improved, please share.

1 Like
154

You could change this to ‘block’, since (if I understand correctly) it’s supposed to be display: block. Not sure if that would make much of a difference, though.

1 Like
155

Thank you. I just changed it and it still works, so I will leave it as block. Updated the script here as well.

1 Like