Left column is being overlayed by window actions
ImmersiveX opened this issue · 28 comments
since the new messenger update the left column is drawn under window actions, left column should have padding-top:25px
Hi, can you post a screen shot as I can't seem to replicate. Happy to take pull requests too!
I'm guessing its Facebook A/B testing the new look of messenger.com
Either way, here it is: image
Ah makes sense - I'm still on the old version. Do you know CSS / electron? If you could send me the style / pull request I can add it into the next version for you
I've already built myself a custom version based on the repo and fixed the padding issue on mine.
._1enh._7q1s{
padding-top:23px;
}
Not sure when Facebook will switch all users to the new design so I wouldn't implement it now unless you can differentiate the differences between the two designs accurately.
I just added to my local copy and searched my DOM and your CSS doesn't look like it conflicts.
I'll add it it when I get home from work but looking at the screen shot again, maybe a better solution would be to restyle the navbars to give it a more native look like the old version?
Perhaps, but straying away from the default messenger look is asking for trouble. Facebook makes changes all the time. This would make it harder to maintain in the future. Regardless of this, it is up to you to implement a fix you see fit.
Yep fair point - it's a bit of a balance (Goofy has already strayed from the default messenger look but hopefully not enough to be noticeable).
I think I agree though, I'll leave this opened and when the A/B testing / rollout is more complete I'll update the CSS.
I have the same issue since yesterday. Not sure if the design is rolled out for everyone or still A/B testing. But everything else works so it's more of a minor annoyance than anything else.
You can fork it and build it with a fix, or I could send you a link to my build as a workaround for now.
Would also like to note that there is tension on the top and bottom of the profile pictures in the topbar of the messaging window
easily fixed with padding
@ImmersiveX Hi, sorry I still haven't got the update but can you send a pull request and I can have a look at what the CSS is and potentially merge it in? I'm hoping the CSS won't interfere with people still on the old version, and I feel enough people are running into it it might be worth adding it in for them
@ImmersiveX Hi, sorry I still haven't got the update but can you send a pull request and I can have a look at what the CSS is and potentially merge it in? I'm hoping the CSS won't interfere with people still on the old version, and I feel enough people are running into it it might be worth adding it in for them
uhhh, I did
I'm not sure you saw it yet though.
Hey sorry for the super late response. Been away on holiday and only just got back. I've merged in your changes and will do a build now so should be in 3.4.4
I still get the old design, which means 3.4.4 and 3.4.5 break the UI essentially the same way as the bug reported, only with the old design instead of the new.
I still get the old design, which means 3.4.4 and 3.4.5 break the UI essentially the same way as the bug reported, only with the old design instead of the new.
Are you familiar with HTML/CSS ?
If so can you inspect the left column and give us valuable insight on it?
The changes I made shouldn't affect the old design, I'm not sure if they are even implemented on 3.4.5.
I did merge them in (thanks for the PR!) though I found one of the changes would have some drastic affects on the old version re: the navbar. So I removed everything related to the old version and just supported the new version (rational being the bug will no longer be an issue once messenger.com migrates everyone to the new version - which hopefully would be soon).
If anyone has access to an old and new version of messenger.com (all my 3 test accounts are now on the new version - hence why I thought everyone was migrated) I'm more than happy to take in PRs. It's just very hard for me to work on since I have no idea if what I've done will fix it or make it even worse.
The old css from from 3.4.3 just works if I dump it in a <style> element at the bottom of the page.
I think the issue is that in 3.4.4, the old styles were replaced with the new and this dropped support for the old design. For example, I still have the element div._36ic._5l-3, but the CSS for this was removed in this commit.
This is the DOM for that part of the left panel:
<div class="_36ic _5l-3" role="banner">
<div class="_4kzu">
<div class="_150g uiPopover _6a _6b">
<a aria-label="Settings, help and more" class="_30yy _2fug _2agf _4o_4 _p" role="button" title="Settings, help and more" aria-haspopup="true" href="#" style="max-width: 200px;" id="js_c" aria-controls="js_h6"></a>
</div>
</div>
<h1 class="_1tqi">Messenger</h1>
<a aria-label="New Message" class="_30yy _2oc8" role="button" tabindex="0" title="New Message" data-href="https://www.messenger.com/new"></a>
</div>Hopefully that helps. I can give you more DOM if you need it, but that's the only bit that's easy to copy and paste out without having to cutout conversations and contacts.
@Vusys Yep so if you put in the css from 3.4.3 at the end of the existing page it'll break the new version of messenger. The reason is because --nav-bar-padding was updated in @ImmersiveX's PR which is shared between the new and old styles. I could rewrite the CSS from scratch, to make sure the styles work for both new and old versions of messenger - but because I only have access to the new version of messenger it's impossible for me to test if the changes I've made work.
If you'd like to help - add me on twitter (I'm @jklp) - maybe we can troubleshoot and I can send you some test CSS files to double check before doing the next release.
@jklp I've followed you on twitter. I think you might be able to split that --nav-bar-padding into an old and new version. I don't think the classes clash, e.g. ._7q1s is used in the new but doesn't exist in the old, so any rules with that will just be ignored on the old.
Can't test that myself though - I don't have access to the new design 😢
DM me some CSS and I can test it for you on old 👍
--nav-bar-padding is not needed to fix the bug that was present, it was only there to better the experience and bring in line a few elements for the new design. My pull request was unfortunately ill fated and should have only included the fix to the issue at hand.
I was not aware the effect it had on the older version.
That being said, you can just ignore that change and only implement the one that matters:
._1enh._7q1s{
padding-top:25px;
}
I am not sure if this breaks anything on the older design.
@Vusys Thanks for your help today! Am building a release now so will be pushed out to everyone soon.
@ImmersiveX On closer inspection yes you're correct. Though I did make some changes to the css for the new version where the navbar height isn't reduced (I think it was previously made that way to fit the older style) though I quite like the layout you sent through with the navbar height untouched but the left navbar pushed down. If you'd like to have a look at 3.4.6 when it's out? Hopefully is fixed on new versions of messenger.com too
@jklp Sure thing. Cheers
@jklp I have a proposition for a new fix, its a matter of taste though. Its up to you to implement it or stay with the simpler fix.
I did explore that though I did have trouble getting the navbar displaying properly when the user goes into other views i.e. Archived conversations, Active users etc.
There is a ticket written for having some kind of theming system #316, which if you're interested in helping with don't mind either a PR - or if you'd like to have a chat feel free to add me on twitter 🙂
Working fine here:
Also responsive:
EDIT: I noticed a lot of issues with responsiveness on the new Messenger design, I managed to fix them all. Its a bunch of CSS, but it is needed for now.
I had a bit of a play with that layout locally and not sure I like how the Settings button sits under the navbar buttons - especially having it disappear when another view gets pushed onto the nav stack. I think your original solution of having the layout pushed down is the best compromise UI wise and also technically (re: future CSS changes of Messenger).
When I get a sec it'd be great to have a theming engine where users can add their own CSS.
Oh and I did have a bit of a play with the responsiveness though couldn't manage to break it (sorry I'm quite conservative with my Messenger window layout so might have missed it) - but if you could write another bug report (or a PR) I can hopefully fix / merge in (i'd like to keep this bug report clean and related to the overlapping close buttons 🙂 )
Fair enough, the changes I made are quite extensive and thus any change Facebook makes will probably break it. The simple fix is better in this regard.
I guess a theming engine can be implemented.