search

Treverix / custom-electron-titlebar

Custom electon title bar inpire on VS Code title bar
MIT License
35 stars 6 forks source link

No titlebar when there are a WordPress admin bar on top #17

Closed GreepTheSheep closed 4 years ago

GreepTheSheep commented 4 years ago

Describe the bug When you use a Wordpress website and you're logged in, there is no titlebar unless you're set your window size to a smaller width

To Reproduce Steps to reproduce the behavior:

  1. Load a Wordpress website on your window
  2. Titlebar is here when you're not logged in your wordpress website
  3. After login, return to your main page
  4. No titlebar

Expected behavior The titlebar should be in

Screenshots image image

Desktop (please complete the following information):

Note: The Wordpress Admin bar is draggable, that means you can move your window

Treverix commented 4 years ago

The titlebar works like this: after the page is loaded, we create the title bar. With that

  1. all content of <body> is moved into a ne <div> inside body and
  2. the titlebar prepends itself as the first child of <body>

Now it can happen that client javascript updates the DOM so that we loose the titlebar or that clientside javascript replaces all content of <body> with new elements. And the titlebar is gone.

If that is the case here, then we can't stop wordpress from doing that. We'd have to add our one code that checks if something deletes our titlebar and simply creates it again. You can see that when you check the DOM with the devtools before and after you log in. The title bar is the first element in <body>.

GreepTheSheep commented 4 years ago

Ok I understand, I'm closing this issue

Treverix commented 4 years ago

I didn't close it because I don't know if it's 'as designed' (like I assume) or instead a bug. Please check if the DOM is rewritten after the login and I guessed right. If it's something else, then please reopen.

GreepTheSheep commented 4 years ago

So I checked, and I think the DOM is not rewritten. this screenshot shows the titlebar in the DOM image

Treverix commented 4 years ago

Wordpress probably places their header at a fixed position and it covers the titlebar - could you check by simply adding some z-index: 10000 style to the titlebar div (or even higher, if they use a z-index > 10000 for their header)? If it appears again, then it's again something that titlebar can't fix and where we have to 'patch' the client page. We'd have to find the div, that covers the titlebar and update its css style to push it down by 30px on the y-axis.

GreepTheSheep commented 4 years ago

I set z-index at 100000 and it works (the admin bar uses z-index at 99999), I set the admin bar top at 30px (the selector is #wpadminbar), we also need to move the content of the page. Here's my fix:

#wpadminbar{
top: 30px;
}

/* There two selectors below is for the backsite (admin dashboard) */
#adminmenu{
margin: 40px 0;
}
#wpbody{
top: 32px;
}
Treverix commented 4 years ago

Cool! It's a common problem when we try to use it on existing web apps. But a bit of css style patching on the client page often allows to use the titlebar there too. Happy hacking!