Hiding the portal button on small screens

Themes
1

I posted what I thought was a solution to this earlier, but it turns out it only worked locally due to Cross Origin Request policies block making changes to the contents of an iframe when you’re running ghost on a server.

If you use CSS to hide the div (id=“ghost-portal-root”) that contains the iframe showing the portal button, the subscribe pop-up won’t appear when it is triggered. Nor can members access the acoount pop up.

My solution is to hide the div after it is added to the page, then unhide it when the user clicks on my “Subscribe” link.

The code:

        // hide portal button if screen is small
        if (window.matchMedia('(max-width: 640px)').matches ) {
            const watch = new MutationObserver((mutations, obs) => {
                const portal = window.frames[0];
                //if iframe is added we know the div has also been added
                if (portal) {
                    watch.disconnect();
                    portalDiv = document.getElementById('ghost-portal-root');
                    portalDiv.style.display = "none";
                    sublink = document.getElementById("subLink");
                    subLink.addEventListener("click", function () {
                        portalDiv.style.display = "block";
                    });
                }
            });
            watch.observe(document, { childList: true, subtree: true });
        }

My subscription link is handled like so:

        {{#if @site.members_enabled}}
            {{#unless @member}}
                <a id="subLink" href="#/portal/signup/free" data-portal="signup">Subscribe</a>
            {{else}}
                <a id="subLink" href="#/portal/account" data-portal="account">Account</a>
            {{/unless}}
        {{/if}}

The code lives in the header of my default.hbs file.